"use client";

import { useEffect } from "react";

import { TriangleAlert } from "lucide-react";
import Link from "next/link";

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

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

  return (
    <main className="flex min-h-svh flex-col items-center justify-center gap-4 px-6 py-12 text-center">
      <TriangleAlert aria-hidden="true" className="size-8 text-destructive" />
      <div className="flex flex-col items-center gap-3" role="alert">
        <h1 className="text-xl font-semibold text-foreground">页面出错了</h1>
        <p className="max-w-md text-sm text-muted-foreground">
          页面渲染时发生异常，已保存的对话不受影响。可以重试，或返回对话首页。
        </p>
      </div>
      {error.digest ? (
        <p className="max-w-md text-xs text-muted-foreground">
          错误编号 <code className="font-mono">{error.digest}</code>，反馈问题时请一并提供。
        </p>
      ) : null}
      <div className="mt-2 flex flex-wrap items-center justify-center gap-3">
        <Button type="button" onClick={() => reset()}>
          重试
        </Button>
        <Button render={<Link href="/" />} nativeButton={false} variant="outline">
          返回对话
        </Button>
      </div>
    </main>
  );
}