/* ============================================================================
   DIVONCI WORLD — ARSENAL COMMAND ROOM
   Tool Library · Capability View · Agent Loadout · (Workflow + Live Ops in
   screens_arsenal_flow.jsx). Every weapon is discovered from window.ARS —
   the same registry the backend dispatch reads. Design-only surface.
   ========================================================================== */

/* --------------------------------------------------- shared arsenal bits - */
function monogram(name) {
  const clean = name.replace(/[^A-Za-z0-9 .]/g, "");
  if (/^\d/.test(clean)) return clean.replace(/[^0-9]/g, "").slice(0, 2) || clean.slice(0, 2);
  const words = clean.split(/[\s.]+/).filter(Boolean);
  if (words.length === 1) return words[0].slice(0, 2);
  return (words[0][0] + words[1][0]).toUpperCase();
}
function TSig({ tool, size = 38 }) {
  const ax = ARS.catColor(tool.cat);
  return (
    <span className="tsig" style={{ "--ax": ax, width: size, height: size, fontSize: size * 0.4 }}>
      {monogram(tool.name)}
    </span>
  );
}
function CapChips({ caps, max = 3 }) {
  const shown = caps.slice(0, max), extra = caps.length - max;
  return (
    <div className="tcaps">
      {shown.map(cid => { const c = ARS.cap(cid); return c ? (
        <span key={cid} className="capchip"><Icon name={c.icon} className="glyph" />{c.name}</span>
      ) : null; })}
      {extra > 0 && <span className="capchip more">+{extra}</span>}
    </div>
  );
}
function PermDots({ p }) {
  return (
    <span className="permdots" title="use · execute · admin">
      <span className={"permdot on"} />
      <span className={"permdot " + (p.can_execute ? "on" : "")} />
      <span className={"permdot admin " + (p.can_admin ? "on" : "")} />
    </span>
  );
}

/* ----------------------------------------------------------- TOOL CARD --- */
function ToolCard({ tool, selected, onClick }) {
  const ax = ARS.catColor(tool.cat);
  const agents = ARS.toolAgents(tool.id);
  return (
    <button className={"panel tcard focusable " + (selected ? "sel" : "")} style={{ "--ax": ax }} onClick={onClick}>
      <div className="thead">
        <TSig tool={tool} size={40} />
        <div style={{ minWidth: 0 }}>
          <div className="tname">{tool.name}</div>
          <div className="tvendor">{tool.vendor}</div>
        </div>
      </div>
      <CapChips caps={tool.caps} max={2} />
      <div className="tfoot">
        <span className="typill">{tool.type}</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 7, fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-4)" }}>
          <Icon name="agent" className="glyph" style={{ width: 12, height: 12 }} />{agents.length}
        </span>
      </div>
    </button>
  );
}

/* --------------------------------------------------------- INSPECTOR ----- */
function ToolInspector({ tool, nav }) {
  if (!tool) return (
    <Panel className="ins-col">
      <PHead icon="search" eyebrow="Inspector" />
      <div className="emptystate" style={{ padding: "var(--s-10)" }}>
        <div className="ring"><Icon name="bolt" style={{ width: 20, height: 20 }} /></div>
        <div className="note">Select a weapon to inspect its capabilities, permissions and provenance</div>
      </div>
    </Panel>
  );
  const ax = ARS.catColor(tool.cat), c = ARS.cat(tool.cat);
  const agents = ARS.toolAgents(tool.id);
  return (
    <Panel className="ins-col" style={{ "--ax": ax }}>
      <div style={{ padding: "var(--s-6) var(--s-6) var(--s-5)", borderBottom: "1px solid var(--hairline)" }}>
        <div style={{ display: "flex", gap: 13, alignItems: "center" }}>
          <TSig tool={tool} size={52} />
          <div style={{ minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 19 }}>{tool.name}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10, color: "var(--ink-4)", letterSpacing: "0.06em", textTransform: "uppercase", marginTop: 3 }}>{tool.vendor}</div>
          </div>
        </div>
        <div className="chips" style={{ marginTop: 14 }}>
          <span className="typill">{tool.type}</span>
          <span className="capchip" style={{ color: ax, borderColor: `color-mix(in srgb, ${ax} 35%, transparent)` }}><Icon name={c.icon} className="glyph" style={{ color: ax }} />{c.name}</span>
          <span className="evchip">{tool.pricing}</span>
        </div>
      </div>
      <div className="pbody" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        <div>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Capabilities · {tool.caps.length}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {tool.caps.map(cid => { const cp = ARS.cap(cid); return (
              <div key={cid} className="ins-row" style={{ "--ax": ax }}><Icon name={cp.icon} className="glyph" /><span style={{ fontSize: 12.5, flex: 1 }}>{cp.name}</span><span style={{ fontFamily: "var(--font-mono)", fontSize: 9, color: "var(--ink-4)" }}>{cid}</span></div>
            ); })}
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{ marginBottom: 10 }}>Cleared agents · {agents.length}</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
            {agents.map(p => { const a = DW.agent(p.agent); return (
              <button key={p.agent} className="ins-agent focusable" onClick={() => nav("arsenal:agent:" + p.agent)} style={{ cursor: "pointer", textAlign: "left", width: "100%" }}>
                <img src={a.head} alt={a.name} style={{ border: `1px solid color-mix(in srgb, ${a.ac} 55%, transparent)` }} />
                <span style={{ fontSize: 12.5, fontWeight: 600, flex: 1 }}>{a.name}</span>
                <PermDots p={p} />
              </button>
            ); })}
            {agents.length === 0 && <div className="note" style={{ color: "var(--ink-4)" }}>No agent holds a grant for this tool yet.</div>}
          </div>
        </div>
        <div style={{ display: "flex", gap: 8 }}>
          <button className="btn primary" style={{ flex: 1 }} onClick={() => nav("arsenal:ops")}>Run history →</button>
          <button className="btn ghost" onClick={() => nav("arsenal:workflow")}>Add to workflow</button>
        </div>
      </div>
    </Panel>
  );
}

