'use client'

import { useState } from 'react'
import Link from 'next/link'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import { SuccessTag, PendingTag, WarningTag, ErrorTag } from '@/components/ui/Tag'
import {
  FileText,
  Video,
  Search,
  Filter,
  Clock,
  User,
  AlertTriangle,
  ChevronRight,
  Download,
  Eye,
  File
} from 'lucide-react'
import { getPlatformInfo } from '@/lib/platforms'

// 模拟脚本待审列表
const mockScriptTasks = [
  {
    id: 'script-001',
    title: '夏日护肤推广脚本',
    fileName: '夏日护肤推广_脚本v2.docx',
    fileSize: '245 KB',
    creatorName: '小美护肤',
    projectName: 'XX品牌618推广',
    platform: 'douyin',
    aiScore: 88,
    riskLevel: 'low' as const,
    submittedAt: '2026-02-06 14:30',
    hasHighRisk: false,
  },
  {
    id: 'script-002',
    title: '新品口红试色脚本',
    fileName: '口红试色_脚本v1.docx',
    fileSize: '312 KB',
    creatorName: '美妆Lisa',
    projectName: 'XX品牌618推广',
    platform: 'xiaohongshu',
    aiScore: 72,
    riskLevel: 'medium' as const,
    submittedAt: '2026-02-06 12:15',
    hasHighRisk: true,
  },
  {
    id: 'script-003',
    title: '健身器材推荐脚本',
    fileName: '健身器材_推荐脚本.pdf',
    fileSize: '189 KB',
    creatorName: '健身教练王',
    projectName: 'XX运动品牌',
    platform: 'bilibili',
    aiScore: 95,
    riskLevel: 'low' as const,
    submittedAt: '2026-02-06 10:00',
    hasHighRisk: false,
  },
  {
    id: 'script-004',
    title: '618大促预热脚本',
    fileName: '618预热_脚本final.docx',
    fileSize: '278 KB',
    creatorName: '达人D',
    projectName: 'XX品牌618推广',
    platform: 'kuaishou',
    aiScore: 62,
    riskLevel: 'high' as const,
    submittedAt: '2026-02-06 09:00',
    hasHighRisk: true,
  },
]

// 模拟视频待审列表
const mockVideoTasks = [
  {
    id: 'video-001',
    title: '夏日护肤推广',
    fileName: '夏日护肤_成片v2.mp4',
    fileSize: '128 MB',
    creatorName: '小美护肤',
    projectName: 'XX品牌618推广',
    platform: 'douyin',
    aiScore: 85,
    riskLevel: 'low' as const,
    duration: '02:15',
    submittedAt: '2026-02-06 15:00',
    hasHighRisk: false,
  },
  {
    id: 'video-002',
    title: '新品口红试色',
    fileName: '口红试色_终版.mp4',
    fileSize: '256 MB',
    creatorName: '美妆Lisa',
    projectName: 'XX品牌618推广',
    platform: 'xiaohongshu',
    aiScore: 68,
    riskLevel: 'medium' as const,
    duration: '03:42',
    submittedAt: '2026-02-06 13:45',
    hasHighRisk: true,
  },
  {
    id: 'video-003',
    title: '美妆新品体验',
    fileName: '美妆体验_v3.mp4',
    fileSize: '198 MB',
    creatorName: '达人C',
    projectName: 'XX品牌618推广',
    platform: 'bilibili',
    aiScore: 58,
    riskLevel: 'high' as const,
    duration: '04:20',
    submittedAt: '2026-02-06 11:30',
    hasHighRisk: true,
  },
  {
    id: 'video-004',
    title: '618大促预热',
    fileName: '618预热_final.mp4',
    fileSize: '167 MB',
    creatorName: '达人D',
    projectName: 'XX品牌618推广',
    platform: 'wechat',
    aiScore: 91,
    riskLevel: 'low' as const,
    duration: '01:45',
    submittedAt: '2026-02-06 10:15',
    hasHighRisk: false,
  },
]

