// ============================================================================
// archive.jsx — public "All Entries" devlog archive (English only)
// Reuses: ambient.jsx (Eye, ParticleField, SparkBurst), i18n.jsx (LangPicker,
// LanguageProvider), components.jsx (Footer), devlog-data.jsx (CANON_POSTS).
// ============================================================================
const { useState: useArchiveState, useMemo: useArchiveMemo } = React;

const ARCHIVE_T = {
  en: {
    back: "Back to site",
    label: "Devlog · Archive",
    title1: "All entries from", title2: "the desk.",
    lede: "Every note we've posted while building Dimension Disrupt — patch breakdowns, art passes, and the occasional confession.",
    all: "All", sort: "Sort", newest: "Newest", oldest: "Oldest",
    entry: "entry", entries: "entries",
    empty: "No entries with that tag yet.",
  },
  es: {
    back: "Volver al sitio",
    label: "Devlog · Archivo",
    title1: "Todas las notas desde", title2: "el escritorio.",
    lede: "Cada nota que hemos publicado mientras construimos Dimension Disrupt: desgloses de parches, pasadas de arte y alguna que otra confesión.",
    all: "Todas", sort: "Orden", newest: "Recientes", oldest: "Antiguas",
    entry: "entrada", entries: "entradas",
    empty: "Aún no hay entradas con esa etiqueta.",
  },
};

// Brand mark reused from the homepage nav
function BrandMark() {
  return (
    <span className="mark">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
        <path d="M12 3 L21 12 L12 21 L3 12 Z" />
        <circle cx="12" cy="12" r="3" fill="currentColor" />
      </svg>
    </span>);
}

// Nav variant whose links point back to the homepage sections
function ArchiveNav() {
  const { t } = useLang();
  return (
    <nav className="nav">
      <a href="Black Craft.html#top" className="nav-brand">
        <BrandMark />
        Black Craft
      </a>
      <div className="nav-right">
        <div className="nav-links">
          <a href="Black Craft.html#game">{t.nav.game}</a>
          <a href="Black Craft.html#studio">{t.nav.team}</a>
          <a href="Black Craft.html#devlog">{t.nav.devlog}</a>
        </div>
        <LangPicker />
      </div>
    </nav>);
}

function ArchiveContent() {
  const { lang } = useLang();
  const at = ARCHIVE_T[lang] || ARCHIVE_T.en;
  const posts = CANON_POSTS;
  const [activeTag, setActiveTag] = useArchiveState("All");
  const [sort, setSort] = useArchiveState("newest");

  // tags that actually appear, in canonical order
  const usedTags = useArchiveMemo(() => {
    const present = new Set(posts.map((p) => p.tag));
    return ["All", ...DEVLOG_TAGS.filter((t) => present.has(t))];
  }, [posts]);

  const visible = useArchiveMemo(() => {
    let list = posts.slice();
    if (activeTag !== "All") list = list.filter((p) => p.tag === activeTag);
    list.sort((a, b) =>
      sort === "newest"
        ? b.dateISO.localeCompare(a.dateISO)
        : a.dateISO.localeCompare(b.dateISO));
    return list;
  }, [posts, activeTag, sort]);

  return (
    <React.Fragment>
      <ArchiveNav />

      <main className="archive">
        <ParticleField count={22} />
        <Eye eye={1} top="9%" right="4%" rotate={6} blinkDelay={1.4} fadeDelay={4} blinkPeriod={5.5} fadePeriod={14} />
        <Eye eye={3} bottom="14%" left="3%" rotate={-7} blinkDelay={2.6} fadeDelay={9} blinkPeriod={6.0} fadePeriod={15} />

        <div className="container archive-inner">
          <header className="archive-head">
            <a className="archive-back" href="Black Craft.html#devlog">
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
                <path d="M19 12H5M11 19l-7-7 7-7" />
              </svg>
              {at.back}
            </a>
            <div className="section-label">{at.label}</div>
            <h1 className="section-title">{at.title1}<br /><span className="pop-g">{at.title2}</span></h1>
            <p className="section-lede">{at.lede}</p>
          </header>

          <div className="archive-filters">
            <div className="filter-group" role="group" aria-label="Filter by tag">
              {usedTags.map((tg) =>
                <button
                  key={tg}
                  type="button"
                  className={`chip ${activeTag === tg ? "active" : ""}`}
                  aria-pressed={activeTag === tg}
                  onClick={() => setActiveTag(tg)}>
                  {tg === "All" ? at.all : tagLabel(tg, lang)}
                </button>
              )}
            </div>
            <div className="filter-sort">
              <span className="filter-sort-label">{at.sort}</span>
              <button
                type="button"
                className={`chip ${sort === "newest" ? "active" : ""}`}
                aria-pressed={sort === "newest"}
                onClick={() => setSort("newest")}>
                {at.newest}
              </button>
              <button
                type="button"
                className={`chip ${sort === "oldest" ? "active" : ""}`}
                aria-pressed={sort === "oldest"}
                onClick={() => setSort("oldest")}>
                {at.oldest}
              </button>
            </div>
          </div>

          <div className="archive-count mono">
            {visible.length} {visible.length === 1 ? at.entry : at.entries}
            {activeTag !== "All" ? ` · ${tagLabel(activeTag, lang)}` : ""}
          </div>

          <div className="archive-grid">
            {visible.map((p) => {
              const loc = localized(p, lang);
              return (
                <article className="entry archive-entry" key={p.id}>
                  <div className="placeholder entry-thumb">
                    {p.cover
                      ? <img className="entry-cover" src={p.cover} alt="" />
                      : <div>{p.thumb}</div>}
                  </div>
                  <div className="entry-meta">
                    <span>{p.date}</span>
                    <span className="dot"></span>
                    <span className="tag-inline">{tagLabel(p.tag, lang)}</span>
                    <span className="dot"></span>
                    <span className="entry-author">{p.author}</span>
                  </div>
                  <h3 className="entry-title">{loc.title}</h3>
                  <p className="entry-excerpt">{loc.excerpt}</p>
                </article>);
            })}
          </div>

          {visible.length === 0 &&
            <div className="archive-empty mono">{at.empty}</div>
          }
        </div>
      </main>

      <Footer />
    </React.Fragment>);
}

function ArchivePage() {
  return (
    <LanguageProvider>
      <ArchiveContent />
    </LanguageProvider>);
}

const archiveRoot = ReactDOM.createRoot(document.getElementById("root"));
archiveRoot.render(<ArchivePage />);