// Direction A — "INDEX"
// Extreme tabular, monospace, numbered.
// #0066FF is the single accent. Supporting: ink black, paper #f4f2ec, rule #111.
// Styles live in direction-a.css.

function LeaderRow({ code, label, value, href, leader }) {
  return (
    <div className="a-leader-row">
      {code && <span className="a-leader-code">{code}</span>}
      <span className={`a-leader-label${leader ? " a-leader-label--leader" : ""}`}>
        <span className="a-leader-label__text">
          {href ? <a href={href} className="a-link">{label}</a> : label}
        </span>
        {leader && <span className="a-leader-line" />}
      </span>
      {value && <span className="a-leader-value">{value}</span>}
    </div>
  );
}

function TabBar({ active, onChange }) {
  return (
    <nav className="a-tabbar">
      {window.SITE.tabs.map((t) => {
        const on = active === t.id;
        return (
          <button
            key={t.id}
            onClick={() => onChange(t.id)}
            className={`a-tab${on ? " a-tab--active" : ""}`}
          >
            <span className="a-tab__label">{t.label}</span>
          </button>
        );
      })}
    </nav>
  );
}

function Header() {
  return (
    <header className="a-header">
      <div className="a-header__inner">
        <div>
          <p className="a-header__intro">
            Hi, it's <span className="a-header__name">Lesia</span>! I do programming and technical project management
          </p>
          <a href="https://github.com/part-time-potato" className="a-header__github">github.com/part-time-potato</a>
        </div>
        <div className="a-header__avatar">
          <img src="assets/me.png" alt="" />
          <span className="a-header__badge">ID·01</span>
        </div>
      </div>
    </header>
  );
}

// ─── GAMES ─────────────────────────────────────────────────────
function GamesSection() {
  const g = window.SITE.games;
  const [titlePrefix, titleName] = g.current.title.split(": ");
  return (
    <div>
      <h2 className="a-heading">{titlePrefix} · <span className="a-heading__accent">{titleName}</span></h2>
      <div className="a-game-card">
        <div>
          <div className="a-game-fig-label">FIG. 01 · PREVIEW</div>
          <div className="a-game-fig-frame">
            <img src={g.current.preview} alt="" />
          </div>
        </div>
        <div>
          <div className="a-game-meta">
            <LeaderRow label="Type" value={g.current.type} leader />
            <LeaderRow label="Target" value={g.current.target} leader />
          </div>
          <p className="a-game-blurb">{g.current.blurb}</p>
        </div>
      </div>

      <h2 className="a-heading a-heading--published">Published</h2>
      <div className="a-published-empty">
        [ no entries — rebuild pending ]
      </div>
    </div>
  );
}

