import React from 'react';
import { useNavigate, useRouteError } from 'react-router-dom';
import { AlertCircle, Home, RefreshCw } from 'lucide-react';

/**
 * 路由错误降级组件
 * 
 * 用于 React Router 的 errorElement
 * 当路由加载或渲染出错时显示
 */
const ErrorFallback: React.FC = () => {
  const navigate = useNavigate();
  const error = useRouteError() as Error;

  const handleGoHome = () => {
    navigate('/', { replace: true });
  };

  const handleReload = () => {
    window.location.reload();
  };

  return (
    <div className="flex h-screen w-screen flex-col items-center justify-center bg-slate-50 p-8">
      <div className="max-w-md text-center">
        {/* 错误图标 */}
        <div className="mb-6 flex justify-center">
          <div className="rounded-full bg-red-100 p-6">
            <AlertCircle className="h-16 w-16 text-red-500" />
          </div>
        </div>

        {/* 错误标题 */}
        <h1 className="mb-3 text-3xl font-bold text-slate-800">
          页面加载失败
        </h1>

        {/* 错误描述 */}
        <p className="mb-8 text-slate-600">
          抱歉，页面在加载过程中出现了问题。请尝试刷新页面或返回首页。
        </p>

        {/* 开发环境显示错误详情 */}
        {import.meta.env.DEV && error && (
          <div className="mb-6 rounded-lg bg-red-50 p-4 text-left">
            <p className="mb-2 text-sm font-semibold text-red-800">错误信息：</p>
            <pre className="overflow-auto text-xs text-red-700">
              {error.message || error.toString()}
            </pre>
            {error.stack && (
              <details className="mt-2">
                <summary className="cursor-pointer text-sm font-semibold text-red-800">
                  堆栈跟踪
                </summary>
                <pre className="mt-2 overflow-auto text-xs text-red-600">
                  {error.stack}
                </pre>
              </details>
            )}
          </div>
        )}

        {/* 操作按钮 */}
        <div className="flex justify-center gap-4">
          <button
            onClick={handleGoHome}
            className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-white transition-colors hover:bg-blue-700"
          >
            <Home className="h-5 w-5" />
            返回首页
          </button>
          <button
            onClick={handleReload}
            className="inline-flex items-center gap-2 rounded-lg border border-slate-300 bg-white px-6 py-3 text-slate-700 transition-colors hover:bg-slate-50"
          >
            <RefreshCw className="h-5 w-5" />
            刷新页面
          </button>
        </div>
      </div>
    </div>
  );
};

export default ErrorFallback;