// ═══════════════════════════════════════════════════════════════════
// DOCUMENT LIBRARY — generated documents, per project.
// Everything here was produced by a workflow run and versioned;
// the publish gate (Workflow · 03) is the only writer.
// ═══════════════════════════════════════════════════════════════════
(function () {
  const TYPE_TONE = { report: "accent", assessment: "info", deck: "neutral", memo: "neutral", register: "neutral" };
  const DOC_STATUS = {
    published: { tone: "ok",   label: "published" },
    final:     { tone: "ok",   label: "final" },
    draft:     { tone: "warn", label: "draft" },
  };

  function DocumentLibrary({ proj, tenant, go }) {
    const docs = proj.docs || [];

    return (
      <div>
        <window.PageHead eyebrow={tenant.name + " · " + proj.name} title="Document Library"
          sub="Generated documents only — reports, assessments, decks and memos composed by the pipeline from the Knowledge Base. Versioned; nothing lands here without passing the publish gate.">
        </window.PageHead>

        {docs.length === 0 ? (
          <div style={{ border: "1px dashed var(--rule-hard)", borderRadius: "var(--r-3)", background: "var(--bg)", padding: "34px 24px", textAlign: "center" }}>
            <div style={{ fontFamily: "var(--ui-display)", fontWeight: 600, fontSize: "var(--fs-md)", color: "var(--ink)", marginBottom: 6 }}>No generated documents yet</div>
            <p style={{ margin: "0 auto 16px", maxWidth: 460, fontSize: "var(--fs-sm)", color: "var(--ink-3)", lineHeight: 1.6 }}>
              Documents publish here at Workflow · 03 Build Intelligence Report, after human review. This project is currently at the <b style={{ color: "var(--ink)" }}>{proj.stage}</b> stage.
            </p>
            <button onClick={() => go("workflow")} style={{ border: "1px solid var(--accent-bd)", background: "var(--accent-bg)", color: "var(--accent-lo)", borderRadius: "var(--r-2)", padding: "8px 16px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: "9.5px", fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase" }}>open workflow ↗</button>
          </div>
        ) : (
          <React.Fragment>
            <window.SectionHead sub={docs.length + " documents · generated by workflow runs · versioned"}>Generated Documents</window.SectionHead>
            <div style={{ border: "1px solid var(--rule-hard)", borderRadius: "var(--r-3)", overflow: "hidden" }}>
              <div style={{ display: "grid", gridTemplateColumns: "76px 1.5fr 104px 56px 92px 150px 104px 76px", gap: 1, background: "var(--rule)" }}>
                {["ID", "Document", "Type", "Ver", "Status", "Generated by", "Date", ""].map((h, i) => (
                  <div key={i} style={{ background: "var(--bg-2)", padding: "8px 12px" }}><window.MonoLabel>{h}</window.MonoLabel></div>
                ))}
                {docs.map((d) => {
                  const st = DOC_STATUS[d.status] || DOC_STATUS.draft;
                  return (
                    <React.Fragment key={d.id}>
                      <div style={{ background: "var(--bg)", padding: "9px 12px", fontFamily: "var(--mono)", fontSize: "10px", color: "var(--ink-3)" }}>{d.id}</div>
                      <div style={{ background: "var(--bg)", padding: "9px 12px", fontSize: "var(--fs-sm)", fontWeight: 500, color: "var(--ink)", lineHeight: 1.4 }}>{d.name}</div>
                      <div style={{ background: "var(--bg)", padding: "9px 12px" }}><window.Pill tone={TYPE_TONE[d.type] || "neutral"}>{d.type}</window.Pill></div>
                      <div style={{ background: "var(--bg)", padding: "9px 12px", fontFamily: "var(--mono)", fontSize: "10px", fontWeight: 600, color: "var(--ink-2)" }}>{d.v}</div>
                      <div style={{ background: "var(--bg)", padding: "9px 12px" }}><window.Pill tone={st.tone}>{st.label}</window.Pill></div>
                      <div style={{ background: "var(--bg)", padding: "9px 12px", fontFamily: "var(--mono)", fontSize: "10px", color: "var(--ink-4)", lineHeight: 1.5 }}>{d.by}</div>
                      <div style={{ background: "var(--bg)", padding: "9px 12px", fontSize: "var(--fs-xs)", color: "var(--ink-3)", whiteSpace: "nowrap" }}>{d.date}</div>
                      <div style={{ background: "var(--bg)", padding: "9px 12px" }}>
                        {d.route ? (
                          <button onClick={() => go(d.route)} style={{ border: "1px solid var(--accent-bd)", background: "var(--accent-bg)", color: "var(--accent-lo)", borderRadius: "var(--r-1)", padding: "3px 8px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.06em", textTransform: "uppercase", whiteSpace: "nowrap" }}>view</button>
                        ) : d.href ? (
                          <button onClick={() => window.open(d.href, "_blank")} style={{ border: "1px solid var(--rule-hard)", background: "var(--bg)", color: "var(--ink-3)", borderRadius: "var(--r-1)", padding: "3px 8px", cursor: "pointer", fontFamily: "var(--mono)", fontSize: "8.5px", letterSpacing: "0.06em", textTransform: "uppercase", whiteSpace: "nowrap" }}>open ↗</button>
                        ) : (
                          <span style={{ fontFamily: "var(--mono)", fontSize: "9px", color: "var(--ink-4)" }}>—</span>
                        )}
                      </div>
                    </React.Fragment>
                  );
                })}
              </div>
            </div>
            <p style={{ margin: "14px 0 0", fontFamily: "var(--mono)", fontSize: "9px", letterSpacing: "0.06em", color: "var(--ink-4)", lineHeight: 1.7 }}>
              Source artifacts (uploads) live in the Artifact Registry. The published report also renders live on the Intelligence page.
            </p>
          </React.Fragment>
        )}
      </div>
    );
  }

  window.DocumentLibrary = DocumentLibrary;
})();