"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";

export default function AppError({
  error,
  reset,
}: {
  error: Error & { digest?: string };
  reset: () => void;
}) {
  const router = useRouter();
  const [retrying, setRetrying] = useState(false);

  useEffect(() => {
    console.error("App error:", error);
  }, [error]);

  const handleRetry = () => {
    setRetrying(true);
    reset();
    setTimeout(() => setRetrying(false), 3000);
  };

  return (
    <div className="flex flex-col items-center justify-center py-24 text-center px-4">
      <div className="text-6xl">🔥</div>
      <h1 className="text-2xl font-serif font-bold text-gray-900 mt-4">
        Well, that didn't go well.
      </h1>
      <p className="text-gray-500 mt-3 max-w-md leading-relaxed">
        An error occurred in the application. We'd like to say it's rare, but
        honestly we haven't been keeping track.
      </p>
      <p className="text-gray-400 text-sm mt-2 font-mono bg-gray-100 px-4 py-2 rounded-lg">
        {error.message || "No details. How mysterious."}
      </p>
      <div className="flex flex-col sm:flex-row items-center gap-3 mt-8">
        <Button
          onClick={handleRetry}
          disabled={retrying}
          className="bg-[#1D9E75] hover:bg-[#1a8b66] text-white cursor-pointer disabled:opacity-50"
        >
          {retrying ? "Trying again..." : "Try again (optimist)"}
        </Button>
        <Button variant="outline" onClick={() => router.push("/home")} className="cursor-pointer">
          Go home (realist)
        </Button>
      </div>
    </div>
  );
}