// New pages: Calendar, Alphabet, Tasbeha, Track Detail, Lectionary

// ───────────────────────── Coptic Calendar ─────────────────────────
const CalendarScreen = ({ onNavigate, tweaks }) => {
  const months = [
    { name: 'Tout',     cop: 'Ⲑⲱⲟⲩⲧ',     start: 'Sep 11',  feast: 'Coptic New Year · Nayrouz' },
    { name: 'Babah',    cop: 'Ⲡⲁⲱⲡⲓ',     start: 'Oct 11',  feast: 'Cross feast continues' },
    { name: 'Hatour',   cop: 'Ⲁ̀ⲑⲱⲣ',      start: 'Nov 10',  feast: 'Advent fast begins' },
    { name: 'Kiahk',    cop: 'Ⲭⲟⲓⲁⲕ',     start: 'Dec 10',  feast: 'Theotokia of Kiahk' },
    { name: 'Toba',     cop: 'Ⲧⲱⲃⲓ',      start: 'Jan 9',   feast: 'Theophany · Epiphany' },
    { name: 'Amshir',   cop: 'Ⲙⲉϣⲓⲣ',     start: 'Feb 8',   feast: 'Presentation of Christ' },
    { name: 'Baramhat', cop: 'Ⲡⲁⲣⲉⲙϩⲁⲧ',  start: 'Mar 10',  feast: 'Annunciation · Lent' },
    { name: 'Parmouti', cop: 'Ⲫⲁⲣⲙⲟⲩⲑⲓ',  start: 'Apr 9',   feast: 'Holy Week · Pascha', active: true },
    { name: 'Bashans',  cop: 'Ⲡⲁϣⲟⲛⲥ',    start: 'May 9',   feast: 'Holy Fifty Days' },
    { name: 'Paona',    cop: 'Ⲡⲁⲱⲛⲉ',     start: 'Jun 8',   feast: 'Apostles Fast' },
    { name: 'Epep',     cop: 'Ⲉ̀ⲡⲏⲡ',      start: 'Jul 8',   feast: 'Apostles · Transfiguration' },
    { name: 'Mesra',    cop: 'Ⲙⲉⲥⲱⲣⲏ',    start: 'Aug 7',   feast: 'Marian Fast · Assumption' },
  ];
  const seasons = [
    { name: 'Holy Fifty Days', tone: 'Festal',   color: '#C9A961', active: true },
    { name: 'Apostles Fast',    tone: 'Annual',   color: '#2E7D5B' },
    { name: 'Coptic New Year',  tone: 'Annual',   color: '#A8763E' },
    { name: 'Advent / Kiahk',   tone: 'Festal',   color: '#2A1B4A' },
    { name: 'Great Lent',       tone: 'Lenten',   color: '#5C1818' },
    { name: 'Pascha & Pentecost', tone: 'Pascha', color: '#1A0F1F' },
  ];
  return (
    <div className="screen calendar-screen">
      <div className="screen-head">
        <h1 className="screen-h1">Coptic Year</h1>
        <p className="screen-sub">13 months · 12 of 30 days + Nasie (5–6 days)</p>
      </div>
      <div className="cal-banner">
        <div className="cal-banner-cop">Ⲣⲟⲙⲡⲓ</div>
        <div>
          <div className="cal-banner-eyebrow">Year of the Martyrs</div>
          <div className="cal-banner-year">A.M. 1742</div>
          <div className="cal-banner-sub">2025 · 2026 (Gregorian)</div>
        </div>
      </div>
      <div className="section-header"><div><div className="section-title">Months</div><div className="section-sub">Tap a month for feasts and rubrics</div></div></div>
      <div className="months-grid">
        {months.map((m, i) => (
          <div key={i} className={`month-card ${m.active ? 'active' : ''}`}>
            <div className="month-num">{i + 1}</div>
            <div className="month-cop">{m.cop}</div>
            <div className="month-name">{m.name}</div>
            <div className="month-start">{m.start}</div>
            <div className="month-feast">{m.feast}</div>
          </div>
        ))}
      </div>
      <div className="section-header"><div><div className="section-title">Seasons & Rites</div></div></div>
      <div className="seasons-list">
        {seasons.map((s, i) => (
          <div key={i} className={`season-row-card ${s.active ? 'active' : ''}`}>
            <div className="season-bar" style={{ background: s.color }} />
            <div className="season-info">
              <div className="season-name">{s.name}</div>
              <div className="season-tone">Tone · {s.tone}</div>
            </div>
            {s.active && <div className="season-badge">Now</div>}
          </div>
        ))}
      </div>
      <div className="screen-pad" />
    </div>
  );
};