// 风险等级配置
const riskLevelConfig = {
  low: { label: 'AI通过', color: 'bg-accent-green', textColor: 'text-accent-green' },
  medium: { label: '风险:中', color: 'bg-accent-amber', textColor: 'text-accent-amber' },
  high: { label: '风险:高', color: 'bg-accent-coral', textColor: 'text-accent-coral' },
}

function ScoreTag({ score }: { score: number }) {
  if (score >= 85) return <SuccessTag>{score}分</SuccessTag>
  if (score >= 70) return <WarningTag>{score}分</WarningTag>
  return <ErrorTag>{score}分</ErrorTag>
}

type ScriptTask = typeof mockScriptTasks[0]
type VideoTask = typeof mockVideoTasks[0]

function ScriptTaskCard({ task }: { task: ScriptTask }) {
  const riskConfig = riskLevelConfig[task.riskLevel]
  const platform = getPlatformInfo(task.platform)

  const handleDownload = (e: React.MouseEvent) => {
    e.stopPropagation()
    // 模拟下载
    console.log('下载脚本:', task.fileName)
  }

  return (
    <div className="rounded-xl bg-bg-elevated overflow-hidden">
      {/* 平台顶部条 */}
      {platform && (
        <div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
          <span className="text-sm">{platform.icon}</span>
          <span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
        </div>
      )}
      <div className="p-4">
        {/* 顶部：达人名 · 任务名 + 状态标签 */}
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-2">
            <div className={`w-2 h-2 rounded-full ${riskConfig.color}`} />
            <span className="font-medium text-text-primary">{task.creatorName} · {task.title}</span>
          </div>
          <span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
        </div>

      {/* 文件信息 */}
      <div className="flex items-center gap-3 p-3 rounded-lg bg-bg-page mb-3">
        <div className="w-10 h-10 rounded-lg bg-accent-indigo/15 flex items-center justify-center">
          <File size={20} className="text-accent-indigo" />
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-text-primary truncate">{task.fileName}</p>
          <p className="text-xs text-text-tertiary">{task.fileSize}</p>
        </div>
        <button
          type="button"
          onClick={handleDownload}
          className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
          title="下载文件"
        >
          <Download size={18} className="text-text-secondary" />
        </button>
      </div>

      {/* 底部：时间 + 审核按钮 */}
      <div className="flex items-center justify-between">
        <span className="text-xs text-text-tertiary flex items-center gap-1">
          <Clock size={12} />
          {task.submittedAt}
        </span>
        <Link href={`/agency/review/script/${task.id}`}>
          <Button size="sm" className={`${
            task.riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
            task.riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
            'bg-accent-green hover:bg-accent-green/80'
          } text-white`}>
            审核
          </Button>
        </Link>
      </div>
      </div>
    </div>
  )
}

function VideoTaskCard({ task }: { task: VideoTask }) {
  const riskConfig = riskLevelConfig[task.riskLevel]
  const platform = getPlatformInfo(task.platform)

  const handleDownload = (e: React.MouseEvent) => {
    e.stopPropagation()
    // 模拟下载
    console.log('下载视频:', task.fileName)
  }

  return (
    <div className="rounded-xl bg-bg-elevated overflow-hidden">
      {/* 平台顶部条 */}
      {platform && (
        <div className={`px-4 py-1.5 ${platform.bgColor} border-b ${platform.borderColor} flex items-center gap-1.5`}>
          <span className="text-sm">{platform.icon}</span>
          <span className={`text-xs font-medium ${platform.textColor}`}>{platform.name}</span>
        </div>
      )}
      <div className="p-4">
        {/* 顶部：达人名 · 任务名 + 状态标签 */}
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-2">
            <div className={`w-2 h-2 rounded-full ${riskConfig.color}`} />
            <span className="font-medium text-text-primary">{task.creatorName} · {task.title}</span>
          </div>
          <span className={`text-xs ${riskConfig.textColor}`}>{riskConfig.label}</span>
        </div>

      {/* 文件信息 */}
      <div className="flex items-center gap-3 p-3 rounded-lg bg-bg-page mb-3">
        <div className="w-10 h-10 rounded-lg bg-purple-500/15 flex items-center justify-center">
          <Video size={20} className="text-purple-400" />
        </div>
        <div className="flex-1 min-w-0">
          <p className="text-sm font-medium text-text-primary truncate">{task.fileName}</p>
          <p className="text-xs text-text-tertiary">{task.fileSize} · {task.duration}</p>
        </div>
        <button
          type="button"
          onClick={handleDownload}
          className="p-2 rounded-lg hover:bg-bg-elevated transition-colors"
          title="下载文件"
        >
          <Download size={18} className="text-text-secondary" />
        </button>
      </div>

      {/* 底部：时间 + 审核按钮 */}
      <div className="flex items-center justify-between">
        <span className="text-xs text-text-tertiary flex items-center gap-1">
          <Clock size={12} />
          {task.submittedAt}
        </span>
        <Link href={`/agency/review/video/${task.id}`}>
          <Button size="sm" className={`${
            task.riskLevel === 'high' ? 'bg-accent-coral hover:bg-accent-coral/80' :
            task.riskLevel === 'medium' ? 'bg-accent-amber hover:bg-accent-amber/80' :
            'bg-accent-green hover:bg-accent-green/80'
          } text-white`}>
            审核
          </Button>
        </Link>
      </div>
      </div>
    </div>
  )
}

