// Screen 5 — Match Report (tab-aware)

function Screen5_Match({ role, ksOn, onToggleKS, onNext, activeTab }) {
  if (activeTab === 'provenance') return <Match_Provenance role={role} ksOn={ksOn} />;
  if (activeTab === 'ledger')     return <div className="mf-screen-inner"><MatchExtras_Ledger /></div>;

  const p = PROFILES[role];
  const cp = COUNTERPARTIES[role];
  const comparison = COMPARISONS[role];
  const signals = SIGNALS[role];
  const narrative = NARRATIVES[role];

  const confidenceFull = computeConfidence(signals, true);
  const confidenceBase = computeConfidence(signals, false);
  const confidence = ksOn ? confidenceFull : confidenceBase;
  const delta = confidenceFull - confidenceBase;

  const [expandedRows, setExpandedRows] = React.useState({});
  const toggleRow = (i) => setExpandedRows(s => ({ ...s, [i]: !s[i] }));

  return (
    <div className="mf-screen-inner">
      <div style={{
        background: 'var(--ink)', color: 'var(--paper)',
        padding: '20px 28px', marginBottom: 22,
        display: 'grid', gridTemplateColumns: '1fr 180px 1fr', gap: 24, alignItems: 'center',
        position: 'relative',
      }}>
        <CornerTicks color="var(--paper-3)" />
        <div style={{ textAlign: 'right' }}>
          <div className="mono-lbl" style={{ color: 'rgba(247,245,239,0.5)' }}>You</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 4 }}>{p.name}</div>
          <div className="mono" style={{ fontSize: 11, color: 'rgba(247,245,239,0.7)', marginTop: 2 }}>
            {p.callsign} · {p.role}
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 0, fontFamily: 'var(--mono)', fontSize: 10, letterSpacing: '0.12em', color: 'rgba(247,245,239,0.55)' }}>
            <span>SUPPLY</span>
            <svg width="50" height="12" viewBox="0 0 50 12" style={{ margin: '0 6px' }}>
              <line x1="0" y1="6" x2="50" y2="6" stroke="var(--accent)" strokeWidth="1" strokeDasharray="3 2" />
              <circle cx="25" cy="6" r="3" fill="var(--accent)" />
            </svg>
            <span>DEMAND</span>
          </div>
          <div style={{ fontFamily: 'var(--mono)', fontSize: 10, color: 'rgba(247,245,239,0.5)' }}>
            mutual evaluation
          </div>
        </div>
        <div>
          <div className="mono-lbl" style={{ color: 'rgba(247,245,239,0.5)' }}>Them</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 18, marginTop: 4 }}>
            <span className="redacted">{cp.revealedName}</span>
          </div>
          <div className="mono" style={{ fontSize: 11, color: 'rgba(247,245,239,0.7)', marginTop: 2 }}>
            {cp.callsign} · {cp.role}
          </div>
        </div>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.6fr 1fr', gap: 24 }}>
        <div>
          <div className="mono-lbl" style={{ marginBottom: 8 }}>§ 5.1 · Capability comparison</div>
          <div style={{ border: '1px solid var(--line)', background: 'var(--paper)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '140px 1fr 1fr 120px 20px', gap: 10, padding: '10px 14px', background: 'var(--paper-2)', borderBottom: '1px solid var(--line)' }}>
              <span className="mono-lbl">Parameter</span>
              <span className="mono-lbl">Your side</span>
              <span className="mono-lbl">Their side</span>
              <span className="mono-lbl">Fit</span>
              <span />
            </div>
            {comparison.map((row, i) => {
              const expanded = expandedRows[i];
              // Apply KS overrides if KS is ON and this row has KS data
              const isKSRow = !!row.ksYou;
              const activeYou = (ksOn && isKSRow) ? row.ksYou : row.you;
              const activeStatus = (ksOn && isKSRow) ? row.ksStatus : row.status;
              const activeNote = (ksOn && isKSRow) ? row.ksNote : row.note;
              
              // Determine if this row is currently in an 'unknown' state requiring KS
              const isCurrentlyUnknown = activeStatus === 'unknown';
              
              // Color coding for the "type" badge (Hard, Pref, Comm)
              const typeColor = row.type === 'hard' ? 'var(--miss)' : row.type === 'pref' ? 'var(--info)' : 'var(--ink-4)';
              const typeLabel = row.type === 'hard' ? 'REQ' : row.type === 'pref' ? 'PREF' : 'COMM';

              return (
                <div key={row.param} style={{ borderTop: i > 0 ? '1px solid var(--line)' : 'none' }}>
                  <button onClick={() => toggleRow(i)}
                    style={{
                      display: 'grid', gridTemplateColumns: '140px 1fr 1fr 120px 20px',
                      gap: 10, padding: '12px 14px', width: '100%', textAlign: 'left',
                      background: isCurrentlyUnknown ? 'var(--accent-soft)' : (ksOn && isKSRow ? 'rgba(194,65,12,0.05)' : 'transparent'),
                      border: 'none', cursor: 'pointer', fontFamily: 'inherit', alignItems: 'center',
                      transition: 'background 300ms ease',
                    }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
                       <span style={{ fontSize: 9, fontFamily: 'var(--mono)', fontWeight: 600, background: typeColor, color: '#fff', padding: '2px 4px', borderRadius: 2, lineHeight: 1 }}>{typeLabel}</span>
                       <div className="mono" style={{ fontSize: 12, color: 'var(--ink)', fontWeight: 500 }}>{row.param}</div>
                    </div>
                    <div style={{ fontSize: 12.5, color: activeYou !== row.you ? 'var(--accent-ink)' : 'var(--ink-2)', fontWeight: activeYou !== row.you ? 600 : 400, transition: 'color 300ms' }}>{activeYou}</div>
                    <div style={{ fontSize: 12.5, color: 'var(--ink-2)' }}>{row.them}</div>
                    <div><StatusChip status={activeStatus} /></div>
                    <div style={{ transform: expanded ? 'rotate(90deg)' : 'rotate(0deg)', transition: 'transform 180ms', color: 'var(--ink-4)', fontSize: 10 }}>▶</div>
                  </button>
                  {expanded && (
                    <div className="fade-row" style={{ padding: '0 14px 14px', display: 'grid', gridTemplateColumns: '140px 1fr', gap: 10, fontSize: 12, color: 'var(--ink-2)', background: isCurrentlyUnknown ? 'var(--accent-soft)' : 'var(--paper-2)', paddingTop: 2 }}>
                      <span className="mono-lbl" style={{ paddingTop: 4 }}>Analysis</span>
                      <div>
                        <div style={{ marginBottom: 6 }}>{activeNote}</div>
                        {isCurrentlyUnknown ? (
                          <div className="mono-lbl" style={{ color: 'var(--accent-ink)' }}>
                            ◆ KnowledgeSlot is holding this signal open — enhance the profile to close it.
                          </div>
                        ) : (
                          <div className="mono-lbl" style={{ color: 'var(--ink-3)' }}>
                            {ksOn && isKSRow ? '◆ KnowledgeSlot enhanced signal · contributes to confidence' : 'evaluated from both sides · contributes to confidence'}
                          </div>
                        )}
                      </div>
                    </div>
                  )}
                </div>
              );
            })}
          </div>

          <div style={{ marginTop: 28 }}>
            <div className="mono-lbl" style={{ marginBottom: 8 }}>§ 5.3 · Match narrative — generated by Cosolvent</div>
            <div style={{ fontFamily: 'var(--serif)', fontSize: 17, lineHeight: 1.55, color: 'var(--ink)', marginBottom: 12, letterSpacing: '-0.005em', textWrap: 'pretty' }}>
              {narrative.headline}
            </div>
            {narrative.paragraphs.map((para, i) => (
              <p key={i} style={{ fontSize: 13.5, lineHeight: 1.65, color: 'var(--ink-2)', margin: '0 0 10px', textWrap: 'pretty' }}>
                {para}
              </p>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
          <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: '20px 20px 16px', position: 'relative' }}>
            <CornerTicks />
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
              <span className="mono-lbl">§ 5.2 Mutual confidence</span>
              <span className="mono-lbl" style={{ color: 'var(--ink-3)' }}>{ksOn ? 'KS on' : 'KS off'}</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
              <ConfidenceRing value={confidence} size={150} stroke={12} label={ksOn ? 'enhanced' : 'baseline'} delta={ksOn ? delta : null} />
            </div>
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '10px 12px', marginBottom: 14, border: '1px solid var(--line)', background: 'var(--paper-2)' }}>
              <div>
                <div className="mono-lbl">Toggle enhancement</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 2 }}>
                  See delta: <span className="mono">{confidenceBase}</span> → <span className="mono">{confidenceFull}</span>
                </div>
              </div>
              <div onClick={onToggleKS} style={{ width: 40, height: 22, borderRadius: 11, background: ksOn ? 'var(--accent)' : 'var(--ink-4)', position: 'relative', cursor: 'pointer', flexShrink: 0, transition: 'background 200ms' }}>
                <div style={{ position: 'absolute', top: 3, left: 3, width: 16, height: 16, background: '#fff', borderRadius: '50%', transform: ksOn ? 'translateX(18px)' : 'translateX(0)', transition: 'transform 200ms cubic-bezier(.2,.6,.2,1)' }} />
              </div>
            </div>
            <div className="mono-lbl" style={{ marginBottom: 6 }}>Signal breakdown</div>
            <div>
              {signals.map(s => (
                <SignalBar key={s.label} label={s.label} value={ksOn ? s.scoreFull : s.scoreBase} max={s.weight} weight={s.weight}
                  tip={`Evaluated bidirectionally — both sides contribute to this signal. Weighted at ${s.weight} of 100.`} />
              ))}
            </div>
          </div>

          <div style={{ padding: '12px 14px', background: 'var(--paper-2)', border: '1px solid var(--line)', fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.55 }}>
            <span className="mono-lbl" style={{ color: 'var(--accent)' }}>◆ mutuality</span>
            <span style={{ display: 'block', marginTop: 6 }}>
              Every signal is scored from both perspectives. A match requires supply to clear demand <em>and</em> demand to clear supply.
            </span>
          </div>

          <button className="mf-btn primary" onClick={onNext}>Request identity reveal →</button>
        </div>
      </div>
    </div>
  );
}

