import React from 'react';
import { useNavigate } from 'react-router-dom';
import { FileQuestion, Home, ArrowLeft } from 'lucide-react';

/**
 * 404 页面不存在
 * 当用户访问不存在的路由时显示
 */
const NotFound: React.FC = () => {
  const navigate = useNavigate();

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

  const handleGoBack = () => {
    navigate(-1);
  };

  return (
    <div className="fixed inset-0 flex flex-col items-center justify-center bg-slate-50 p-8 overflow-hidden">
      <div className="max-w-md text-center">
        {/* 404 图标 */}
        <div className="mb-6 flex justify-center">
          <div className="rounded-full bg-blue-100 p-6">
            <FileQuestion className="h-16 w-16 text-blue-600" />
          </div>
        </div>

        {/* 404 标题 */}
        <div className="mb-3">
          <h1 className="text-6xl font-bold text-slate-800">404</h1>
          <h2 className="mt-2 text-2xl font-semibold text-slate-700">
            页面不存在
          </h2>
        </div>

        {/* 描述 */}
        <p className="mb-8 text-slate-600">
          抱歉，您访问的页面不存在或已被移除。
          <br />
          请检查URL是否正确，或返回首页。
        </p>

        {/* 操作按钮 */}
        <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={handleGoBack}
            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"
          >
            <ArrowLeft className="h-5 w-5" />
            返回上页
          </button>
        </div>
      </div>
    </div>
  );
};

export default NotFound;

