'use client'

import React, { useState } from 'react'
import { useRouter } from 'next/navigation'
import {
  ArrowLeft,
  AlertCircle,
  CheckCircle,
  Clock,
  XCircle,
  Send,
  Info,
} from 'lucide-react'
import { ResponsiveLayout } from '@/components/layout/ResponsiveLayout'
import { Button } from '@/components/ui/Button'
import { cn } from '@/lib/utils'

// 申请状态类型
type RequestStatus = 'none' | 'pending' | 'approved' | 'rejected'

// 任务申诉次数数据
interface TaskAppealQuota {
  id: string
  taskName: string
  agencyName: string
  remaining: number
  used: number
  requestStatus: RequestStatus
  requestTime?: string
}

// 模拟任务申诉次数数据
const mockTaskQuotas: TaskAppealQuota[] = [
  {
    id: '1',
    taskName: '618美妆推广视频',
    agencyName: '星辰传媒',
    remaining: 1,
    used: 0,
    requestStatus: 'none',
  },
  {
    id: '2',
    taskName: '双11护肤品种草',
    agencyName: '星辰传媒',
    remaining: 0,
    used: 1,
    requestStatus: 'pending',
    requestTime: '2024-02-05 14:30',
  },
  {
    id: '3',
    taskName: '春节限定礼盒开箱',
    agencyName: '晨曦文化',
    remaining: 2,
    used: 0,
    requestStatus: 'approved',
    requestTime: '2024-02-04 10:15',
  },
  {
    id: '4',
    taskName: '情人节香水测评',
    agencyName: '晨曦文化',
    remaining: 0,
    used: 1,
    requestStatus: 'rejected',
    requestTime: '2024-02-03 16:20',
  },
]

// 状态标签组件
function StatusBadge({ status }: { status: RequestStatus }) {
  const config = {
    none: { label: '', icon: null, className: '' },
    pending: {
      label: '申请中',
      icon: Clock,
      className: 'bg-accent-amber/15 text-accent-amber',
    },
    approved: {
      label: '已同意',
      icon: CheckCircle,
      className: 'bg-accent-green/15 text-accent-green',
    },
    rejected: {
      label: '已拒绝',
      icon: XCircle,
      className: 'bg-accent-coral/15 text-accent-coral',
    },
  }

  const { label, icon: Icon, className } = config[status]

  if (status === 'none') return null

  return (
    <span className={cn('inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium', className)}>
      {Icon && <Icon size={12} />}
      {label}
    </span>
  )
}

// 任务卡片组件
function TaskQuotaCard({
  task,
  onRequestIncrease,
}: {
  task: TaskAppealQuota
  onRequestIncrease: (taskId: string) => void
}) {
  const canRequest = task.requestStatus === 'none' || task.requestStatus === 'rejected'

  return (
    <div className="bg-bg-card rounded-xl p-5 card-shadow flex flex-col gap-4">
      {/* 任务信息 */}
      <div className="flex items-start justify-between gap-3">
        <div className="flex flex-col gap-1 min-w-0">
          <h3 className="text-[15px] font-medium text-text-primary truncate">{task.taskName}</h3>
          <p className="text-[13px] text-text-tertiary">{task.agencyName}</p>
        </div>
        <StatusBadge status={task.requestStatus} />
      </div>

      {/* 申诉次数 */}
      <div className="flex items-center gap-6">
        <div className="flex flex-col gap-0.5">
          <span className="text-2xl font-bold text-accent-indigo">{task.remaining}</span>
          <span className="text-xs text-text-tertiary">剩余次数</span>
        </div>
        <div className="flex flex-col gap-0.5">
          <span className="text-2xl font-bold text-text-secondary">{task.used}</span>
          <span className="text-xs text-text-tertiary">已使用</span>
        </div>
      </div>

      {/* 操作按钮 */}
      <div className="flex items-center justify-between pt-3 border-t border-border-subtle">
        {task.requestTime && (
          <span className="text-xs text-text-tertiary">
            {task.requestStatus === 'pending' ? '申请时间：' : '处理时间：'}
            {task.requestTime}
          </span>
        )}
        {!task.requestTime && <span />}

        {canRequest ? (
          <Button
            variant="secondary"
            size="sm"
            onClick={() => onRequestIncrease(task.id)}
            className="gap-1.5"
          >
            <Send size={14} />
            申请增加
          </Button>
        ) : task.requestStatus === 'pending' ? (
          <span className="text-xs text-accent-amber">等待代理商处理...</span>
        ) : null}
      </div>
    </div>
  )
}

