'use client'

import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { Modal } from '@/components/ui/Modal'
import { SuccessTag, PendingTag, WarningTag } from '@/components/ui/Tag'
import {
  Search,
  Plus,
  Users,
  TrendingUp,
  TrendingDown,
  Mail,
  Copy,
  CheckCircle,
  Clock,
  MoreVertical,
  FileText,
  Video,
  ChevronDown,
  ChevronRight,
  PlusCircle
} from 'lucide-react'

// 任务类型
interface CreatorTask {
  id: string
  name: string
  appealRemaining: number
  appealUsed: number
  status: 'in_progress' | 'completed'
}

// 达人类型
interface Creator {
  id: string
  name: string
  email: string
  avatar: null
  status: string
  projectCount: number
  scriptCount: { total: number; passed: number }
  videoCount: { total: number; passed: number }
  passRate: number
  trend: string
  joinedAt: string
  tasks: CreatorTask[]
}

// 模拟达人列表
const mockCreators: Creator[] = [
  {
    id: 'creator-001',
    name: '小美护肤',
    email: 'xiaomei@example.com',
    avatar: null,
    status: 'active',
    projectCount: 5,
    scriptCount: { total: 12, passed: 10 },
    videoCount: { total: 10, passed: 8 },
    passRate: 85,
    trend: 'up',
    joinedAt: '2025-08-15',
    tasks: [
      { id: 'task-001', name: '夏日护肤推广', appealRemaining: 1, appealUsed: 0, status: 'in_progress' },
      { id: 'task-002', name: '防晒霜测评', appealRemaining: 0, appealUsed: 1, status: 'in_progress' },
    ],
  },
  {
    id: 'creator-002',
    name: '美妆Lisa',
    email: 'lisa@example.com',
    avatar: null,
    status: 'active',
    projectCount: 3,
    scriptCount: { total: 8, passed: 7 },
    videoCount: { total: 6, passed: 5 },
    passRate: 80,
    trend: 'stable',
    joinedAt: '2025-10-20',
    tasks: [
      { id: 'task-003', name: '新品口红试色', appealRemaining: 2, appealUsed: 0, status: 'in_progress' },
    ],
  },
  {
    id: 'creator-003',
    name: '健身教练王',
    email: 'wang@example.com',
    avatar: null,
    status: 'active',
    projectCount: 2,
    scriptCount: { total: 5, passed: 5 },
    videoCount: { total: 4, passed: 4 },
    passRate: 100,
    trend: 'up',
    joinedAt: '2025-12-01',
    tasks: [
      { id: 'task-004', name: '健身器材使用教程', appealRemaining: 1, appealUsed: 0, status: 'in_progress' },
    ],
  },
  {
    id: 'creator-004',
    name: '时尚达人',
    email: 'fashion@example.com',
    avatar: null,
    status: 'pending',
    projectCount: 0,
    scriptCount: { total: 0, passed: 0 },
    videoCount: { total: 0, passed: 0 },
    passRate: 0,
    trend: 'stable',
    joinedAt: '2026-02-05',
    tasks: [],
  },
]

function StatusTag({ status }: { status: string }) {
  if (status === 'active') return <SuccessTag>已激活</SuccessTag>
  if (status === 'pending') return <PendingTag>待接受</PendingTag>
  return <WarningTag>已暂停</WarningTag>
}

