// Governance & Compliance — posture, policy engine, retention/MDM, DPDP consent.
const COMPLIANCE = [
  { std: "ISO 27001", score: 98, status: "Certified", audit: "Jun 12, 2026" },
  { std: "SOC 2 Type II", score: 96, status: "Attested", audit: "May 30, 2026" },
  { std: "DPDP (India)", score: 94, status: "Compliant", audit: "Jul 01, 2026" },
  { std: "GDPR", score: 92, status: "Compliant", audit: "Apr 18, 2026" },
  { std: "HIPAA", score: 90, status: "Compliant", audit: "Mar 22, 2026" },
];

const POLICIES = [
  { name: "PII Dynamic Masking", scope: "gst_no · pan · aadhaar_ref", type: "Masking", enf: "Query-time", status: "Active", hits: "2.4M/day" },
  { name: "Data Retention — Audit", scope: "audit_log (WORM)", type: "Retention", enf: "7 years", status: "Active", hits: "—" },
  { name: "Row-Level Security", scope: "state analysts → own state", type: "RLS", enf: "Enforced", status: "Active", hits: "18.6K/day" },
  { name: "Encryption at Rest", scope: "all PII datasets", type: "Encryption", enf: "AES-256", status: "Active", hits: "—" },
  { name: "Right to Erasure", scope: "citizen scheme data", type: "DPDP", enf: "Auto-workflow", status: "Active", hits: "142/mo" },
  { name: "Access Recertification", scope: "all privileged roles", type: "Review", enf: "Quarterly", status: "Due · 8d", hits: "—" },
];

const FINDINGS = [
  { sev: "medium", t: "12 stale service accounts not rotated in 90d", owner: "Platform Sec", age: "4d" },
  { sev: "medium", t: "tender_bids_raw missing PII classification tag", owner: "Data Gov.", age: "1d" },
  { sev: "low", t: "3 dashboards shared with expired external links", owner: "Workspace", age: "6d" },
  { sev: "low", t: "Legacy Oracle uses TLS 1.1 — upgrade pending", owner: "Platform", age: "9d" },
];

