/* ============================================================
   Model → Context sub-section.
   Data (the sheets) says WHAT; Context says WHY — the model's
   memory: judgment that lives in no cell. This is the answer to
   punch-list #2 ("Context face is metadata, not judgment"):
   here Context is first-class, encoded, validate-able judgment.
   Self-contained inline styling (mirrors about.jsx).
   ============================================================ */
// GENERAL context = the cookbook for this KIND of hub — Proxa-authored,
// reusable across every customer, behaves like a Skill. It "transforms into"
// specific once a model is uploaded (each specific item derivesFrom one of these).
window.HUB_GENERAL_CONTEXT = {
  finance: [
    { title: 'What a Finance hub is', judgment: 'A Finance hub is the encoded three-statement model of the business — Income Statement, Balance Sheet and Cash Flow — plus the schedules that feed them. Its job is to answer "how is the business doing, and what happens if…" from grounded numbers.' },
    { title: 'The data products it typically holds', judgment: 'Assumptions, Income Statement, Balance Sheet, Cash Flow, plus schedules: GL Detail, Revenue Build, Working Capital, Debt, PP&E, Headcount, Capacity & Utilization.' },
    { title: 'How it is normally built', judgment: 'Ground everything: raw system export → operational schedule (ODP) → analytical model (ADP) → statements. Nothing floats — every analytical number traces back to a source export.' },
    { title: 'Checks that must always hold', judgment: 'The balance sheet must balance every period; cash flow ending cash must tie to the balance sheet; the statements must reconcile to the GL trial balance.' },
    { title: 'Manufacturing vs. SaaS (this is a mfg template)', judgment: 'A manufacturing finance model turns on units × price, capacity/utilization, tolling vs. turnkey mix, and commodity input costs with pass-through pricing lag. (A SaaS model would instead turn on ARR, cohorts, churn and CAC — a different general context.)' },
  ],
  // Research-lab domain (domains.jsx) — the cookbook for a typing hub. Same
  // five-item shape as finance: what it is, what it holds, how it's built, what
  // must hold, and the variant this template assumes.
  typing: [
    { title: 'What a Typing hub is', judgment: 'A Typing hub is the encoded record of the assay — specimens, runs, sequences, and the allele assignments derived from them. Its job is to answer "what is this subject’s type, on what evidence, and is that still the current answer?"' },
    { title: 'The data products it typically holds', judgment: 'Assignment Ledger, Ambiguity Queue, Re-resolution Diff, KIR–HLA Ligand Pairing, Cohort Allele Frequencies, Match Grades, Method Performance, QC & Proficiency Trend.' },
    { title: 'How it is normally built', judgment: 'Nothing floats: trace or read → run → sequence → assignment. An assignment is a derivation, never a typed-in string, and it carries the method version and the IMGT/HLA release that produced it.' },
    { title: 'Checks that must always hold', judgment: 'Every assignment cites a reference release; ambiguity is recorded rather than silently resolved; re-resolution against a newer release is reproducible; the ledger and the tables delivered to studies agree.' },
    { title: 'SBT vs. NGS (this is a sequence-based-typing template)', judgment: 'SBT resolves exons by Sanger sequencing, so heterozygous cis/trans phase ambiguity is a property of the run and is resolved by allele-specific amplification. (An NGS template would instead turn on read depth, phasing and contamination thresholds — a different general context.)' },
  ],
};

// SPECIFIC context for the built Cascade Ridge Finance hub — the judgments
// derived from THIS org's model, each deriving from a general cookbook item.
window.FINANCE_SPECIFIC_CONTEXT = [
  { title: 'The $1.81M Summit Trail write-off is intentional',
    judgment: 'The Aug-2025 Summit Trail Snacks bad-debt write-off is a deliberate one-time charge from a churned customer. Exclude it from adjusted EBITDA and do not smooth it across periods — it is a real, bounded loss, not a modelling artifact.',
    affects: ['Working Capital & AR', 'Income Statement'], owner: 'Jose Patel · CFO', status: 'Validated',
    derivedFrom: 'How it is normally built' },
  { title: 'Margin recovery is mechanical, not performance',
    judgment: 'The H2-2025 oat & almond commodity spike cut gross margin 20.5% → 16.0%. Pass-through pricing lags input costs by ~2 quarters, so the recovery to 20.9% in H1-2026 is contractual catch-up — not an efficiency gain. Do not credit operations for it.',
    affects: ['P&L & Margin Bridge', 'Revenue Build', 'Assumptions'], owner: 'Trevor Garcia · FP&A', status: 'Validated',
    derivedFrom: 'Manufacturing vs. SaaS' },
  { title: 'LEB-L5 capex depresses FY2026 free cash flow by design',
    judgment: 'The LEB-L5 line upgrade is a growth investment. The FY2026 free-cash-flow dip is planned capex — not a cost overrun or a liquidity concern. Read the cash-flow statement with this in mind before flagging the drawdown.',
    affects: ['PP&E Schedule', 'Cash Flow', 'Capacity & Utilization'], owner: 'Jose Patel · CFO', status: 'Validated',
    derivedFrom: 'Manufacturing vs. SaaS' },
  { title: 'Verdant Valley structurally replaces the Summit Trail volume',
    judgment: 'Verdant Valley is ramping to ~$18M/yr and is intended to backfill the volume lost to the Summit Trail churn. Treat the customer-concentration shift as deliberate rebalancing, not erosion of the base.',
    affects: ['Customer Concentration', 'Revenue Build (bottom-up)'], owner: 'Jose Patel · CFO', status: 'Draft',
    derivedFrom: 'The data products it typically holds' },
];

