"use client";
import * as React from "react";
import Link from "next/link";
import { RotateCcw } from "lucide-react";
import { Logo } from "@/components/brand/logo";
import { Button } from "@/components/ui/button";

export default function GlobalError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  React.useEffect(() => {
    // Surface in the console for debugging; the user only sees a friendly message.
    console.error(error);
  }, [error]);

  return (
    <div className="relative flex min-h-dvh flex-col overflow-x-clip">
      <div aria-hidden className="dot-grid pointer-events-none absolute inset-0 opacity-60 [mask-image:radial-gradient(ellipse_70%_60%_at_50%_40%,black_10%,transparent_100%)] dark:opacity-40" />
      <header className="relative z-10 flex h-14 items-center px-5 sm:px-8">
        <Link href="/" aria-label="PolyLLM home" className="rounded-md">
          <Logo size={24} />
        </Link>
      </header>
      <main className="relative z-10 flex flex-1 items-center justify-center px-5 pb-16">
        <div className="max-w-md text-center animate-fade-up">
          <p className="font-mono text-[12px] uppercase tracking-[0.16em] text-fg-subtle">Something broke</p>
          <h1 className="mt-3 text-balance text-4xl font-semibold leading-none tracking-tight sm:text-5xl">We hit an unexpected error.</h1>
          <p className="mt-4 text-pretty text-[15px] leading-7 text-fg-muted">Your conversations and keys are safe. Try again; if it keeps happening, reload the page or come back in a minute.</p>
          <div className="mt-8 flex flex-col items-center justify-center gap-2 sm:flex-row">
            <Button size="lg" className="w-full sm:w-auto" onClick={() => reset()}>
              <RotateCcw />
              Try again
            </Button>
            <Button asChild size="lg" variant="outline" className="w-full sm:w-auto">
              <Link href="/app/chat">Open PolyLLM</Link>
            </Button>
          </div>
          {error.digest ? (
            <p className="mt-8 font-mono text-[11px] text-fg-subtle">
              Reference: <span className="select-all">{error.digest}</span>
            </p>
          ) : null}
        </div>
      </main>
    </div>
  );
}