import { AlertTriangle, RefreshCw } from "lucide-react";
import { Component, type ErrorInfo, type ReactNode } from "react";
import { Button, Card } from "./primitives";

interface State {
  failed: boolean;
}

export class ErrorBoundary extends Component<{ children: ReactNode }, State> {
  state: State = { failed: false };

  static getDerivedStateFromError(): State {
    return { failed: true };
  }

  componentDidCatch(_error: Error, _info: ErrorInfo): void {
    // 管理端禁止记录可能包含用户或运营数据的渲染上下文。
  }

  render() {
    if (!this.state.failed) return this.props.children;
    return (
      <Card className="mx-auto grid min-h-80 max-w-lg place-items-center border-danger/20 p-8 text-center">
        <div>
          <span className="mx-auto mb-4 grid size-12 place-items-center rounded-2xl bg-danger-soft text-danger">
            <AlertTriangle className="size-5" aria-hidden />
          </span>
          <h1 className="text-lg font-bold">页面暂时无法显示</h1>
          <p className="mt-2 text-sm leading-6 text-muted">
            页面渲染时出现异常。请重新加载，未提交的操作不会自动执行。
          </p>
          <Button className="mt-6" variant="secondary" onClick={() => window.location.reload()}>
            <RefreshCw className="size-4" aria-hidden />
            重新加载
          </Button>
        </div>
      </Card>
    );
  }
}