// screen_detail.jsx — Vulnerability detail (adaptive: automotive vs IoT) + remediation workflow
const WORKFLOW = ["new", "triaged", "in-progress", "remediated"];

function StatusWorkflow({ status, onSet }) {
  const idx = WORKFLOW.indexOf(status);
  const accepted = status === "accepted";
  return (
    <div className="wf">
      <div className="wf-track">
        {WORKFLOW.map((s, i) => {
          const done = !accepted && i < idx;
          const cur = !accepted && i === idx;
          return (
            <React.Fragment key={s}>
              <button className={"wf-node" + (done ? " is-done" : "") + (cur ? " is-cur" : "")}
                onClick={() => onSet(s)} title={"Set " + STATUS_META[s].label}>
                <span className="wf-dot">{done ? <Icon name="check" size={13} /> : <span className="wf-dot-i" style={{ background: cur ? STATUS_META[s].dot : "transparent" }} />}</span>
                <span className="wf-lab">{STATUS_META[s].label}</span>
              </button>
              {i < WORKFLOW.length - 1 && <span className={"wf-line" + (!accepted && i < idx ? " is-done" : "")} />}
            </React.Fragment>
          );
        })}
      </div>
      <button className={"wf-accept" + (accepted ? " is-on" : "")} onClick={() => onSet(accepted ? "new" : "accepted")}>
        <span className="statuspill-dot" style={{ background: STATUS_META.accepted.dot }} />
        {accepted ? "Risk accepted" : "Accept risk"}
      </button>
    </div>
  );
}

function Field({ label, children, wide, mono }) {
  return (
    <div className={"fld" + (wide ? " fld-wide" : "")}>
      <span className="fld-lab">{label}</span>
      <span className={"fld-val" + (mono ? " mono" : "")}>{children}</span>
    </div>
  );
}

function Section({ icon, title, kicker, children, tone }) {
  return (
    <section className="dsec">
      <div className="dsec-head">
        <span className={"dsec-ic" + (tone ? " dsec-ic-" + tone : "")}><Icon name={icon} size={16} /></span>
        <h3>{title}</h3>
        {kicker && <span className="dsec-kick">{kicker}</span>}
      </div>
      <div className="dsec-body">{children}</div>
    </section>
  );
}

function CvssGauge({ cvss, sev }) {
  const pct = cvss / 10;
  const r = 52, c = Math.PI * r; // semicircle
  return (
    <div className="gauge">
      <svg viewBox="0 0 130 78" width="100%">
        <path d="M13 70 A52 52 0 0 1 117 70" fill="none" stroke="var(--line)" strokeWidth="11" strokeLinecap="round" />
        <path d="M13 70 A52 52 0 0 1 117 70" fill="none" stroke={`var(--sev-${sev.toLowerCase()})`} strokeWidth="11" strokeLinecap="round"
          strokeDasharray={`${pct * c} ${c}`} style={{ transition: "stroke-dasharray .7s ease" }} />
      </svg>
      <div className="gauge-center">
        <span className={"gauge-num sev-text-" + sev.toLowerCase()}>{cvss.toFixed(1)}</span>
        <span className="gauge-lab">CVSS v3.1</span>
      </div>
    </div>
  );
}

/* EPSS meter — probability [0..1] of exploitation in the wild within 30 days
   (FIRST.org feed). Rows outside the backfill have epss_score null and render
   "Not scored" — never 0, since a genuine 0.00x score is meaningful signal. */
function EpssMeter({ score }) {
  const scored = score != null;
  return (
    <div className="epss">
      <div className="epss-head">
        <span className="epss-lab">EPSS · exploit probability</span>
        <b className={"epss-num mono" + (scored ? "" : " epss-none")}>
          {scored ? score : "Not Available"}
        </b>
      </div>
      <div className="epss-bar">
        {scored && <span style={{ width: Math.max(score * 100, 1.5) + "%" }} />}
      </div>
      {!scored &&
        <span className="epss-note">This entry is not covered by the EPSS feed.</span>}
    </div>
  );
}

