import { useThemePreference } from './hooks/useThemePreference';
import { Component, type ErrorInfo, type ReactNode } from 'react';
import { Button } from '../components/ui';
export class ErrorBoundary extends Component<{ children: ReactNode }, { error?: Error }> {
  state: { error?: Error } = {};
  static getDerivedStateFromError(error: Error) {
    return { error };
  }
  componentDidCatch(error: Error, info: ErrorInfo) {
    console.error('React fatal error', error, info);
  }
  render() {
    return this.state.error ? <FatalError error={this.state.error} /> : this.props.children;
  }
}

function FatalError({ error }: { error: Error }) {
  const [theme] = useThemePreference();
  return (
    <main
      className={`theme-${theme} grid min-h-screen place-items-center bg-app p-4 text-text-primary`}
    >
      <section className="min-w-0 max-w-xl rounded-lg border border-danger-border bg-panel p-6 shadow-xl">
        <h1 className="text-xl font-semibold">界面发生致命错误</h1>
        <pre className="mt-3 max-h-[50vh] overflow-auto whitespace-pre-wrap break-words text-sm text-danger">
          {error.message}
        </pre>
        <p className="mt-3 text-xs text-warning">重新加载会丢失当前浏览器会话中未保存的修改。</p>
        <Button variant="danger" className="mt-4" onClick={() => location.reload()}>
          重新加载
        </Button>
      </section>
    </main>
  );
}