// Side-panel detail view — slides in over the queue, doesn't navigate away.
// Split pane: left = Sumsub-equivalent embed, right = Agio decision form.
// Reason field is required for every approval/rejection.

function SidePanel({ applicant, onClose, onNext, onPrev, total, index, onDecision, auditorMode }) {
  const [tab, setTab]       = React.useState("Documents");
  const [reason, setReason] = React.useState("");
  const [showSaved, setShowSaved] = React.useState(false);

  // ESC to close
  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === "Escape") onClose();
      if (e.key === "j" && !e.metaKey && !e.ctrlKey && document.activeElement?.tagName !== "TEXTAREA") onNext();
      if (e.key === "k" && !e.metaKey && !e.ctrlKey && document.activeElement?.tagName !== "TEXTAREA") onPrev();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [onClose, onNext, onPrev]);

  const handle = (kind) => {
    if (!reason.trim()) return;
    onDecision(applicant.id, kind, reason.trim());
    setShowSaved(true);
    setTimeout(() => setShowSaved(false), 1200);
    setReason("");
  };

  if (!applicant) return null;
  const a = applicant;

  return (
    <>
      <div className="side-panel-backdrop" onClick={onClose} />
      <aside className="side-panel" role="dialog" aria-label={`${a.name} review`}>
        <header className="sp-hd">
          <div className="sp-hd-l">
            <Flag code={a.country} />
            <div>
              <div className="sp-hd-name">{a.name}</div>
              <div style={{display:"flex", gap:8, alignItems:"baseline"}}>
                <span className="sp-hd-id">{a.id}</span>
                <span className="cell-kind-pill">{a.kind.toUpperCase()}</span>
                <StatusPill status={a.status} />
                <RiskScore value={a.risk} />
              </div>
            </div>
          </div>
          <div className="sp-hd-spacer" />
          <div className="sp-hd-nav">
            <button className="nav-btn" onClick={onPrev} title="Previous (k)"><IArrowUp size={12} /></button>
            <span className="nav-counter">{index + 1} / {total}</span>
            <button className="nav-btn" onClick={onNext} title="Next (j)"><IArrowDown size={12} /></button>
          </div>
          <div className="sp-hd-actions">
            <Btn variant="outlined" size="xs" icon={IExternal}>Open in Sumsub</Btn>
            <button className="action-icon" onClick={onClose} title="Close (Esc)"><IX size={14} /></button>
          </div>
        </header>

        <div className="sp-body">
          <section className="sp-sumsub">
            <div className="sp-sumsub-hd">
              <div className="sp-sumsub-tabs">
                {["Documents", "Screening", "Risk", "History"].map(t => (
                  <button key={t} className={`sp-sumsub-tab ${tab === t ? "is-active" : ""}`} onClick={() => setTab(t)}>{t}</button>
                ))}
              </div>
              <span className="mono fg-4" style={{ fontSize: 10.5 }}>sumsub://applicant/{a.sumsub}</span>
            </div>

            {tab === "Documents" && <DocumentsTab a={a} />}
            {tab === "Screening" && <ScreeningTab a={a} />}
            {tab === "Risk"      && <RiskTab a={a} />}
            {tab === "History"   && <HistoryTab a={a} />}
          </section>

          <section className="sp-decision">
            <div className="sp-decision-hd">
              <b>Agio Decision</b>
              <span style={{marginLeft:"auto", display:"flex", alignItems:"center", gap:6, color:"var(--fg-4)"}}>
                <ILock size={11} /> Logged to audit trail
              </span>
            </div>

            <div className="sp-decision-body">
              <div className="sp-block">
                <div className="sp-block-hd">Applicant</div>
                <div className="sp-kv">
                  <span className="k">Email</span>      <span className="v mono">{a.email}</span>
                  <span className="k">DOB</span>        <span className="v mono">{a.dob}</span>
                  <span className="k">Country</span>    <span className="v">{COUNTRIES[a.country].name} ({a.country})</span>
                  <span className="k">Address</span>    <span className="v">{a.addr}</span>
                  <span className="k">Tier</span>       <span className="v" style={{textTransform:"capitalize"}}>{a.tier}</span>
                  <span className="k">Submitted</span>  <span className="v mono">2026-{String(((5 - Math.floor(a.days/30)) + 12) % 12 + 1).padStart(2,"0")}-{String(((19 - (a.days % 30)) + 30) % 30 + 1).padStart(2,"0")} ({a.days}d ago)</span>
                </div>
              </div>

              <div className="sp-block">
                <div className="sp-block-hd"><Term id="Risk score">Risk Assessment</Term></div>
                <div className="sp-kv">
                  <span className="k">Composite</span>
                  <span className="v"><RiskScore value={a.risk} /></span>
                  <span className="k"><Term id="PEP">PEP</Term></span>          <span className="v">{a.risk >= 70 ? <StatusPill status="medium" label="Probable match" /> : <span className="fg-2">No match</span>}</span>
                  <span className="k"><Term id="Sanctions">Sanctions</Term></span>    <span className="v"><span className="fg-2">No match</span></span>
                  <span className="k"><Term id="Adverse media">Adverse media</Term></span><span className="v">{a.risk >= 60 ? <StatusPill status="amber" label="2 hits — review" /> : <span className="fg-2">Clear</span>}</span>
                  <span className="k">Country risk</span> <span className="v">{["VG","KY","BS","AE"].includes(a.country) ? "Elevated" : "Standard"}</span>
                </div>
              </div>

              <div className="sp-block">
                <div className="sp-block-hd">Recommended Action</div>
                <div className="row" style={{ gap: 8 }}>
                  <span className={`cell-action ${
                    a.action === "Approve" ? "is-approve" :
                    a.action === "Reject"  ? "is-reject"  :
                    a.action.startsWith("Manual") || a.action.startsWith("EDD") ? "is-edd" :
                    a.action.startsWith("Request") ? "is-docs" : "is-hold"}`}>
                    {a.action}
                  </span>
                  <span className="fg-4" style={{fontSize:11}}>
                    Based on risk {a.risk}, {a.days}d pending, {a.kind === "kyb" ? "UBO" : "screening"} state.
                  </span>
                </div>
              </div>
            </div>

            <footer className="sp-decision-foot">
              <div className="sp-reason-label">
                <span>Internal note <span className="req">required</span></span>
                {showSaved ? <span className="mono fg-3" style={{fontSize:11}}>✓ Saved to audit trail</span>
                           : <span className="mono fg-4" style={{fontSize:10.5}}>Free-text · audit-logged · regulator-readable</span>}
              </div>
              <textarea
                className="sp-reason"
                placeholder="e.g. Source of funds verified via bank reference; address proof valid; PEP match dismissed (homonym)."
                value={reason}
                onChange={e => setReason(e.target.value)}
                disabled={auditorMode}
              />
              <div className="sp-actions">
                <Btn variant="filled" tone="accent" icon={ICheck}
                  disabled={!reason.trim() || auditorMode}
                  onClick={() => handle("approved")}>Approve</Btn>
                <Btn variant="outlined" icon={ISend}
                  disabled={!reason.trim() || auditorMode}
                  onClick={() => handle("requested_docs")}>Request Documents</Btn>
                <Btn variant="outlined" icon={IBolt}
                  disabled={!reason.trim() || auditorMode}
                  onClick={() => handle("escalated")}>Escalate to <Term id="EDD">EDD</Term></Btn>
                <span className="right" />
                <Btn variant="outlined" danger icon={IX}
                  disabled={!reason.trim() || auditorMode}
                  onClick={() => handle("rejected")}>Reject</Btn>
              </div>
              <div style={{display:"flex", gap:10, color:"var(--fg-4)", fontSize:11, alignItems:"center"}}>
                <span>Shortcuts</span>
                <Kbd>A</Kbd> approve
                <Kbd>R</Kbd> reject
                <Kbd>D</Kbd> req. docs
                <Kbd>E</Kbd> escalate
                <span className="right" style={{marginLeft:"auto"}}>
                  <Kbd>J</Kbd>/<Kbd>K</Kbd> next/prev applicant
                </span>
              </div>
            </footer>
          </section>
        </div>
      </aside>
    </>
  );
}

