'use client'

/**
 * UpgradeModal 组件
 *
 * 升级提示弹窗，当免费版用户点击受限功能时显示
 * 基于现有 Modal 组件构建，显示功能名称、限制说明和升级好处
 *
 * @created 2025-12-16
 * @component
 */

import Modal from './Modal'
import { useThemeStyles, cn } from '@/lib/ui-styles'
import { getFeatureDescription } from '@/lib/license/feature-descriptions'
import type { FeatureKey } from '@/lib/license/types'

interface UpgradeModalProps {
  /** 是否显示弹窗 */
  isOpen: boolean
  /** 关闭弹窗回调 */
  onClose: () => void
  /** 功能键，用于获取功能描述 */
  featureKey: FeatureKey
  /** 自定义功能名称（可选，覆盖默认值） */
  featureName?: string
  /** 自定义功能描述（可选，覆盖默认值） */
  featureDescription?: string
}

export default function UpgradeModal({
  isOpen,
  onClose,
  featureKey,
  featureName,
  featureDescription,
}: UpgradeModalProps) {
  const styles = useThemeStyles()
  const feature = getFeatureDescription(featureKey)

  const displayName = featureName || feature.name
  const displayDescription = featureDescription || feature.description

  const handleUpgradeClick = () => {
    // TODO: 跳转到升级页面或显示联系方式
    // 目前先关闭弹窗
    onClose()
  }

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      size="small"
      showCloseButton={true}
    >
      <div className="p-6 space-y-6" data-testid="upgrade-modal">
        {/* 图标和标题 */}
        <div className="text-center space-y-3">
          <div className={cn(
            'mx-auto w-16 h-16 rounded-full flex items-center justify-center',
            'bg-slate-100 text-slate-700 dark:bg-slate-800 dark:text-slate-100',
            'border border-slate-200 dark:border-slate-700'
          )}>
            <svg
              className="w-8 h-8 text-slate-700 dark:text-slate-100"
              stroke="currentColor"
              fill="none"
              viewBox="0 0 24 24"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                strokeWidth={2}
                d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
              />
            </svg>
          </div>
          <h3
            className="text-xl font-semibold text-slate-900 dark:text-white"
            data-testid="upgrade-modal-feature-name"
          >
            {displayName}
          </h3>
          <p className="text-sm text-slate-600 dark:text-slate-400">
            当前许可证未包含此功能，请联系管理员处理授权
          </p>
        </div>

        {/* 功能描述 */}
        <div className={cn(
          'p-4 rounded-xl',
          'bg-slate-50 dark:bg-slate-800/50',
          'border border-slate-200 dark:border-slate-700'
        )}>
          <p className="text-sm text-slate-600 dark:text-slate-400">
            {displayDescription}
          </p>
        </div>

        {/* 按钮 */}
        <div className="flex gap-3 pt-2">
          <button
            type="button"
            onClick={onClose}
            className={cn(
              styles.buttonStyles.secondary,
              'flex-1 text-sm font-medium transition-all'
            )}
          >
            关闭
          </button>
          <button
            type="button"
            onClick={handleUpgradeClick}
            className={cn(
              'flex-1 px-4 py-2 rounded-xl text-sm font-medium transition-all',
              'bg-slate-900 text-white hover:bg-slate-800',
              'dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-white'
            )}
          >
            联系管理员
          </button>
        </div>
      </div>
    </Modal>
  )
}