/* global React, Icon, LegalDot, LEGAL, VENTURES, ABOGADOS, LEGAL_MATTERS, ventureName, ventureIcon, LEGAL_AGENTS, routeAgent, agentById */
const { useState: useStateL, useMemo: useMemoL } = React;

function initials(name) {
  const clean = name.replace(/^(Dra?\.|Dr\.)\s*/i, "").trim().split(/\s+/);
  return ((clean[0]?.[0] || "") + (clean[1]?.[0] || "")).toUpperCase();
}

function LScopeChips({ scope, setScope, ids }) {
  const opts = [{ id: "all", name: "Todos los ventures", icon: "LayoutGrid" }]
    .concat(ids.map((id) => ({ id, name: ventureName(id), icon: ventureIcon(id) })));
  return (
    <div className="flex flex-wrap gap-2">
      {opts.map((o) => {
        const active = scope === o.id;
        return (
          <button key={o.id} onClick={() => setScope(o.id)}
            className={`inline-flex items-center gap-1.5 rounded-full px-3 py-1.5 text-xs font-semibold transition ${active ? "bg-taupe-900 text-white" : "bg-white text-taupe-600 ring-1 ring-taupe-200 hover:bg-taupe-50"}`}>
            <Icon name={o.icon} size={13} /> {o.name}
          </button>
        );
      })}
    </div>
  );
}

function LKpi({ label, value, sub, accent }) {
  return (
    <div className="rounded-xl bg-white p-4 ring-1 ring-taupe-200/70 shadow-sm">
      <div className="font-mono text-[10px] uppercase tracking-[0.14em] text-taupe-400">{label}</div>
      <div className="mt-2 text-[22px] font-extrabold leading-none tracking-tight text-taupe-900">{value}</div>
      {sub && <div className={`mt-1.5 text-xs ${accent || "text-taupe-500"}`}>{sub}</div>}
    </div>
  );
}