/* ── Sub-panes ─────────────────────────────────────────────────────────── */

function DocumentsTab({ a }) {
  return (
    <div className="sp-sumsub-body">
      <div className="doc-tile">
        <div className="doc-tile-hd">
          <IFile size={13} /> <b>{a.doctype}</b>
          <span className="right-meta">issued 2019 · expires 2029</span>
        </div>
        <div className="doc-tile-body">
          <span className="doc-overlay">[ document preview · {a.kind === "kyb" ? "registry extract" : "front + back scan"} ]</span>
        </div>
      </div>
      <div className="doc-tile is-extracted">
        <div className="doc-tile-hd"><b>Extracted fields</b><span className="right-meta">OCR confidence 0.97</span></div>
        <div className="doc-tile-body" style={{ height: "auto" }}>
          <div className="kv-grid">
            <span className="k">Full name</span>     <span className="v">{a.name}</span>
            <span className="k">Date of birth</span> <span className="v mono">{a.dob}</span>
            <span className="k">Issuer</span>        <span className="v">{a.country} · Govt</span>
            <span className="k">Doc number</span>    <span className="v mono">{a.id.replace("AP-", "")}</span>
            <span className="k">Address</span>       <span className="v">{a.addr}</span>
          </div>
        </div>
      </div>
      <div className="doc-tile">
        <div className="doc-tile-hd"><b>Address proof</b><span className="right-meta">utility · 2026-02</span></div>
        <div className="doc-tile-body">
          <span className="doc-overlay">[ statement preview · redacted ]</span>
        </div>
      </div>
      <div className="doc-tile">
        <div className="doc-tile-hd"><b>Selfie liveness</b><span className="right-meta">passive · 98.4% match</span></div>
        <div className="doc-tile-body">
          <span className="doc-overlay">[ liveness frame · 1024×1024 ]</span>
        </div>
      </div>
    </div>
  );
}

