import { Suspense } from "react";
import Link from "next/link";

import { AppShell } from "@/components/app-shell";
import { GraphView } from "@/components/graph/graph-view";

export default function GraphPage() {
  return (
    <AppShell>
      <section className="space-y-6">
        <header className="space-y-1.5">
          <nav className="text-[0.78rem] text-ink-muted mb-1">
            <Link href="/" className="hover:text-gold-deep">
              בית
            </Link>
            <span aria-hidden> · </span>
            <span className="text-navy">מפת הקורפוס</span>
          </nav>
          <div className="text-[0.75rem] uppercase tracking-[0.12em] text-gold-deep">
            גרף הציטוטים · ספריית הפסיקה
          </div>
          <h1 className="text-navy mb-0">מפת הקורפוס</h1>
          <p className="text-ink-muted text-sm mt-1 max-w-3xl leading-relaxed">
            גרף הציטוטים של הקורפוס — פסיקה, נושאים והלכות וקשרי-ההפניה ביניהם.
            גררו צמתים, סננו שכבות, ובחנו את מרכזי-הכובד. גודל הנקודה משקף כמה
            פעמים הפסיקה צוטטה; לחיצה על נקודה ממקדת בשכניה.
          </p>
        </header>
        <div className="h-[2px] bg-gradient-to-l from-transparent via-gold to-transparent" />
        <Suspense
          fallback={
            <div className="grid h-[560px] place-items-center rounded-lg border border-rule bg-gradient-to-b from-[#f3ecda] to-[#efe6cf] text-sm text-ink-muted">
              טוען גרף…
            </div>
          }
        >
          <GraphView />
        </Suspense>
      </section>
    </AppShell>
  );
}