'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import {
  MessageCircle,
  Clock,
  CheckCircle,
  XCircle,
  ChevronRight,
  AlertTriangle,
  Filter,
  Search
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { cn } from '@/lib/utils'

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

// 申诉数据类型
type Appeal = {
  id: string
  taskId: string
  taskTitle: string
  type: 'ai' | 'agency' | 'brand'
  reason: string
  content: string
  status: AppealStatus
  createdAt: string
  updatedAt?: string
  result?: string
}

// 模拟申诉数据
const mockAppeals: Appeal[] = [
  {
    id: 'appeal-001',
    taskId: 'task-003',
    taskTitle: 'ZZ饮品夏日',
    type: 'ai',
    reason: '误判',
    content: '视频中出现的是我们自家品牌的历史产品，并非竞品。已附上品牌授权证明。',
    status: 'approved',
    createdAt: '2026-02-01 10:30',
    updatedAt: '2026-02-02 15:20',
    result: '经核实，该产品确为品牌方授权产品，申诉通过。AI已学习此案例。',
  },
  {
    id: 'appeal-002',
    taskId: 'task-010',
    taskTitle: 'GG智能手表',
    type: 'agency',
    reason: '审核标准不清晰',
    content: '代理商反馈品牌调性不符，但Brief中并未明确说明科技专业形象的具体要求。请明确审核标准。',
    status: 'processing',
    createdAt: '2026-02-04 09:15',
  },
  {
    id: 'appeal-003',
    taskId: 'task-011',
    taskTitle: 'HH美妆代言',
    type: 'brand',
    reason: '创意理解差异',
    content: '品牌方认为创意不够新颖，但该创意形式在同类型产品推广中效果显著，已附上数据支持。',
    status: 'pending',
    createdAt: '2026-02-05 14:00',
  },
  {
    id: 'appeal-004',
    taskId: 'task-013',
    taskTitle: 'JJ旅行vlog',
    type: 'agency',
    reason: '版权问题异议',
    content: '使用的背景音乐来自无版权音乐库 Epidemic Sound，已购买商用授权。附上授权证明截图。',
    status: 'rejected',
    createdAt: '2026-01-28 11:30',
    updatedAt: '2026-01-30 16:45',
    result: '经核实，该音乐虽有授权，但授权范围不包含商业广告用途。建议更换音乐后重新提交。',
  },
]

