"use client";

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

import { Spinner } from "@/components/ui";

/**
 * Route-level error boundary. Next.js 16 passes `retry` in place of the older
 * `reset` prop; `retry` re-runs the failed render on the server.
 */
export default function Error({
  error,
  retry,
}: {
  error: Error & { digest?: string };
  retry: () => void;
}) {
  useEffect(() => {
    console.error("[app] unhandled route error:", error);
  }, [error]);

  return (
    <div className="mx-auto flex max-w-2xl flex-col items-center px-4 py-24 text-center">
      <h1 className="text-2xl font-bold text-slate-900">Something went wrong</h1>
      <p className="mt-2 text-sm text-slate-600">
        The page could not be rendered. This is usually a malformed
        <code className="mx-1 rounded bg-slate-100 px-1.5 py-0.5 font-mono text-xs">
          data/products.json
        </code>
        or a missing vector index.
      </p>

      {error.digest ? (
        <p className="mt-3 text-xs text-slate-500">Reference: {error.digest}</p>
      ) : null}

      <div className="mt-6 flex items-center gap-3">
        <button
          type="button"
          onClick={() => retry()}
          className="inline-flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-indigo-700 focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:ring-offset-2 focus-visible:outline-none"
        >
          <Spinner />
          Try again
        </button>
        <Link
          href="/"
          className="rounded-lg border border-slate-300 px-4 py-2 text-sm font-semibold text-slate-700 transition-colors hover:border-slate-400 focus-visible:ring-2 focus-visible:ring-indigo-600 focus-visible:outline-none"
        >
          Go home
        </Link>
      </div>
    </div>
  );
}