AIclinicalresearch/frontend-v2/src/framework/router/PermissionDenied.tsx

import { Result, Button } from 'antd'
import { LockOutlined, HomeOutlined, RocketOutlined } from '@ant-design/icons'
import { useNavigate } from 'react-router-dom'

/**
 * 无权限访问提示页面
 * 
 * @description
 * 当用户尝试访问无权限的模块时显示
 * 引导用户升级版本或返回首页
 * 
 * @version Week 2 Day 7 - 任务17
 */

interface PermissionDeniedProps {
  /** 模块名称 */
  moduleName?: string
  /** 所需权限等级 */
  requiredVersion?: string
  /** 用户当前权限等级 */
  currentVersion?: string
}

const PermissionDenied = ({
  moduleName = '该功能',
  requiredVersion = 'advanced',
  currentVersion = 'basic',
}: PermissionDeniedProps) => {
  const navigate = useNavigate()

  /**
   * 返回首页
   */
  const handleGoHome = () => {
    navigate('/')
  }

  /**
   * 去升级（后续实现）
   */
  const handleUpgrade = () => {
    // TODO: 跳转到升级页面或打开升级对话框
    console.log('用户点击升级按钮')
    // 暂时跳转到首页
    navigate('/')
  }

  // 权限等级名称映射
  const versionName: Record<string, string> = {
    basic: '基础版',
    advanced: '高级版',
    premium: '旗舰版',
  }

  return (
    <div className="flex-1 flex items-center justify-center bg-gray-50">
      <Result
        icon={<LockOutlined style={{ fontSize: 72, color: '#faad14' }} />}
        title={<span className="text-2xl">访问受限</span>}
        subTitle={
          <div className="space-y-3 mt-4">
            <p className="text-gray-600">
              抱歉，您当前是<strong>{versionName[currentVersion]}</strong>用户，
              无法访问<strong>{moduleName}</strong>。
            </p>
            <p className="text-gray-500">
              该功能需要<strong className="text-blue-600">{versionName[requiredVersion]}</strong>及以上权限。
            </p>
          </div>
        }
        extra={
          <div className="flex gap-3 justify-center mt-6">
            <Button 
              type="primary" 
              icon={<RocketOutlined />}
              onClick={handleUpgrade}
              size="large"
            >
              升级到{versionName[requiredVersion]}
            </Button>
            <Button 
              icon={<HomeOutlined />}
              onClick={handleGoHome}
              size="large"
            >
              返回首页
            </Button>
          </div>
        }
      >
        {/* 版本对比 */}
        <div className="mt-8 max-w-md mx-auto">
          <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
            <div className="flex items-center gap-2 mb-3">
              <RocketOutlined className="text-blue-600" />
              <span className="font-semibold text-blue-900">
                升级{versionName[requiredVersion]}可解锁：
              </span>
            </div>
            <ul className="space-y-2 text-sm text-gray-700 list-disc list-inside">
              {requiredVersion === 'advanced' && (
                <>
                  <li>AI智能文献筛选（4个LLM模型）</li>
                  <li>更多存储空间</li>
                  <li>优先技术支持</li>
                </>
              )}
              {requiredVersion === 'premium' && (
                <>
                  <li>智能统计分析（外部系统集成）</li>
                  <li>统计分析工具集</li>
                  <li>无限存储空间</li>
                  <li>专属客户经理</li>
                </>
              )}
            </ul>
          </div>
        </div>
      </Result>
    </div>
  )
}

export default PermissionDenied

/**
 * 🎨 设计说明：
 * 
 * 1. 用户体验：
 *    - ✅ 明确告知用户为什么无法访问
 *    - ✅ 显示当前版本和所需版本
 *    - ✅ 提供明确的升级路径
 *    - ✅ 展示升级后的价值（功能列表）
 * 
 * 2. 商业转化：
 *    - ✅ 突出显示"升级"按钮（主按钮）
 *    - ✅ 列举升级后可获得的功能
 *    - ✅ 引导用户做出升级决策
 * 
 * 3. 后续优化：
 *    - [ ] 接入真实的升级流程（支付系统）
 *    - [ ] 显示价格对比
 *    - [ ] 添加"免费试用"选项
 *    - [ ] 记录转化数据（用户点击升级的次数）
 * 
 * 4. 权限策略：
 *    【当前阶段】所有用户都是premium，不会看到此页面
 *    【Week 3+】ASL模块需要advanced权限，可测试此页面
 *    【Week 5+】完整的权限和付费体系
 */