"use client";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Progress } from "@/components/ui/progress";
import { Skeleton } from "@/components/ui/skeleton";
import {
  useAdminTaskStats,
  useAdminTaskQueue,
} from "@/lib/hooks/admin/useAdminTasks";
import {
  Activity,
  Clock,
  CheckCircle2,
  XCircle,
  Loader2,
  Layers,
  Zap,
  Timer,
} from "lucide-react";

export function QueueStatus() {
  const { data: stats, isLoading: statsLoading } = useAdminTaskStats();
  const { data: queue, isLoading: queueLoading } = useAdminTaskQueue();

  const isLoading = statsLoading || queueLoading;

  if (isLoading) {
    return (
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {Array.from({ length: 4 }).map((_, i) => (
          <Skeleton key={i} className="h-32" />
        ))}
      </div>
    );
  }

  const statCards = [
    {
      title: "总任务数",
      value: stats?.total || 0,
      icon: Layers,
      color: "text-blue-500",
      bgColor: "bg-blue-500/10",
    },
    {
      title: "等待中",
      value: stats?.pending || 0,
      icon: Clock,
      color: "text-yellow-500",
      bgColor: "bg-yellow-500/10",
    },
    {
      title: "处理中",
      value: stats?.processing || 0,
      icon: Loader2,
      color: "text-blue-500",
      bgColor: "bg-blue-500/10",
    },
    {
      title: "已完成",
      value: stats?.completed || 0,
      icon: CheckCircle2,
      color: "text-green-500",
      bgColor: "bg-green-500/10",
    },
    {
      title: "失败",
      value: stats?.failed || 0,
      icon: XCircle,
      color: "text-red-500",
      bgColor: "bg-red-500/10",
    },
    {
      title: "队列长度",
      value: queue?.queueLength || 0,
      icon: Activity,
      color: "text-purple-500",
      bgColor: "bg-purple-500/10",
    },
    {
      title: "活跃工作器",
      value: queue?.activeWorkers || 0,
      icon: Zap,
      color: "text-orange-500",
      bgColor: "bg-orange-500/10",
    },
    {
      title: "平均耗时",
      value: stats?.avgDuration
        ? `${Math.round(stats.avgDuration)}秒`
        : "-",
      icon: Timer,
      color: "text-cyan-500",
      bgColor: "bg-cyan-500/10",
    },
  ];

  return (
    <div className="space-y-6">
      {/* Stats Grid */}
      <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-8 gap-4">
        {statCards.map((card) => (
          <Card key={card.title}>
            <CardContent className="p-4">
              <div className="flex items-center justify-between">
                <div className={`p-2 rounded-lg ${card.bgColor}`}>
                  <card.icon className={`h-4 w-4 ${card.color}`} />
                </div>
              </div>
              <div className="mt-3">
                <p className="text-2xl font-bold">{card.value}</p>
                <p className="text-xs text-muted-foreground">{card.title}</p>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* Queue Status */}
      {queue && (
        <Card>
          <CardHeader className="pb-3">
            <CardTitle className="text-lg font-medium flex items-center gap-2">
              <Activity className="h-5 w-5" />
              队列状态
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span className="text-muted-foreground">工作器使用率</span>
                <span className="font-medium">
                  {queue.maxWorkers > 0
                    ? Math.round(
                        (queue.activeWorkers / queue.maxWorkers) * 100
                      )
                    : 0}
                  %
                </span>
              </div>
              <Progress
                value={
                  queue.maxWorkers > 0
                    ? (queue.activeWorkers / queue.maxWorkers) * 100
                    : 0
                }
                className="h-2"
              />
              <p className="text-xs text-muted-foreground">
                {queue.activeWorkers} / {queue.maxWorkers} 工作器运行中
              </p>
            </div>

            <div className="grid grid-cols-2 gap-4 pt-4 border-t">
              <div>
                <p className="text-sm text-muted-foreground">每分钟吞吐量</p>
                <p className="text-2xl font-bold">
                  {(queue.throughputPerMinute ?? 0).toFixed(1)}
                </p>
                <p className="text-xs text-muted-foreground">任务/分钟</p>
              </div>
              <div>
                <p className="text-sm text-muted-foreground">预计等待时间</p>
                <p className="text-2xl font-bold">
                  {queue.estimatedWaitSeconds === undefined
                    ? "-"
                    : queue.estimatedWaitSeconds < 60
                      ? `${Math.round(queue.estimatedWaitSeconds)}秒`
                      : `${Math.round(queue.estimatedWaitSeconds / 60)}分钟`}
                </p>
                <p className="text-xs text-muted-foreground">队列中的任务</p>
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  );
}