// ───────────────────────── Coptic Alphabet ─────────────────────────
const AlphabetScreen = ({ onNavigate, tweaks }) => {
  const letters = [
    ['Ⲁ','Alpha','a','as in father'],['Ⲃ','Vita','v/b','vee'],['Ⲅ','Gamma','gh/g','soft g'],
    ['Ⲇ','Delta','d/th','d / th'],['Ⲉ','Ei','e','short e'],['Ⲋ','So','6','number 6'],
    ['Ⲍ','Zeta','z','zee'],['Ⲏ','Eta','ee','long e'],['Ⲑ','Theta','th','as in think'],
    ['Ⲓ','Iota','i/y','ee / yuh'],['Ⲕ','Kappa','k','kuh'],['Ⲗ','Lavla','l','luh'],
    ['Ⲙ','Mei','m','muh'],['Ⲛ','Nei','n','nuh'],['Ⲝ','Eksi','x','ks'],
    ['Ⲟ','O','o','short o'],['Ⲡ','Pi','p/b','puh'],['Ⲣ','Ro','r','trilled r'],
    ['Ⲥ','Sima','s','suh'],['Ⲧ','Tau','t','tuh'],['Ⲩ','Epsilon','i/v','ee / v'],
    ['Ⲫ','Phi','f','fuh'],['Ⲭ','Khi','kh/sh','kh'],['Ⲯ','Epsi','ps','ps'],
    ['Ⲱ','Omega','o','long o'],['Ϣ','Shai','sh','shuh'],['Ϥ','Fai','f','fuh (Coptic)'],
    ['Ϧ','Khai','kh','as in Bach'],['Ϩ','Hori','h','huh'],['Ϫ','Ganga','g/j','soft g'],
    ['Ϭ','Tshima','ch','tshuh'],['Ϯ','Ti','ti','combined t+i'],
  ];
  return (
    <div className="screen alphabet-screen">
      <div className="screen-head">
        <h1 className="screen-h1">Coptic Alphabet</h1>
        <p className="screen-sub">32 letters · 24 from Greek, 7 from Demotic, 1 ligature</p>
      </div>
      <div className="alpha-hero">
        <div className="alpha-hero-row">
          <span>Ⲁ</span><span>Ⲃ</span><span>Ⲅ</span><span>Ⲇ</span><span>Ⲉ</span>
        </div>
        <div className="alpha-hero-row sm">
          <span>Ϣ</span><span>Ϥ</span><span>Ϧ</span><span>Ϩ</span><span>Ϫ</span><span>Ϭ</span><span>Ϯ</span>
        </div>
        <div className="alpha-hero-cap">Greek-derived above · Demotic-derived below</div>
      </div>
      <div className="alpha-grid">
        {letters.map(([cop, name, sound, hint], i) => (
          <button key={i} className="alpha-card">
            <div className="alpha-letter">{cop}</div>
            <div className="alpha-name">{name}</div>
            <div className="alpha-sound">/{sound}/</div>
            <div className="alpha-hint">{hint}</div>
          </button>
        ))}
      </div>
      <div className="screen-pad" />
    </div>
  );
};

