import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { ShieldOff, LogOut, RefreshCw, Mail } from 'lucide-react';
import { logout } from '@/store/userSlice';

/**
 * 无权限欢迎页
 * 当用户登录成功但没有分配任何菜单权限时显示
 */
const NoPermission: React.FC = () => {
  const navigate = useNavigate();
  const dispatch = useDispatch();

  const handleLogout = () => {
    dispatch(logout());
    navigate('/login', { replace: true });
  };

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

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

        {/* 标题 */}
        <div className="mb-6">
          <h1 className="text-3xl font-bold text-slate-800">
            欢迎使用链宇Deploy Ease平台
          </h1>
          <h2 className="mt-3 text-xl font-medium text-slate-600">
            您的账户已成功创建
          </h2>
        </div>

        {/* 描述 */}
        <div className="mb-8 space-y-3 text-slate-600">
          <p className="text-base">
            您的账户暂时没有分配任何权限，无法访问系统功能。
          </p>
          <p className="text-base">
            请联系系统管理员为您分配角色和权限后，即可开始使用。
          </p>
        </div>

        {/* 信息卡片 */}
        <div className="mb-8 rounded-lg bg-white border border-slate-200 p-6 text-left">
          <h3 className="mb-3 text-sm font-semibold text-slate-800">
            下一步操作
          </h3>
          <ul className="space-y-2 text-sm text-slate-600">
            <li className="flex items-start gap-2">
              <span className="mt-0.5 text-blue-600">•</span>
              <span>联系系统管理员为您分配角色权限</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="mt-0.5 text-blue-600">•</span>
              <span>通过企业内部通讯工具联系管理员</span>
            </li>
            <li className="flex items-start gap-2">
              <span className="mt-0.5 text-blue-600">•</span>
              <span>权限分配完成后，点击下方"刷新权限"按钮</span>
            </li>
          </ul>

          <div className="mt-4 pt-4 border-t border-slate-100 flex items-center gap-2 text-sm">
            <Mail className="h-4 w-4 text-slate-400" />
            <span className="text-slate-500">
              企业微信联系 <span className="font-medium text-slate-700">杨帆</span>、<span className="font-medium text-slate-700">宋伟</span> 开通
            </span>
          </div>
        </div>

        {/* 操作按钮 */}
        <div className="flex justify-center gap-4">
          <button
            onClick={handleRefresh}
            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>
          <button
            onClick={handleLogout}
            className="inline-flex items-center gap-2 rounded-lg bg-blue-600 px-6 py-3 text-white transition-colors hover:bg-blue-700"
          >
            <LogOut className="h-5 w-5" />
            退出登录
          </button>
        </div>

        {/* 提示文本 */}
        <p className="mt-6 text-xs text-slate-400">
          提示：权限分配后需要刷新页面或重新登录生效
        </p>
      </div>
    </div>
  );
};

export default NoPermission;