/* ====================================================== TOOL LIBRARY ====== */
function ToolLibrary({ nav, selSlug, setSelSlug }) {
  const [q, setQ] = useState("");
  const [catF, setCatF] = useState("all");
  const [typeF, setTypeF] = useState("all");
  const types = ["all", ...Array.from(new Set(ARS.TOOLS.map(t => t.type)))];

  const list = ARS.TOOLS.filter(t =>
    (catF === "all" || t.cat === catF) &&
    (typeF === "all" || t.type === typeF) &&
    (!q || t.name.toLowerCase().includes(q.toLowerCase()) || t.vendor.toLowerCase().includes(q.toLowerCase()) ||
      t.caps.some(c => ARS.cap(c).name.toLowerCase().includes(q.toLowerCase()))));

  const sel = selSlug ? ARS.toolBySlug[selSlug] : null;
  const mcpCount = ARS.TOOLS.filter(t => t.type === "MCP" || t.type === "API").length;

  return (
    <div>
      <div className="cols c-4" style={{ marginBottom: "var(--s-6)" }}>
        {[["Weapons", ARS.TOOLS.length, "ops"], ["Categories", ARS.CATS.length, "nexus"], ["Capabilities", ARS.CAPS.length, "bolt"], ["API · MCP", mcpCount, "plug"]].map(([k, v, ic]) => (
          <Panel key={k}><div className="mtile"><div className="k"><Icon name={ic} style={{ width: 12, height: 12 }} />{k}</div><div className="v">{v}</div></div></Panel>
        ))}
      </div>

      {/* search + type filter — sticky toolbar */}
      <div className="ars-searchbar">
        <Panel style={{ padding: "var(--s-5) var(--s-6)" }}>
          <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <div className="cmd" style={{ flex: 1, minWidth: 240, background: "var(--graphite)" }}>
              <Icon name="search" style={{ width: 14, height: 14 }} />
              <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search every weapon — name, vendor, capability…" />
              {q && <button className="minilink" onClick={() => setQ("")}>clear</button>}
            </div>
            <div className="seg">
              {types.map(t => <button key={t} className={typeF === t ? "on" : ""} onClick={() => setTypeF(t)}>{t}</button>)}
            </div>
          </div>
        </Panel>
      </div>

      <div className="ars-3pane">
        {/* category rail */}
        <Panel className="ars-catpane comms-scroll" style={{ padding: "var(--s-5)" }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Categories</div>
          <div className="catrail">
            <button className={"catbtn " + (catF === "all" ? "on" : "")} style={{ "--ax": "var(--violet-bright)" }} onClick={() => setCatF("all")}>
              <Icon name="globe" className="glyph" /><span className="cn">All weapons</span><span className="cc">{ARS.TOOLS.length}</span>
            </button>
            {ARS.CATS.map(c => {
              const n = ARS.TOOLS.filter(t => t.cat === c.id).length;
              return (
                <button key={c.id} className={"catbtn " + (catF === c.id ? "on" : "")} style={{ "--ax": ARS.catColor(c.id) }} onClick={() => setCatF(c.id)}>
                  <Icon name={c.icon} className="glyph" /><span className="cn">{c.name}</span><span className="cc">{n}</span>
                </button>
              );
            })}
          </div>
        </Panel>

        {/* grid */}
        <div>
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginBottom: 14 }}>
            <div className="note">{list.length} weapon{list.length === 1 ? "" : "s"}{catF !== "all" ? " · " + ARS.cat(catF).name : ""}</div>
            <div className="note" style={{ color: "var(--ink-4)" }}>use · exec · admin shown per tool in inspector</div>
          </div>
          {list.length ? (
            <div className="ars-grid">
              {list.map(t => <ToolCard key={t.id} tool={t} selected={selSlug === t.slug} onClick={() => setSelSlug(t.slug)} />)}
            </div>
          ) : (
            <div className="emptystate"><div className="ring"><Icon name="search" style={{ width: 20, height: 20 }} /></div><div className="note">No weapon matches that query</div></div>
          )}
        </div>

        {/* inspector */}
        <ToolInspector tool={sel} nav={nav} />
      </div>
    </div>
  );
}

