"use client";

import { useEffect } from "react";
import { usePathname } from "next/navigation";

// error.tsx-Grenzen sind immer Client Components und bekommen kein params
// durchgereicht — die Sprache wird daher aus dem URL-Pfad abgeleitet
// (/de/... bzw. /en/...), robust auch bei einem Fehler mitten im Rendern.
export default function LocaleError({ error, reset }: { error: Error & { digest?: string }; reset: () => void }) {
  const pathname = usePathname();
  const isEn = pathname?.startsWith("/en");

  useEffect(() => {
    console.error(error);

    // Nach einem Redeploy während eine Seite noch offen war, zeigt Next.js
    // hier "Failed to find Server Action" / "Server Reference ID did not
    // match" — die alte Client-Bundle-Version passt nicht mehr zum neuen
    // Build. Ein einmaliger Hard-Reload holt sich die aktuelle Version und
    // behebt das automatisch, statt den Nutzer mit der Fehlerseite hängen
    // zu lassen. Zeitfenster statt einmaliger Flag verhindert Reload-Loops,
    // erlaubt aber erneutes Auto-Reload bei einem späteren, echten Redeploy
    // in derselben Tab-Session.
    const isStaleDeployment = /Failed to find Server Action|Server Reference ID did not match/i.test(error.message);
    if (isStaleDeployment && typeof window !== "undefined") {
      const key = "rk-stale-deploy-reload-at";
      const last = Number(sessionStorage.getItem(key) || 0);
      if (Date.now() - last > 10000) {
        sessionStorage.setItem(key, String(Date.now()));
        window.location.reload();
      }
      return;
    }

    // Clientseitige Fehler landen sonst nur in der Browser-Konsole — hier
    // einmalig ans Systemprotokoll melden (Fire-and-forget, keepalive, damit
    // es auch bei sofortigem Weg-Navigieren noch rausgeht).
    if (typeof window !== "undefined") {
      try {
        fetch("/api/client-error", {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            message: error?.message || String(error),
            stack: error?.stack || "",
            digest: error?.digest || "",
            path: window.location.pathname + window.location.search,
          }),
          keepalive: true,
        }).catch(() => {});
      } catch {
        /* egal — Melden ist best effort */
      }
    }
  }, [error]);

  return (
    <main className="min-h-[70vh] rk-shell pt-40 pb-24 flex items-center justify-center">
      <div className="max-w-md mx-auto text-center">
        <p className="text-xs uppercase tracking-[0.35em] text-[var(--rk-ink-muted)]">
          {isEn ? "Error" : "Fehler"}
        </p>
        <h1 className="rk-wordmark mt-4 text-2xl sm:text-3xl">
          {isEn ? "Something went wrong" : "Etwas ist schiefgelaufen"}
        </h1>
        <p className="mt-4 text-sm leading-relaxed text-[var(--rk-ink-muted)]">
          {isEn
            ? "Sorry about that — please try again. If it keeps happening, get in touch and I'll take a look."
            : "Entschuldige — bitte versuch es nochmal. Falls es weiter passiert, melde dich gerne, dann schaue ich mir das an."}
        </p>
        <div className="mt-8 flex items-center justify-center gap-3">
          <button
            type="button"
            onClick={() => reset()}
            className="border border-white/30 rounded-lg px-5 py-2.5 text-xs uppercase tracking-[0.2em] hover:border-white hover:bg-white/5 transition-colors"
          >
            {isEn ? "Try again" : "Nochmal versuchen"}
          </button>
          <a
            href={isEn ? "/en" : "/de"}
            className="border border-white/30 rounded-lg px-5 py-2.5 text-xs uppercase tracking-[0.2em] hover:border-white hover:bg-white/5 transition-colors"
          >
            {isEn ? "Homepage" : "Startseite"}
          </a>
        </div>
      </div>
    </main>
  );
}