import React from 'react';
import { useRouteError } from 'react-router';
import { Alert, Button } from 'antd';
import { useTheme } from '../hooks_sys.tsx';

export const ErrorPage = () => {
  const { isDark } = useTheme();
  const error = useRouteError() as any;
  const errorMessage = error?.statusText || error?.message || '未知错误';
  
  return (
    <div className="flex flex-col items-center justify-center min-h-screen p-4"
      style={{ color: isDark ? '#fff' : 'inherit' }}
    >
      <div className="max-w-3xl w-full">
        <h1 className="text-2xl font-bold mb-4">发生错误</h1>
        <Alert 
          type="error"
          message={error?.message || '未知错误'}
          description={
            error?.stack ? (
              <pre className="text-xs overflow-auto p-2 bg-gray-100 dark:bg-gray-800 rounded">
                {error.stack}
              </pre>
            ) : null
          }
          className="mb-4"
        />
        <div className="flex gap-4">
          <Button 
            type="primary" 
            onClick={() => window.location.reload()}
          >
            重新加载
          </Button>
          <Button 
            onClick={() => window.location.href = '/admin'}
          >
            返回首页
          </Button>
        </div>
      </div>
    </div>
  );
};