// ShadowRadar.jsx — Shadow AI Radar visualization (modal)
function ShadowRadar({ open, onClose }) {
  if (!open) return null;
  const governed = [
    { name: "ASK · pod-legal-eu", value: 92, count: "1,402 calls / 24h" },
    { name: "ASK · pod-finance-us", value: 64, count: "837 calls / 24h" },
    { name: "ASK · pod-research-de", value: 78, count: "3,109 calls / 24h" },
  ];
  const shadow = [
    { name: "ext-llm.openai.com", value: 42, count: "184 unauthorized calls" },
    { name: "ext-llm.anthropic.com", value: 18, count: "62 unauthorized calls" },
  ];
  return (
    <div className="ask-modal__scrim" onClick={onClose}>
      <div className="ask-radar" onClick={e => e.stopPropagation()}>
        <div className="ask-radar__head">
          <div>
            <div className="eyebrow">Governance · L0</div>
            <h3 className="ask-radar__title">Shadow AI Radar</h3>
            <p className="ask-radar__sub">Mapping safe vs unauthorized data pathways · last 24 hours</p>
          </div>
          <button className="ask-modal__close" onClick={onClose}><Icon name="x" size={18}/></button>
        </div>

        <div className="ask-radar__panes">
          <section className="ask-radar__pane">
            <div className="ask-radar__pane-head">
              <span className="badge badge-blue">Governed</span>
              <span className="ask-radar__pane-stat">3 pathways · 0 violations</span>
            </div>
            <div className="ask-radar__lanes">
              {governed.map(g => (
                <div key={g.name} className="ask-radar__lane">
                  <div className="ask-radar__lane-name">{g.name}</div>
                  <div className="ask-radar__bar"><div className="ask-radar__bar-fill" style={{ width: g.value + "%", background: "#556DD7" }}></div></div>
                  <div className="ask-radar__lane-meta">{g.count}</div>
                </div>
              ))}
            </div>
          </section>

          <section className="ask-radar__pane">
            <div className="ask-radar__pane-head">
              <span className="badge badge-black">Shadow</span>
              <span className="ask-radar__pane-stat">2 unauthorized streams · escalate</span>
            </div>
            <div className="ask-radar__lanes">
              {shadow.map(s => (
                <div key={s.name} className="ask-radar__lane">
                  <div className="ask-radar__lane-name">{s.name}</div>
                  <div className="ask-radar__bar">
                    <div className="ask-radar__bar-fill hazard-stripes" style={{ width: s.value + "%", border: "1px solid #000" }}></div>
                  </div>
                  <div className="ask-radar__lane-meta">{s.count}</div>
                </div>
              ))}
            </div>
          </section>
        </div>

        <div className="ask-radar__foot">
          <button className="btn btn-secondary btn-sm">Export audit log</button>
          <button className="btn btn-primary btn-sm">Quarantine streams</button>
        </div>
      </div>
    </div>
  );
}
window.ShadowRadar = ShadowRadar;