"use client";

import { useEffect } from "react";
import { motion } from "framer-motion";
import { AlertTriangle, RotateCcw, Home } from "lucide-react";

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

  return (
    <div className="flex min-h-dvh flex-col items-center justify-center bg-background px-6">
      <motion.div
        className="flex flex-col items-center text-center"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
      >
        <motion.div
          className="relative flex h-20 w-20 items-center justify-center"
          animate={{ y: [0, -4, 0] }}
          transition={{ duration: 2.5, repeat: Infinity, ease: "easeInOut" }}
        >
          <div className="absolute inset-0 rounded-2xl bg-rose-500/15 blur-lg" />
          <AlertTriangle size={36} className="relative text-rose-400/80" strokeWidth={1.5} />
        </motion.div>

        <h1 className="mt-6 text-xl font-bold text-heading">出了点问题</h1>
        <p className="mt-2 max-w-xs text-sm text-muted">
          页面遇到了意外错误，请重试或返回首页
        </p>

        <div className="mt-8 flex gap-3">
          <button
            onClick={reset}
            className="flex items-center gap-1.5 rounded-xl bg-rose-600 px-5 py-2.5 text-sm font-semibold text-white transition-colors hover:bg-rose-500"
          >
            <RotateCcw size={15} />
            重试
          </button>
          <a
            href="/"
            className="flex items-center gap-1.5 rounded-xl bg-surface px-5 py-2.5 text-sm font-semibold text-secondary ring-1 ring-border transition-colors hover:bg-elevated"
          >
            <Home size={15} />
            首页
          </a>
        </div>
      </motion.div>
    </div>
  );
}