// Today / Home screen — daily liturgical context, streak, today's lesson

const TodayScreen = ({ onNavigate, streak, completedToday, tweaks }) => {
  const { TODAY, HYMNS, TONES } = window.COPTIC_DATA;
  const tone = TONES.find(t => t.id === TODAY.tone);
  const recommendedHymn = HYMNS.find(h => h.id === 'pekethronos');

  return (
    <div className="screen today-screen">
      {/* Date strip */}
      <div className="date-strip">
        <div className="date-coptic">
          <div className="date-cop-script">{TODAY.copticDate.split(' ')[1]}</div>
          <div className="date-cop-num">{TODAY.copticDate.split(' ')[0]}</div>
        </div>
        <div className="date-meta">
          <div className="date-greg">{TODAY.gregorian}</div>
          <div className="date-season">
            <span className="season-dot" />
            {TODAY.season}
          </div>
        </div>
        <button className="streak-pill" onClick={() => onNavigate('profile')}>
          <Icon name="flame" size={18} />
          <span>{streak}</span>
        </button>
      </div>

      {/* Hero — Today's tone */}
      <div className="tone-hero">
        <div className="tone-hero-bg">
          <CrossPattern />
        </div>
        <div className="tone-hero-content">
          <div className="overline">Today's Tone</div>
          <div className="tone-name-large">
            <span className="tone-cop">{tone.cop}</span>
            <span className="tone-en">{tone.name}</span>
          </div>
          <div className="tone-desc">{tone.desc}</div>
          <button className="tone-btn" onClick={() => onNavigate('hymns')}>
            Browse {tone.name.toLowerCase()} hymns
            <Icon name="arrow-r" size={16} />
          </button>
        </div>
      </div>

      {/* Daily lesson */}
      <SectionHeader title="Continue your lesson" sub="Track · Reading Rite" />
      <div className="lesson-card" onClick={() => onNavigate('hymn-player', recommendedHymn)}>
        <div className="lesson-card-art">
          <div className="lesson-cop">{recommendedHymn.titleCop.charAt(0)}</div>
        </div>
        <div className="lesson-card-body">
          <div className="lesson-eyebrow">Day 14 of 22 · Tasbeha</div>
          <div className="lesson-title">{recommendedHymn.title}</div>
          <div className="lesson-sub">{recommendedHymn.titleEn}</div>
          <div className="lesson-progress">
            <div className="lesson-progress-bar"><div className="lesson-progress-fill" style={{ width: '64%' }} /></div>
            <span className="lesson-progress-text">64%</span>
          </div>
        </div>
        <Icon name="chevron-r" size={22} />
      </div>

      {/* Quick actions */}
      <div className="quick-actions">
        <QuickAction icon="music"  label="Hymns"      sub="Library"     onClick={() => onNavigate('hymns')} />
        <QuickAction icon="book"   label="Lessons"    sub="7 tracks"    onClick={() => onNavigate('lessons')} />
        <QuickAction icon="sparkle" label="Quiz"      sub={completedToday ? 'Done today' : 'Daily 5'} onClick={() => onNavigate('quiz')} highlight={!completedToday} badge={!completedToday ? 'Today' : null} />
        <QuickAction icon="mic"    label="Practice"   sub="Record"      onClick={() => onNavigate('practice')} />
      </div>

      {/* Discover */}
      <SectionHeader title="Discover" sub="Liturgical resources" />
      <div className="discover-grid">
        <button className="discover-tile" onClick={() => onNavigate('tasbeha')}>
          <div className="dt-cop">Ϯⲯⲁⲗⲙⲱⲇⲓⲁ</div>
          <div className="dt-name">Tasbeha</div>
          <div className="dt-sub">Midnight Praises</div>
        </button>
        <button className="discover-tile" onClick={() => onNavigate('lectionary')}>
          <div className="dt-cop">Ⲕⲁⲧⲁⲙⲉⲣⲟⲥ</div>
          <div className="dt-name">Lectionary</div>
          <div className="dt-sub">Daily readings</div>
        </button>
        <button className="discover-tile" onClick={() => onNavigate('calendar')}>
          <div className="dt-cop">Ⲣⲟⲙⲡⲓ</div>
          <div className="dt-name">Coptic Year</div>
          <div className="dt-sub">13 months · feasts</div>
        </button>
        <button className="discover-tile" onClick={() => onNavigate('alphabet')}>
          <div className="dt-cop">Ⲁ Ⲃ Ⲅ</div>
          <div className="dt-name">Alphabet</div>
          <div className="dt-sub">32 letters</div>
        </button>
      </div>

      {/* Today's readings */}
      <SectionHeader title="Today's readings" sub="Liturgy of St. Basil" link="See lectionary" onLink={() => onNavigate('lectionary')} />
      <div className="readings-card">
        {TODAY.readings.map((r, i) => (
          <div className="reading-row" key={i} onClick={() => onNavigate('lectionary')}>
            <div className="reading-cop">{r.cop}</div>
            <div className="reading-meta">
              <div className="reading-type">{r.type}</div>
              <div className="reading-ref">{r.ref}</div>
            </div>
            <Icon name="chevron-r" size={18} />
          </div>
        ))}
      </div>

      {/* Streak */}
      <div className="streak-card" onClick={() => onNavigate('profile')}>
        <div className="streak-flame">
          <Icon name="flame" size={36} />
          <div className="streak-count">{streak}</div>
        </div>
        <div className="streak-body">
          <div className="streak-title">{streak}-day streak</div>
          <div className="streak-sub">
            {completedToday
              ? 'Today\'s practice complete. Keep it up.'
              : 'Practice today to keep your streak alive.'}
          </div>
          <div className="streak-week">
            {['M','T','W','T','F','S','S'].map((d, i) => (
              <div className={`streak-day ${i < 5 ? 'done' : ''} ${i === 5 ? 'today' : ''}`} key={i}>
                <span>{d}</span>
              </div>
            ))}
          </div>
        </div>
      </div>

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

const SectionHeader = ({ title, sub, link, onLink }) => (
  <div className="section-header">
    <div>
      <div className="section-title">{title}</div>
      {sub && <div className="section-sub">{sub}</div>}
    </div>
    {link && <button className="section-link" onClick={onLink}>{link} <Icon name="chevron-r" size={14} /></button>}
  </div>
);

const QuickAction = ({ icon, label, sub, onClick, highlight, badge }) => (
  <button className={`quick-action ${highlight ? 'highlight' : ''}`} onClick={onClick}>
    {badge && <div className="qa-badge">{badge}</div>}
    <div className="qa-icon"><Icon name={icon} size={22} /></div>
    <div className="qa-label">{label}</div>
    <div className="qa-sub">{sub}</div>
  </button>
);

const CrossPattern = () => (
  <svg viewBox="0 0 400 240" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
    <defs>
      <pattern id="copticGrid" x="0" y="0" width="48" height="48" patternUnits="userSpaceOnUse">
        <path d="M24 8v32M8 24h32M16 16l16 16M32 16 16 32" stroke="currentColor" strokeWidth="0.6" opacity="0.18" fill="none" />
        <circle cx="24" cy="24" r="2" fill="currentColor" opacity="0.25" />
      </pattern>
    </defs>
    <rect width="400" height="240" fill="url(#copticGrid)" />
    <g opacity="0.16" fill="currentColor">
      <path d="M340 50v60M310 80h60M325 65h30v30h-30z" stroke="currentColor" strokeWidth="2" fill="none" />
    </g>
  </svg>
);

window.TodayScreen = TodayScreen;