// Screens 3 + 4 — Profile + Dashboard (tab-aware; shell handles header)

function Screen3_Profile({ role, ksOn, onToggleKS, onNext, activeTab }) {
  const p = PROFILES[role];
  if (activeTab === 'equipment')  return <div className="mf-screen-inner"><ProfileExtras_Equipment role={role} /></div>;
  if (activeTab === 'certs')      return <div className="mf-screen-inner"><ProfileExtras_Certs role={role} /></div>;
  if (activeTab === 'audit')      return <div className="mf-screen-inner"><ProfileExtras_Audit role={role} /></div>;
  if (activeTab === 'knowledge')  return <ProfileKnowledge role={role} ksOn={ksOn} onToggleKS={onToggleKS} />;

  // default: capabilities
  return (
    <div className="mf-screen-inner">
      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 28 }}>
        <div>
          <div className="mono-lbl" style={{ marginBottom: 8 }}>§ 3.1 · Capabilities</div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', border: '1px solid var(--line)', marginBottom: 22 }}>
            {[
              ['Processes', p.processes.join(' · ')],
              ['Materials', p.materials.join(' · ')],
              ['Work envelope', p.envelope],
              ['Tolerance', p.tolerance],
            ].map(([k, v], i) => (
              <div key={k} style={{
                padding: '12px 14px',
                borderRight: i % 2 === 0 ? '1px solid var(--line)' : 'none',
                borderBottom: i < 2 ? '1px solid var(--line)' : 'none',
                background: 'var(--paper)',
              }}>
                <div className="mono-lbl" style={{ marginBottom: 4 }}>{k}</div>
                <div className="mono" style={{ fontSize: 12.5 }}>{v}</div>
              </div>
            ))}
          </div>

          <div className="mono-lbl" style={{ marginBottom: 8 }}>§ 3.2 · Certifications (summary · see tab for detail)</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 22 }}>
            {p.certifications.map(c => (
              <span key={c} className="chip ghost" style={{ fontSize: 11 }}>
                <svg width="10" height="10" viewBox="0 0 10 10" style={{ marginRight: 2 }}>
                  <path d="M2 5 L4 7 L8 3" stroke="currentColor" strokeWidth="1.4" fill="none" />
                </svg>{c}
              </span>
            ))}
          </div>

          <div className="mono-lbl" style={{ marginBottom: 8 }}>§ 3.3 · Constraints & commercial</div>
          <ul style={{ margin: 0, paddingLeft: 18, fontSize: 13, color: 'var(--ink-2)', lineHeight: 1.7 }}>
            {p.constraints.map(c => <li key={c}>{c}</li>)}
            <li>Preferred engagement: recurring programs ≥ 6 months</li>
            <li>Min batch: 4 units · max batch: 500 units without re-quote</li>
            <li>Consignment material accepted on AS9100 programs</li>
          </ul>

          <div style={{ marginTop: 22, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
            {[
              ['Owner',    'Joana Mendes', 'ops@ardent-pw.com'],
              ['Backup',   'R. Kowalski',  'qa@ardent-pw.com'],
              ['Escrow',   'Brex Treasury', 'acct ••••4182'],
            ].map(([k, who, extra]) => (
              <div key={k} style={{ padding: '10px 12px', background: 'var(--paper)', border: '1px solid var(--line)' }}>
                <div className="mono-lbl">{k}</div>
                <div style={{ fontSize: 13, fontWeight: 500, marginTop: 2 }}>{who}</div>
                <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 2 }}>{extra}</div>
              </div>
            ))}
          </div>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <div className="card">
            <div className="card-head">
              <span className="mono-lbl">Capacity · next 90d</span>
              <span style={{ flex: 1 }} />
              <span className="chip ghost">confidential</span>
            </div>
            <div className="card-body">
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8 }}>
                <span className="mono" style={{ fontSize: 24, fontWeight: 500 }}>{p.capacity.current}%</span>
                <span className="mono-lbl">committed · {p.capacity.pipeline}% w/ pipeline</span>
              </div>
              <div style={{ height: 8, background: 'var(--paper-3)', marginBottom: 8, position: 'relative' }}>
                <div style={{ position: 'absolute', inset: 0, width: `${p.capacity.current}%`, background: 'linear-gradient(90deg, var(--ok), var(--warn) 80%, var(--miss))' }} />
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, fontSize: 10, fontFamily: 'var(--mono)', color: 'var(--ink-3)' }}>
                <div>May · 71%</div><div>Jun · 68%</div><div>Jul · 54%</div>
              </div>
            </div>
          </div>

          <div style={{
            padding: '14px 16px',
            background: ksOn ? 'var(--accent-soft)' : 'var(--paper-2)',
            border: `1px solid ${ksOn ? 'rgba(194,65,12,0.3)' : 'var(--line)'}`,
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
              <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',
                }} />
              </div>
              <div>
                <div className="mono" style={{ fontSize: 12, fontWeight: 600 }}>KnowledgeSlot</div>
                <div style={{ fontSize: 11, color: 'var(--ink-3)' }}>
                  {ksOn ? 'ON · 2 prompts in flight' : 'OFF · baseline only'}
                </div>
              </div>
            </div>
          </div>

          <div style={{ background: 'var(--paper)', border: '1px solid var(--line)', padding: 12 }}>
            <div className="mono-lbl" style={{ marginBottom: 8 }}>Last 5 changes</div>
            {[
              ['08:12', 'twin.sync'],
              ['07:40', 'ks.apply · surface finish'],
              ['Yday', 'profile.update · new asset M-04'],
              ['Yday', 'cert.verify · AS9100D rev D'],
              ['3d ago','capacity.adjust · Q3 62%'],
            ].map(([t, e], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '54px 1fr', fontFamily: 'var(--mono)', fontSize: 10.5, padding: '4px 0', borderBottom: i < 4 ? '1px dashed var(--line)' : 'none', color: 'var(--ink-3)' }}>
                <span>{t}</span><span style={{ color: 'var(--ink-2)' }}>{e}</span>
              </div>
            ))}
          </div>

          <button className="mf-btn primary" onClick={onNext}>Continue to dashboard →</button>
        </div>
      </div>
    </div>
  );
}

