import React from 'react';
import { useRouteError, useNavigate } from 'react-router';
import { Alert, AlertDescription, AlertTitle } from '@/client/components/ui/alert';
import { Button } from '@/client/components/ui/button';
import { AlertCircle } from 'lucide-react';

export const ErrorPage = () => {
  const navigate = useNavigate();
  const error = useRouteError() as any;
  const errorMessage = error?.statusText || error?.message || '未知错误';
  
  return (
    <div className="flex flex-col items-center justify-center flex-grow p-4">
      <div className="max-w-3xl w-full">
        <h1 className="text-2xl font-bold mb-4">发生错误</h1>
        <Alert variant="destructive" className="mb-4">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>{error?.message || '未知错误'}</AlertTitle>
          <AlertDescription>
            {error?.stack ? (
              <pre className="text-xs overflow-auto p-2 bg-muted rounded mt-2">
                {error.stack}
              </pre>
            ) : null}
          </AlertDescription>
        </Alert>
        <div className="flex gap-4">
          <Button 
            onClick={() => navigate(0)}
          >
            重新加载
          </Button>
          <Button 
            variant="outline"
            onClick={() => navigate('/admin')}
          >
            返回首页
          </Button>
        </div>
      </div>
    </div>
  );
};