function Ring({ value, size = 58, color }) {
  const r = size / 2 - 5, c = 2 * Math.PI * r;
  const col = color || (value >= 95 ? "var(--ok)" : value >= 90 ? "var(--primary)" : "var(--accent-2)");
  return (
    <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`}>
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke="var(--panel-3)" strokeWidth="5"/>
      <circle cx={size / 2} cy={size / 2} r={r} fill="none" stroke={col} strokeWidth="5" strokeLinecap="round"
        strokeDasharray={c} strokeDashoffset={c * (1 - value / 100)} transform={`rotate(-90 ${size / 2} ${size / 2})`}/>
      <text x={size / 2} y={size / 2 + 4} fontSize="14" fontWeight="700" fill="var(--ink)" textAnchor="middle" fontFamily="JetBrains Mono">{value}</text>
    </svg>
  );
}

function GovernanceScreen() {
  return (
    <div className="screen">
      <div className="screen-head">
        <div>
          <div className="screen-title">Governance &amp; Compliance</div>
          <div className="screen-sub">Data lineage, policy engine, master data &amp; regulatory posture · <span style={{ color: 'var(--ok)', fontWeight: 600 }}>5 standards attested</span> · 0 critical findings</div>
        </div>
        <div className="screen-actions">
          <button className="btn"><Icon name="download"/>Audit report</button>
          <button className="btn"><Icon name="scale"/>Policy simulator</button>
          <button className="btn primary"><Icon name="plus"/>New policy</button>
        </div>
      </div>

      {/* Compliance posture */}
      <div className="grid" style={{ gridTemplateColumns: 'repeat(5, 1fr)', marginBottom: 14 }}>
        {COMPLIANCE.map((c, i) => (
          <div key={i} className="card" style={{ padding: 14, display: 'flex', alignItems: 'center', gap: 12 }}>
            <Ring value={c.score}/>
            <div style={{ minWidth: 0 }}>
              <div style={{ fontSize: 12.5, fontWeight: 600, whiteSpace: 'nowrap' }}>{c.std}</div>
              <span className="tag ok" style={{ fontSize: 10, marginTop: 3 }}><Icon name="check" size={9}/>{c.status}</span>
              <div style={{ fontSize: 10, color: 'var(--ink-3)', marginTop: 4 }}>{c.audit}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="grid" style={{ gridTemplateColumns: '1.5fr 1fr', marginBottom: 14 }}>
        {/* Policy engine */}
        <div className="card">
          <div className="card-head"><div><h3>Policy Engine</h3><div className="sub">ABAC · enforced at query-time across all sources</div></div><span className="tag ok"><span className="live-dot"/>Enforcing</span></div>
          <div className="card-body" style={{ padding: 0 }}>
            <table className="data">
              <thead><tr><th>Policy</th><th>Scope</th><th>Type</th><th>Enforcement</th><th>Status</th></tr></thead>
              <tbody>
                {POLICIES.map((p, i) => (
                  <tr key={i}>
                    <td><div style={{ display: 'flex', alignItems: 'center', gap: 8, fontWeight: 500 }}><Icon name={p.type === 'Masking' ? 'eye' : p.type === 'Encryption' ? 'lock' : p.type === 'RLS' ? 'shield' : p.type === 'DPDP' ? 'trash' : p.type === 'Retention' ? 'clock' : 'key'} size={13} style={{ color: 'var(--primary)' }}/>{p.name}</div><div className="mono" style={{ fontSize: 10, color: 'var(--ink-4)', marginLeft: 21 }}>{p.hits !== '—' ? p.hits : ''}</div></td>
                    <td className="small mono" style={{ color: 'var(--ink-2)' }}>{p.scope}</td>
                    <td><span className="tag" style={{ fontSize: 10 }}>{p.type}</span></td>
                    <td className="small" style={{ color: 'var(--ink-2)' }}>{p.enf}</td>
                    <td><span className={`tag ${p.status === 'Active' ? 'ok' : 'warn'}`}>{p.status}</span></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        <div className="vstack">
          <div className="card">
            <div className="card-head" style={{ padding: '10px 12px' }}><h3 style={{ fontSize: 12 }}>Data Classification</h3></div>
            <div className="card-body" style={{ padding: 12 }}>
              <Donut data={[{ label: "Public", value: 48 }, { label: "Internal", value: 32 }, { label: "Confidential", value: 14 }, { label: "Restricted (PII)", value: 6 }]} w={120} colors={["var(--ok)", "var(--info)", "var(--accent)", "var(--danger)"]} centerLabel="142" centerSub="datasets"/>
            </div>
          </div>
          <div className="card">
            <div className="card-head" style={{ padding: '10px 12px' }}><div><h3 style={{ fontSize: 12 }}>Open Findings</h3></div><span className="tag warn" style={{ fontSize: 10 }}>4 open · 0 critical</span></div>
            <div className="card-body" style={{ padding: 0 }}>
              {FINDINGS.map((f, i) => (
                <div key={i} style={{ padding: '9px 12px', borderTop: i ? '1px solid var(--border)' : 0, display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                  <span className={`tag ${f.sev === 'medium' ? 'warn' : ''}`} style={{ fontSize: 9.5, flexShrink: 0, marginTop: 1 }}>{f.sev}</span>
                  <div style={{ flex: 1 }}><div style={{ fontSize: 11.5, color: 'var(--ink)', lineHeight: 1.4 }}>{f.t}</div><div style={{ fontSize: 10.5, color: 'var(--ink-3)', marginTop: 2 }}>{f.owner} · {f.age}</div></div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>

      {/* Lineage + MDM/retention/consent */}
      <div className="grid" style={{ gridTemplateColumns: '1fr 1fr', marginBottom: 14 }}>
        <div className="card">
          <div className="card-head"><div><h3>End-to-End Data Lineage</h3><div className="sub">Column-level · impact analysis · source → report</div></div><span className="tag primary" style={{ fontSize: 10 }}><Icon name="sparkles" size={10}/>Auto</span></div>
          <div className="card-body">
            <svg viewBox="0 0 480 150" width="100%">
              <defs><marker id="lgarrow" markerWidth="7" markerHeight="7" refX="6" refY="3" orient="auto"><path d="M0 0 L6 3 L0 6 Z" fill="var(--border-strong)"/></marker></defs>
              {[[92, 40, 150, 75], [92, 110, 150, 75], [212, 75, 270, 75], [332, 75, 390, 45], [332, 75, 390, 105]].map((e, i) => (
                <path key={i} d={`M ${e[0]} ${e[1]} C ${(e[0] + e[2]) / 2} ${e[1]}, ${(e[0] + e[2]) / 2} ${e[3]}, ${e[2]} ${e[3]}`} stroke="var(--border-strong)" strokeWidth="1.4" fill="none" markerEnd="url(#lgarrow)"/>
              ))}
              {[
                { x: 20, y: 28, l: "GeM API", c: "var(--panel-2)", t: "var(--ink)" },
                { x: 20, y: 98, l: "Postgres", c: "var(--panel-2)", t: "var(--ink)" },
                { x: 152, y: 62, l: "etl.ingest", c: "var(--primary-tint)", t: "var(--primary)" },
                { x: 272, y: 62, l: "gem_txns", c: "var(--accent-tint)", t: "var(--accent-2)" },
                { x: 392, y: 30, l: "exec_dash", c: "var(--panel-2)", t: "var(--ink)" },
                { x: 392, y: 92, l: "ai_copilot", c: "var(--panel-2)", t: "var(--ink)" },
              ].map((n, i) => (
                <g key={i}><rect x={n.x} y={n.y} width="72" height="26" rx="5" fill={n.c} stroke="var(--border-strong)"/><text x={n.x + 36} y={n.y + 16} fontSize="9.5" fill={n.t} textAnchor="middle" fontFamily="JetBrains Mono" fontWeight="600">{n.l}</text></g>
              ))}
            </svg>
            <div style={{ fontSize: 11, color: 'var(--ink-3)', textAlign: 'center', marginTop: 6 }}>Changing <span className="mono" style={{ color: 'var(--primary)' }}>gem_txns.order_value</span> impacts <b>2 reports · 1 model</b></div>
          </div>
        </div>

        <div className="card">
          <div className="card-head"><div><h3>Master Data &amp; Retention</h3><div className="sub">Golden records · DPDP retention schedule</div></div></div>
          <div className="card-body" style={{ padding: 0 }}>
            {[
              { icon: "users", t: "Vendor golden records", v: "2.38 M", s: "match rate 99.2% · 4.2K merges/mo" },
              { icon: "database", t: "Duplicate suspects", v: "412", s: "AI-flagged · pending steward review" },
              { icon: "clock", t: "PII retention", v: "auto", s: "erase 30d post-purpose · DPDP §8" },
              { icon: "shield", t: "Consent artefacts", v: "1.2 M", s: "captured · withdrawable · audited" },
            ].map((r, i) => (
              <div key={i} style={{ padding: '11px 14px', borderTop: i ? '1px solid var(--border)' : 0, display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--panel-2)', border: '1px solid var(--border)', display: 'grid', placeItems: 'center', flexShrink: 0 }}><Icon name={r.icon} size={15} style={{ color: 'var(--primary)' }}/></div>
                <div style={{ flex: 1 }}><div style={{ fontSize: 12.5, fontWeight: 500 }}>{r.t}</div><div style={{ fontSize: 11, color: 'var(--ink-3)' }}>{r.s}</div></div>
                <div className="mono" style={{ fontSize: 14, fontWeight: 600, color: 'var(--primary)' }}>{r.v}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <div className="ai-strip">
        <div className="glyph"><Icon name="shield"/></div>
        <div style={{ flex: 1 }}>
          <div className="title">Governance copilot <span className="tag ok">Posture: Strong</span></div>
          <div className="body">All 5 frameworks are green. The only time-bound item is <b>quarterly access recertification (due in 8 days)</b> covering 133 privileged users. Auto-generate the review pack and route to managers?</div>
          <div className="actions"><button className="btn sm"><Icon name="checkSquare" size={12}/>Generate review pack</button><button className="btn sm"><Icon name="eye" size={12}/>View evidence</button></div>
        </div>
      </div>
    </div>
  );
}

window.GovernanceScreen = GovernanceScreen;