function ProfileKnowledge({ role, ksOn, onToggleKS }) {
  const p = PROFILES[role];
  return (
    <div className="mf-screen-inner">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 320px', gap: 28 }}>
        <div>
          <div className="mono-lbl" style={{ marginBottom: 10 }}>Active prompts</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10, marginBottom: 18 }}>
            {p.incomplete.map(item => (<KnowledgePrompt key={item.field} item={item} />))}
          </div>
          <div className="mono-lbl" style={{ marginBottom: 10 }}>Ontology grounding · domain classes</div>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 6 }}>
            {['aerospace.fasteners','aerospace.brackets','mil.airframe','medical.orthopedic','process.5-axis','process.wire-edm','material.inconel-718','material.ti-6al-4v','tolerance.tight','tolerance.moderate','finish.ra32','finish.ra16','cert.as9100','cert.itar','cert.nadcap','inspection.cmm','inspection.scan','inspection.fai'].map(t => (
              <span key={t} className="mono" style={{ fontSize: 10, padding: '3px 7px', background: 'var(--paper-2)', border: '1px solid var(--line)', color: 'var(--ink-2)' }}>{t}</span>
            ))}
          </div>
        </div>
        <div>
          <div style={{ padding: '14px 16px', background: ksOn ? 'var(--accent-soft)' : 'var(--paper-2)', border: `1px solid ${ksOn ? 'rgba(194,65,12,0.3)' : 'var(--line)'}` }}>
            <div className="mono-lbl" style={{ marginBottom: 8 }}>Toggle enhancement</div>
            <div onClick={onToggleKS} style={{ display: 'flex', alignItems: 'center', gap: 10, cursor: 'pointer' }}>
              <div style={{ width: 40, height: 22, borderRadius: 11, background: ksOn ? 'var(--accent)' : 'var(--ink-4)', position: 'relative' }}>
                <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' }} />
              </div>
              <span style={{ fontSize: 12 }}>{ksOn ? 'ON · enhanced' : 'OFF · baseline'}</span>
            </div>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', marginTop: 8, lineHeight: 1.5 }}>
              Enhanced profiles unlock additional match signals without exposing proprietary data.
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

// --- Screen 4 — Dashboard -------------------------------------

