// Hymn library + hymn player with synced lyrics
const HymnsScreen = ({ onNavigate, tweaks, bookmarks, toggleBookmark }) => {
  const { HYMNS, TONES, RANKS } = window.COPTIC_DATA;
  const [search, setSearch] = React.useState('');
  const [tone, setTone] = React.useState('all');
  const [view, setView] = React.useState('list');

  const filtered = HYMNS.filter(h => {
    if (tone !== 'all' && h.tone !== tone) return false;
    if (search) {
      const q = search.toLowerCase();
      return h.title.toLowerCase().includes(q) || h.titleEn.toLowerCase().includes(q) || h.titleCop.includes(search);
    }
    return true;
  });

  return (
    <div className="screen hymns-screen">
      <div className="screen-head">
        <h1 className="screen-h1">Hymns</h1>
        <p className="screen-sub">{HYMNS.length} hymns across {TONES.length} tones</p>
      </div>

      <div className="search-row">
        <div className="search-box">
          <Icon name="search" size={18} />
          <input
            placeholder="Search Coptic, transliteration, or English…"
            value={search}
            onChange={e => setSearch(e.target.value)}
          />
          {search && <button onClick={() => setSearch('')}><Icon name="x" size={16} /></button>}
        </div>
        <button className={`view-toggle ${view === 'list' ? 'on' : ''}`} onClick={() => setView('list')}><Icon name="list" size={18} /></button>
        <button className={`view-toggle ${view === 'grid' ? 'on' : ''}`} onClick={() => setView('grid')}><Icon name="grid" size={18} /></button>
      </div>

      <div className="filter-chips">
        <button className={`chip ${tone === 'all' ? 'on' : ''}`} onClick={() => setTone('all')}>All tones</button>
        {TONES.map(t => (
          <button key={t.id} className={`chip ${tone === t.id ? 'on' : ''}`} onClick={() => setTone(t.id)}>
            <span className="chip-cop">{t.cop}</span> {t.name}
          </button>
        ))}
      </div>

      {view === 'list' ? (
        <div className="hymn-list">
          {filtered.map(h => {
            const rank = RANKS.find(r => r.id === h.rank);
            const isBookmarked = bookmarks.includes(h.id);
            return (
              <div className="hymn-row" key={h.id} onClick={() => onNavigate('hymn-player', h)}>
                <div className="hymn-art" style={{ background: `linear-gradient(135deg, ${rank.color}, ${rank.color}cc)` }}>
                  <span>{h.titleCop.charAt(0)}</span>
                </div>
                <div className="hymn-meta">
                  <div className="hymn-title">{h.title}</div>
                  <div className="hymn-cop">{h.titleCop}</div>
                  <div className="hymn-sub">
                    <span className="hymn-en">{h.titleEn}</span>
                    <span className="hymn-dot">·</span>
                    <span>{Math.floor(h.duration/60)}:{String(h.duration%60).padStart(2,'0')}</span>
                    <span className="hymn-dot">·</span>
                    <span className="diff-dots">
                      {[...Array(5)].map((_, i) => <span key={i} className={`diff-dot ${i < h.difficulty ? 'on' : ''}`} />)}
                    </span>
                  </div>
                </div>
                <button className={`bookmark-btn ${isBookmarked ? 'on' : ''}`} onClick={e => { e.stopPropagation(); toggleBookmark(h.id); }}>
                  <Icon name="bookmark" size={18} />
                </button>
              </div>
            );
          })}
        </div>
      ) : (
        <div className="hymn-grid">
          {filtered.map(h => {
            const rank = RANKS.find(r => r.id === h.rank);
            return (
              <div className="hymn-tile" key={h.id} onClick={() => onNavigate('hymn-player', h)}>
                <div className="hymn-tile-art" style={{ background: `linear-gradient(135deg, ${rank.color}, ${rank.color}cc)` }}>
                  <span className="hymn-tile-glyph">{h.titleCop.charAt(0)}</span>
                </div>
                <div className="hymn-tile-title">{h.title}</div>
                <div className="hymn-tile-cop">{h.titleCop}</div>
              </div>
            );
          })}
        </div>
      )}

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

// ---------- Hymn Player ----------
const HymnPlayer = ({ hymn, onBack, tweaks, bookmarks, toggleBookmark }) => {
  const { RANKS } = window.COPTIC_DATA;
  const rank = RANKS.find(r => r.id === hymn.rank);
  const [playing, setPlaying] = React.useState(false);
  const [t, setT] = React.useState(0);
  const isBookmarked = bookmarks.includes(hymn.id);

  React.useEffect(() => {
    if (!playing) return;
    const id = setInterval(() => {
      setT(prev => {
        if (prev >= hymn.duration) { setPlaying(false); return 0; }
        return prev + 1;
      });
    }, 1000);
    return () => clearInterval(id);
  }, [playing, hymn.duration]);

  const activeIdx = hymn.lines.findIndex((l, i) => {
    const next = hymn.lines[i + 1];
    return t >= l.t && (!next || t < next.t);
  });

  const showCop = tweaks.showCoptic !== false;
  const showTr = tweaks.showTransliteration !== false;
  const showEn = tweaks.showEnglish !== false;

  return (
    <div className="screen player-screen" style={{ '--player-color': rank.color }}>
      <div className="player-head">
        <button className="icon-btn" onClick={onBack}><Icon name="chevron-d" size={22} /></button>
        <div className="player-head-meta">
          <div className="player-head-eyebrow">Now playing · {rank.name}</div>
        </div>
        <button className={`icon-btn ${isBookmarked ? 'on' : ''}`} onClick={() => toggleBookmark(hymn.id)}>
          <Icon name="bookmark" size={20} />
        </button>
      </div>

      <div className="player-art">
        <div className="player-art-disc">
          <div className="player-art-cop">{hymn.titleCop.charAt(0)}</div>
          <div className="player-art-ring" />
          <div className="player-art-ring r2" />
          <div className="player-art-ring r3" />
        </div>
      </div>

      <div className="player-titles">
        <div className="player-title">{hymn.title}</div>
        <div className="player-title-cop">{hymn.titleCop}</div>
        <div className="player-title-en">{hymn.titleEn}</div>
        <div className="player-occasion">{hymn.occasion}</div>
      </div>

      {/* Lyrics */}
      <div className="lyrics">
        {hymn.lines.map((line, i) => (
          <div className={`lyric-line ${i === activeIdx ? 'active' : ''} ${i < activeIdx ? 'past' : ''}`} key={i}
               onClick={() => setT(line.t)}>
            {showCop && <div className="lyric-cop">{line.cop}</div>}
            {showTr && <div className="lyric-tr">{line.tr}</div>}
            {showEn && <div className="lyric-en">{line.en}</div>}
          </div>
        ))}
      </div>

      {/* Controls */}
      <div className="player-controls">
        <div className="player-progress">
          <input
            type="range"
            min="0"
            max={hymn.duration}
            value={t}
            onChange={e => setT(Number(e.target.value))}
          />
          <div className="player-times">
            <span>{Math.floor(t/60)}:{String(t%60).padStart(2,'0')}</span>
            <span>{Math.floor(hymn.duration/60)}:{String(hymn.duration%60).padStart(2,'0')}</span>
          </div>
        </div>
        <div className="player-buttons">
          <button className="icon-btn"><Icon name="shuffle" size={20} /></button>
          <button className="icon-btn lg" onClick={() => setT(Math.max(0, t - 10))}><Icon name="skip-back" size={22} /></button>
          <button className="play-btn" onClick={() => setPlaying(!playing)}>
            <Icon name={playing ? 'pause' : 'play'} size={28} />
          </button>
          <button className="icon-btn lg" onClick={() => setT(Math.min(hymn.duration, t + 10))}><Icon name="skip-fwd" size={22} /></button>
          <button className="icon-btn"><Icon name="mic" size={20} /></button>
        </div>
      </div>
    </div>
  );
};

window.HymnsScreen = HymnsScreen;
window.HymnPlayer = HymnPlayer;