/**
 * PRO 徽章集成测试
 *
 * 测试 PRO 徽章在 RestrictedToggle 中的存在性
 *
 * **Feature: free-version-ui-restrictions**
 * **Property 2: 付费功能 PRO 徽章存在性**
 * **Validates: Requirements 2.1, 2.2**
 *
 * @jest-environment jsdom
 */

import React from 'react'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'
import RestrictedToggle from '../RestrictedToggle'
import type { FeatureKey } from '@/lib/license/types'

// Mock hooks
jest.mock('@/lib/ui-styles', () => ({
  useTheme: jest.fn(() => 'light'),
  useThemeStyles: jest.fn(() => ({
    buttonStyles: {
      secondary: 'mock-secondary-button',
    },
    modalStyles: {
      overlay: 'mock-overlay',
      container: 'mock-container',
      content: 'mock-content',
      header: 'mock-header',
      title: 'mock-title',
      closeButton: 'mock-close-button',
      body: 'mock-body',
      footer: 'mock-footer',
      sizes: {
        small: 'mock-small',
      },
    },
  })),
  cn: (...classes: (string | boolean | undefined)[]) =>
    classes.filter(Boolean).join(' '),
}))

// Mock createPortal
jest.mock('react-dom', () => ({
  ...jest.requireActual('react-dom'),
  createPortal: (node: React.ReactNode) => node,
}))

/**
 * Property 2: 付费功能 PRO 徽章存在性
 * *For any* 需要 STANDARD 或 PRO 许可证的功能，UI 必须在功能标签旁显示 PRO 徽章
 * **Feature: free-version-ui-restrictions, Property 2: PRO Badge Presence on Premium Features**
 * **Validates: Requirements 2.1, 2.2**
 */
describe('Property 2: 付费功能 PRO 徽章存在性', () => {
  const premiumFeatures: { key: FeatureKey; label: string }[] = [
    { key: 'customTemplates', label: '自定义模板' },
    { key: 'departmentIsolation', label: '部门隔离' },
    { key: 'intranetPenetration', label: '内网穿透' },
    { key: 'apiAccess', label: 'API 访问' },
    { key: 'systemSettings', label: '系统设置' },
  ]

  premiumFeatures.forEach(({ key, label }) => {
    it(`受限的 ${label} 功能应该显示 PRO 徽章`, () => {
      render(
        <RestrictedToggle
          label={label}
          featureKey={key}
          value={false}
          onChange={() => {}}
          isRestricted={true}
        />
      )

      // 应该显示 PRO 徽章
      expect(screen.getByTestId('pro-badge')).toBeInTheDocument()
      expect(screen.getByText('PRO')).toBeInTheDocument()
    })

    it(`不受限的 ${label} 功能不应该显示 PRO 徽章`, () => {
      render(
        <RestrictedToggle
          label={label}
          featureKey={key}
          value={false}
          onChange={() => {}}
          isRestricted={false}
        />
      )

      // 不应该显示 PRO 徽章
      expect(screen.queryByTestId('pro-badge')).not.toBeInTheDocument()
    })
  })

  it('PRO 徽章应该使用一致的视觉样式', () => {
    const { rerender } = render(
      <RestrictedToggle
        label="功能1"
        featureKey="customTemplates"
        value={false}
        onChange={() => {}}
        isRestricted={true}
      />
    )

    const badge1 = screen.getByTestId('pro-badge')
    const badge1ClassName = badge1.className

    rerender(
      <RestrictedToggle
        label="功能2"
        featureKey="departmentIsolation"
        value={false}
        onChange={() => {}}
        isRestricted={true}
      />
    )

    const badge2 = screen.getByTestId('pro-badge')
    const badge2ClassName = badge2.className

    // 两个徽章应该有相同的样式类
    expect(badge1ClassName).toBe(badge2ClassName)
  })

  it('PRO 徽章应该使用中性工作台样式', () => {
    render(
      <RestrictedToggle
        label="测试功能"
        featureKey="customTemplates"
        value={false}
        onChange={() => {}}
        isRestricted={true}
      />
    )

    const badge = screen.getByTestId('pro-badge')
    expect(badge.className).toContain('bg-slate-100')
    expect(badge.className).toContain('text-slate-700')
    expect(badge.className).not.toContain('bg-gradient-to-r')
  })

  it('PRO 徽章应该包含 PRO 文字', () => {
    render(
      <RestrictedToggle
        label="测试功能"
        featureKey="customTemplates"
        value={false}
        onChange={() => {}}
        isRestricted={true}
      />
    )

    expect(screen.getByText('PRO')).toBeInTheDocument()
  })
})