function EnjambreView({ matters }) {
  const [asign, setAsign] = useStateL({});
  const [orchestrated, setOrchestrated] = useStateL(false);
  const [running, setRunning] = useStateL(false);
  const [report, setReport] = useStateL("");

  const orchestrate = async () => {
    setRunning(true);
    const next = {}; matters.forEach((m) => { next[m.id] = routeAgent(m.area); });
    setAsign(next); setOrchestrated(true);
    try {
      const lines = matters.map((m) => `- ${m.asunto} [${m.estado}] (${m.area}) -> ${agentById(routeAgent(m.area)).area}`).join("\n");
      const prompt = `Eres el Orquestador Jurídico de 3H, un agente de IA que coordina un enjambre de agentes jurídicos especializados (uno por práctica del derecho). Acabas de enrutar estos asuntos legales a sus agentes:\n${lines}\nEscribe un informe ejecutivo MUY BREVE en español (3-4 frases): cómo priorizaste (los de acción requerida/rojo primero), qué áreas concentran más carga y el siguiente paso autónomo. No menciones nombres de personas.`;
      const r = await window.claude.complete(prompt);
      setReport((r || "").replace(/\*\*/g, "").replace(/^#+\s*/gm, "").trim());
    } catch (e) {
      setReport("Orquestación completada. Cada asunto fue enrutado al agente especialista óptimo según su área; prioricé los de acción requerida y en revisión, y dejé el resto en monitoreo autónomo.");
    }
    setRunning(false);
  };

  const countFor = (aid) => Object.values(asign).filter((x) => x === aid).length;
  const orden = { rojo: 0, amarillo: 1, verde: 2 };
  const registro = [...matters].sort((a, b) => orden[a.estado] - orden[b.estado]);

  return (
    <div className="space-y-6">
      <div className="overflow-hidden rounded-2xl bg-taupe-900 p-6 text-white ring-1 ring-white/10">
        <div className="flex flex-wrap items-start justify-between gap-4">
          <div className="flex items-start gap-4">
            <span className="grid h-12 w-12 place-items-center rounded-xl bg-amber-400 text-taupe-900"><Icon name="Workflow" size={24} /></span>
            <div>
              <div className="flex items-center gap-2">
                <h3 className="text-lg font-extrabold tracking-tight">Orquestador Jurídico</h3>
                <span className="inline-flex items-center gap-1 rounded-full bg-emerald-500/15 px-2 py-0.5 text-[10px] font-bold text-emerald-300"><span className="h-1.5 w-1.5 rounded-full bg-emerald-400"></span> Autónomo</span>
              </div>
              <p className="mt-1 max-w-xl text-sm text-taupe-300">Analiza cada asunto, identifica el agente especialista óptimo y le asigna la tarea para resolverla de forma autónoma y priorizada.</p>
            </div>
          </div>
          <button onClick={orchestrate} disabled={running}
            className="inline-flex items-center gap-2 rounded-full bg-amber-400 px-5 py-2.5 text-sm font-bold text-taupe-900 transition hover:bg-amber-300 disabled:opacity-60">
            <Icon name={running ? "Loader" : (orchestrated ? "RefreshCw" : "Sparkles")} size={16} className={running ? "animate-spin" : ""} />
            {running ? "Orquestando…" : (orchestrated ? "Re-orquestar" : "Ejecutar orquestación")}
          </button>
        </div>
        {(report || running) && (
          <div className="mt-5 rounded-xl bg-white/8 p-4 text-sm leading-relaxed text-taupe-100 ring-1 ring-white/10">
            <div className="mb-1 flex items-center gap-1.5 font-mono text-[10px] uppercase tracking-wide text-amber-300"><Icon name="FileText" size={12} /> Informe del orquestador</div>
            {running ? "Analizando asuntos y distribuyéndolos entre el enjambre…" : report}
          </div>
        )}
      </div>

      <div>
        <div className="mb-3 flex items-center justify-between">
          <h3 className="font-bold tracking-tight text-taupe-900">Enjambre de agentes jurídicos</h3>
          <span className="font-mono text-[11px] text-taupe-400">{LEGAL_AGENTS.length} agentes especialistas</span>
        </div>
        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {LEGAL_AGENTS.map((ag) => {
            const n = countFor(ag.id); const active = n > 0;
            return (
              <div key={ag.id} className={`rounded-xl p-4 ring-1 transition ${active ? "bg-white ring-amber-300 shadow-sm" : "bg-white/60 ring-taupe-200/70"}`}>
                <div className="flex items-center justify-between">
                  <span className={`grid h-9 w-9 place-items-center rounded-lg ${active ? "bg-taupe-900 text-amber-300" : "bg-taupe-100 text-taupe-500"}`}><Icon name={ag.icon} size={17} /></span>
                  {orchestrated && <span className={`rounded-full px-2 py-0.5 text-[10px] font-bold ${active ? "bg-emerald-50 text-emerald-700 ring-1 ring-emerald-600/20" : "bg-taupe-100 text-taupe-400"}`}>{active ? `${n} asunto${n > 1 ? "s" : ""}` : "en espera"}</span>}
                </div>
                <div className="mt-3 text-sm font-bold leading-tight text-taupe-900">{ag.area}</div>
                <div className="mt-1 text-[11px] leading-snug text-taupe-500">{ag.capacidad}</div>
              </div>
            );
          })}
        </div>
      </div>

      {orchestrated && (
        <div className="overflow-hidden rounded-xl bg-white ring-1 ring-taupe-200/70 shadow-sm">
          <div className="border-b border-taupe-100 px-5 py-3.5"><h3 className="font-bold tracking-tight text-taupe-900">Registro de orquestación</h3></div>
          <div className="divide-y divide-taupe-50">
            {registro.map((m) => {
              const ag = agentById(asign[m.id]);
              return (
                <div key={m.id} className="flex items-center gap-3 px-5 py-3">
                  <LegalDot level={m.estado} />
                  <div className="min-w-0 flex-1">
                    <div className="truncate text-sm font-semibold text-taupe-900">{m.asunto}</div>
                    <div className="truncate text-xs text-taupe-400">{ventureName(m.venture)} · {m.area}</div>
                  </div>
                  <Icon name="ArrowRight" size={14} className="shrink-0 text-taupe-300" />
                  <div className="flex shrink-0 items-center gap-2 rounded-lg bg-taupe-50 px-2.5 py-1.5 ring-1 ring-taupe-200">
                    <Icon name={ag.icon} size={13} className="text-taupe-600" />
                    <span className="text-xs font-semibold text-taupe-800">{ag.area}</span>
                  </div>
                  <span className="hidden shrink-0 items-center gap-1 rounded-full bg-emerald-50 px-2 py-0.5 text-[10px] font-bold text-emerald-700 ring-1 ring-emerald-600/20 sm:inline-flex">{m.estado === "rojo" ? "Resolviendo" : "Asignado"}</span>
                </div>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
}

function JuridicoCenter({ scope, setScope }) {
  const [matters, setMatters] = useStateL(() => LEGAL_MATTERS.map((m) => ({ ...m })));
  const [pool, setPool] = useStateL(() => ABOGADOS.map((a) => ({ ...a })));
  const [adding, setAdding] = useStateL(false);
  const [form, setForm] = useStateL({ nombre: "", especialidad: "" });
  const [tab, setTab] = useStateL("abogados");

  const ids = useMemoL(() => [...new Set(LEGAL_MATTERS.map((m) => m.venture))], []);
  const shown = matters.filter((m) => scope === "all" || m.venture === scope);

  const rojo = shown.filter((m) => m.estado === "rojo").length;
  const amarillo = shown.filter((m) => m.estado === "amarillo").length;
  const sinAsignar = shown.filter((m) => !m.abogado).length;
  const cargaDe = (aid) => matters.filter((m) => m.abogado === aid && m.estado !== "verde").length;

  const assign = (mid, aid) => setMatters((ms) => ms.map((m) => (m.id === mid ? { ...m, abogado: aid || null } : m)));
  const addAbogado = () => {
    if (!form.nombre.trim()) return;
    setPool((p) => [...p, { id: "a" + (p.length + 1) + Date.now(), nombre: form.nombre.trim(), especialidad: form.especialidad.trim() || "General", firma: "—", disponible: true }]);
    setForm({ nombre: "", especialidad: "" });
    setAdding(false);
  };

  return (
    <div className="space-y-6">
      <div>
        <h2 className="text-xl font-extrabold tracking-tight text-taupe-900">Jurídico — control central</h2>
        <p className="text-xs text-taupe-500">Asigna tu pool de abogados a los asuntos legales de todos los ventures y resuelve cada tema desde un solo lugar.</p>
      </div>
      <div className="flex items-center gap-2">
        {[["abogados", "Asuntos & abogados", "Scale"], ["enjambre", "Enjambre IA", "Workflow"]].map(([id, label, icon]) => (
          <button key={id} onClick={() => setTab(id)} className={`inline-flex items-center gap-1.5 rounded-full px-3.5 py-1.5 text-xs font-semibold transition ${tab === id ? "bg-taupe-900 text-white" : "bg-white text-taupe-600 ring-1 ring-taupe-200 hover:bg-taupe-50"}`}>
            <Icon name={icon} size={13} /> {label}
          </button>
        ))}
      </div>

      <LScopeChips scope={scope} setScope={setScope} ids={ids} />

      {tab === "enjambre" && <EnjambreView matters={shown} />}

      {tab === "abogados" && (<>
      <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <LKpi label="Asuntos abiertos" value={shown.length} sub="En todos los ventures" />
        <LKpi label="Acción requerida" value={rojo} sub="Prioridad alta" accent="text-red-600" />
        <LKpi label="En revisión" value={amarillo} sub="Seguimiento activo" accent="text-amber-600" />
        <LKpi label="Sin asignar" value={sinAsignar} sub={`${pool.length} abogados en el pool`} accent={sinAsignar ? "text-red-600" : "text-emerald-600"} />
      </div>

      <div className="grid gap-6 xl:grid-cols-[1.65fr_1fr]">
        {/* Matters table */}
        <div className="overflow-hidden rounded-xl bg-white ring-1 ring-taupe-200/70 shadow-sm">
          <div class="border-b border-taupe-100 px-5 py-3.5"><h3 className="font-bold tracking-tight text-taupe-900">Asuntos jurídicos</h3></div>
          <div className="overflow-x-auto hide-scrollbar">
            <table className="w-full min-w-[640px] text-sm">
              <thead>
                <tr className="border-b border-taupe-100 text-left font-mono text-[10px] uppercase tracking-[0.1em] text-taupe-400">
                  <th className="px-5 py-2.5 font-medium">Asunto</th>
                  <th className="px-3 py-2.5 font-medium">Estado</th>
                  <th className="px-3 py-2.5 font-medium">Vence</th>
                  <th className="px-5 py-2.5 font-medium">Abogado asignado</th>
                </tr>
              </thead>
              <tbody>
                {shown.map((m) => (
                  <tr key={m.id} className="border-b border-taupe-50 transition hover:bg-taupe-50/60">
                    <td className="px-5 py-3">
                      <div className="font-semibold text-taupe-900">{m.asunto}</div>
                      <div className="flex items-center gap-1.5 text-xs text-taupe-400">
                        <Icon name={ventureIcon(m.venture)} size={11} /> {ventureName(m.venture)} · {m.area}
                      </div>
                    </td>
                    <td className="px-3 py-3"><LegalDot level={m.estado} withLabel /></td>
                    <td className="px-3 py-3 text-xs font-medium text-taupe-600">{m.vence}</td>
                    <td className="px-5 py-3">
                      <select value={m.abogado || ""} onChange={(e) => assign(m.id, e.target.value)}
                        className={`w-full max-w-[200px] rounded-lg border-0 px-2.5 py-1.5 text-xs font-medium ring-1 ring-inset transition focus:ring-taupe-400 ${m.abogado ? "bg-taupe-50 text-taupe-800 ring-taupe-200" : "bg-red-50 text-red-700 ring-red-200"}`}>
                        <option value="">Sin asignar</option>
                        {pool.map((a) => <option key={a.id} value={a.id}>{a.nombre}</option>)}
                      </select>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>

        {/* Pool de abogados */}
        <div className="rounded-xl bg-white p-5 ring-1 ring-taupe-200/70 shadow-sm">
          <div className="mb-4 flex items-center justify-between">
            <h3 className="font-bold tracking-tight text-taupe-900">Pool de abogados</h3>
            <button onClick={() => setAdding((v) => !v)} className="inline-flex items-center gap-1 rounded-full bg-taupe-900 px-2.5 py-1 text-[11px] font-semibold text-white transition hover:bg-taupe-800">
              <Icon name={adding ? "X" : "Plus"} size={12} /> {adding ? "Cancelar" : "Añadir"}
            </button>
          </div>

          {adding && (
            <div className="mb-4 space-y-2 rounded-lg bg-taupe-50 p-3 ring-1 ring-taupe-200">
              <input value={form.nombre} onChange={(e) => setForm({ ...form, nombre: e.target.value })} placeholder="Nombre del abogado"
                className="w-full rounded-md border-0 bg-white px-2.5 py-1.5 text-xs text-taupe-900 ring-1 ring-taupe-200 outline-none focus:ring-taupe-400" />
              <input value={form.especialidad} onChange={(e) => setForm({ ...form, especialidad: e.target.value })} placeholder="Especialidad"
                className="w-full rounded-md border-0 bg-white px-2.5 py-1.5 text-xs text-taupe-900 ring-1 ring-taupe-200 outline-none focus:ring-taupe-400" />
              <button onClick={addAbogado} className="w-full rounded-md bg-amber-400 px-3 py-1.5 text-xs font-bold text-taupe-900 transition hover:bg-amber-300">Agregar al pool</button>
            </div>
          )}

          <div className="space-y-2.5">
            {pool.map((a) => {
              const carga = cargaDe(a.id);
              return (
                <div key={a.id} className="flex items-center gap-3 rounded-lg bg-taupe-50 p-3 ring-1 ring-taupe-100">
                  <span className="grid h-9 w-9 shrink-0 place-items-center rounded-full bg-taupe-900 text-xs font-bold text-amber-300">{initials(a.nombre)}</span>
                  <div className="min-w-0 flex-1">
                    <div className="truncate text-sm font-semibold text-taupe-900">{a.nombre}</div>
                    <div className="truncate text-[11px] text-taupe-500">{a.especialidad}</div>
                  </div>
                  <div className="text-right">
                    <div className="text-xs font-bold tabular-nums text-taupe-800">{carga}</div>
                    <div className="font-mono text-[9px] uppercase tracking-wide text-taupe-400">asuntos</div>
                  </div>
                </div>
              );
            })}
          </div>
          <p className="mt-3 border-t border-taupe-100 pt-3 text-[11px] text-taupe-400">Alimenta el pool con tus abogados y asígnalos a cada asunto para resolverlo.</p>
        </div>
      </div>
      </>)}
    </div>
  );
}

Object.assign(window, { EnjambreView, JuridicoCenter });