// ─── READINGS ──────────────────────────────────────────────────
function ReadingsSection() {
  const r = window.SITE.readings;
  const [groups, setGroups] = React.useState([]);

  React.useEffect(() => {
    fetch("readings/reading-list.md")
      .then(res => res.text())
      .then(md => setGroups(window.parseReadingList(md)))
      .catch(() => setGroups([]));
  }, []);

  return (
    <div>
      <div className="a-card-header a-card-header--mt">
        <div className="a-card-header__title">{r.listHeading}</div>
      </div>

      {groups.map((grp) => (
        <div key={grp.status} className="a-reading-group">
          <div className="a-reading-group__header">
            <span className="a-reading-group__status">{grp.status}</span>
          </div>
          {grp.byYear
            ? Object.entries(grp.byYear).sort((a, b) => b[0] - a[0]).map(([year, list]) => (
                <div key={year} className="a-reading-year">
                  <div className="a-reading-year__label">· {year} ·</div>
                  {list.map((e, i) => (
                    <LeaderRow key={i} label={<>{e.title} · <i>{e.author}</i></>} value={e.when || "—"} />
                  ))}
                </div>
              ))
            : grp.entries.map((e, i) => (
                <LeaderRow key={i} label={<>{e.title} · <i>{e.author}</i></>} value={e.when || "—"} />
              ))}
        </div>
      ))}

      <div className="a-essays">
        <div className="a-card-header">
          <div className="a-card-header__title">Essays</div>
        </div>
        <div className="a-essays__content">
          <div className="a-essay-box">
            <div className="a-essays__heading">2025 Wrapped</div>
            {r.paragraphs.map((p, i) => (
              <p key={i} className="a-essay-p">
                <b className="a-essay-p__label">{p.label}</b>{" "}
                <span className="a-rich-text" dangerouslySetInnerHTML={{ __html: p.html }} />
              </p>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── WORK ──────────────────────────────────────────────────────
function WorkSection() {
  const w = window.SITE.work;
  return (
    <div>
      <div className="a-work-heading">I'm good at</div>
      <div>
        {w.goodAt.map((t, i) => (
          <LeaderRow key={i} code="·" label={t} value="" />
        ))}
      </div>

      {w.roles.map((role, ri) => (
        <div key={ri} className="a-role">
          <div className="a-card-header a-role__header">
            <h3 className="a-role__title">{role.heading}</h3>
            <div className="a-role__meta">{role.role} · {role.period}</div>
          </div>

          {role.items.map((it, ii) => {
            if (it.kind === "link") {
              return (
                <div key={ii} className="a-work-link-item">
                  <LeaderRow
                    label={<span className="a-rich-text" dangerouslySetInnerHTML={{ __html: it.html }} />}
                    value=""
                  />
                </div>
              );
            }
            if (it.kind === "interactive") {
              return (
                <div key={ii} className="a-interactive">
                  <h2 className="a-interactive__title">{it.label}</h2>
                  <div className="a-interactive__grid">
                    <div className="a-interactive__thumb">
                      <img src={it.image} alt="" />
                    </div>
                    <div>
                      <p className="a-interactive__desc a-work-text">{it.description}</p>
                      <div className="a-interactive__bullets">
                        {it.bullets.map((b, bi) => (
                          <LeaderRow key={bi} code="·" label={b} value="" />
                        ))}
                      </div>
                      <p className="a-interactive__outcome a-work-text">{it.outcome}</p>
                    </div>
                  </div>
                  <div className="a-lenses__label">Example Lenses</div>
                  <div className="a-lenses__grid">
                    {it.lenses.map((l, li) => (
                      <a key={li} href={l.url} className="a-lens">
                        <img src={l.code} alt="" />
                        <div className="a-lens__caption">→ {l.label}</div>
                      </a>
                    ))}
                  </div>
                </div>
              );
            }
            if (it.kind === "comic") {
              return (
                <div key={ii} className="a-comic">
                  <h2 className="a-comic__title">{it.label}</h2>
                  {it.blocks.map((b, bi) => (
                    <div
                      key={bi}
                      className={`a-comic__block${bi ? " a-comic__block--sep" : ""}${b.wideThumb ? " a-comic__block--wide" : ""}`}
                    >
                      <div className="a-comic__thumb">
                        <img src={b.image} alt="" />
                      </div>
                      <div className="a-comic__text-col">
                        {(b.texts ?? (b.text != null ? [b.text] : [])).map((segment, si) => (
                          <p key={si} className="a-comic__text a-rich-text" dangerouslySetInnerHTML={{ __html: segment }} />
                        ))}
                      </div>
                    </div>
                  ))}
                </div>
              );
            }
            if (it.kind === "text") {
              return (
                <p key={ii} className="a-work-text a-rich-text" dangerouslySetInnerHTML={{ __html: it.html }} />
              );
            }
            return null;
          })}
        </div>
      ))}
    </div>
  );
}

function Footer() {
  return (
    <footer className="a-footer">
      <span>© {window.SITE.handle}</span>
      <span className="a-footer__center">— END OF INDEX —</span>
      <span>{window.SITE.domain}</span>
    </footer>
  );
}

function DirectionA() {
  const [tab, setTab] = React.useState("games");
  return (
    <div data-screen-label="Direction A — Index" className="a-root">
      <div aria-hidden className="a-grid-bg" />
      <div className="a-content">
        <Header />
        <TabBar active={tab} onChange={setTab} />
        <div className="a-tab-panel">
          {tab === "games"    && <GamesSection />}
          {tab === "readings" && <ReadingsSection />}
          {tab === "work"     && <WorkSection />}
        </div>

      </div>
    </div>
  );
}

window.DirectionA = DirectionA;