/* ============================================================
   Lists tile — the working to-do board for the Proxa Model POC.
   Claude maintains this; it doubles as a demo of a simple
   list-style data product. Self-contained inline styling.
   ============================================================ */
// Data hoisted to module scope so the Lists data product can render both its
// Artifact (this board) and its Data face (the flat tabular records).
const LISTS_C = {
  ink: 'var(--fg-dark)', base: 'var(--fg-base)', muted: 'var(--fg-muted)',
  line: 'var(--border-subtle, rgba(38,24,17,0.10))', panel: 'var(--bg-panel)',
  green: 'var(--accent-green)', blue: 'var(--accent-blue)', orange: 'var(--accent-orange)',
  purple: 'var(--accent-purple-ai)',
};
// status: 'next' | 'idea' | 'decision' | 'done'
const LISTS_TAG = {
  next: { label: 'Next', color: LISTS_C.orange },
  idea: { label: 'Backlog', color: LISTS_C.blue },
  decision: { label: 'Decision', color: LISTS_C.purple },
  done: { label: 'Done', color: LISTS_C.green },
};
const LISTS_SECTIONS = [
    { title: 'Do next', items: [
      ['next', 'Reconcile "what is a data product"', 'Counts don’t line up: Artifacts 6 · Knowledge 13 · Repo 20 · Model canvas 13 tabs. Pick one atom.'],
      ['next', 'Contracts hub — deepen', 'Dashboard, tabular register, graph node and its own Library are live. Still to do: a Model canvas + Control agents.'],
    ]},
    { title: 'Backlog', items: [
      ['idea', 'Live recompute', 'Change an assumption → statements move. The strongest "encoded, not a preview" proof.'],
      ['idea', 'Show Repo subfolders', 'Repo is flat in the UI; disk has def / context / build. Mirror the nesting.'],
      ['idea', 'Headcount provenance', 'Still floating — wire HRIS roster → Headcount ODP → ADP.'],
      ['idea', 'Breadth is thin', 'Beyond Finance and Contracts, hubs are still shells. Build out a real third domain.'],
      ['idea', 'Surface judgment in Context faces', 'The "why" now lives in the repo defs — pull it into the Context face too.'],
      ['idea', 'Pin ODP/ADP to data-mesh terms', 'Our ODP≈source-aligned, ADP≈consumer-aligned; "operational data product" collides with the community meaning. Add a one-line definition on About/Repo so a mesh-literate reader isn’t confused.'],
      ['idea', 'Domain types: registry / ledger / model', 'Not every hub is a Finance-style model. Contracts = registry SVOT (all contract types); Commercial = model (one DP per customer, merges Contracts+Sales+Production+Finance). Reframe the graph around domain type.'],
    ]},
    { title: 'Recently done', items: [
      ['done', 'Contracts hub stood up (2nd domain)', 'Identity + tabular Contract Register + graph node + its own derived Library (legal corpus moved out of Finance).'],
      ['done', 'Context Graph = real model + our icons', 'Rebuilt as Cascade Ridge encoded model — card nodes, app icons, cross-domain edges. No more Traylor.'],
      ['done', 'org-model.yaml (root manifest)', 'Org = composition of domains + cross-domain edges, in the Repo. Graph and Repo now agree.'],
      ['done', 'Repo materialized + "no black boxes"', 'Encoded model as inspectable code: manifest + 13 defs + build scripts + context. Repo filter + code viewer.'],
      ['done', 'Raw exports — provenance fixed', 'GL-Export + Production-Log files; model rail source-grouped (file chips + Modeled-in-Proxa).'],
      ['done', '? / About page', 'Encoded-org vision + "isn’t this a warehouse?" + git-for-the-business architecture, for the dev team.'],
      ['done', 'Model icon → chip </>; Artifacts tile; tidy tiles', 'Plus Knowledge rename; repo out of Knowledge; Proxa source icon.'],
    ]},
  ];
window.LISTS_SECTIONS = LISTS_SECTIONS;
window.LISTS_TAG = LISTS_TAG;

function ListsPanel() {
  const C = LISTS_C;
  const TAG = LISTS_TAG;
  const SECTIONS = LISTS_SECTIONS;

  const Item = ([status, title, note]) => {
    const t = TAG[status];
    const done = status === 'done';
    return (
      <div key={title} style={{ display: 'grid', gridTemplateColumns: '84px 1fr', gap: 14,
        padding: '13px 4px', borderTop: `1px solid ${C.line}`, alignItems: 'start' }}>
        <span style={{ marginTop: 1, justifySelf: 'start', fontSize: 10.5, fontWeight: 700,
          letterSpacing: '0.05em', textTransform: 'uppercase', color: t.color,
          border: `1px solid ${t.color}`, borderRadius: 999, padding: '2px 8px', opacity: done ? 0.6 : 1 }}>{t.label}</span>
        <div>
          <div style={{ fontSize: 14.5, fontWeight: 600, color: done ? C.muted : C.ink,
            textDecoration: done ? 'line-through' : 'none' }}>{title}</div>
          {note && <div style={{ fontSize: 13, lineHeight: 1.55, color: C.muted, marginTop: 2 }}>{note}</div>}
        </div>
      </div>
    );
  };

  return (
    <div style={{ maxWidth: 860, padding: '4px 2px 40px' }}>
      <p style={{ fontSize: 13.5, lineHeight: 1.6, color: C.muted, margin: '0 0 18px' }}>
        Working board for the Proxa Model POC — maintained by Claude as we build. Grouped by status so the dev team
        can follow what’s done, what’s next, and open decisions.
      </p>
      {SECTIONS.map((s) => (
        <div key={s.title} style={{ marginBottom: 26 }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase',
            color: C.ink, marginBottom: 2 }}>{s.title}
            <span style={{ color: C.muted, fontWeight: 500, marginLeft: 8 }}>{s.items.length}</span>
          </div>
          <div style={{ borderBottom: `1px solid ${C.line}` }}>
            {s.items.map(Item)}
          </div>
        </div>
      ))}
    </div>
  );
}
window.ListsPanel = ListsPanel;