// ───────────────────────── Tasbeha (Midnight Praises) ─────────────────────────
const TasbehaScreen = ({ onNavigate, tweaks }) => {
  const sections = [
    { id: 'h1', name: 'First Hoos',   cop: 'Ⲡⲓϩⲱⲥ ⲛ̀ϩⲟⲩⲓⲧ',    desc: 'Song of Moses (Exodus 15)', dur: '12 min', n: 1 },
    { id: 'h2', name: 'Second Hoos',  cop: 'Ⲡⲓϩⲱⲥ ⲙ̀ⲙⲁϩⲃ̅',    desc: 'Psalm 135 — His mercy endures', dur: '8 min',  n: 2 },
    { id: 'h3', name: 'Third Hoos',   cop: 'Ⲡⲓϩⲱⲥ ⲙ̀ⲙⲁϩⲅ̅',    desc: 'Song of the Three Children', dur: '18 min', n: 3 },
    { id: 'h4', name: 'Fourth Hoos',  cop: 'Ⲡⲓϩⲱⲥ ⲙ̀ⲙⲁϩⲇ̅',    desc: 'Praise the Lord from the heavens', dur: '10 min', n: 4 },
    { id: 'psali', name: 'Psali Watos / Adam', cop: 'Ⲯⲁⲗⲓ',     desc: 'Psali for the night', dur: '14 min', n: 5 },
    { id: 'theo',  name: 'Theotokia',          cop: 'Ⲑⲉⲟⲧⲟⲕⲓⲁ', desc: 'Hymns to the Theotokia by day', dur: '24 min', n: 6 },
    { id: 'lobsh', name: 'Lobsh',              cop: 'Ⲗⲱⲃϣ',     desc: 'Explanation hymn for each day', dur: '6 min',  n: 7 },
    { id: 'doxa',  name: 'Doxologies',         cop: 'Ⲇⲟⲝⲟⲗⲟⲅⲓⲁ', desc: 'For the saints of the day', dur: '10 min', n: 8 },
  ];
  return (
    <div className="screen tasbeha-screen">
      <div className="tasbeha-hero">
        <div className="tasbeha-hero-bg" />
        <div className="tasbeha-hero-content">
          <div className="overline" style={{color:'var(--gold)'}}>The Midnight Praise</div>
          <div className="tasbeha-title">Tasbeha</div>
          <div className="tasbeha-cop">Ϯⲯⲁⲗⲙⲱⲇⲓⲁ</div>
          <div className="tasbeha-desc">The book of praise prayed in monasteries and churches before midnight Liturgy. Eight sections, each with its own tone.</div>
        </div>
      </div>
      <div className="tasbeha-list">
        {sections.map(s => (
          <div className="tasbeha-row" key={s.id}>
            <div className="tas-num">{s.n}</div>
            <div className="tas-meta">
              <div className="tas-cop">{s.cop}</div>
              <div className="tas-name">{s.name}</div>
              <div className="tas-desc">{s.desc}</div>
            </div>
            <div className="tas-actions">
              <div className="tas-dur">{s.dur}</div>
              <button className="tas-play"><Icon name="play" size={16} /></button>
            </div>
          </div>
        ))}
      </div>
      <div className="screen-pad" />
    </div>
  );
};

