"use client";

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

/**
 * Global error boundary za Next.js app router.
 *
 * Hvata greške koje propadnu kroz sve segment-specifične error.tsx
 * fajlove — npr. grešku iz root layout-a. Ovde šaljemo izveštaj na
 * server i prikažemo korisniku finu poruku umesto bele stranice.
 */
export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Pošalji grešku našem error endpointu — server-side hvata u Sentry/ErrorLog.
    void fetch("/api/_internal/client-error", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        message: error.message,
        stack: error.stack,
        digest: error.digest,
        href: typeof window !== "undefined" ? window.location.href : "",
        userAgent: typeof navigator !== "undefined" ? navigator.userAgent : "",
      }),
      keepalive: true,
    }).catch(() => undefined);
  }, [error]);

  return (
    <html lang="sr">
      <body
        style={{
          margin: 0,
          fontFamily:
            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif",
          background: "#faf8f6",
          color: "#0c1828",
          minHeight: "100vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "2rem",
        }}
      >
        <div style={{ maxWidth: 480, textAlign: "center" }}>
          <p
            style={{
              fontSize: "0.75rem",
              fontWeight: 800,
              letterSpacing: "0.2em",
              textTransform: "uppercase",
              color: "#c2410c",
              margin: 0,
            }}
          >
            Greška
          </p>
          <h1
            style={{
              fontSize: "2rem",
              fontWeight: 700,
              marginTop: "0.5rem",
              marginBottom: "1rem",
            }}
          >
            Nešto je pošlo po zlu
          </h1>
          <p style={{ lineHeight: 1.7, color: "rgba(12,24,40,0.7)" }}>
            Naš tim je već obavešten i radi na rešavanju. Pokušajte da osvežite
            stranicu ili se vratite na početnu.
            {error.digest && (
              <>
                <br />
                <span style={{ fontSize: "0.85rem", color: "rgba(12,24,40,0.5)" }}>
                  Referenca: {error.digest}
                </span>
              </>
            )}
          </p>
          <div
            style={{
              marginTop: "1.5rem",
              display: "flex",
              gap: "0.75rem",
              justifyContent: "center",
              flexWrap: "wrap",
            }}
          >
            <button
              type="button"
              onClick={reset}
              style={{
                background: "#c2410c",
                color: "#fff",
                fontWeight: 700,
                padding: "0.75rem 1.5rem",
                border: 0,
                borderRadius: "12px",
                cursor: "pointer",
                fontSize: "0.9rem",
              }}
            >
              Pokušaj ponovo
            </button>
            <Link
              href="/"
              style={{
                background: "#fff",
                color: "#0c1828",
                fontWeight: 700,
                padding: "0.75rem 1.5rem",
                border: "1px solid rgba(12,24,40,0.15)",
                borderRadius: "12px",
                textDecoration: "none",
                fontSize: "0.9rem",
              }}
            >
              Početna
            </Link>
          </div>
        </div>
      </body>
    </html>
  );
}