// Freshly derived from a just-uploaded model: same items, all still Draft
// (nothing validated yet) — the state right after simulateUpload.
window.FINANCE_DERIVED_SPECIFIC = window.FINANCE_SPECIFIC_CONTEXT.map((x) => ({ ...x, status: 'Draft' }));

function ModelContextView({ general, specific, templateName, onUpload, domain }) {
  const pack = window.proxaDomain ? window.proxaDomain(domain) : null;
  const sourceNoun = (pack && pack.sourceNoun) || 'your model';
  const C = {
    ink: 'var(--fg-dark)', base: 'var(--fg-base)', muted: 'var(--fg-muted)',
    line: 'var(--border-light, rgba(38,24,17,0.10))', panel: 'var(--bg-app)',
    green: 'var(--accent-green)', amber: '#A95B2E', blue: 'var(--accent-blue)',
  };
  general = general || [];
  specific = specific || [];

  const Chip = ({ children }) => (
    <span style={{ display: 'inline-flex', alignItems: 'center', padding: '2px 9px', borderRadius: 999,
      border: `1px solid ${C.line}`, background: C.panel, color: C.muted, fontSize: 12, lineHeight: 1.6 }}>{children}</span>
  );

  const Status = ({ s }) => {
    const col = s === 'Validated' ? C.green : s === 'Draft' ? C.amber : C.blue;
    return (
      <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, color: col }}>
        <span style={{ width: 7, height: 7, borderRadius: 999, background: col }} />{s}
      </span>
    );
  };

  const SectionLabel = ({ kicker, text }) => (
    <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, margin: '4px 2px 0' }}>
      <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: C.muted }}>{kicker}</span>
      <span style={{ fontSize: 12.5, color: C.muted }}>{text}</span>
    </div>
  );

  const JudgmentCard = ({ it, gen }) => (
    <div style={{ border: `1px solid ${C.line}`, borderRadius: 12, padding: '16px 18px', background: C.panel }}>
      <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 14 }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: C.ink, letterSpacing: '-0.01em' }}>{it.title}</div>
        <div style={{ flex: 'none', paddingTop: 2 }}><Status s={gen ? 'Cookbook' : it.status} /></div>
      </div>
      <p style={{ fontSize: 13.5, lineHeight: 1.65, color: C.base, margin: gen ? '8px 0 0' : '8px 0 10px' }}>{it.judgment}</p>
      {!gen && it.derivedFrom && (
        <div style={{ fontSize: 12, color: C.muted, margin: '0 0 12px', display: 'flex', alignItems: 'center', gap: 6 }}>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={C.blue} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><line x1="7" y1="17" x2="17" y2="7"/><polyline points="7 7 17 7 17 17"/></svg>
          Instantiates general: <span style={{ color: C.base }}>{it.derivedFrom}</span>
        </div>
      )}
      {!gen && (
        <div style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 8 }}>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.06em', textTransform: 'uppercase', color: C.muted, marginRight: 2 }}>Affects</span>
          {(it.affects || []).map((a) => <Chip key={a}>{a}</Chip>)}
          <span style={{ marginLeft: 'auto', fontSize: 12.5, color: C.muted }}>{it.owner}</span>
        </div>
      )}
      {!gen && it.status === 'Draft' && (
        <div style={{ marginTop: 12, paddingTop: 12, borderTop: `1px solid ${C.line}`, display: 'flex', alignItems: 'center', gap: 10 }}>
          <span style={{ fontSize: 12.5, color: C.muted }}>Claude-authored from the sources — validate to pin it as memory.</span>
          <button type="button" style={{ marginLeft: 'auto', fontSize: 12.5, fontWeight: 600, color: '#fff',
            background: C.ink, border: 'none', borderRadius: 999, padding: '6px 14px', cursor: 'pointer' }}>Validate</button>
        </div>
      )}
    </div>
  );

  const tName = templateName || 'template';

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
      {/* What Context is */}
      <div style={{ border: `1px solid ${C.line}`, borderRadius: 12, padding: '16px 18px', background: C.panel }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: C.ink, marginBottom: 4 }}>
          Context is the model&rsquo;s memory — the judgment that lives in no cell
        </div>
        <p style={{ fontSize: 13.5, lineHeight: 1.6, color: C.muted, margin: 0 }}>
          <strong>General</strong> is the cookbook for this <em>kind</em> of hub — reusable, from the template.
          <strong> Specific</strong> is <em>yours</em> — derived from your model, then validated to pin it as memory.
          General transforms into specific; it stays here to reference.
        </p>
      </div>

      {/* General (the cookbook) */}
      {general.length > 0 && (
        <React.Fragment>
          <SectionLabel kicker="General" text={`The cookbook — from the ${tName} template. Reusable across every ${tName} hub.`} />
          {general.map((it, i) => <JudgmentCard key={`g${i}`} it={it} gen />)}
        </React.Fragment>
      )}

      {/* Specific (yours) */}
      <SectionLabel kicker="Specific" text="Your model — derived from what you provide." />
      {specific.length > 0
        ? specific.map((it, i) => <JudgmentCard key={`s${i}`} it={it} />)
        : (
          <div style={{ border: `1px dashed ${C.line}`, borderRadius: 12, padding: '24px 20px', background: C.panel, textAlign: 'center' }}>
            <div style={{ fontSize: 14, fontWeight: 600, color: C.ink, marginBottom: 4 }}>No specific context yet</div>
            <p style={{ fontSize: 13, lineHeight: 1.6, color: C.muted, margin: '0 auto 14px', maxWidth: 460 }}>
              Use the assistant to upload {sourceNoun} — I&rsquo;ll derive your specifics, instantiating each general
              item above for your work, then you validate them to pin them as memory.
            </p>
            {onUpload && (
              <button type="button" onClick={onUpload} style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
                fontSize: 13, fontWeight: 600, color: '#fff', background: C.ink, border: 'none', borderRadius: 999,
                padding: '8px 16px', cursor: 'pointer' }}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
                Upload sources (simulate)
              </button>
            )}
          </div>
        )}
    </div>
  );
}
window.ModelContextView = ModelContextView;