// 状态配置
const statusConfig: Record<AppealStatus, { label: string; color: string; bgColor: string; icon: React.ElementType }> = {
  pending: { label: '待处理', color: 'text-amber-500', bgColor: 'bg-amber-500/15', icon: Clock },
  processing: { label: '处理中', color: 'text-accent-indigo', bgColor: 'bg-accent-indigo/15', icon: MessageCircle },
  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<string, { label: string; color: string }> = {
  ai: { label: 'AI审核', color: 'text-accent-indigo' },
  agency: { label: '代理商审核', color: 'text-purple-400' },
  brand: { label: '品牌方审核', color: 'text-accent-blue' },
}

// 申诉卡片组件
function AppealCard({ appeal, onClick }: { appeal: Appeal; onClick: () => void }) {
  const status = statusConfig[appeal.status]
  const type = typeConfig[appeal.type]
  const StatusIcon = status.icon

  return (
    <div
      className="bg-bg-card rounded-2xl p-5 card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
      onClick={onClick}
    >
      {/* 头部 */}
      <div className="flex items-center justify-between mb-4">
        <div className="flex items-center gap-3">
          <div className={cn('w-10 h-10 rounded-xl flex items-center justify-center', status.bgColor)}>
            <StatusIcon className={cn('w-5 h-5', status.color)} />
          </div>
          <div className="flex flex-col gap-0.5">
            <span className="text-base font-semibold text-text-primary">{appeal.taskTitle}</span>
            <span className="text-xs text-text-tertiary">申诉编号: {appeal.id}</span>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <span className={cn('px-2.5 py-1 rounded-full text-xs font-medium', status.bgColor, status.color)}>
            {status.label}
          </span>
          <ChevronRight className="w-5 h-5 text-text-tertiary" />
        </div>
      </div>

      {/* 内容 */}
      <div className="flex flex-col gap-3">
        <div className="flex items-center gap-4 text-sm">
          <span className="text-text-tertiary">申诉对象:</span>
          <span className={cn('font-medium', type.color)}>{type.label}</span>
        </div>
        <div className="flex items-center gap-4 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 mt-4 pt-4 border-t border-border-subtle">
        <span className="text-xs text-text-tertiary">提交时间: {appeal.createdAt}</span>
        {appeal.updatedAt && (
          <span className="text-xs text-text-tertiary">更新时间: {appeal.updatedAt}</span>
        )}
      </div>
    </div>
  )
}

// 申诉次数入口卡片
function AppealQuotaEntryCard({ onClick }: { onClick: () => void }) {
  return (
    <div
      className="bg-bg-card rounded-2xl p-5 card-shadow cursor-pointer hover:bg-bg-elevated/30 transition-colors"
      onClick={onClick}
    >
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <div className="w-10 h-10 rounded-xl bg-accent-indigo/15 flex items-center justify-center">
            <AlertTriangle className="w-5 h-5 text-accent-indigo" />
          </div>
          <div className="flex flex-col gap-0.5">
            <span className="text-base font-semibold text-text-primary">申诉次数管理</span>
            <span className="text-sm text-text-secondary">查看各任务的申诉次数，向代理商申请增加</span>
          </div>
        </div>
        <ChevronRight className="w-5 h-5 text-text-tertiary" />
      </div>
    </div>
  )
}

export default function CreatorAppealsPage() {
  const router = useRouter()
  const [filter, setFilter] = useState<AppealStatus | 'all'>('all')
  const [searchQuery, setSearchQuery] = useState('')
  const [appeals] = useState<Appeal[]>(mockAppeals)

  // 搜索和筛选
  const filteredAppeals = appeals.filter(appeal => {
    const matchesSearch = searchQuery === '' ||
      appeal.taskTitle.toLowerCase().includes(searchQuery.toLowerCase()) ||
      appeal.id.toLowerCase().includes(searchQuery.toLowerCase()) ||
      appeal.reason.toLowerCase().includes(searchQuery.toLowerCase())
    const matchesFilter = filter === 'all' || appeal.status === filter
    return matchesSearch && matchesFilter
  })

  const handleAppealClick = (appealId: string) => {
    router.push(`/creator/appeals/${appealId}`)
  }

  // 跳转到申诉次数管理页面
  const handleGoToQuotaPage = () => {
    router.push('/creator/appeal-quota')
  }

  return (
    <ResponsiveLayout role="creator">
      <div className="flex flex-col gap-6 h-full">
        {/* 顶部栏 */}
        <div className="flex items-center justify-between flex-wrap gap-4">
          <div className="flex flex-col gap-1">
            <h1 className="text-xl lg:text-[28px] font-bold text-text-primary">申诉中心</h1>
            <p className="text-sm lg:text-[15px] text-text-secondary">管理您的申诉记录和申诉额度</p>
          </div>
          <div className="flex items-center gap-3">
            <div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle">
              <Search className="w-[18px] h-[18px] text-text-secondary" />
              <input
                type="text"
                placeholder="搜索申诉..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="bg-transparent text-sm text-text-primary placeholder-text-tertiary focus:outline-none w-32"
              />
            </div>
            <div className="flex items-center gap-2 px-4 py-2.5 bg-bg-card rounded-xl border border-border-subtle">
              <Filter className="w-[18px] h-[18px] text-text-secondary" />
              <select
                value={filter}
                onChange={(e) => setFilter(e.target.value as AppealStatus | 'all')}
                className="bg-transparent text-sm text-text-primary focus:outline-none"
              >
                <option value="all">全部状态</option>
                <option value="pending">待处理</option>
                <option value="processing">处理中</option>
                <option value="approved">已通过</option>
                <option value="rejected">已驳回</option>
              </select>
            </div>
          </div>
        </div>

        {/* 申诉次数管理入口 */}
        <AppealQuotaEntryCard onClick={handleGoToQuotaPage} />

        {/* 申诉列表 */}
        <div className="flex flex-col gap-4 flex-1 overflow-y-auto pr-2">
          <h2 className="text-lg font-semibold text-text-primary">申诉记录 ({filteredAppeals.length})</h2>
          {filteredAppeals.length > 0 ? (
            filteredAppeals.map((appeal) => (
              <AppealCard
                key={appeal.id}
                appeal={appeal}
                onClick={() => handleAppealClick(appeal.id)}
              />
            ))
          ) : (
            <div className="flex flex-col items-center justify-center py-16">
              <MessageCircle className="w-12 h-12 text-text-tertiary/50 mb-4" />
              <p className="text-text-secondary text-center">
                {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>
          )}
        </div>
      </div>
    </ResponsiveLayout>
  )
}