function ScreeningTab({ a }) {
  const hits = a.risk >= 60 ? 2 : 0;
  return (
    <div className="sp-sumsub-body">
      <div className="sp-block-hd" style={{padding:0}}>Watchlist matches</div>
      <div className="sp-screening-list">
        <div className="sp-screening-row">
          <ICheckCirc size={14} style={{color:"var(--green-fg)"}} />
          <div>
            <div className="scr-name">OFAC SDN</div>
            <div className="scr-detail">No match · last refreshed 14m ago</div>
          </div>
        </div>
        <div className="sp-screening-row">
          <ICheckCirc size={14} style={{color:"var(--green-fg)"}} />
          <div>
            <div className="scr-name">UN Consolidated</div>
            <div className="scr-detail">No match · last refreshed 14m ago</div>
          </div>
        </div>
        <div className="sp-screening-row">
          <ICheckCirc size={14} style={{color:"var(--green-fg)"}} />
          <div>
            <div className="scr-name">EU Sanctions</div>
            <div className="scr-detail">No match</div>
          </div>
        </div>
        <div className={`sp-screening-row ${hits ? "is-hit" : ""}`}>
          {hits ? <IAlertT size={14} /> : <ICheckCirc size={14} style={{color:"var(--green-fg)"}} />}
          <div>
            <div className="scr-name">PEP</div>
            <div className="scr-detail">
              {hits ? `${hits} probable match · "${a.name.split(" ")[0]} ${a.name.split(" ")[1] || ""}" — review` : "No match"}
            </div>
          </div>
          {hits ? <Btn variant="outlined" size="xs">Review</Btn> : null}
        </div>
        <div className={`sp-screening-row ${a.risk >= 60 ? "is-hit" : ""}`}>
          {a.risk >= 60 ? <IAlertT size={14} /> : <ICheckCirc size={14} style={{color:"var(--green-fg)"}} />}
          <div>
            <div className="scr-name">Adverse media</div>
            <div className="scr-detail">{a.risk >= 60 ? "2 hits · 2024 regulatory mention" : "Clear"}</div>
          </div>
          {a.risk >= 60 ? <Btn variant="outlined" size="xs">Open</Btn> : null}
        </div>
      </div>
    </div>
  );
}