/* ==================================================== CAPABILITY VIEW ===== */
function CapabilityView({ nav, setSelSlug, setTab }) {
  const [sel, setSel] = useState(ARS.CAPS.find(c => c.id === "ui").id);
  const cap = ARS.cap(sel);
  const tools = ARS.toolsForCap(sel);

  return (
    <div className="cols c-8-4 cap-view">
      <Panel className="tight">
        <PHead icon="bolt" eyebrow="Capability registry" title="Pick a verb — see every weapon that delivers it" right={<span className="note">{ARS.CAPS.length} capabilities</span>} />
        <div className="pbody comms-scroll">
          <div className="capgrid">
            {ARS.CAPS.map(c => {
              const n = ARS.toolsForCap(c.id).length;
              return (
                <button key={c.id} className={"capnode focusable " + (sel === c.id ? "on" : "")} onClick={() => setSel(c.id)}>
                  <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                    <span className="ci"><Icon name={c.icon} style={{ width: 17, height: 17 }} /></span>
                    <span style={{ fontFamily: "var(--font-mono)", fontSize: 16, fontWeight: 600, color: sel === c.id ? "var(--violet-ink)" : "var(--ink-3)" }}>{n}</span>
                  </div>
                  <div><div className="cn">{c.name}</div><div className="ct">{n} weapon{n === 1 ? "" : "s"}</div></div>
                </button>
              );
            })}
          </div>
        </div>
      </Panel>

      <Panel>
        <PHead icon={cap.icon} eyebrow="Weapons for" title={cap.name} right={<StateChip state="clear" label={tools.length + " ready"} />} />
        <div className="pbody comms-scroll" style={{ display: "flex", flexDirection: "column", gap: 7 }}>
          {tools.map(t => {
            const ax = ARS.catColor(t.cat);
            return (
              <button key={t.id} className="rowlink focusable" onClick={() => { setSelSlug(t.slug); setTab("library"); }}
                style={{ display: "flex", alignItems: "center", gap: 11, padding: "9px 10px", borderRadius: 8, background: "var(--panel-2)", border: "1px solid var(--hairline)", cursor: "pointer", textAlign: "left", "--ax": ax }}>
                <TSig tool={t} size={30} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 12.5, fontWeight: 600 }}>{t.name}</div>
                  <div style={{ fontFamily: "var(--font-mono)", fontSize: 9.5, color: "var(--ink-4)" }}>{ARS.cat(t.cat).name}</div>
                </div>
                <span className="typill">{t.type}</span>
              </button>
            );
          })}
        </div>
      </Panel>
    </div>
  );
}