export default function AgencyCreatorsPage() {
  const [searchQuery, setSearchQuery] = useState('')
  const [showInviteModal, setShowInviteModal] = useState(false)
  const [inviteEmail, setInviteEmail] = useState('')
  const [inviteLink, setInviteLink] = useState('')
  const [expandedCreators, setExpandedCreators] = useState<string[]>([])
  const [creators, setCreators] = useState(mockCreators)

  const filteredCreators = creators.filter(creator =>
    creator.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
    creator.email.toLowerCase().includes(searchQuery.toLowerCase())
  )

  // 切换展开状态
  const toggleExpand = (creatorId: string) => {
    setExpandedCreators(prev =>
      prev.includes(creatorId)
        ? prev.filter(id => id !== creatorId)
        : [...prev, creatorId]
    )
  }

  // 增加申诉次数
  const handleAddAppealQuota = (creatorId: string, taskId: string) => {
    setCreators(prev => prev.map(creator => {
      if (creator.id === creatorId) {
        return {
          ...creator,
          tasks: creator.tasks.map(task => {
            if (task.id === taskId) {
              return { ...task, appealRemaining: task.appealRemaining + 1 }
            }
            return task
          }),
        }
      }
      return creator
    }))
  }

  const handleInvite = () => {
    if (!inviteEmail.trim()) {
      alert('请输入达人邮箱')
      return
    }
    const link = `https://miaosi.app/invite/creator/${Date.now()}`
    setInviteLink(link)
  }

  const handleCopyLink = () => {
    navigator.clipboard.writeText(inviteLink)
    alert('链接已复制')
  }

  const handleSendInvite = () => {
    alert(`邀请已发送至 ${inviteEmail}`)
    setShowInviteModal(false)
    setInviteEmail('')
    setInviteLink('')
  }

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-bold text-text-primary">达人管理</h1>
          <p className="text-sm text-text-secondary mt-1">管理合作达人，查看达人绩效数据</p>
        </div>
        <Button onClick={() => setShowInviteModal(true)}>
          <Plus size={16} />
          邀请达人
        </Button>
      </div>

      {/* 统计卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <Card>
          <CardContent className="py-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-text-secondary">总达人数</p>
                <p className="text-2xl font-bold text-text-primary">{mockCreators.length}</p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-accent-indigo/20 flex items-center justify-center">
                <Users size={20} className="text-accent-indigo" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="py-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-text-secondary">已激活</p>
                <p className="text-2xl font-bold text-accent-green">{mockCreators.filter(c => c.status === 'active').length}</p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-accent-green/20 flex items-center justify-center">
                <CheckCircle size={20} className="text-accent-green" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="py-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-text-secondary">总脚本数</p>
                <p className="text-2xl font-bold text-text-primary">{mockCreators.reduce((sum, c) => sum + c.scriptCount.total, 0)}</p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-purple-500/20 flex items-center justify-center">
                <FileText size={20} className="text-purple-400" />
              </div>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="py-4">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-text-secondary">总视频数</p>
                <p className="text-2xl font-bold text-text-primary">{mockCreators.reduce((sum, c) => sum + c.videoCount.total, 0)}</p>
              </div>
              <div className="w-10 h-10 rounded-lg bg-orange-500/20 flex items-center justify-center">
                <Video size={20} className="text-orange-400" />
              </div>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* 搜索 */}
      <div className="relative max-w-md">
        <Search size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary" />
        <input
          type="text"
          placeholder="搜索达人名称或邮箱..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
          className="w-full pl-10 pr-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
        />
      </div>

      {/* 达人列表 */}
      <Card>
        <CardContent className="p-0">
          <table className="w-full">
            <thead>
              <tr className="border-b border-border-subtle text-left text-sm text-text-secondary bg-bg-elevated">
                <th className="px-6 py-4 font-medium">达人</th>
                <th className="px-6 py-4 font-medium">状态</th>
                <th className="px-6 py-4 font-medium">项目数</th>
                <th className="px-6 py-4 font-medium">脚本</th>
                <th className="px-6 py-4 font-medium">视频</th>
                <th className="px-6 py-4 font-medium">通过率</th>
                <th className="px-6 py-4 font-medium">加入时间</th>
                <th className="px-6 py-4 font-medium">操作</th>
              </tr>
            </thead>
            <tbody>
              {filteredCreators.map((creator) => {
                const isExpanded = expandedCreators.includes(creator.id)
                const hasActiveTasks = creator.tasks.filter(t => t.status === 'in_progress').length > 0

                return (
                  <>
                    <tr key={creator.id} className="border-b border-border-subtle hover:bg-bg-elevated/50">
                      <td className="px-6 py-4">
                        <div className="flex items-center gap-3">
                          {/* 展开按钮 */}
                          {hasActiveTasks ? (
                            <button
                              type="button"
                              onClick={() => toggleExpand(creator.id)}
                              className="w-6 h-6 rounded flex items-center justify-center hover:bg-bg-elevated"
                            >
                              {isExpanded ? (
                                <ChevronDown size={16} className="text-text-secondary" />
                              ) : (
                                <ChevronRight size={16} className="text-text-secondary" />
                              )}
                            </button>
                          ) : (
                            <div className="w-6" />
                          )}
                          <div className="w-10 h-10 rounded-full bg-accent-indigo/20 flex items-center justify-center">
                            <span className="text-accent-indigo font-medium">{creator.name[0]}</span>
                          </div>
                          <div>
                            <div className="font-medium text-text-primary">{creator.name}</div>
                            <div className="text-sm text-text-tertiary">{creator.email}</div>
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <StatusTag status={creator.status} />
                      </td>
                      <td className="px-6 py-4 text-text-primary">{creator.projectCount}</td>
                      <td className="px-6 py-4">
                        <span className="text-text-primary">{creator.scriptCount.passed}</span>
                        <span className="text-text-tertiary">/{creator.scriptCount.total}</span>
                      </td>
                      <td className="px-6 py-4">
                        <span className="text-text-primary">{creator.videoCount.passed}</span>
                        <span className="text-text-tertiary">/{creator.videoCount.total}</span>
                      </td>
                      <td className="px-6 py-4">
                        {creator.status === 'active' && creator.passRate > 0 ? (
                          <div className="flex items-center gap-2">
                            <span className={`font-medium ${creator.passRate >= 90 ? 'text-accent-green' : creator.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
                              {creator.passRate}%
                            </span>
                            {creator.trend === 'up' && <TrendingUp size={14} className="text-accent-green" />}
                            {creator.trend === 'down' && <TrendingDown size={14} className="text-accent-coral" />}
                          </div>
                        ) : (
                          <span className="text-text-tertiary">-</span>
                        )}
                      </td>
                      <td className="px-6 py-4 text-sm text-text-tertiary">{creator.joinedAt}</td>
                      <td className="px-6 py-4">
                        <Button variant="ghost" size="sm">
                          <MoreVertical size={16} />
                        </Button>
                      </td>
                    </tr>
                    {/* 展开的任务申诉次数管理区域 */}
                    {isExpanded && hasActiveTasks && (
                      <tr key={`${creator.id}-tasks`} className="bg-bg-elevated/30">
                        <td colSpan={8} className="px-6 py-4">
                          <div className="ml-9 pl-6 border-l-2 border-accent-indigo/30">
                            <div className="text-sm font-medium text-text-secondary mb-3">任务申诉次数管理</div>
                            <div className="space-y-2">
                              {creator.tasks.filter(t => t.status === 'in_progress').map(task => (
                                <div key={task.id} className="flex items-center justify-between p-3 bg-bg-card rounded-lg">
                                  <div className="flex items-center gap-4">
                                    <span className="text-sm font-medium text-text-primary">{task.name}</span>
                                    <div className="flex items-center gap-2 text-xs text-text-tertiary">
                                      <span>剩余: <span className="text-accent-indigo font-medium">{task.appealRemaining}</span></span>
                                      <span>|</span>
                                      <span>已用: {task.appealUsed}</span>
                                    </div>
                                  </div>
                                  <Button
                                    variant="secondary"
                                    size="sm"
                                    onClick={() => handleAddAppealQuota(creator.id, task.id)}
                                  >
                                    <PlusCircle size={14} />
                                    +1 次
                                  </Button>
                                </div>
                              ))}
                            </div>
                          </div>
                        </td>
                      </tr>
                    )}
                  </>
                )
              })}
            </tbody>
          </table>
        </CardContent>
      </Card>

      {/* 邀请达人弹窗 */}
      <Modal isOpen={showInviteModal} onClose={() => { setShowInviteModal(false); setInviteEmail(''); setInviteLink(''); }} title="邀请达人">
        <div className="space-y-4">
          <p className="text-text-secondary text-sm">输入达人邮箱，系统将发送邀请链接。</p>

          <div>
            <label className="block text-sm font-medium text-text-primary mb-1">达人邮箱</label>
            <div className="flex gap-2">
              <input
                type="email"
                value={inviteEmail}
                onChange={(e) => setInviteEmail(e.target.value)}
                placeholder="creator@example.com"
                className="flex-1 px-4 py-2 border border-border-subtle rounded-lg bg-bg-elevated text-text-primary focus:outline-none focus:ring-2 focus:ring-accent-indigo"
              />
              <Button variant="secondary" onClick={handleInvite}>
                生成链接
              </Button>
            </div>
          </div>

          {inviteLink && (
            <div className="p-4 bg-bg-elevated rounded-lg">
              <div className="flex items-center justify-between mb-2">
                <span className="text-sm font-medium text-text-primary">邀请链接</span>
                <button
                  type="button"
                  onClick={handleCopyLink}
                  className="flex items-center gap-1 text-sm text-accent-indigo hover:underline"
                >
                  <Copy size={14} />
                  复制
                </button>
              </div>
              <p className="text-sm text-text-secondary break-all">{inviteLink}</p>
            </div>
          )}

          <div className="flex gap-3 justify-end pt-4">
            <Button variant="ghost" onClick={() => { setShowInviteModal(false); setInviteEmail(''); setInviteLink(''); }}>
              取消
            </Button>
            <Button onClick={handleSendInvite} disabled={!inviteEmail.trim()}>
              <Mail size={16} />
              发送邀请
            </Button>
          </div>
        </div>
      </Modal>
    </div>
  )
}