// Practice (record yourself) and Profile screens
const PracticeScreen = ({ onNavigate, tweaks }) => {
  const { HYMNS, RANKS } = window.COPTIC_DATA;
  const [recording, setRecording] = React.useState(false);
  const [elapsed, setElapsed] = React.useState(0);
  const [selectedHymn, setSelectedHymn] = React.useState(HYMNS[0]);

  React.useEffect(() => {
    if (!recording) return;
    const id = setInterval(() => setElapsed((e) => e + 0.1), 100);
    return () => clearInterval(id);
  }, [recording]);

  const reference = selectedHymn.lines.slice(0, 3);

  return (
    <div className="screen practice-screen">
      <div className="screen-head">
        <h1 className="screen-h1">Practice</h1>
        <p className="screen-sub">Record yourself chanting and compare to the reference.</p>
      </div>

      {/* Hymn selector */}
      <div className="practice-selector">
        <div className="overline">Choose a hymn</div>
        <div className="practice-pills">
          {HYMNS.slice(0, 5).map((h) =>
          <button
            key={h.id}
            className={`practice-pill ${selectedHymn.id === h.id ? 'on' : ''}`}
            onClick={() => setSelectedHymn(h)}>
            
              <span className="pp-cop">{h.titleCop.charAt(0)}</span>
              {h.title}
            </button>
          )}
        </div>
      </div>

      {/* Reference lyrics */}
      <div className="reference-card">
        <div className="overline">Reference · first verse</div>
        {reference.map((line, i) =>
        <div className="ref-line" key={i}>
            <div className="ref-cop">{line.cop}</div>
            <div className="ref-tr">{line.tr}</div>
            <div className="ref-en">{line.en}</div>
          </div>
        )}
      </div>

      {/* Recorder */}
      <div className={`recorder ${recording ? 'on' : ''}`}>
        <div className="rec-waveform">
          {[...Array(40)].map((_, i) =>
          <div
            key={i}
            className="rec-bar"
            style={{
              height: recording ?
              `${20 + Math.sin(elapsed * 8 + i * 0.5) * 30 + Math.random() * 20}%` :
              '12%',
              animationDelay: `${i * 0.04}s`
            }} />

          )}
        </div>
        <div className="rec-time">{elapsed.toFixed(1)}s</div>
        <div className="rec-controls">
          <button className="rec-btn-sm"><Icon name="play" size={20} /></button>
          <button className={`rec-btn-main ${recording ? 'on' : ''}`} onClick={() => {setRecording(!recording);if (!recording) setElapsed(0);}}>
            {recording ? <Icon name="pause" size={32} /> : <Icon name="mic" size={32} />}
          </button>
          <button className="rec-btn-sm"><Icon name="check" size={20} /></button>
        </div>
        <div className="rec-status">{recording ? 'Recording…' : 'Tap to record'}</div>
      </div>

      {/* Past sessions */}
      <SectionHeader title="Past sessions" sub="Last 7 days" />
      <div className="sessions-list">
        {[
        { hymn: 'Agios O Theos', date: 'Yesterday', score: 92, dur: '3:04' },
        { hymn: 'Hiten', date: '2 days ago', score: 78, dur: '4:08' },
        { hymn: 'Ep-ouro', date: '4 days ago', score: 85, dur: '3:18' }].
        map((s, i) =>
        <div className="session-row" key={i}>
            <div className="session-icon"><Icon name="wave" size={20} /></div>
            <div className="session-meta">
              <div className="session-hymn">{s.hymn}</div>
              <div className="session-sub">{s.date} · {s.dur}</div>
            </div>
            <div className={`session-score ${s.score >= 85 ? 'good' : s.score >= 70 ? 'ok' : 'low'}`}>{s.score}%</div>
          </div>
        )}
      </div>

      <div className="screen-pad" />
    </div>);

};

const ProfileScreen = ({ onNavigate, streak, completedToday, tweaks }) => {
  const { RANKS, VESTMENTS } = window.COPTIC_DATA;

  return (
    <div className="screen profile-screen">
      <div className="profile-head">
        <div className="profile-avatar">
          <div className="profile-avatar-inner">
            <span>MA</span>
          </div>
          <div className="profile-rank-badge" style={{ '--rank-color': RANKS[0].color }}>
            <span>{RANKS[0].order}</span>
          </div>
        </div>
        <div className="profile-name">Ryan "Stephen" Marfone</div>
        <div className="profile-rank-name" style={{ fontWeight: "900" }}>{RANKS[0].nameCop} · {RANKS[0].name}</div>
        <div className="profile-parish">St. Stephen Coptic Orthodox Church - Cypress, TX</div>
      </div>

      <div className="stats-grid">
        <StatCard icon="flame" value={streak} label="Day streak" color="#C9A961" />
        <StatCard icon="trophy" value="38" label="Hymns learned" color="#8B2E2E" />
        <StatCard icon="star" value="2,140" label="XP earned" color="#0168FA" />
        <StatCard icon="check-circle" value="14" label="Quizzes passed" color="#2E7D5B" />
      </div>

      {/* Rank progress */}
      <SectionHeader title="Rank progression" sub="Current: Epsaltos" />
      <div className="rank-progress-card">
        {RANKS.map((r, i) => {
          const pct = Math.round(r.progress * 100);
          return (
            <div className="rp-row" key={r.id}>
              <div className="rp-circle" style={{ '--rank-color': r.color }}>
                {r.locked ? <Icon name="lock" size={14} /> :
                r.progress >= 1 ? <Icon name="check" size={16} /> :
                <span>{r.order}</span>}
              </div>
              <div className="rp-meta">
                <div className="rp-row-top">
                  <div>
                    <div className="rp-name">{r.name}</div>
                    <div className="rp-cop">{r.nameCop}</div>
                  </div>
                  <div className="rp-pct">{pct}%</div>
                </div>
                <div className="rp-bar"><div className="rp-bar-fill" style={{ width: `${pct}%`, background: r.color }} /></div>
                <div className="rp-en">{r.en} · {r.desc}</div>
              </div>
            </div>);

        })}
      </div>

      <SectionHeader title="Vestments" sub="Tap to learn how each is worn" />
      <div className="vestments-grid">
        {VESTMENTS.map((v) =>
        <div className="vestment-card" key={v.id}>
            <div className="vestment-icon"><Icon name="cross" size={28} /></div>
            <div className="vestment-name">{v.name}</div>
            <div className="vestment-cop">{v.cop}</div>
            <div className="vestment-en">{v.en}</div>
          </div>
        )}
      </div>

      <div className="screen-pad" />
    </div>);

};

const StatCard = ({ icon, value, label, color }) =>
<div className="stat-card" style={{ '--accent': color }}>
    <div className="stat-icon"><Icon name={icon} size={20} /></div>
    <div className="stat-value">{value}</div>
    <div className="stat-label">{label}</div>
  </div>;


window.PracticeScreen = PracticeScreen;
window.ProfileScreen = ProfileScreen;