function RiskTab({ a }) {
  const factors = [
    { name: "Country of residence",   v: ["VG","KY","BS","AE"].includes(a.country) ? 22 : 8, max: 25 },
    { name: "PEP exposure",           v: a.risk >= 70 ? 18 : a.risk >= 50 ? 10 : 2, max: 20 },
    { name: "Source-of-funds clarity",v: a.tier === "high" ? 14 : a.tier === "medium" ? 7 : 3, max: 20 },
    { name: "Transaction history",    v: 4, max: 15 },
    { name: "Document age / quality", v: 5, max: 10 },
    { name: "Behaviour signals",      v: a.days > 14 ? 6 : 2, max: 10 },
  ];
  return (
    <div className="sp-sumsub-body">
      <div className="sp-block-hd" style={{padding:0}}>Risk factor breakdown</div>
      {factors.map((f) => (
        <div key={f.name} style={{display:"grid", gridTemplateColumns:"170px 1fr 40px", gap:10, alignItems:"center"}}>
          <span style={{fontSize:12, color:"var(--fg-2)"}}>{f.name}</span>
          <div className="risk-bar" style={{width:"100%", height:6}}>
            <span className="risk-bar-fill" style={{
              width:`${(f.v/f.max)*100}%`,
              background: f.v/f.max >= 0.7 ? "var(--red)" : f.v/f.max >= 0.4 ? "var(--amber)" : "var(--green)"
            }} />
          </div>
          <span className="mono tnum fg-3" style={{fontSize:11, textAlign:"right"}}>{f.v}/{f.max}</span>
        </div>
      ))}
      <div style={{
        display:"flex", justifyContent:"space-between", alignItems:"baseline",
        marginTop:8, paddingTop:10, borderTop:"1px solid var(--line)"}}>
        <span className="fg-3" style={{fontSize:12}}>Composite</span>
        <RiskScore value={a.risk} size="lg" />
      </div>
    </div>
  );
}

function HistoryTab({ a }) {
  const events = [
    { ts: "2026-05-19 09:38", actor: "alva.brennan@agio", line: "Opened for review (queue position #4)", now: true },
    { ts: "2026-05-19 09:02", actor: "system",            line: "Risk score recomputed: 72 → " + a.risk + " (PEP refresh)" },
    { ts: `2026-05-${String(19 - Math.min(a.days, 18)).padStart(2,"0")} 14:12`, actor: "system", line: "Sumsub applicant accepted (manual review pending)" },
    { ts: `2026-05-${String(19 - Math.min(a.days, 18)).padStart(2,"0")} 13:55`, actor: a.email,   line: "Documents uploaded: " + a.doctype + " + selfie + address proof" },
    { ts: `2026-05-${String(19 - Math.min(a.days, 18)).padStart(2,"0")} 13:42`, actor: a.email,   line: "Applicant created via web onboarding" },
  ];
  return (
    <div className="sp-sumsub-body">
      <div className="sp-timeline">
        {events.map((e, i) => (
          <div key={i} className={`sp-tl-evt ${e.now ? "is-now" : ""}`}>
            <div className="tl-ts">{e.ts}</div>
            <div className="tl-line">{e.line}</div>
            <div className="tl-actor mono">{e.actor}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { SidePanel });