// Model → Data empty state for a template hub before a model is uploaded.
function ModelUploadCTA({ onUpload, domain }) {
  const line = 'var(--border-light, rgba(38,24,17,0.10))';
  const pack = window.proxaDomain ? window.proxaDomain(domain) : null;
  const sourceNoun = (pack && pack.sourceNoun) || 'your model';
  return (
    <div style={{ border: `1px dashed ${line}`, borderRadius: 14, padding: '40px 24px', background: 'var(--bg-app)', textAlign: 'center' }}>
      <div style={{ width: 48, height: 48, margin: '0 auto 14px', borderRadius: 12, display: 'grid', placeItems: 'center', background: 'rgba(38,24,17,0.05)', color: 'var(--fg-muted)' }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
      </div>
      <div style={{ fontSize: 16, fontWeight: 600, color: 'var(--fg-dark)', marginBottom: 4 }}>No model yet</div>
      <p style={{ fontSize: 13.5, lineHeight: 1.6, color: 'var(--fg-muted)', margin: '0 auto 16px', maxWidth: 440 }}>
        Use the assistant to upload {sourceNoun}, and Claude will build your data products and derive your
        specific context from it.
      </p>
      {onUpload && (
        <button type="button" onClick={onUpload} style={{ display: 'inline-flex', alignItems: 'center', gap: 8,
          fontSize: 13.5, fontWeight: 600, color: '#fff', background: 'var(--fg-dark)', border: 'none',
          borderRadius: 999, padding: '9px 18px', cursor: 'pointer' }}>
          Upload with the assistant (simulate)
        </button>
      )}
    </div>
  );
}
window.ModelUploadCTA = ModelUploadCTA;

/* ============================================================
   Model → Repo sub-section.
   The encoded model materialized as inspectable source — moved
   here from the Library "Repo" filter. "No black boxes": each
   data product is a def, the org is a manifest, memory is
   COMPANY.md, and build scripts regenerate it all. Rows open the
   existing code viewer via window.finOpenCode(path, name).
   ============================================================ */
function ModelRepoView() {
  const C = {
    ink: 'var(--fg-dark)', base: 'var(--fg-base)', muted: 'var(--fg-muted)',
    line: 'var(--border-light, rgba(38,24,17,0.10))', panel: 'var(--bg-app)',
    mono: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
  };
  const GROUPS = [
    { group: 'Manifest', desc: 'The composition — domains and their cross-domain edges.', files: [
      ['org-model.yaml', 'library/repo/org-model.yaml', 'Org root — domains + cross-domain edges'],
      ['finance-model.yaml', 'library/repo/finance-model.yaml', 'Finance domain manifest'],
    ] },
    { group: 'Definitions', desc: 'One def per data product — inputs, logic, checks, context, provenance.', files: [
      ['assumptions.yaml', 'library/repo/def/assumptions.yaml', 'Assumptions'],
      ['income_statement.yaml', 'library/repo/def/income_statement.yaml', 'Income Statement'],
      ['balance_sheet.yaml', 'library/repo/def/balance_sheet.yaml', 'Balance Sheet'],
      ['cash_flow.yaml', 'library/repo/def/cash_flow.yaml', 'Cash Flow'],
      ['capacity_utilization.yaml', 'library/repo/def/capacity_utilization.yaml', 'Capacity & Utilization'],
      ['gl_detail.yaml', 'library/repo/def/gl_detail.yaml', 'GL Detail'],
      ['debt_schedule.yaml', 'library/repo/def/debt_schedule.yaml', 'Debt Schedule'],
      ['ppe_schedule.yaml', 'library/repo/def/ppe_schedule.yaml', 'PP&E Schedule'],
      ['working_capital.yaml', 'library/repo/def/working_capital.yaml', 'Working Capital'],
      ['revenue_build.yaml', 'library/repo/def/revenue_build.yaml', 'Revenue Build'],
      ['revenue_build_bottom_up.yaml', 'library/repo/def/revenue_build_bottom_up.yaml', 'Revenue Build (bottom-up)'],
      ['production_schedule.yaml', 'library/repo/def/production_schedule.yaml', 'Production Schedule'],
      ['headcount.yaml', 'library/repo/def/headcount.yaml', 'Headcount'],
    ] },
    { group: 'Context', desc: 'Canonical, human-validated memory the definitions read from.', files: [
      ['COMPANY.md', 'library/repo/context/COMPANY.md', 'Company memory'],
    ] },
    { group: 'Build', desc: 'Scripts that regenerate the model and its raw exports from source.', files: [
      ['generate_financials.py', 'library/repo/build/generate_financials.py', 'Emit the financial data'],
      ['generate_model.py', 'library/repo/build/generate_model.py', 'Emit the model workbook'],
      ['gen_raw_exports.py', 'library/repo/build/gen_raw_exports.py', 'Emit raw system exports'],
    ] },
  ];
  const open = (path, name) => { if (window.finOpenCode) window.finOpenCode(path, name); };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ border: `1px solid ${C.line}`, borderRadius: 12, padding: '16px 18px', background: C.panel }}>
        <div style={{ fontSize: 15, fontWeight: 600, color: C.ink, marginBottom: 4 }}>
          No black boxes — the encoded model <em>is</em> inspectable source
        </div>
        <p style={{ fontSize: 13.5, lineHeight: 1.6, color: C.muted, margin: 0 }}>
          Each data product is a <code style={{ fontFamily: C.mono, fontSize: 12.5 }}>def</code> declaring its inputs, logic,
          checks, context and provenance; the org is a manifest wiring cross-domain edges; memory is <code style={{ fontFamily: C.mono, fontSize: 12.5 }}>COMPANY.md</code>;
          build scripts regenerate it all. Open any file to read the code behind the tables.
        </p>
      </div>

      {GROUPS.map((g) => (
        <div key={g.group}>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, margin: '2px 2px 8px' }}>
            <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: C.muted }}>{g.group}</span>
            <span style={{ fontSize: 12.5, color: C.muted }}>{g.desc}</span>
          </div>
          <div style={{ border: `1px solid ${C.line}`, borderRadius: 12, overflow: 'hidden', background: C.panel }}>
            {g.files.map((f, i) => (
              <button
                key={f[1]}
                type="button"
                onClick={() => open(f[1], f[0])}
                style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto', alignItems: 'center', gap: 12,
                  width: '100%', textAlign: 'left', cursor: 'pointer', background: 'transparent',
                  border: 'none', borderTop: i ? `1px solid ${C.line}` : 'none', padding: '11px 14px' }}>
                <span style={{ color: C.muted, display: 'grid', placeItems: 'center' }}>
                  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
                </span>
                <span style={{ minWidth: 0 }}>
                  <span style={{ fontFamily: C.mono, fontSize: 13, color: C.ink }}>{f[0]}</span>
                  <span style={{ fontSize: 12.5, color: C.muted, marginLeft: 10 }}>{f[2]}</span>
                </span>
                <span style={{ color: 'var(--fg-light-muted, #A09792)' }}>
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
                </span>
              </button>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}
window.ModelRepoView = ModelRepoView;
window.MODEL_REPO_COUNT = 19;