// Admin Console — case ops, decision review, integrations health.
// Bank-ops feeling: dense, professional, command-bar driven.

function AdminConsole({ citizen, tweaks, setMode }) {
  const [view, setView] = React.useState("queue"); // queue | case | integrations
  const [activeCase, setActiveCase] = React.useState("C-50283");

  return (
    <div className="admin-mode">
      <AdminSidebar view={view} setView={setView}/>
      <div className="admin-main">
        {view === "queue" && (
          <AdminQueue setActiveCase={(id) => { setActiveCase(id); setView("case"); }}/>
        )}
        {view === "case" && (
          <AdminCase caseId={activeCase} setView={setView} tweaks={tweaks}/>
        )}
        {view === "integrations" && <AdminIntegrations/>}
        {view === "programs" && <AdminPrograms setMode={setMode}/>}
        {view === "audit" && <AdminAudit/>}
      </div>
    </div>
  );
}

function AdminSidebar({ view, setView }) {
  const items = [
    { id: "queue", label: "Cases", icon: "list", badge: 84 },
    { id: "case", label: "Active case", icon: "user" },
    { id: "programs", label: "Programs", icon: "layers", badge: 3 },
    { id: "integrations", label: "Integrations", icon: "plug" },
    { id: "audit", label: "Audit log", icon: "shield" },
  ];
  return (
    <aside className="admin-sidebar">
      <div className="admin-side-head">
        <div className="label-eyebrow">Operations</div>
        <div className="title" style={{fontSize:15, marginTop:4}}>OHB Console</div>
      </div>
      <div className="admin-side-nav">
        {items.map((it) => (
          <button key={it.id} className={`admin-side-item ${view === it.id ? "active" : ""}`} onClick={() => setView(it.id)}>
            <Icon name={it.icon} size={15}/>
            <span style={{flex:1, textAlign:"left"}}>{it.label}</span>
            {it.badge != null && <span className="admin-side-badge">{it.badge}</span>}
          </button>
        ))}
      </div>

      <div className="admin-side-stats">
        <div className="label-eyebrow">Today</div>
        <div className="admin-stat">
          <div className="tiny muted">STP rate</div>
          <div className="admin-stat-value">71<span className="admin-stat-unit">%</span></div>
        </div>
        <div className="admin-stat">
          <div className="tiny muted">Decisions</div>
          <div className="admin-stat-value">1,284</div>
        </div>
        <div className="admin-stat">
          <div className="tiny muted">Avg time</div>
          <div className="admin-stat-value">1.4<span className="admin-stat-unit">s</span></div>
        </div>
      </div>
    </aside>
  );
}

function Spark({ values, color }) {
  const w = 120, h = 32;
  const min = Math.min(...values), max = Math.max(...values);
  const norm = (v) => (max === min ? h/2 : h - ((v - min) / (max - min)) * h);
  const step = w / (values.length - 1);
  const pts = values.map((v, i) => `${i * step},${norm(v)}`).join(" ");
  return (
    <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
      <polyline points={pts} fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
      {values.map((v, i) => i === values.length - 1 && (
        <circle key={i} cx={i * step} cy={norm(v)} r="3" fill={color}/>
      ))}
    </svg>
  );
}

window.AdminConsole = AdminConsole;
window.Spark = Spark;