"use client";

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

type BlogDetailErrorProps = {
  error: Error & { digest?: string };
  reset: () => void;
};

export default function BlogDetailError({ error, reset }: BlogDetailErrorProps) {
  useEffect(() => {
    console.error("Blog detail route crashed", {
      message: error.message,
      digest: error.digest,
    });
  }, [error]);

  const debugHref =
    typeof window === "undefined"
      ? "/blog"
      : `${window.location.pathname}${window.location.search ? `${window.location.search}&` : "?"}debug=1`;

  return (
    <main className="min-h-screen bg-slate-950 px-4 py-24 font-['Space_Grotesk'] text-slate-100">
      <section className="mx-auto max-w-3xl rounded-lg border border-red-400/40 bg-red-950/20 p-6">
        <p className="text-xs font-black uppercase tracking-[0.18em] text-red-300">
          Blog detail crashed
        </p>
        <h1 className="mt-3 text-3xl font-black tracking-tight">Internal server error</h1>
        <p className="mt-3 text-sm font-semibold leading-6 text-slate-300">
          Open the debug version of this URL to see the API status and backend response, then match
          the digest with server logs.
        </p>

        <dl className="mt-6 grid gap-4 text-sm md:grid-cols-2">
          <div className="rounded-md bg-slate-900 p-3">
            <dt className="text-xs font-black uppercase tracking-[0.14em] text-slate-500">
              Digest
            </dt>
            <dd className="mt-1 break-words font-semibold text-slate-100">
              {error.digest ?? "Not provided"}
            </dd>
          </div>
          <div className="rounded-md bg-slate-900 p-3">
            <dt className="text-xs font-black uppercase tracking-[0.14em] text-slate-500">
              Message
            </dt>
            <dd className="mt-1 break-words font-semibold text-slate-100">{error.message}</dd>
          </div>
        </dl>

        <div className="mt-6 flex flex-wrap gap-3">
          <button
            type="button"
            onClick={reset}
            className="rounded-md bg-white px-4 py-2 text-sm font-black text-slate-950"
          >
            Try again
          </button>
          <Link
            href={debugHref}
            className="rounded-md border border-slate-600 px-4 py-2 text-sm font-black text-slate-100"
          >
            Open debug view
          </Link>
        </div>
      </section>
    </main>
  );
}