'use client'

import { useState } from 'react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/Card'
import { Button } from '@/components/ui/Button'
import {
  BarChart3,
  TrendingUp,
  TrendingDown,
  Download,
  Calendar,
  FileText,
  Video,
  Users,
  CheckCircle,
  XCircle,
  Clock
} from 'lucide-react'

// 模拟数据
const mockStats = {
  totalScripts: 156,
  totalVideos: 128,
  passRate: 85,
  avgReviewTime: 4.2,
  trend: {
    scripts: '+12%',
    videos: '+8%',
    passRate: '+3%',
    reviewTime: '-15%',
  },
}

const mockProjectStats = [
  { name: 'XX品牌618推广', scripts: 45, videos: 38, passRate: 92 },
  { name: '新品口红系列', scripts: 32, videos: 28, passRate: 85 },
  { name: '护肤品秋季活动', scripts: 28, videos: 25, passRate: 78 },
  { name: 'XX运动品牌', scripts: 51, videos: 37, passRate: 88 },
]

const mockWeeklyData = [
  { day: '周一', submitted: 25, passed: 22, rejected: 3 },
  { day: '周二', submitted: 32, passed: 28, rejected: 4 },
  { day: '周三', submitted: 18, passed: 16, rejected: 2 },
  { day: '周四', submitted: 41, passed: 35, rejected: 6 },
  { day: '周五', submitted: 35, passed: 30, rejected: 5 },
  { day: '周六', submitted: 12, passed: 11, rejected: 1 },
  { day: '周日', submitted: 8, passed: 7, rejected: 1 },
]

const mockCreatorRanking = [
  { name: '小美护肤', passRate: 95, total: 28 },
  { name: '健身教练王', passRate: 92, total: 15 },
  { name: '美妆Lisa', passRate: 88, total: 22 },
  { name: '时尚达人', passRate: 82, total: 18 },
  { name: '美食探店', passRate: 78, total: 25 },
]

function StatCard({ title, value, unit, trend, icon: Icon, color }: {
  title: string
  value: number | string
  unit?: string
  trend?: string
  icon: React.ElementType
  color: string
}) {
  const isPositive = trend?.startsWith('+') || trend?.startsWith('-') && title.includes('时间')

  return (
    <Card>
      <CardContent className="py-4">
        <div className="flex items-start justify-between">
          <div>
            <p className="text-sm text-text-secondary">{title}</p>
            <div className="flex items-baseline gap-1 mt-1">
              <span className={`text-2xl font-bold ${color}`}>{value}</span>
              {unit && <span className="text-text-secondary">{unit}</span>}
            </div>
            {trend && (
              <div className={`flex items-center gap-1 mt-1 text-xs ${isPositive ? 'text-accent-green' : 'text-accent-coral'}`}>
                {isPositive ? <TrendingUp size={12} /> : <TrendingDown size={12} />}
                {trend} vs 上周
              </div>
            )}
          </div>
          <div className={`w-10 h-10 rounded-lg ${color.replace('text-', 'bg-')}/20 flex items-center justify-center`}>
            <Icon size={20} className={color} />
          </div>
        </div>
      </CardContent>
    </Card>
  )
}

