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

/**
 * 403 无权限页面
 * 当用户尝试访问没有权限的页面时显示
 */
const Forbidden: 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">
        {/* 403 图标 */}
        <div className="mb-6 flex justify-center">
          <div className="rounded-full bg-amber-100 p-6">
            <ShieldAlert className="h-16 w-16 text-amber-600" />
          </div>
        </div>

        {/* 403 标题 */}
        <div className="mb-3">
          <h1 className="text-6xl font-bold text-slate-800">403</h1>
          <h2 className="mt-2 text-2xl font-semibold text-slate-700">
            访问被拒绝
          </h2>
        </div>

        {/* 描述 */}
        <p className="mb-8 text-slate-600">
          抱歉，您没有访问此页面的权限。
          <br />
          如需访问，请联系管理员申请相应权限。
        </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 Forbidden;