export default function AgencyReviewListPage() {
  const [searchQuery, setSearchQuery] = useState('')
  const [activeTab, setActiveTab] = useState<'all' | 'script' | 'video'>('all')

  const filteredScripts = mockScriptTasks.filter(task =>
    task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
    task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
  )

  const filteredVideos = mockVideoTasks.filter(task =>
    task.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
    task.creatorName.toLowerCase().includes(searchQuery.toLowerCase())
  )

  return (
    <div className="space-y-6 min-h-0">
      {/* 页面标题 */}
      <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>
        <div className="flex items-center gap-2 text-sm">
          <span className="text-text-secondary">待审核：</span>
          <span className="px-2 py-1 bg-accent-indigo/20 text-accent-indigo rounded font-medium">
            {mockScriptTasks.length} 脚本
          </span>
          <span className="px-2 py-1 bg-purple-500/20 text-purple-400 rounded font-medium">
            {mockVideoTasks.length} 视频
          </span>
        </div>
      </div>

      {/* 搜索和筛选 */}
      <div className="flex items-center gap-4">
        <div className="relative flex-1 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>
        <div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg">
          <button
            type="button"
            onClick={() => setActiveTab('all')}
            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
              activeTab === 'all' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
            }`}
          >
            全部
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('script')}
            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
              activeTab === 'script' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
            }`}
          >
            脚本
          </button>
          <button
            type="button"
            onClick={() => setActiveTab('video')}
            className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
              activeTab === 'video' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
            }`}
          >
            视频
          </button>
        </div>
      </div>

      {/* 任务列表 */}
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 脚本待审列表 */}
        {(activeTab === 'all' || activeTab === 'script') && (
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <FileText size={18} className="text-accent-indigo" />
                脚本审核
                <span className="ml-auto text-sm font-normal text-accent-indigo">
                  {filteredScripts.length} 条待审核
                </span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {filteredScripts.length > 0 ? (
                filteredScripts.map((task) => (
                  <ScriptTaskCard key={task.id} task={task} />
                ))
              ) : (
                <div className="text-center py-8 text-text-tertiary">
                  <FileText size={32} className="mx-auto mb-2 opacity-50" />
                  <p>暂无待审脚本</p>
                </div>
              )}
            </CardContent>
          </Card>
        )}

        {/* 视频待审列表 */}
        {(activeTab === 'all' || activeTab === 'video') && (
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Video size={18} className="text-purple-400" />
                视频审核
                <span className="ml-auto text-sm font-normal text-accent-indigo">
                  {filteredVideos.length} 条待审核
                </span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-3">
              {filteredVideos.length > 0 ? (
                filteredVideos.map((task) => (
                  <VideoTaskCard key={task.id} task={task} />
                ))
              ) : (
                <div className="text-center py-8 text-text-tertiary">
                  <Video size={32} className="mx-auto mb-2 opacity-50" />
                  <p>暂无待审视频</p>
                </div>
              )}
            </CardContent>
          </Card>
        )}
      </div>
    </div>
  )
}