import { useState } from "react";
import { useSearchParams } from "react-router";
import type { Graph } from "../api";
import { useFetch } from "../hooks";
import { ErrorBox, Loading } from "../components/ui";
import { LayeredGraph } from "../components/Graph";

export default function GraphPage() {
  const [sp, setSp] = useSearchParams();
  const focus = sp.get("focus") ?? ""; const depth = Number(sp.get("depth") ?? 2);
  const [f, setF] = useState(focus);
  const { data, error, loading } = useFetch<Graph>(`graph?focus=${encodeURIComponent(focus)}&depth=${depth}`);
  const types = data ? Array.from(new Set(data.nodes.map((n) => n.type))) : [];
  return (
    <div>
      <h1>Knowledge Graph</h1><p className="hint">Relational entities and lineage edges. Columns are entity types; click a node to open it. Focus on one node (type:id) to trim the neighbourhood.</p>
      <form className="filters" onSubmit={(e) => { e.preventDefault(); setSp({ focus: f, depth: String(depth) }); }}>
        <input aria-label="Focus node" placeholder="focus e.g. api:<uuid> or dataset:<uuid>" value={f} onChange={(e) => setF(e.target.value)} list="nodes" />
        <datalist id="nodes">{data?.nodes.slice(0, 500).map((n) => <option key={n.id} value={n.id}>{n.label}</option>)}</datalist>
        <select aria-label="Depth" value={depth} onChange={(e) => setSp({ focus, depth: e.target.value })}>{[1, 2, 3, 4].map((d) => <option key={d} value={d}>depth {d}</option>)}</select>
        <button className="btn">Apply</button>{focus && <button type="button" className="btn" onClick={() => { setF(""); setSp({}); }}>Clear focus</button>}
      </form>
      {loading && <Loading />}<ErrorBox error={error} />
      {data && <><div className="hint" style={{ marginBottom: 8 }}>{data.nodes.length} nodes · {data.edges.length} edges · types: {types.join(", ") || "none"}</div><LayeredGraph graph={data} /></>}
    </div>
  );
}