// ───────────────────────── Track Detail ─────────────────────────
const TrackDetailScreen = ({ onNavigate, payload, tweaks }) => {
  const track = payload || window.COPTIC_DATA.TRACKS[1];
  const rank = window.COPTIC_DATA.RANKS.find(r => r.id === track.rank);
  const lessons = Array.from({ length: track.lessons }, (_, i) => ({
    n: i + 1,
    name: ['Posture & breath','Vowels of the Coptic alphabet','Saying "Amen"','Eleison cadence',
           'Doxa Patri','Trisagion preview','Resurrection response','Pekran response',
           'Prayer of the catechumens','Litany of the sick','Litany of the travelers','Litany of the waters',
           'Litany of the fruits','Anaphora response','Holy Holy Holy','Confession response',
           'Our Father','Fraction','Communion hymn','Final blessing','Dismissal','Prayer at the end'][i] || `Lesson ${i+1}`,
    done: i < track.completed,
    locked: i > track.completed,
    dur: 4 + (i % 6),
  }));
  return (
    <div className="screen track-detail-screen">
      <div className="td-header" style={{ '--rank-color': rank.color }}>
        <button className="td-back icon-btn" onClick={() => onNavigate('lessons')}><Icon name="chevron-l" size={22} /></button>
        <div className="td-glyph">{track.title.charAt(0)}</div>
        <div className="td-rank">{rank.nameCop} · {rank.name}</div>
        <div className="td-title">{track.title}</div>
        <div className="td-desc">{track.desc}</div>
        <div className="td-stats">
          <div><b>{track.completed}</b> / {track.lessons}<div>lessons</div></div>
          <div><b>{Math.round(track.completed/track.lessons*100)}%</b><div>complete</div></div>
          <div><b>{track.lessons * 5}m</b><div>est. time</div></div>
        </div>
      </div>
      <div className="td-lessons">
        {lessons.map(l => (
          <div key={l.n} className={`td-lesson ${l.done ? 'done' : ''} ${l.locked ? 'locked' : ''}`}>
            <div className="td-circle">
              {l.done ? <Icon name="check" size={16} /> :
               l.locked ? <Icon name="lock" size={14} /> :
               <Icon name="play" size={14} />}
            </div>
            <div className="td-lesson-meta">
              <div className="td-lesson-name">{l.name}</div>
              <div className="td-lesson-sub">Lesson {l.n} · {l.dur} min</div>
            </div>
            {!l.locked && <Icon name="chevron-r" size={18} />}
          </div>
        ))}
      </div>
      <div className="screen-pad" />
    </div>
  );
};

// ───────────────────────── Lectionary ─────────────────────────
const LectionaryScreen = ({ onNavigate, tweaks }) => {
  const { TODAY } = window.COPTIC_DATA;
  return (
    <div className="screen lectionary-screen">
      <div className="screen-head">
        <h1 className="screen-h1">Lectionary</h1>
        <p className="screen-sub">Katameros · Liturgy of {TODAY.gregorian}</p>
      </div>
      <div className="lect-strip">
        <button className="lect-nav"><Icon name="chevron-l" size={18} /></button>
        <div className="lect-strip-mid">
          <div className="lect-strip-cop">{TODAY.copticDate}</div>
          <div className="lect-strip-greg">{TODAY.gregorian}</div>
        </div>
        <button className="lect-nav"><Icon name="chevron-r" size={18} /></button>
      </div>
      {TODAY.readings.map((r, i) => (
        <div className="lect-block" key={i}>
          <div className="lect-block-head">
            <div className="lect-block-cop">{r.cop}</div>
            <div>
              <div className="lect-block-type">{r.type}</div>
              <div className="lect-block-ref">{r.ref}</div>
            </div>
            <Icon name="play" size={18} />
          </div>
          <div className="lect-block-quote">
            {r.type === 'Gospel'
              ? '"After these things Jesus showed Himself again to the disciples at the Sea of Tiberias…"'
              : r.type === 'Pauline'
              ? '"Moreover, brethren, I declare to you the gospel which I preached to you…"'
              : r.type === 'Psalm'
              ? '"Make a joyful shout to God, all the earth! Sing out the honor of His name…"'
              : '"And now, brethren, I know that you did it in ignorance, as did also your rulers…"'}
          </div>
        </div>
      ))}
      <div className="screen-pad" />
    </div>
  );
};

window.CalendarScreen = CalendarScreen;
window.AlphabetScreen = AlphabetScreen;
window.TasbehaScreen = TasbehaScreen;
window.TrackDetailScreen = TrackDetailScreen;
window.LectionaryScreen = LectionaryScreen;