"use client";

import { useEffect } from "react";
import Link from "next/link";

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

  return (
    <div className="flex min-h-[60vh] flex-col items-center justify-center gap-4 p-6 text-center">
      <h1 className="text-xl font-semibold">页面加载失败</h1>
      <p className="max-w-md text-sm text-muted-foreground">
        管理后台遇到意外错误，请重试或返回首页。
      </p>
      {process.env.NODE_ENV === "development" ? (
        <pre className="max-w-xl overflow-auto rounded-md bg-muted p-3 text-left text-xs">
          {error.message}
        </pre>
      ) : null}
      <div className="flex gap-3">
        <button
          type="button"
          onClick={reset}
          className="rounded-md border px-4 py-2 text-sm"
        >
          重试
        </button>
        <Link href="/admin" className="rounded-md bg-primary px-4 py-2 text-sm text-primary-foreground">
          返回首页
        </Link>
      </div>
    </div>
  );
}
