'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 {
  MessageSquare,
  Clock,
  CheckCircle,
  XCircle,
  AlertTriangle,
  Search,
  Filter,
  ChevronRight,
  User,
  FileText,
  Video
} from 'lucide-react'

// 申诉状态类型
type AppealStatus = 'pending' | 'processing' | 'approved' | 'rejected'

// 申诉类型
type AppealType = 'ai' | 'agency'

// 申诉数据类型
interface Appeal {
  id: string
  taskId: string
  taskTitle: string
  creatorId: string
  creatorName: string
  type: AppealType
  contentType: 'script' | 'video'
  reason: string
  content: string
  status: AppealStatus
  createdAt: string
  updatedAt?: string
}

// 模拟申诉数据
const mockAppeals: Appeal[] = [
  {
    id: 'appeal-001',
    taskId: 'task-001',
    taskTitle: '夏日护肤推广脚本',
    creatorId: 'creator-001',
    creatorName: '小美护肤',
    type: 'ai',
    contentType: 'script',
    reason: 'AI误判',
    content: '脚本中提到的"某品牌"是泛指，并非特指竞品，请重新审核。',
    status: 'pending',
    createdAt: '2026-02-06 10:30',
  },
  {
    id: 'appeal-002',
    taskId: 'task-002',
    taskTitle: '新品口红试色',
    creatorId: 'creator-002',
    creatorName: '美妆Lisa',
    type: 'agency',
    contentType: 'video',
    reason: '审核标准不清晰',
    content: '视频中的背景音乐已获得授权，附上授权证明。代理商反馈的"版权问题"不成立。',
    status: 'processing',
    createdAt: '2026-02-05 14:20',
  },
  {
    id: 'appeal-003',
    taskId: 'task-003',
    taskTitle: '健身器材推荐',
    creatorId: 'creator-003',
    creatorName: '健身教练王',
    type: 'ai',
    contentType: 'script',
    reason: '违禁词误判',
    content: 'AI标记的"最好"是在描述个人体验，并非绝对化用语，符合广告法要求。',
    status: 'approved',
    createdAt: '2026-02-04 09:15',
    updatedAt: '2026-02-04 16:30',
  },
  {
    id: 'appeal-004',
    taskId: 'task-004',
    taskTitle: '美妆新品测评',
    creatorId: 'creator-004',
    creatorName: '达人小红',
    type: 'agency',
    contentType: 'video',
    reason: '品牌调性理解差异',
    content: '代理商认为风格不符，但Brief中未明确禁止该风格，请提供更具体的标准。',
    status: 'rejected',
    createdAt: '2026-02-03 11:00',
    updatedAt: '2026-02-03 18:45',
  },
]

// 状态配置
const statusConfig: Record<AppealStatus, { label: string; color: string; bgColor: string; icon: React.ElementType }> = {
  pending: { label: '待处理', color: 'text-accent-amber', bgColor: 'bg-accent-amber/15', icon: Clock },
  processing: { label: '处理中', color: 'text-accent-indigo', bgColor: 'bg-accent-indigo/15', icon: MessageSquare },
  approved: { label: '已通过', color: 'text-accent-green', bgColor: 'bg-accent-green/15', icon: CheckCircle },
  rejected: { label: '已驳回', color: 'text-accent-coral', bgColor: 'bg-accent-coral/15', icon: XCircle },
}

// 类型配置
const typeConfig: Record<AppealType, { label: string; color: string }> = {
  ai: { label: 'AI审核申诉', color: 'text-accent-indigo' },
  agency: { label: '代理商审核申诉', color: 'text-purple-400' },
}

