"use client";

import { useEffect } from "react";
import Link from "next/link";
import { RefreshCw, TriangleAlert } from "lucide-react";
import { Button } from "@/components/ui";
import { SpinzaWordmark } from "@/components/brand/logo";

/** Route-level error boundary. Keeps the brand, offers a retry, reassures about progress. */
export default function ErrorPage({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  useEffect(() => {
    console.error(error);
  }, [error]);

  return (
    <div className="relative flex min-h-dvh flex-col items-center justify-center px-4 py-16 text-center">
      <div className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_50%_20%,rgba(255,92,122,0.10),transparent_55%)]" />
      <Link href="/" className="relative mb-10 focus-ring rounded-md" aria-label="Spinza home">
        <SpinzaWordmark />
      </Link>
      <div className="relative" role="alert">
        <div className="mx-auto mb-6 grid h-16 w-16 place-items-center rounded-full metal text-danger">
          <TriangleAlert className="h-7 w-7" />
        </div>
        <h1 className="text-3xl font-semibold tracking-[-0.03em] sm:text-4xl">Something went wrong.</h1>
        <p className="mx-auto mt-3 max-w-md text-[15px] text-fg-3">An unexpected error interrupted this screen. Your credits, streak and progress are safe on the server — try again or head back to the lobby.</p>
        {error.digest ? <p className="mt-2 font-mono text-[11px] text-fg-4">Reference {error.digest}</p> : null}
        <div className="mt-8 flex flex-col justify-center gap-3 sm:flex-row">
          <Button size="lg" onClick={reset}>
            <RefreshCw className="h-4 w-4" /> Try again
          </Button>
          <Button href="/" variant="secondary" size="lg">
            Back to the lobby
          </Button>
        </div>
      </div>
      <p className="relative mt-16 text-[12px] text-fg-4">Virtual credits only. No deposits. No withdrawals. No cash value. 18+.</p>
    </div>
  );
}