function Screen4_Dashboard({ role, ksOn, onOpenMatch, activeTab }) {
  if (activeTab === 'candidates') return <div className="mf-screen-inner"><DashboardExtras_Candidates role={role} /></div>;
  if (activeTab === 'feed')       return <div className="mf-screen-inner"><DashboardExtras_Feed /></div>;

  // pipeline (default)
  const p = PROFILES[role];
  const cp = COUNTERPARTIES[role];
  const signals = SIGNALS[role];
  const confidence = computeConfidence(signals, ksOn);

  const secondary = [
    { id: 'MF-2026-04-0412', cp, confidence, primary: true, since: '02m' },
    { id: 'MF-2026-04-0388', cp: { callsign: cp.callsign.replace(/\d+/, x => String(+x - 17)), role: cp.role, summary: 'Smaller recurring program, adjacent material.' }, confidence: Math.max(42, confidence - 24), primary: false, since: '14m' },
    { id: 'MF-2026-04-0361', cp: { callsign: cp.callsign.replace(/\d+/, x => String(+x - 33)), role: cp.role, summary: 'Prototype lot, non-recurring, tight window.' }, confidence: Math.max(38, confidence - 36), primary: false, since: '47m' },
  ];

  return (
    <div className="mf-screen-inner">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, border: '1px solid var(--line)', marginBottom: 20 }}>
        {[
          ['Capacity booked', `${p.capacity.current}%`, `${p.capacity.pipeline}% w/ pipeline`, 'ok'],
          ['Active matches', '14',    'bidirectional', 'info'],
          ['Top confidence',`${confidence}/100`, ksOn ? 'KS on' : 'baseline', confidence >= 80 ? 'ok' : 'warn'],
          ['Pending reveal', '1',       'identity gated', 'accent'],
        ].map(([k, v, sub, chip], i) => (
          <div key={k} style={{ padding: '12px 14px', borderRight: i < 3 ? '1px solid var(--line)' : 'none', background: 'var(--paper)' }}>
            <div className="mono-lbl" style={{ marginBottom: 6 }}>{k}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
              <span className="mono" style={{ fontSize: 22, fontWeight: 500 }}>{v}</span>
              <span className={`chip ${chip}`} style={{ fontSize: 9 }}>{sub}</span>
            </div>
          </div>
        ))}
      </div>

      <div className="mono-lbl" style={{ marginBottom: 8 }}>§ 4.1 · Pipeline (top matches)</div>
      <div style={{ border: '1px solid var(--line)', background: 'var(--paper)' }}>
        {secondary.map((m, i) => (
          <button key={m.id} onClick={m.primary ? onOpenMatch : undefined}
            style={{
              display: 'grid',
              gridTemplateColumns: '150px 1fr 90px 140px 100px',
              gap: 14, alignItems: 'center', padding: '14px 16px',
              background: 'transparent', border: 'none',
              borderTop: i > 0 ? '1px solid var(--line)' : 'none',
              width: '100%', textAlign: 'left',
              cursor: m.primary ? 'pointer' : 'default',
              fontFamily: 'inherit', opacity: m.primary ? 1 : 0.7,
            }}>
            <div>
              <div className="mono" style={{ fontSize: 11 }}>{m.id}</div>
              <div className="mono-lbl" style={{ marginTop: 2 }}>{m.cp.role} · {m.since}</div>
            </div>
            <div>
              <div className="mono" style={{ fontSize: 12 }}><span className="redacted">{m.cp.callsign}</span></div>
              <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 2 }}>{m.cp.summary}</div>
            </div>
            <div>
              <span className={`chip ${m.confidence >= 80 ? 'ok' : m.confidence >= 60 ? 'warn' : 'miss'}`}>
                {m.confidence >= 80 ? 'High' : m.confidence >= 60 ? 'Medium' : 'Low'}
              </span>
            </div>
            <div>
              <div style={{ height: 4, background: 'var(--paper-3)', position: 'relative', marginBottom: 4 }}>
                <div style={{ position: 'absolute', inset: 0, width: `${m.confidence}%`, background: m.confidence >= 80 ? 'var(--ok)' : m.confidence >= 60 ? 'var(--warn)' : 'var(--miss)' }} />
              </div>
              <div className="mono" style={{ fontSize: 10, color: 'var(--ink-3)' }}>{m.confidence}/100</div>
            </div>
            <div style={{ textAlign: 'right' }}>
              {m.primary
                ? <span className="mono-lbl" style={{ color: 'var(--accent)' }}>open →</span>
                : <span className="mono-lbl" style={{ color: 'var(--ink-4)' }}>queued</span>}
            </div>
          </button>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Screen3_Profile, Screen4_Dashboard });