/**
 * /graph — force-directed entity graph view, Obsidian-style, FULLSCREEN.
 *
 * Layout: fixed 100vh viewport, overlay HUD com header + AuthBar no canto,
 * canvas full-bleed por baixo. Mais imersivo que o layout em container.
 */
import Link from "next/link";
import { AuthBar } from "@/components/auth-bar";
// W2-TD#12: switched from react-force-graph-2d to @react-sigma. One graph
// library is enough; sigma is the one already used by the entity sidebar.
import { SigmaGraph } from "@/components/sigma-graph";

export const dynamic = "force-dynamic";

export default function GraphPage() {
  return (
    <main className="fixed inset-0 bg-[#040810] overflow-hidden">
      {/* Top overlay HUD */}
      <div className="absolute top-0 left-0 right-0 z-30 pointer-events-none">
        <div className="flex items-start justify-between gap-4 p-4 bg-gradient-to-b from-[#040810]/95 via-[#040810]/60 to-transparent pointer-events-auto">
          <div>
            <div className="font-mono text-[10px] text-[#5a6678] tracking-widest uppercase mb-1">
              graph · entity co-mention network
            </div>
            <h1 className="font-mono text-xl text-[#00ff9c]">▍ Bureau Connections</h1>
          </div>
          <div className="flex items-center gap-2 pointer-events-auto">
            <Link
              href="/"
              className="font-mono text-xs px-3 py-1.5 border border-[#7fdbff] text-[#7fdbff] hover:bg-[rgba(127,219,255,0.10)] rounded"
            >
              ← home
            </Link>
            <AuthBar />
          </div>
        </div>
      </div>

      {/* Bottom legend */}
      <div className="absolute bottom-0 left-0 right-0 z-30 pointer-events-none">
        <div className="bg-gradient-to-t from-[#040810]/95 via-[#040810]/60 to-transparent p-3">
          <p className="font-mono text-[10px] text-[#5a6678] text-center max-w-3xl mx-auto">
            Cada nó é uma entidade. Arestas = co-menções no mesmo chunk (peso = nº de chunks compartilhados).
            Clique para expandir vizinhos + abrir a página da entidade. Dados de <code className="text-[#7fdbff]">public.entity_mentions</code>.
          </p>
        </div>
      </div>

      {/* Fullscreen canvas */}
      <div className="absolute inset-0">
        <SigmaGraph />
      </div>
    </main>
  );
}