"use client";

import { useEffect, useMemo, useState } from "react";

import { api, GraphData, Investigation } from "@/lib/api";

const COLORS: Record<string, string> = {

  plate: "#4da3ff", camera: "#3fd07f", vehicle: "#ffb454", incident: "#ff5d6c", default: "#8595ab",

};

function layout(nodes: GraphData["nodes"], edges: GraphData["edges"], w: number, h: number) {

  const pos = nodes.map((_, i) => {

    const a = (i / Math.max(1, nodes.length)) * Math.PI * 2;

    return { x: w / 2 + Math.cos(a) * 180, y: h / 2 + Math.sin(a) * 140 };

  });

  const idx = new Map(nodes.map((n, i) => [n.id, i]));

  for (let iter = 0; iter < 220; iter++) {

    for (let i = 0; i < nodes.length; i++) for (let j = i + 1; j < nodes.length; j++) {

      let dx = pos[i].x - pos[j].x, dy = pos[i].y - pos[j].y;

      let d2 = dx * dx + dy * dy || 1;

      const f = 9000 / d2;

      const d = Math.sqrt(d2);

      dx /= d; dy /= d;

      pos[i].x += dx * f; pos[i].y += dy * f;

      pos[j].x -= dx * f; pos[j].y -= dy * f;

    }

    for (const e of edges) {

      const a = idx.get(e.source), b = idx.get(e.target);

      if (a == null || b == null) continue;

      const dx = pos[b].x - pos[a].x, dy = pos[b].y - pos[a].y;

      const d = Math.sqrt(dx * dx + dy * dy) || 1;

      const f = (d - 120) * 0.01;

      pos[a].x += (dx / d) * f; pos[a].y += (dy / d) * f;

      pos[b].x -= (dx / d) * f; pos[b].y -= (dy / d) * f;

    }

    for (const p of pos) { p.x += (w / 2 - p.x) * 0.002; p.y += (h / 2 - p.y) * 0.002; }

  }

  return pos;

}

export default function GraphPage() {

  const [invs, setInvs] = useState<Investigation[]>([]);

  const [sel, setSel] = useState<string>("");

  const [graph, setGraph] = useState<GraphData | null>(null);

  const [err, setErr] = useState<string | null>(null);

  useEffect(() => {

    api.investigations().then((i) => { setInvs(i); if (i[0]) setSel(i[0].id); })

      .catch((e) => setErr(e.status === 401 ? "Sign in to view the entity graph." : String(e)));

  }, []);

  useEffect(() => { if (sel) api.graph(sel).then(setGraph).catch(() => setErr("Graph load failed.")); }, [sel]);

  const W = 820, H = 540;

  const pos = useMemo(() => graph ? layout(graph.nodes, graph.edges, W, H) : [], [graph]);

  const idx = useMemo(() => new Map((graph?.nodes || []).map((n, i) => [n.id, i])), [graph]);

  return (

    <div>

      <h1>Entity Graph</h1>

      <p className="muted">Plates, vehicles, cameras and incidents linked by observed sightings and stored relationships.</p>

      <div className="row" style={{ margin: "10px 0" }}>

        <select value={sel} onChange={(e) => setSel(e.target.value)}>

          {invs.map((i) => <option key={i.id} value={i.id}>{i.title}</option>)}

        </select>

        {graph && <span className="muted">{graph.nodes.length} nodes · {graph.edges.length} edges</span>}

      </div>

      {err && <div className="badge danger">{err}</div>}

      <div className="card" style={{ padding: 0, overflow: "hidden" }}>

        {graph && (

          <svg width="100%" viewBox={`0 0 ${W} ${H}`} style={{ display: "block", background: "var(--panel)" }}>

            {graph.edges.map((e, i) => {

              const a = idx.get(e.source), b = idx.get(e.target);

              if (a == null || b == null) return null;

              return <line key={i} x1={pos[a].x} y1={pos[a].y} x2={pos[b].x} y2={pos[b].y}

                           stroke="var(--border)" strokeWidth={1.2} />;

            })}

            {graph.nodes.map((n, i) => (

              <g key={n.id} transform={`translate(${pos[i].x},${pos[i].y})`}>

                <circle r={n.type === "plate" ? 11 : 8} fill={COLORS[n.type] || COLORS.default}

                        stroke="#04111f" strokeWidth={1.5} />

                <text x={13} y={4} fontSize={11} fill="var(--text)">{n.label}</text>

              </g>

            ))}

          </svg>

        )}

        {!graph && !err && <div className="muted" style={{ padding: 20 }}>Loading graph…</div>}

      </div>

      <div className="row" style={{ marginTop: 10, gap: 16 }}>

        {Object.entries(COLORS).filter(([k]) => k !== "default").map(([k, c]) => (

          <span key={k} className="row" style={{ gap: 6 }}>

            <span style={{ width: 12, height: 12, borderRadius: 6, background: c, display: "inline-block" }} />

            <span className="muted">{k}</span>

          </span>

        ))}

      </div>

    </div>

  );

}