// ============================================================================
// /archive — samostatná stránka se všemi předchozími epizodami
// ============================================================================
const { useState: useStateA, useEffect: useEffectA } = React;

function ArchiveAll() {
  const [data, setData] = useStateA(null);
  const [error, setError] = useStateA("");

  useEffectA(() => {
    if (!window.dsAPI) {
      // Fallback na window.DATESHOW_DATA
      const fb = window.DATESHOW_DATA;
      if (fb && fb.archive) setData(fb);
      return;
    }
    window.dsAPI.loadPublicData()
      .then(setData)
      .catch(err => setError(err.message || String(err)));
  }, []);

  if (error) {
    return (
      <div className="archive-page">
        <header className="archive-page-head">
          <a href="/" className="archive-back">← Zpět</a>
        </header>
        <main className="archive-page-main">
          <div className="archive-page-error">⚠️ {error}</div>
        </main>
      </div>
    );
  }

  if (!data) {
    return (
      <div className="archive-page">
        <header className="archive-page-head">
          <a href="/" className="archive-back">← Zpět</a>
        </header>
        <main className="archive-page-main">
          <div className="archive-page-loading">Načítám…</div>
        </main>
      </div>
    );
  }

  const archive = data.archive || [];

  return (
    <div className="archive-page">
      <header className="archive-page-head">
        <a href="/" className="archive-back">← Zpět na hlavní</a>
        <div className="archive-page-brand">
          <svg viewBox="0 0 24 24" fill="currentColor" width="20" height="20" style={{ color: '#ff4d8f' }}>
            <path d="M12 21s-7.5-4.6-9.5-9.4C1 7.5 4 4 7.5 4c2 0 3.4 1 4.5 2.6C13.1 5 14.5 4 16.5 4 20 4 23 7.5 21.5 11.6 19.5 16.4 12 21 12 21z" />
          </svg>
          <span>OPATOVA DATESHOW</span>
        </div>
      </header>

      <main className="archive-page-main">
        <div className="archive-page-title-wrap">
          <span className="archive-page-eyebrow">Archiv</span>
          <h1 className="archive-page-title">VŠECHNY EPIZODY</h1>
          <p className="archive-page-sub">{archive.length} epizod celkem · od EP 01 do dnes</p>
        </div>

        <div className="archive-page-list">
          {archive.length === 0 ? (
            <div className="archive-page-empty">Zatím žádné epizody.</div>
          ) : (
            archive.map(({ ep, t, views, link }) => (
              <a
                key={ep}
                href={link || "#"}
                target={link ? "_blank" : undefined}
                rel={link ? "noopener" : undefined}
                className="archive-page-row"
              >
                <span className="archive-page-ep">EP {String(ep).padStart(2, "0")}</span>
                <span className="archive-page-title-text">{t}</span>
                {views != null && (
                  <span className="archive-page-views">
                    {views >= 1000 ? `${Math.round(views / 1000)}k` : views} views
                  </span>
                )}
                <span className="archive-page-arrow">↗</span>
              </a>
            ))
          )}
        </div>
      </main>

      <footer className="archive-page-foot">
        <a href="/" className="archive-back">← Zpět na hlavní</a>
      </footer>
    </div>
  );
}

window.ArchiveAll = ArchiveAll;