import { useRouteError, useNavigate } from 'react-router';
import { AlertCircle, RotateCcw, Home } from 'lucide-react';
import { Button } from '@/client/components/ui/button';
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/client/components/ui/card';
import { Alert, AlertDescription, AlertTitle } from '@/client/components/ui/alert';

export const ErrorPage = () => {
  const navigate = useNavigate();
  const error = useRouteError() as any;
  
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4">
      <Card className="w-full max-w-md border-0 shadow-xl">
        <CardHeader className="bg-destructive/10">
          <CardTitle className="flex items-center space-x-2 text-destructive">
            <AlertCircle className="h-6 w-6" />
            <span>发生错误</span>
          </CardTitle>
          <CardDescription>
            抱歉，页面加载时遇到了问题
          </CardDescription>
        </CardHeader>
        
        <CardContent className="space-y-4">
          <Alert variant="destructive">
            <AlertCircle className="h-4 w-4" />
            <AlertTitle>错误详情</AlertTitle>
            <AlertDescription>
              {error?.message || '未知错误'}
            </AlertDescription>
          </Alert>
          
          {error?.stack && (
            <div className="space-y-2">
              <h4 className="text-sm font-medium text-muted-foreground">技术信息</h4>
              <pre className="text-xs text-muted-foreground bg-muted/50 p-3 rounded-lg overflow-x-auto max-h-40">
                {error.stack}
              </pre>
            </div>
          )}
        </CardContent>
        
        <CardFooter className="flex gap-2">
          <Button
            onClick={() => navigate(0)}
            className="flex-1"
            variant="outline"
          >
            <RotateCcw className="h-4 w-4 mr-2" />
            重新加载
          </Button>
          <Button
            onClick={() => navigate('/')}
            className="flex-1"
          >
            <Home className="h-4 w-4 mr-2" />
            返回首页
          </Button>
        </CardFooter>
      </Card>
    </div>
  );
};