"use client";

import { useEffect } from "react";
import Link from "next/link";
import { AlertCircle, ArrowRight, RefreshCw } from "lucide-react";
import { reportClientError } from "@/lib/telemetry";

export default function RouteError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    if (process.env.NODE_ENV !== "production") {
      console.error("[DocDoe] Unhandled route error:", error);
    }
    reportClientError(error, "route-error", { digest: error.digest });
  }, [error]);

  return (
    <main className="relative grid min-h-svh place-items-center overflow-hidden bg-[#f7f7f5] px-5 py-8 text-[#17181b]">
      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(23,24,27,0.025)_1px,transparent_1px),linear-gradient(90deg,rgba(23,24,27,0.025)_1px,transparent_1px)] bg-[size:72px_72px]" aria-hidden="true" />
      <section className="relative w-full max-w-md border border-[#deded9] bg-white p-6 text-center shadow-[0_20px_70px_rgba(23,24,27,0.11)] sm:p-8">
        <div className="mx-auto grid size-12 place-items-center border border-[#d7a4a0] bg-[#fff6f5] text-[#8a2f2a]">
          <AlertCircle className="size-5" strokeWidth={1.9} aria-hidden="true" />
        </div>
        <h1 className="mt-5 text-[25px] font-semibold tracking-[-0.035em]">This page did not finish loading</h1>
        <p className="mt-3 text-[14px] leading-6 text-[#62635e]" role="alert">
          Your saved study work has not been changed. Try again, or return to your study desk.
        </p>
        <div className="mt-7 grid gap-3 sm:grid-cols-2">
          <button
            type="button"
            onClick={reset}
            className="inline-flex h-11 items-center justify-center gap-2 rounded-xl bg-[#17181b] px-4 text-[13px] font-semibold text-white transition hover:bg-[#303136] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b] focus-visible:ring-offset-2"
          >
            <RefreshCw className="size-4" strokeWidth={2} aria-hidden="true" />
            Try again
          </button>
          <Link
            href="/"
            className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-[#d8d8d3] px-4 text-[13px] font-semibold text-[#363733] transition hover:bg-[#f8f8f6] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b] focus-visible:ring-offset-2"
          >
            Open Home
            <ArrowRight className="size-4" strokeWidth={2} aria-hidden="true" />
          </Link>
        </div>
        <Link href="/" className="mt-5 inline-flex rounded text-[12px] font-semibold text-[#62635e] underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#17181b]">
          Go to the DocDoe start page
        </Link>
        {error.digest ? <p className="mt-5 text-[11px] text-[#8a8b86]">Reference: {error.digest}</p> : null}
      </section>
    </main>
  );
}