"use client";

import { useEffect } from "react";
import { AlertTriangle, RefreshCw, Home } from "lucide-react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import Link from "next/link";

export default function AdminError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  useEffect(() => {
    console.error("[AdminError]", error);
  }, [error]);

  return (
    <div className="flex items-center justify-center h-full min-h-[400px]">
      <Card className="max-w-md w-full border-red-200 dark:border-red-950 bg-white dark:bg-gray-900 shadow-sm">
        <CardContent className="pt-8 pb-8 text-center space-y-5">
          <div className="flex justify-center">
            <div className="flex h-12 w-12 items-center justify-center rounded-full bg-red-100 dark:bg-red-950">
              <AlertTriangle className="h-6 w-6 text-red-600 dark:text-red-400" />
            </div>
          </div>
          <div className="space-y-2">
            <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Failed to load admin panel</h2>
            <p className="text-sm text-gray-500 dark:text-gray-400 leading-relaxed">
              {error.message || "An unexpected error occurred while loading this page."}
            </p>
          </div>
          <div className="flex items-center justify-center gap-3">
            <Button onClick={reset} variant="outline" className="gap-2">
              <RefreshCw className="h-4 w-4" />
              Try again
            </Button>
            <Button asChild className="gap-2 bg-red-600 hover:bg-red-700 text-white">
              <Link href="/admin">
                <Home className="h-4 w-4" />
                Back to Admin Dashboard
              </Link>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}