/**
 * InvitationsTab 组件
 * 
 * 邀请管理Tab组件
 * 从主页面拆分出来，负责邀请管理功能
 * 包括邀请列表、创建、删除、验证等
 * 使用三层架构样式系统，支持深浅色主题
 * 
 * @created 2025-01-XX（拆分自 page.tsx）
 * @component
 */

'use client'

import { useState, useEffect, useCallback } from 'react'
import { useThemeStyles, useTheme, cn } from '@/lib/ui-styles'
import { useDialog } from '@/components/ui/DialogProvider'
import Modal from '@/components/ui/Modal'
import { formatDateTimeLocale } from '../_utils/formatters'
import type { Invitation, ToastFn } from './types'

interface InvitationsTabProps {
  showToast: ToastFn
}

export default function InvitationsTab({ showToast }: InvitationsTabProps) {
  const styles = useThemeStyles()
  const theme = useTheme()
  const { confirm } = useDialog()
  const [invitations, setInvitations] = useState<Invitation[]>([])
  const [showCreateInvitationModal, setShowCreateInvitationModal] = useState(false)
  const [newInvitationMaxUses, setNewInvitationMaxUses] = useState(1)
  const [newInvitationExpiresInDays, setNewInvitationExpiresInDays] = useState<number | null>(null)

  // 根据主题选择颜色类名
  const borderColor = theme === 'dark' ? 'border-slate-800' : 'border-slate-200'
  const textTitle = theme === 'dark' ? 'text-white' : 'text-slate-900'
  const textDesc = theme === 'dark' ? 'text-slate-400' : 'text-slate-500'
  const textLabel = theme === 'dark' ? 'text-slate-300' : 'text-slate-700'
  const textMono = theme === 'dark' ? 'text-white' : 'text-slate-900'
  const textLink = theme === 'dark' ? 'text-slate-400' : 'text-slate-600'
  const textEmpty = theme === 'dark' ? 'text-slate-500' : 'text-slate-400'
  const hoverBg = theme === 'dark' ? 'hover:bg-slate-800/50' : 'hover:bg-slate-50'
  const divideColor = theme === 'dark' ? 'divide-slate-800' : 'divide-slate-200'
  const badgeSuccess = theme === 'dark' ? 'bg-green-900/30 text-green-300' : 'bg-green-100 text-green-800'
  const badgeDanger = theme === 'dark' ? 'bg-red-900/30 text-red-300' : 'bg-red-100 text-red-800'

  const fetchInvitations = useCallback(async () => {
    try {
      const response = await fetch('/api/invitations')
      if (response.ok) {
        const data = await response.json()
        setInvitations(data.invitations || [])
      } else {
        const errorData = await response.json().catch(() => ({}))
        console.error('Error fetching invitations:', errorData)
        showToast(errorData.error || '获取邀请链接失败', 'error')
      }
    } catch (error) {
      console.error('Error fetching invitations:', error)
      showToast('获取邀请链接失败，请稍后重试', 'error')
    }
  }, [showToast])

  useEffect(() => {
    fetchInvitations()
  }, [fetchInvitations])

  const handleCreateInvitation = async () => {
    try {
      const response = await fetch('/api/invitations', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          maxUses: newInvitationMaxUses,
          expiresInDays: newInvitationExpiresInDays,
        }),
      })

      if (response.ok) {
        await fetchInvitations()
        setShowCreateInvitationModal(false)
        setNewInvitationMaxUses(1)
        setNewInvitationExpiresInDays(null)
        showToast('邀请链接创建成功')
      } else {
        const error = await response.json()
        showToast(error.error || '创建失败', 'error')
      }
    } catch (error) {
      console.error('Create invitation error:', error)
      showToast('创建失败，请稍后重试', 'error')
    }
  }

  const handleToggleInvitationActive = async (id: string, isActive: boolean) => {
    try {
      const response = await fetch(`/api/invitations/${id}`, {
        method: 'PATCH',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ isActive: !isActive }),
      })

      if (response.ok) {
        await fetchInvitations()
        showToast(isActive ? '邀请链接已禁用' : '邀请链接已激活')
      } else {
        const error = await response.json()
        showToast(error.error || '操作失败', 'error')
      }
    } catch (error) {
      console.error('Toggle invitation active error:', error)
      showToast('操作失败，请稍后重试', 'error')
    }
  }

  const handleDeleteInvitation = async (id: string) => {
    const confirmed = await confirm({
      title: '确认删除',
      message: '确定要删除这个邀请链接吗？',
      variant: 'danger',
    })
    if (!confirmed) return

    try {
      const response = await fetch(`/api/invitations/${id}`, {
        method: 'DELETE',
      })

      if (response.ok) {
        await fetchInvitations()
        showToast('邀请链接已删除')
      } else {
        const error = await response.json()
        showToast(error.error || '删除失败', 'error')
      }
    } catch (error) {
      console.error('Delete invitation error:', error)
      showToast('删除失败，请稍后重试', 'error')
    }
  }

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text).then(() => {
      showToast('已复制到剪贴板')
    }).catch(() => {
      showToast('复制失败', 'error')
    })
  }

  return (
    <>
      <div className={cn(styles.cardStyles.base, 'overflow-hidden')}>
        <div className={cn('px-6 py-4 border-b', borderColor)}>
          <div className="flex items-center justify-between">
            <div>
              <h2 className={cn('text-xl font-semibold', textTitle)}>邀请管理</h2>
              <p className={cn('text-sm mt-1', textDesc)}>
                创建和管理邀请链接，成员通过邀请链接加入团队。
              </p>
            </div>
            <button
              onClick={() => setShowCreateInvitationModal(true)}
              className={cn(styles.buttonStyles.primary, styles.buttonModifiers.compact, 'flex items-center gap-2')}
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
              </svg>
              创建邀请链接
            </button>
          </div>
        </div>
        <div className="p-6">
          {invitations.length === 0 ? (
            <div className={cn('text-center py-8', textDesc)}>
              暂无邀请链接，点击上方按钮创建
            </div>
          ) : (
            <div className="overflow-x-auto">
              <table className="w-full">
                <thead>
                  <tr className={cn('border-b', borderColor)}>
                    <th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>邀请码</th>
                    <th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>邀请链接</th>
                    <th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>使用次数</th>
                    <th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>过期时间</th>
                    <th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>状态</th>
                    <th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>创建时间</th>
                    <th className={cn('px-4 py-3 text-left text-xs font-medium', textDesc)}>操作</th>
                  </tr>
                </thead>
                <tbody className={cn('divide-y', divideColor)}>
                  {invitations.map((invitation) => {
                    const isExpired = invitation.expiresAt && new Date(invitation.expiresAt) < new Date()
                    const isUsedUp = (invitation.currentUses || 0) >= (invitation.maxUses || 1)
                    const isValid = (invitation.isActive !== false) && !isExpired && !isUsedUp
                    
                    return (
                      <tr key={invitation.id} className={hoverBg}>
                        <td className={cn('px-4 py-3 text-sm font-mono', textMono)}>
                          {invitation.code}
                        </td>
                        <td className="px-4 py-3 text-sm">
                          {invitation.inviteUrl ? (
                            <div className="flex items-center gap-2">
                              <span className={cn('font-mono text-xs truncate max-w-xs', textLink)}>
                                {invitation.inviteUrl}
                              </span>
                              <button
                                onClick={() => copyToClipboard(invitation.inviteUrl!)}
                                className={cn(styles.buttonStyles.secondary, styles.buttonModifiers.compactXs, 'flex-shrink-0')}
                              >
                                复制
                              </button>
                            </div>
                          ) : (
                            <span className={textEmpty}>-</span>
                          )}
                        </td>
                        <td className={cn('px-4 py-3 text-sm', textMono)}>
                          {invitation.currentUses} / {invitation.maxUses}
                        </td>
                        <td className={cn('px-4 py-3 text-sm', textMono)}>
                          {invitation.expiresAt
                            ? formatDateTimeLocale(invitation.expiresAt)
                            : '永不过期'}
                        </td>
                        <td className="px-4 py-3 text-sm">
                          <span
                            className={cn('px-2 py-1 rounded-md text-xs font-medium', isValid ? badgeSuccess : badgeDanger)}
                          >
                            {!invitation.isActive
                              ? '已禁用'
                              : isExpired
                              ? '已过期'
                              : isUsedUp
                              ? '已用完'
                              : '有效'}
                          </span>
                        </td>
                        <td className={cn('px-4 py-3 text-sm', textDesc)}>
                          {formatDateTimeLocale(invitation.createdAt)}
                        </td>
                        <td className="px-4 py-3 text-sm">
                          <div className="flex items-center gap-2">
                            <button
                              onClick={() => handleToggleInvitationActive(invitation.id, invitation.isActive)}
                              className={cn(
                                invitation.isActive ? styles.buttonStyles.danger : styles.buttonStyles.success,
                                styles.buttonModifiers.compactXs,
                              )}
                            >
                              {invitation.isActive ? '禁用' : '启用'}
                            </button>
                            <button
                              onClick={() => handleDeleteInvitation(invitation.id)}
                              className={cn(
                                styles.buttonStyles.danger,
                                styles.buttonModifiers.compactXs,
                              )}
                            >
                              删除
                            </button>
                          </div>
                        </td>
                      </tr>
                    )
                  })}
                </tbody>
              </table>
            </div>
          )}
        </div>
      </div>

      {/* Create Invitation Modal */}
      <Modal
        isOpen={showCreateInvitationModal}
        onClose={() => {
          setShowCreateInvitationModal(false)
          setNewInvitationMaxUses(1)
          setNewInvitationExpiresInDays(null)
        }}
        title="创建邀请链接"
        size="small"
        footer={
          <div className="flex gap-3 justify-end">
            <button
              onClick={() => {
                setShowCreateInvitationModal(false)
                setNewInvitationMaxUses(1)
                setNewInvitationExpiresInDays(null)
              }}
              className={cn(
                styles.buttonStyles.secondary,
                'bg-white dark:bg-slate-800 border-slate-300 dark:border-slate-600 text-slate-700 dark:text-slate-200'
              )}
            >
              取消
            </button>
            <button
              onClick={handleCreateInvitation}
              className={cn(styles.buttonStyles.primary)}
            >
              创建
            </button>
          </div>
        }
      >
        <div className="space-y-4">
          <div>
            <label className={cn('block text-sm font-medium mb-2', textLabel)}>
              最大使用次数
            </label>
            <input
              type="number"
              min="1"
              value={newInvitationMaxUses}
              onChange={(e) => setNewInvitationMaxUses(parseInt(e.target.value) || 1)}
              className={cn(styles.inputStyles.base)}
              placeholder="请输入最大使用次数"
            />
            <p className={cn('text-xs mt-1', textDesc)}>
              邀请链接最多可以被使用多少次
            </p>
          </div>
          <div>
            <label className={cn('block text-sm font-medium mb-2', textLabel)}>
              过期天数（可选）
            </label>
            <input
              type="number"
              min="1"
              value={newInvitationExpiresInDays || ''}
              onChange={(e) => setNewInvitationExpiresInDays(e.target.value ? parseInt(e.target.value) : null)}
              className={cn(styles.inputStyles.base)}
              placeholder="留空表示永不过期"
            />
            <p className={cn('text-xs mt-1', textDesc)}>
              邀请链接在多少天后过期，留空表示永不过期
            </p>
          </div>
        </div>
      </Modal>
    </>
  )
}