export default function AgencyReportsPage() {
  const [dateRange, setDateRange] = useState('week')

  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-3">
          <div className="flex items-center gap-1 p-1 bg-bg-elevated rounded-lg">
            <button
              type="button"
              onClick={() => setDateRange('week')}
              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                dateRange === 'week' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary'
              }`}
            >
              本周
            </button>
            <button
              type="button"
              onClick={() => setDateRange('month')}
              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                dateRange === 'month' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary'
              }`}
            >
              本月
            </button>
            <button
              type="button"
              onClick={() => setDateRange('quarter')}
              className={`px-3 py-1.5 rounded-md text-sm font-medium transition-colors ${
                dateRange === 'quarter' ? 'bg-bg-card text-text-primary shadow-sm' : 'text-text-secondary'
              }`}
            >
              本季度
            </button>
          </div>
          <Button variant="secondary">
            <Download size={16} />
            导出报表
          </Button>
        </div>
      </div>

      {/* 核心指标 */}
      <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
        <StatCard
          title="脚本审核量"
          value={mockStats.totalScripts}
          trend={mockStats.trend.scripts}
          icon={FileText}
          color="text-accent-indigo"
        />
        <StatCard
          title="视频审核量"
          value={mockStats.totalVideos}
          trend={mockStats.trend.videos}
          icon={Video}
          color="text-purple-400"
        />
        <StatCard
          title="通过率"
          value={mockStats.passRate}
          unit="%"
          trend={mockStats.trend.passRate}
          icon={CheckCircle}
          color="text-accent-green"
        />
        <StatCard
          title="平均审核时长"
          value={mockStats.avgReviewTime}
          unit="小时"
          trend={mockStats.trend.reviewTime}
          icon={Clock}
          color="text-orange-400"
        />
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
        {/* 本周趋势 */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <BarChart3 size={18} className="text-blue-500" />
              审核趋势
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {mockWeeklyData.map((day) => (
                <div key={day.day} className="flex items-center gap-4">
                  <div className="w-12 text-sm text-text-secondary font-medium">{day.day}</div>
                  <div className="flex-1">
                    <div className="flex h-6 rounded-full overflow-hidden bg-bg-elevated">
                      <div
                        className="bg-accent-green transition-all"
                        style={{ width: `${(day.passed / day.submitted) * 100}%` }}
                      />
                      <div
                        className="bg-accent-coral transition-all"
                        style={{ width: `${(day.rejected / day.submitted) * 100}%` }}
                      />
                    </div>
                  </div>
                  <div className="w-24 text-right text-sm">
                    <span className="text-accent-green font-medium">{day.passed}</span>
                    <span className="text-text-tertiary"> / </span>
                    <span className="text-text-secondary">{day.submitted}</span>
                  </div>
                </div>
              ))}
            </div>
            <div className="flex gap-6 mt-4 text-sm">
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 bg-accent-green rounded" />
                <span className="text-text-secondary">通过</span>
              </div>
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 bg-accent-coral rounded" />
                <span className="text-text-secondary">驳回</span>
              </div>
            </div>
          </CardContent>
        </Card>

        {/* 达人排名 */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Users size={18} className="text-accent-indigo" />
              达人通过率排名
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-3">
            {mockCreatorRanking.map((creator, index) => (
              <div key={creator.name} className="flex items-center gap-3 p-3 rounded-lg bg-bg-elevated">
                <div className={`w-7 h-7 rounded-full flex items-center justify-center text-sm font-bold ${
                  index === 0 ? 'bg-yellow-500/20 text-yellow-400' :
                  index === 1 ? 'bg-gray-500/20 text-gray-400' :
                  index === 2 ? 'bg-orange-500/20 text-orange-400' : 'bg-bg-page text-text-tertiary'
                }`}>
                  {index + 1}
                </div>
                <div className="flex-1 min-w-0">
                  <div className="font-medium text-text-primary truncate">{creator.name}</div>
                  <div className="text-xs text-text-tertiary">{creator.total} 条审核</div>
                </div>
                <div className={`font-bold ${creator.passRate >= 90 ? 'text-accent-green' : creator.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
                  {creator.passRate}%
                </div>
              </div>
            ))}
          </CardContent>
        </Card>
      </div>

      {/* 项目统计 */}
      <Card>
        <CardHeader>
          <CardTitle>项目统计</CardTitle>
        </CardHeader>
        <CardContent>
          <table className="w-full">
            <thead>
              <tr className="border-b border-border-subtle text-left text-sm text-text-secondary">
                <th className="pb-3 font-medium">项目名称</th>
                <th className="pb-3 font-medium text-center">脚本数</th>
                <th className="pb-3 font-medium text-center">视频数</th>
                <th className="pb-3 font-medium text-center">通过率</th>
                <th className="pb-3 font-medium">通过率分布</th>
              </tr>
            </thead>
            <tbody>
              {mockProjectStats.map((project) => (
                <tr key={project.name} className="border-b border-border-subtle last:border-0">
                  <td className="py-4 font-medium text-text-primary">{project.name}</td>
                  <td className="py-4 text-center text-text-secondary">{project.scripts}</td>
                  <td className="py-4 text-center text-text-secondary">{project.videos}</td>
                  <td className="py-4 text-center">
                    <span className={`font-medium ${project.passRate >= 90 ? 'text-accent-green' : project.passRate >= 80 ? 'text-accent-indigo' : 'text-orange-400'}`}>
                      {project.passRate}%
                    </span>
                  </td>
                  <td className="py-4">
                    <div className="w-full h-2 bg-bg-elevated rounded-full overflow-hidden">
                      <div
                        className={`h-full ${project.passRate >= 90 ? 'bg-accent-green' : project.passRate >= 80 ? 'bg-accent-indigo' : 'bg-orange-400'}`}
                        style={{ width: `${project.passRate}%` }}
                      />
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </CardContent>
      </Card>
    </div>
  )
}