function Detail({ v: initialV, statusOf, setStatus, onBack, onOpen, backLabel }) {
  // The detail page owns its own endpoint: one record + its related items by id.
  // The clicked record is already a full catalog object, so it renders immediately
  // while /api/detail/{id} fills in the "related" list.
  const { data } = useApi((signal) => window.VCApi.detail(initialV.id, signal), [initialV.id]);
  const v = (data && data.vuln) || initialV;
  const related = (data && data.related) || [];
  const st = statusOf(v);
  const auto = v.kind === "automotive";
  // Enrichment completeness = share of analysis fields actually populated (dynamic).
  const enrich = useMemo(() => {
    const fields = [v.attack_path, v.damage_scenario, v.countermeasures, v.tools_used,
      v.feasibility, v.types_of_attack, v.level_of_attack, v.impact,
      v.cia && (v.cia.c === "High" || v.cia.i === "High" || v.cia.a === "High") ? "y" : ""];
    const filled = fields.filter(x => x && String(x).trim() && String(x).trim() !== "—").length;
    return Math.round(filled / fields.length * 100);
  }, [v]);

  return (
    <div className="page detail">
      <button className="back" onClick={onBack}><Icon name="chevR" size={15} style={{ transform: "rotate(180deg)" }} />{backLabel || "Ledger"}</button>

      <div className="detail-head">
        <div className="detail-head-main">
          <div className="detail-id-row">
            <SeverityTag s={v.severity} cvss={v.cvss} />
            <span className="detail-src">via {v.source}</span>
          </div>
          <h1 className="detail-id mono">{v.id}</h1>
          <p className="detail-desc">{v.description}</p>
          <div className="detail-tags">
            <span className="dtag"><Icon name="chip" size={13} />{auto ? v.ecu : v.product_name}</span>
            <span className="dtag"><Icon name="link" size={13} />{v.interface || v.protocol}</span>
            <span className="dtag"><Icon name="layers" size={13} />{v.supplier}</span>
            <span className="dtag mono">{v.published}</span>
          </div>
        </div>
      </div>

      {/* workflow bar */}
      <div className="card wf-card">
        <div className="wf-card-l">
          <span className="wf-card-lab">Remediation status</span>
          <StatusWorkflow status={st} onSet={(s) => setStatus(v.id, s)} />
        </div>
        <div className="wf-card-r">
          <button className="btn btn-ghost btn-sm" onClick={() => setStatus(v.id, st === "triaged" ? "in-progress" : "triaged")}><Icon name="flag" size={14} />{st === "triaged" || st === "in-progress" ? "Advance" : "Assign"}</button>
          <button className="btn btn-ghost btn-sm" onClick={() => window.VCExport.json(`${v.id}-evidence.json`, v)}><Icon name="download" size={14} />Evidence</button>
        </div>
      </div>

      <div className="detail-grid">
        {/* main column */}
        <div className="detail-main">
          <Section icon="target" title="Attack analysis" kicker="AI-enriched">
            <p className="dsec-lead">{v.attack_path}</p>
            <div className="fldgrid">
              <Field label="Attack type">{v.types_of_attack}</Field>
              <Field label="Access level">{v.level_of_attack}</Field>
              {auto && <Field label="Tooling">{v.tools_used}</Field>}
              <Field label="Feasibility">{v.feasibility}</Field>
            </div>
          </Section>

          <Section icon="bolt" title="Damage scenario" kicker="real-world consequence" tone="danger">
            <p className="dsec-lead dsec-danger">{v.damage_scenario}</p>
          </Section>

          {auto ? (
            <Section icon="car" title="Affected components" kicker="automotive">
              <div className="fldgrid">
                <Field label="ECU">{v.ecu}</Field>
                <Field label="Interface">{v.interface}</Field>
                <Field label="Vehicle models" wide>{v.model_name}</Field>
                <Field label="Supplier">{v.supplier}</Field>
                <Field label="OEMs affected">{(v.brands || []).join(", ")}</Field>
              </div>
            </Section>
          ) : (
            <Section icon="chip" title="Affected components" kicker="IoT / embedded">
              <div className="fldgrid">
                <Field label="Vendor">{v.vendor}</Field>
                <Field label="Product">{v.product_name}</Field>
                <Field label="Protocol">{v.protocol}</Field>
                <Field label="Firmware">{v.firmware_version}</Field>
                <Field label="Affected component">{v.affected_component}</Field>
                <Field label="Library" mono>{v.library_name}</Field>
                <Field label="Supplier">{v.supplier}</Field>
                <Field label="OEMs affected">{(v.brands || []).join(", ")}</Field>
              </div>
            </Section>
          )}

          <Section icon="shield" title="Recommended countermeasures" kicker="mitigation" tone="ok">
            <ul className="cmlist">
              {(v.countermeasures || "").split(/;\s*/).map(s => s.trim()).filter(Boolean).map((c, i) => (
                <li key={i}><Icon name="check" size={14} className="cmlist-ic" /><span>{c.replace(/\.$/, "")}</span></li>
              ))}
              {!(v.countermeasures || "").trim() && <li className="card-sub">No countermeasures recorded for this entry.</li>}
            </ul>
          </Section>
        </div>

        {/* sidebar */}
        <aside className="detail-side">
          <div className="card side-card">
            <CvssGauge cvss={v.cvss} sev={v.severity} />
            <EpssMeter score={v.epss_score} />
            <div className="side-cia">
              <span className="side-cia-lab">CIA impact</span>
              <CIA cia={v.cia} />
            </div>
            <Field label="Overall impact">{v.impact}</Field>
          </div>

          <div className="card side-card">
            <span className="side-title">Classification</span>
            <div className="metaline"><span>Source feed</span><b>{v.source}</b></div>
            <div className="metaline"><span>Published</span><b className="mono">{v.published}</b></div>
            <div className="metaline"><span>Enrichment</span><b className="conf"><span className="conf-bar"><span style={{ width: enrich + "%" }} /></span>{enrich}%</b></div>
          </div>

          <div className="card side-card">
            <span className="side-title">Compliance evidence</span>
            <p className="side-note">This record supports monitoring obligations under:</p>
            <div className="reglist">
              {["UNECE R155", "ISO/SAE 21434", "AIS-189 CSMS", "EU CRA"].map(r => (
                <span className="reg" key={r}>{r}</span>
              ))}
            </div>
            <button className="btn btn-ghost btn-block btn-sm" onClick={() => window.VCExport.json(`${v.id}-audit.json`, { ...v, status: st, standards: ["UNECE R155", "ISO/SAE 21434", "AIS-189 CSMS", "EU CRA"], exportedFrom: "VulnerabilityCore" })}><Icon name="download" size={14} />Export audit record</button>
          </div>

          {related.length > 0 && (
            <div className="card side-card">
              <span className="side-title">Related <em>· {(v.kind === "automotive" ? v.ecu : v.product_name) || v.interface || v.protocol}</em></span>
              {related.map(r => (
                <button className="relrow" key={r.id} onClick={() => onOpen(r)}>
                  <SeverityTag s={r.severity} size="sm" />
                  <span className="relrow-id mono">{r.id}</span>
                  <Icon name="chevR" size={14} />
                </button>
              ))}
            </div>
          )}
        </aside>
      </div>
    </div>
  );
}
window.Detail = Detail;