import React from 'react';
import { isRouteErrorResponse, useNavigate, useRouteError } from 'react-router-dom';
import { AlertTriangle, RotateCcw } from 'lucide-react';

import { Button } from '@/components/ui/button';

export function RouteErrorElement(): React.ReactElement {
  const error = useRouteError();
  const navigate = useNavigate();

  const statusText = (() => {
    if (isRouteErrorResponse(error)) {
      return `${error.status} ${error.statusText}`;
    }
    if (error instanceof Error) {
      return error.message;
    }
    return 'Unerwarteter Fehler';
  })();

  return (
    <div className="flex min-h-screen items-center justify-center bg-slate-50 px-4 py-10 text-slate-900 dark:bg-slate-950 dark:text-slate-50">
      <div className="w-full max-w-lg rounded-2xl border border-slate-200 bg-white p-6 shadow-lg dark:border-slate-800 dark:bg-slate-900">
        <div className="flex items-center gap-3">
          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-200">
            <AlertTriangle className="h-5 w-5" />
          </div>
          <div>
            <p className="text-sm font-semibold text-slate-900 dark:text-slate-50">Unerwarteter Fehler</p>
            <p className="text-xs text-slate-600 dark:text-slate-300">{statusText}</p>
          </div>
        </div>
        <p className="mt-4 text-sm text-slate-700 dark:text-slate-200">
          Etwas ist schiefgelaufen. Du kannst es erneut versuchen oder zur letzten Seite zurückkehren.
        </p>
        <div className="mt-5 flex flex-wrap gap-2">
          <Button variant="outline" onClick={() => navigate(-1)}>
            Zurück
          </Button>
          <Button onClick={() => window.location.reload()}>
            <RotateCcw className="mr-2 h-4 w-4" /> Neu laden
          </Button>
        </div>
      </div>
    </div>
  );
}

export default RouteErrorElement;