function AppealCard({ appeal }: { appeal: Appeal }) {
  const status = statusConfig[appeal.status]
  const type = typeConfig[appeal.type]
  const StatusIcon = status.icon

  return (
    <Link href={`/agency/appeals/${appeal.id}`}>
      <div className="p-4 rounded-xl bg-bg-elevated hover:bg-bg-elevated/80 transition-colors cursor-pointer">
        {/* 顶部：状态和类型 */}
        <div className="flex items-center justify-between mb-3">
          <div className="flex items-center gap-2">
            <div className={`w-8 h-8 rounded-lg ${status.bgColor} flex items-center justify-center`}>
              <StatusIcon size={16} className={status.color} />
            </div>
            <div>
              <span className="font-medium text-text-primary">{appeal.taskTitle}</span>
              <div className="flex items-center gap-2 text-xs text-text-tertiary">
                <span className="flex items-center gap-1">
                  <User size={10} />
                  {appeal.creatorName}
                </span>
                <span>·</span>
                <span className="flex items-center gap-1">
                  {appeal.contentType === 'script' ? <FileText size={10} /> : <Video size={10} />}
                  {appeal.contentType === 'script' ? '脚本' : '视频'}
                </span>
              </div>
            </div>
          </div>
          <div className="flex items-center gap-2">
            <span className={`px-2 py-1 rounded-full text-xs font-medium ${status.bgColor} ${status.color}`}>
              {status.label}
            </span>
            <ChevronRight size={16} className="text-text-tertiary" />
          </div>
        </div>

        {/* 申诉信息 */}
        <div className="space-y-2 mb-3">
          <div className="flex items-center gap-2 text-sm">
            <span className="text-text-tertiary">申诉类型:</span>
            <span className={type.color}>{type.label}</span>
          </div>
          <div className="flex items-center gap-2 text-sm">
            <span className="text-text-tertiary">申诉原因:</span>
            <span className="text-text-primary">{appeal.reason}</span>
          </div>
          <p className="text-sm text-text-secondary line-clamp-2">{appeal.content}</p>
        </div>

        {/* 底部时间 */}
        <div className="flex items-center justify-between text-xs text-text-tertiary pt-3 border-t border-border-subtle">
          <span>提交时间: {appeal.createdAt}</span>
          {appeal.updatedAt && <span>处理时间: {appeal.updatedAt}</span>}
        </div>
      </div>
    </Link>
  )
}

export default function AgencyAppealsPage() {
  const [filter, setFilter] = useState<AppealStatus | 'all'>('all')
  const [searchQuery, setSearchQuery] = useState('')

  // 统计
  const pendingCount = mockAppeals.filter(a => a.status === 'pending').length
  const processingCount = mockAppeals.filter(a => a.status === 'processing').length

  // 筛选
  const filteredAppeals = mockAppeals.filter(appeal => {
    const matchesSearch = searchQuery === '' ||
      appeal.taskTitle.toLowerCase().includes(searchQuery.toLowerCase()) ||
      appeal.creatorName.toLowerCase().includes(searchQuery.toLowerCase()) ||
      appeal.reason.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesFilter = filter === 'all' || appeal.status === filter
    return matchesSearch && matchesFilter
  })

  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>
        <div className="flex items-center gap-2 text-sm">
          <span className="px-3 py-1.5 bg-accent-amber/20 text-accent-amber rounded-lg font-medium">
            {pendingCount} 待处理
          </span>
          <span className="px-3 py-1.5 bg-accent-indigo/20 text-accent-indigo rounded-lg font-medium">
            {processingCount} 处理中
          </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.5 border border-border-subtle rounded-xl 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">
          {[
            { value: 'all', label: '全部' },
            { value: 'pending', label: '待处理' },
            { value: 'processing', label: '处理中' },
            { value: 'approved', label: '已通过' },
            { value: 'rejected', label: '已驳回' },
          ].map((tab) => (
            <button
              key={tab.value}
              type="button"
              onClick={() => setFilter(tab.value as AppealStatus | 'all')}
              className={`px-4 py-2 rounded-md text-sm font-medium transition-colors ${
                filter === tab.value ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary hover:text-text-primary'
              }`}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </div>

      {/* 申诉列表 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <MessageSquare size={18} className="text-accent-indigo" />
            申诉列表
            <span className="ml-auto text-sm font-normal text-text-secondary">
              共 {filteredAppeals.length} 条
            </span>
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          {filteredAppeals.length > 0 ? (
            filteredAppeals.map((appeal) => (
              <AppealCard key={appeal.id} appeal={appeal} />
            ))
          ) : (
            <div className="text-center py-12 text-text-tertiary">
              <MessageSquare size={48} className="mx-auto mb-4 opacity-50" />
              <p>{searchQuery || filter !== 'all' ? '没有找到匹配的申诉' : '暂无申诉记录'}</p>
              {(searchQuery || filter !== 'all') && (
                <button
                  type="button"
                  onClick={() => { setSearchQuery(''); setFilter('all'); }}
                  className="mt-3 text-sm text-accent-indigo hover:underline"
                >
                  清除筛选条件
                </button>
              )}
            </div>
          )}
        </CardContent>
      </Card>
    </div>
  )
}