"use client";

import { useEffect } from "react";
import * as Sentry from "@sentry/nextjs";
import { Button } from "../src/components/Button";

export default function Error({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    // Log the error to Sentry/GlitchTip
    Sentry.captureException(error);
    console.error("Caught in error.tsx:", error);
  }, [error]);

  return (
    <div className="flex flex-col items-center justify-center min-h-[70vh] px-5 py-20 text-center">
      <div className="space-y-6 max-w-2xl mx-auto">
        <span className="inline-block px-3 py-1 bg-red-50 border border-red-100 rounded text-[10px] font-mono text-red-500 uppercase tracking-widest">
          Error 500
        </span>
        <h1 className="text-5xl md:text-7xl font-black text-slate-900 tracking-tighter">
          Kritischer Fehler.
        </h1>
        <p className="text-xl md:text-2xl text-slate-500 font-serif italic max-w-xl mx-auto leading-relaxed">
          Ein unerwartetes Problem ist aufgetreten. Unsere Systeme haben den
          Vorfall protokolliert.
        </p>

        <div className="pt-8 flex flex-col sm:flex-row items-center justify-center gap-4">
          <Button href="#" onClick={() => reset()} variant="primary">
            System neu starten (Retry)
          </Button>
          <Button href="/" variant="outline">
            Zurück zur Basis
          </Button>
        </div>

        <div className="pt-16 max-w-sm mx-auto">
          <div className="bg-slate-50 p-6 rounded-2xl border border-slate-100 text-left font-mono text-xs text-slate-400">
            <div className="flex items-center justify-between border-b border-slate-200/60 pb-2 mb-2">
              <span>STATUS</span>
              <span className="text-red-500 flex items-center gap-2">
                <span className="w-1.5 h-1.5 rounded-full bg-red-500 animate-pulse"></span>
                FAIL
              </span>
            </div>
            <div className="flex justify-between border-b border-slate-200/60 pb-2 mb-2">
              <span>TRACKING</span>
              <span className="text-green-500">GLITCHTIP_LOGGED</span>
            </div>
            {error.digest && (
              <div className="flex justify-between">
                <span>DIGEST</span>
                <span className="truncate max-w-[150px]">{error.digest}</span>
              </div>
            )}
          </div>
        </div>
      </div>
    </div>
  );
}