// overview.jsx — library landing: hero, corpus stats, collection entry cards,
// generated charts (status distribution, domain coverage), most-connected docs.

const { useMemo } = React;

function Overview({ index, onNavigate, onOpenDoc }) {
  const stats = index.stats || {};
  const facets = index.facets || {};
  const specs = (index.collections || []).find((c) => c.id === "specs") || { count: 0 };
  const runbooks = (index.collections || []).find((c) => c.id === "runbooks") || { count: 0 };

  const statusItems = useMemo(() => (facets.statuses || []).map((s) => ({ label: s.label.charAt(0).toUpperCase() + s.label.slice(1), value: s.count })), [facets]);
  const domainItems = useMemo(() => (facets.domains || []).slice(0, 14), [facets]);
  const connected = useMemo(() => [...(index.documents || [])].sort((a, b) => (b.relationCount || 0) - (a.relationCount || 0)).slice(0, 6), [index]);

  return (
    <div className="page">
      <p className="page__eyebrow">unikode · documentation library</p>
      <h1 className="page__title">Specifications &amp; runbooks</h1>
      <p className="page__lead">The governed written record of the uos platform — {stats.total} documents across specifications and operational runbooks, with their metadata, lineage, and interconnections made browsable.</p>

      <div style={{ display: "flex", gap: "var(--uk-space-8)", flexWrap: "wrap", marginTop: "var(--uk-space-20)" }}>
        <button className="btn btn--primary" onClick={() => onNavigate("#/specs")}><I.Spec /> Browse specs</button>
        <button className="btn" onClick={() => onNavigate("#/runbooks")}><I.Runbook /> Browse runbooks</button>
        <button className="btn" onClick={() => onNavigate("#/map")}><I.Map /> Open corpus map</button>
      </div>

      <div className="page__section">
        <StatGrid stats={[
          { label: "Specifications", value: specs.count },
          { label: "Runbooks", value: runbooks.count },
          { label: "Domains", value: (facets.domains || []).length },
          { label: "Cross-links", value: stats.edges || 0 }
        ]} />
      </div>

      <div className="page__section">
        <h2 className="page__section-title">Collections</h2>
        <div className="collcards">
          <button className="collcard" onClick={() => onNavigate("#/specs")}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <span className="collcard__t"><I.Spec /> Specifications</span><span className="collcard__n">{specs.count}</span>
            </div>
            <p className="collcard__d">Authoritative design and architecture specifications governing platform subsystems.</p>
          </button>
          <button className="collcard" onClick={() => onNavigate("#/runbooks")}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
              <span className="collcard__t"><I.Runbook /> Runbooks</span><span className="collcard__n">{runbooks.count}</span>
            </div>
            <p className="collcard__d">Operational playbooks and execution procedures for running the platform.</p>
          </button>
        </div>
      </div>

      <div className="page__section" style={{ display: "grid", gap: "var(--uk-space-32)", gridTemplateColumns: "1fr" }}>
        <div>
          <h2 className="page__section-title">By status</h2>
          <BarSet items={statusItems} />
        </div>
        <div>
          <h2 className="page__section-title">By domain</h2>
          <Treemap items={domainItems} onSelect={() => onNavigate("#/map")} />
        </div>
      </div>

      <div className="page__section">
        <h2 className="page__section-title">Most connected</h2>
        <div className="rowlist">
          {connected.map((d) => <DocRow key={d.id} doc={d} onOpen={onOpenDoc} />)}
        </div>
      </div>

      <p className="muted" style={{ marginTop: "var(--uk-space-40)", fontSize: "var(--uk-type-label-small)", fontFamily: "var(--uk-font-family-mono)" }}>
        corpus {index.corpusHash} · generated {fmtDate(index.generatedAt)} · {stats.metadataComplete}/{stats.total} with complete metadata
      </p>
    </div>
  );
}

window.Overview = Overview;