export default function AppealQuotaPage() {
  const router = useRouter()
  const [tasks, setTasks] = useState(mockTaskQuotas)
  const [showSuccessToast, setShowSuccessToast] = useState(false)

  // 申请增加申诉次数
  const handleRequestIncrease = (taskId: string) => {
    setTasks(prev =>
      prev.map(task =>
        task.id === taskId
          ? {
              ...task,
              requestStatus: 'pending' as RequestStatus,
              requestTime: new Date().toLocaleString('zh-CN', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
              }),
            }
          : task
      )
    )
    setShowSuccessToast(true)
    setTimeout(() => setShowSuccessToast(false), 3000)
  }

  // 统计数据
  const totalRemaining = tasks.reduce((sum, t) => sum + t.remaining, 0)
  const totalUsed = tasks.reduce((sum, t) => sum + t.used, 0)
  const pendingRequests = tasks.filter(t => t.requestStatus === 'pending').length

  return (
    <ResponsiveLayout role="creator">
      <div className="flex flex-col gap-6 h-full">
        {/* 顶部栏 */}
        <div className="flex items-center gap-4">
          <button
            type="button"
            onClick={() => router.back()}
            className="w-10 h-10 rounded-xl bg-bg-elevated flex items-center justify-center hover:bg-bg-elevated/80 transition-colors"
          >
            <ArrowLeft size={20} className="text-text-secondary" />
          </button>
          <div className="flex flex-col gap-1">
            <h1 className="text-2xl lg:text-[28px] font-bold text-text-primary">申诉次数</h1>
            <p className="text-sm lg:text-[15px] text-text-secondary">
              查看各任务的申诉次数，可向代理商申请增加
            </p>
          </div>
        </div>

        {/* 统计卡片 */}
        <div className="grid grid-cols-3 gap-4">
          <div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
            <span className="text-2xl font-bold text-accent-indigo">{totalRemaining}</span>
            <span className="text-xs text-text-tertiary">总剩余次数</span>
          </div>
          <div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
            <span className="text-2xl font-bold text-text-secondary">{totalUsed}</span>
            <span className="text-xs text-text-tertiary">总已使用</span>
          </div>
          <div className="bg-bg-card rounded-xl p-4 card-shadow flex flex-col items-center gap-1">
            <span className="text-2xl font-bold text-accent-amber">{pendingRequests}</span>
            <span className="text-xs text-text-tertiary">待处理申请</span>
          </div>
        </div>

        {/* 规则说明 */}
        <div className="bg-accent-indigo/10 rounded-xl p-4 flex gap-3">
          <Info size={20} className="text-accent-indigo flex-shrink-0 mt-0.5" />
          <div className="flex flex-col gap-1">
            <span className="text-sm font-medium text-text-primary">申诉次数规则</span>
            <span className="text-[13px] text-text-secondary leading-relaxed">
              每个任务初始有 1 次申诉机会，不同任务独立计算。如需更多次数，可点击"申请增加"向代理商发送请求，无需填写理由。代理商可增加的次数无上限。
            </span>
          </div>
        </div>

        {/* 任务列表 */}
        <div className="flex flex-col gap-4 flex-1 min-h-0 overflow-y-auto pb-4">
          <h2 className="text-base font-semibold text-text-primary sticky top-0 bg-bg-page py-2 -mt-2">
            任务申诉次数 ({tasks.length})
          </h2>
          {tasks.map(task => (
            <TaskQuotaCard
              key={task.id}
              task={task}
              onRequestIncrease={handleRequestIncrease}
            />
          ))}
        </div>
      </div>

      {/* 成功提示 */}
      {showSuccessToast && (
        <div className="fixed bottom-24 left-1/2 -translate-x-1/2 bg-accent-green text-white px-4 py-3 rounded-xl shadow-lg flex items-center gap-2 animate-fade-in z-50">
          <CheckCircle size={18} />
          <span className="text-sm font-medium">申请已发送，等待代理商处理</span>
        </div>
      )}
    </ResponsiveLayout>
  )
}