/* ===================================================== AGENT LOADOUT ====== */
function AgentLoadout({ nav, agentId, setAgentId, setSelSlug, setTab }) {
  const a = DW.agent(agentId);
  const perms = ARS.agentTools(agentId);
  const execN = perms.filter(p => p.can_execute).length;
  const adminN = perms.filter(p => p.can_admin).length;
  // workflows this agent appears in
  const wfN = ARS.WORKFLOWS.filter(w => w.owner === agentId || w.stages.some(s => s.agent === agentId)).length;
  // group by category
  const byCat = {};
  perms.forEach(p => { const t = ARS.toolById[p.tool]; (byCat[t.cat] = byCat[t.cat] || []).push({ t, p }); });
  const catOrder = ARS.CATS.filter(c => byCat[c.id]);

  return (
    <div className="loadout-view">
      <div className="agentpick" style={{ marginBottom: "var(--s-6)" }}>
        {DW.AGENTS.map(ag => (
          <button key={ag.id} className={agentId === ag.id ? "on" : ""} onClick={() => setAgentId(ag.id)}
            style={agentId === ag.id ? { borderColor: `color-mix(in srgb, ${ag.ac} 70%, transparent)`, background: `color-mix(in srgb, ${ag.ac} 14%, var(--panel-2))` } : null}>
            <img src={ag.head} alt={ag.name} />{ag.name}
          </button>
        ))}
      </div>

      <Panel style={{ "--ac": a.ac, marginBottom: "var(--s-6)", overflow: "hidden" }}>
        <div className="loadhdr">
          <img src={a.head} alt={a.name} style={{ "--ac": a.ac }} />
          <div style={{ flex: 1, minWidth: 0 }}>
            <div style={{ fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 22 }}>{a.name}</div>
            <div style={{ fontFamily: "var(--font-mono)", fontSize: 10.5, color: "var(--ink-3)", letterSpacing: "0.06em", textTransform: "uppercase", marginTop: 4 }}>{a.role}</div>
          </div>
          <div className="statstrip">
            <div className="it"><b style={{ color: a.ac }}>{perms.length}</b><span>Tools</span></div>
            <div className="it"><b style={{ color: "var(--state-clear)" }}>{execN}</b><span>Execute</span></div>
            <div className="it"><b style={{ color: "var(--gold)" }}>{adminN}</b><span>Admin</span></div>
            <div className="it"><b style={{ color: "var(--state-focus)" }}>{wfN}</b><span>Workflows</span></div>
          </div>
        </div>
      </Panel>

      <div className="cols c-8-4">
        <div className="ld-left comms-scroll" style={{ display: "flex", flexDirection: "column", gap: "var(--s-5)" }}>
          {catOrder.map(c => (
            <Panel key={c.id} style={{ "--ax": ARS.catColor(c.id) }}>
              <PHead icon={c.icon} eyebrow={c.name} right={<span className="note">{byCat[c.id].length} cleared</span>} />
              <div className="pbody" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 8 }}>
                {byCat[c.id].map(({ t, p }) => (
                  <button key={t.id} className="rowlink focusable" onClick={() => { setSelSlug(t.slug); setTab("library"); }}
                    style={{ display: "flex", alignItems: "center", gap: 9, padding: "8px 10px", borderRadius: 8, background: "var(--panel-2)", border: "1px solid var(--hairline)", cursor: "pointer", textAlign: "left", "--ax": ARS.catColor(t.cat) }}>
                    <TSig tool={t} size={26} />
                    <span style={{ fontSize: 12, fontWeight: 500, flex: 1, minWidth: 0, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.name}</span>
                    <PermDots p={p} />
                  </button>
                ))}
              </div>
            </Panel>
          ))}
        </div>

        <div className="ld-right" style={{ display: "flex", flexDirection: "column", gap: "var(--s-5)" }}>
          <Panel>
            <PHead icon="shield" eyebrow="Permission legend" />
            <div className="pbody" style={{ display: "flex", flexDirection: "column", gap: 11 }}>
              {[["use", "Discover + read the tool", "var(--state-clear)", "on"], ["execute", "Invoke it in a live run", "var(--state-clear)", "on"], ["admin", "Configure + grant to others", "var(--gold)", "admin on"]].map(([k, d, col, cls], i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 11 }}>
                  <span className={"permdot " + cls} style={{ width: 9, height: 9 }} />
                  <div><div style={{ fontSize: 12.5, fontWeight: 600, textTransform: "capitalize" }}>{k}</div><div className="note" style={{ color: "var(--ink-4)" }}>{d}</div></div>
                </div>
              ))}
              <div className="divider" />
              <p className="body" style={{ fontSize: 12, margin: 0 }}>Permissions are granted per category lane. {a.name} discovers capabilities from the registry — nothing is hardcoded into the agent.</p>
            </div>
          </Panel>
          <Panel style={{ "--ac": a.ac }}>
            <PHead icon="branch" eyebrow="Active in" title={wfN + " workflow" + (wfN === 1 ? "" : "s")} />
            <div className="pbody" style={{ display: "flex", flexDirection: "column", gap: 7 }}>
              {ARS.WORKFLOWS.filter(w => w.owner === agentId || w.stages.some(s => s.agent === agentId)).map(w => (
                <button key={w.id} className="rowlink focusable" onClick={() => nav("arsenal:workflow")} style={{ display: "flex", alignItems: "center", gap: 9, padding: "9px 10px", borderRadius: 7, background: "var(--panel-2)", border: "1px solid var(--hairline)", cursor: "pointer", textAlign: "left" }}>
                  <Icon name="branch" className="glyph" style={{ width: 14, height: 14, color: w.owner === agentId ? a.ac : "var(--ink-4)" }} />
                  <span style={{ fontSize: 12.5, flex: 1 }}>{w.name}</span>
                  {w.owner === agentId && <span className="sbadge" style={{ color: a.ac, fontSize: 8.5 }}>owner</span>}
                </button>
              ))}
            </div>
          </Panel>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TSig, CapChips, PermDots, ToolCard, ToolInspector, ToolLibrary, CapabilityView, AgentLoadout, monogram });