// MUSIC-PENDRAMA — main app + tweaks

const { useEffect: useEff, useState: useSt } = React;

function App() {
  const [tweaks, setTweaks] = useSt(() => ({ ...window.TWEAKS }));
  const [filter, setFilter] = useSt(() => {
    const p = new URLSearchParams(location.search);
    return { genre: p.get('genre'), style: p.get('style') };
  });

  // mark active sidebar item based on filter
  useEff(() => {
    document.querySelectorAll('.yt-nav .item').forEach(el => {
      const href = el.getAttribute('href') || '';
      const want = filter.genre ? `?genre=${filter.genre}` : (filter.style ? `?style=${filter.style}` : null);
      if (want && href === want) el.classList.add('current');
      else el.classList.remove('current');
    });
  }, [filter]);

  // apply palette
  useEff(() => {
    document.documentElement.setAttribute('data-palette', tweaks.palette);
  }, [tweaks.palette]);

  // listen for edit-mode toggle
  useEff(() => {
    const panel = document.getElementById('tweaks');
    const handler = (e) => {
      if (!e.data || !e.data.type) return;
      if (e.data.type === '__activate_edit_mode')   panel.classList.add('on');
      if (e.data.type === '__deactivate_edit_mode') panel.classList.remove('on');
    };
    window.addEventListener('message', handler);
    // tell host we support tweaks
    setTimeout(() => window.parent.postMessage({ type: '__edit_mode_available' }, '*'), 50);
    return () => window.removeEventListener('message', handler);
  }, []);

  // wire up tweak panel inputs
  useEff(() => {
    // banner
    const b = document.getElementById('tw-banner');
    const bk = document.getElementById('tw-banner-kr');
    b.value = tweaks.bannerCopy;
    bk.value = tweaks.bannerKr;
    b.oninput = (e) => setTweaks(t => ({ ...t, bannerCopy: e.target.value }));
    bk.oninput = (e) => setTweaks(t => ({ ...t, bannerKr: e.target.value }));

    // palette
    document.querySelectorAll('.pal').forEach(el => {
      el.classList.toggle('active', el.dataset.pal === tweaks.palette);
      el.onclick = () => setTweaks(t => ({ ...t, palette: el.dataset.pal }));
    });

    // genre toggle
    const g = document.getElementById('tw-genre');
    g.classList.toggle('on', tweaks.showGenre);
    g.onclick = () => setTweaks(t => ({ ...t, showGenre: !t.showGenre }));

    // album titles
    const wrap = document.getElementById('tw-albums');
    wrap.innerHTML = '';
    tweaks.albums.forEach((title, i) => {
      const input = document.createElement('input');
      input.type = 'text';
      input.value = title;
      input.placeholder = ALBUMS[i] ? ALBUMS[i].id : 'Album title';
      input.oninput = (ev) => {
        setTweaks(t => {
          const a = [...t.albums];
          a[i] = ev.target.value;
          return { ...t, albums: a };
        });
      };
      wrap.appendChild(input);
    });
  }, [tweaks]);

  // persist
  useEff(() => {
    window.parent.postMessage({
      type: '__edit_mode_set_keys',
      edits: {
        bannerCopy: tweaks.bannerCopy,
        bannerKr: tweaks.bannerKr,
        palette: tweaks.palette,
        showGenre: tweaks.showGenre,
        albums: tweaks.albums,
      }
    }, '*');
  }, [tweaks]);

  // filtered subsets
  const filteredAlbums = filter.genre
    ? ALBUMS.filter(a => a.genre === filter.genre)
    : (filter.style ? ALBUMS.filter(a => a.style_tag === filter.style) : ALBUMS);
  const filteredMV = filter.genre
    ? MV_LIST.filter(v => v.genre === filter.genre)
    : (filter.style ? MV_LIST.filter(v => v.style_tag === filter.style) : MV_LIST);
  const filteredLyric = filter.genre
    ? LYRIC_LIST.filter(v => v.genre === filter.genre)
    : LYRIC_LIST;
  const filterLabel = filter.genre
    ? (GENRES[filter.genre] ? `${GENRES[filter.genre].en} · ${GENRES[filter.genre].kr}` : filter.genre)
    : (filter.style && MUSIC_STYLES[filter.style] ? MUSIC_STYLES[filter.style].en : null);

  return (
    <React.Fragment>
      <Banner copy={tweaks.bannerCopy} krSub={tweaks.bannerKr} />
      <ProfileRow />
      <Tabs />
      {filterLabel && (
        <div style={{margin:'18px 24px 0', padding:'14px 20px', background:'rgba(95,196,207,0.08)', border:'1px solid var(--accent)', borderRadius:10, display:'flex', justifyContent:'space-between', alignItems:'center'}}>
          <div>
            <div style={{fontFamily:'JetBrains Mono, monospace', fontSize:10, letterSpacing:'.3em', color:'var(--accent)', marginBottom:4}}>FILTERED · {filter.genre ? 'GENRE' : 'MUSIC STYLE'}</div>
            <div style={{fontFamily:'Bodoni Moda, serif', fontWeight:800, fontSize:20}}>{filterLabel}</div>
          </div>
          <a href="?" style={{color:'var(--accent)', fontFamily:'JetBrains Mono, monospace', fontSize:11, letterSpacing:'.2em', textDecoration:'none'}}>CLEAR ✕</a>
        </div>
      )}
      <LatestFeature data={LATEST} />
      <AlbumsStrip albums={filteredAlbums} titles={tweaks.albums} showGenre={tweaks.showGenre} />
      <GroupsSection showGenre={tweaks.showGenre} />
      <GenrePlaylists showGenre={tweaks.showGenre} />
      <VideosStrip title="Music Videos" krTag="뮤직비디오" items={filteredMV} variant="mv" showGenre={tweaks.showGenre} />
      <VideosStrip title="Lyric Videos" krTag="가사 영상" items={filteredLyric} variant="lyric" showGenre={tweaks.showGenre} />
      <ShortsStrip showGenre={tweaks.showGenre} />

      <StreamingRow />
      <SponsorBoard />

      <div className="foot">
        <span>MUSIC · PENDRAMA · 2026</span>
        <span>WEB NOVEL · OST · VIRTUAL IDOLS</span>
        <span>PENDRAMA.COM</span>
      </div>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('main')).render(<App />);