function Match_Provenance({ role, ksOn }) {
  return (
    <div className="mf-screen-inner">
      <div className="mono-lbl" style={{ marginBottom: 10 }}>§ 5.4 · Match provenance — pipeline trace</div>
      <MatchExtras_Provenance />
      <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: 16 }}>
          <div className="mono-lbl" style={{ marginBottom: 8 }}>Compute · Cosolvent run 8A2C</div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, fontSize: 12 }}>
            <div><span className="mono-lbl">walltime</span><div className="mono">8.214 s</div></div>
            <div><span className="mono-lbl">pair evaluations</span><div className="mono">2,401,088</div></div>
            <div><span className="mono-lbl">threshold</span><div className="mono">70 / 100</div></div>
            <div><span className="mono-lbl">surfaced</span><div className="mono">14</div></div>
            <div><span className="mono-lbl">KnowledgeSlot</span><div className="mono">{ksOn ? 'applied' : 'bypassed'}</div></div>
            <div><span className="mono-lbl">narrator tokens</span><div className="mono">187</div></div>
          </div>
        </div>
        <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: 16 }}>
          <div className="mono-lbl" style={{ marginBottom: 8 }}>Provenance hash</div>
          <div className="mono" style={{ fontSize: 11, color: 'var(--ink-3)', wordBreak: 'break-all', lineHeight: 1.6 }}>
            sha256:0412·a8c4e1d9f27b·3e5f0a1c·cosolvent@7.4 · policy@v2 · ks@2.1 · twin@2026-04-22T08:04Z
          </div>
          <div style={{ marginTop: 10, fontSize: 11.5, color: 'var(--ink-2)', lineHeight: 1.6 }}>
            Every surfaced match carries a signed provenance record — replayable off-twin for audit, dispute, or model-card review.
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Screen5_Match });