"use client";

import { useState, useEffect, useMemo } from "react";
import { useSession } from "next-auth/react";
import { agentsApi, type AgentTask, type TaskLog, type Agent } from "@/lib/api/agents";
import { MetricCard } from "@/components/business/metric-card";
import {
  Table,
  TableHeader,
  TableBody,
  TableRow,
  TableHead,
  TableCell,
} from "@/components/ui/table";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Badge } from "@/components/ui/badge";
import { Skeleton } from "@/components/ui/skeleton";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { cn } from "@/lib/utils";
import { Bot, CheckCircle2, XCircle, Clock, Loader2, AlertCircle, Settings2, Save } from "lucide-react";

type TaskStatus = "pending" | "running" | "completed" | "failed" | "cancelled";
type FilterStatus = "all" | TaskStatus;

const STATUS_CONFIG: Record<TaskStatus, { label: string; icon: React.ReactNode; color: string }> = {
  pending: { label: "等待中", icon: <Clock className="h-3 w-3" />, color: "bg-gray-100 text-gray-600" },
  running: { label: "运行中", icon: <Loader2 className="h-3 w-3 animate-spin" />, color: "bg-blue-100 text-blue-600" },
  completed: { label: "已完成", icon: <CheckCircle2 className="h-3 w-3" />, color: "bg-emerald-100 text-emerald-600" },
  failed: { label: "失败", icon: <XCircle className="h-3 w-3" />, color: "bg-red-100 text-red-600" },
  cancelled: { label: "已取消", icon: <AlertCircle className="h-3 w-3" />, color: "bg-yellow-100 text-yellow-600" },
};

function formatDuration(startedAt?: string, completedAt?: string): string {
  if (!startedAt) return "-";
  const start = new Date(startedAt).getTime();
  const end = completedAt ? new Date(completedAt).getTime() : Date.now();
  const seconds = Math.round((end - start) / 1000);
  if (seconds < 60) return `${seconds}s`;
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;
  return `${minutes}m ${remainingSeconds}s`;
}

function formatDate(dateStr: string): string {
  const date = new Date(dateStr);
  return date.toLocaleString("zh-CN", {
    month: "2-digit",
    day: "2-digit",
    hour: "2-digit",
    minute: "2-digit",
  });
}

interface ExecutionStats {
  total: number;
  successCount: number;
  failedCount: number;
  runningCount: number;
  successRate: number;
  avgDurationSeconds: number;
}

export default function AgentsPage() {
  const { data: session } = useSession();
  const token = (session as { accessToken?: string })?.accessToken;

  const [tasks, setTasks] = useState<AgentTask[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [filterStatus, setFilterStatus] = useState<FilterStatus>("all");
  const [selectedTask, setSelectedTask] = useState<AgentTask | null>(null);
  const [taskLogs, setTaskLogs] = useState<TaskLog[]>([]);
  const [loadingLogs, setLoadingLogs] = useState(false);
  const [agents, setAgents] = useState<Agent[]>([]);
  const [configAgent, setConfigAgent] = useState<Agent | null>(null);
  const [configJson, setConfigJson] = useState("");
  const [savingConfig, setSavingConfig] = useState(false);

  // 获取执行记录
  useEffect(() => {
    if (!token) return;

    async function fetchTasks() {
      setLoading(true);
      setError(null);
      try {
        const params = filterStatus !== "all" ? { status: filterStatus, limit: 50 } : { limit: 50 };
        const result = await agentsApi.listTasks(token!, params);
        setTasks(result.items);
      } catch (err) {
        setError(err instanceof Error ? err.message : "获取执行记录失败");
      } finally {
        setLoading(false);
      }
    }

    fetchTasks();
  }, [token, filterStatus]);

  useEffect(() => {
    if (!token) return;
    agentsApi.list(token).then(setAgents).catch(() => {});
  }, [token]);

  // 获取任务日志
  const fetchTaskLogs = async (taskId: string) => {
    if (!token) return;

    setLoadingLogs(true);
    try {
      const result = await agentsApi.getTaskLogs(token, taskId);
      setTaskLogs(result.items);
    } catch (err) {
      console.error("获取日志失败:", err);
    } finally {
      setLoadingLogs(false);
    }
  };

  // 计算统计摘要
  const stats = useMemo<ExecutionStats>(() => {
    const allTasks = tasks;
    const successCount = allTasks.filter(t => t.status === "completed").length;
    const failedCount = allTasks.filter(t => t.status === "failed").length;
    const runningCount = allTasks.filter(t => t.status === "running" || t.status === "pending").length;
    const total = allTasks.length;

    const completedTasks = allTasks.filter(
      t => t.status === "completed" && t.started_at && t.completed_at
    );
    const totalDuration = completedTasks.reduce((sum, t) => {
      const start = new Date(t.started_at!).getTime();
      const end = new Date(t.completed_at!).getTime();
      return sum + (end - start) / 1000;
    }, 0);
    const avgDurationSeconds = completedTasks.length > 0 ? totalDuration / completedTasks.length : 0;

    return {
      total,
      successCount,
      failedCount,
      runningCount,
      successRate: total > 0 ? (successCount / total) * 100 : 0,
      avgDurationSeconds,
    };
  }, [tasks]);

  // 打开详情弹窗
  const handleRowClick = async (task: AgentTask) => {
    setSelectedTask(task);
    await fetchTaskLogs(task.id);
  };

  const openConfig = (agent: Agent) => {
    setConfigAgent(agent);
    setConfigJson(JSON.stringify(agent.config ?? {}, null, 2));
  };

  const saveConfig = async () => {
    if (!token || !configAgent) return;
    try {
      setSavingConfig(true);
      const parsed = JSON.parse(configJson);
      await agentsApi.updateConfig(token, configAgent.id, parsed);
      setConfigAgent(null);
      const updated = await agentsApi.list(token);
      setAgents(updated);
    } catch (err) {
      console.error("保存配置失败:", err);
    } finally {
      setSavingConfig(false);
    }
  };

  const filterButtons: { status: FilterStatus; label: string }[] = [
    { status: "all", label: "全部" },
    { status: "running", label: "运行中" },
    { status: "completed", label: "已完成" },
    { status: "failed", label: "失败" },
  ];

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div>
        <h1 className="text-2xl font-bold tracking-tight flex items-center gap-2">
          <Bot className="h-6 w-6" />
          Agent监控
        </h1>
        <p className="text-muted-foreground">监控Agent执行状态和历史记录</p>
      </div>

      {/* 统计摘要卡片 */}
      <div className="grid gap-4 md:grid-cols-3">
        <MetricCard
          label="总执行次数"
          value={stats.total}
          icon={<Bot className="h-5 w-5 text-blue-500" />}
          trend="neutral"
        />
        <MetricCard
          label="成功率"
          value={`${stats.successRate.toFixed(1)}%`}
          icon={<CheckCircle2 className="h-5 w-5 text-emerald-500" />}
          trend={stats.successRate >= 80 ? "up" : "down"}
        />
        <MetricCard
          label="平均耗时"
          value={stats.avgDurationSeconds > 0 ? `${stats.avgDurationSeconds.toFixed(1)}s` : "-"}
          icon={<Clock className="h-5 w-5 text-purple-500" />}
          trend="neutral"
        />
      </div>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2 text-base">
            <Settings2 className="h-4 w-4" />
            Agent 配置
          </CardTitle>
        </CardHeader>
        <CardContent>
          {agents.length === 0 ? (
            <p className="text-sm text-muted-foreground py-4 text-center">暂无 Agent</p>
          ) : (
            <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
              {agents.map((agent) => (
                <div key={agent.id} className="flex items-center justify-between rounded-lg border p-3">
                  <div className="min-w-0 flex-1">
                    <p className="text-sm font-medium truncate">{agent.name}</p>
                    <p className="text-xs text-muted-foreground">{agent.type}</p>
                  </div>
                  <Badge
                    variant="secondary"
                    className={cn(
                      "ml-2 shrink-0",
                      agent.status === "running" && "bg-emerald-100 text-emerald-700",
                      agent.status === "error" && "bg-red-100 text-red-700",
                      agent.status === "disabled" && "bg-gray-100 text-gray-600",
                      agent.status === "idle" && "bg-blue-100 text-blue-700"
                    )}
                  >
                    {agent.status}
                  </Badge>
                  <Button variant="ghost" size="sm" className="ml-2 shrink-0" onClick={() => openConfig(agent)}>
                    <Settings2 className="h-4 w-4" />
                  </Button>
                </div>
              ))}
            </div>
          )}
        </CardContent>
      </Card>

      {/* 状态筛选 */}
      <div className="flex gap-2">
        {filterButtons.map(({ status, label }) => (
          <button
            key={status}
            onClick={() => setFilterStatus(status)}
            className={cn(
              "px-4 py-2 rounded-lg text-sm font-medium transition-colors",
              filterStatus === status
                ? "bg-blue-600 text-white"
                : "bg-gray-100 text-gray-600 hover:bg-gray-200"
            )}
          >
            {label}
            {status === "running" && stats.runningCount > 0 && (
              <span className="ml-2 px-1.5 py-0.5 text-xs rounded-full bg-blue-200 text-blue-800">
                {stats.runningCount}
              </span>
            )}
          </button>
        ))}
      </div>

      {/* 执行历史列表 */}
      <Card>
        <CardHeader>
          <CardTitle>执行历史</CardTitle>
        </CardHeader>
        <CardContent>
          {loading ? (
            <div className="space-y-3">
              {[1, 2, 3].map(i => (
                <Skeleton key={i} className="h-14 w-full" />
              ))}
            </div>
          ) : error ? (
            <div className="text-center py-8 text-red-500">
              <AlertCircle className="h-8 w-8 mx-auto mb-2" />
              <p>{error}</p>
            </div>
          ) : tasks.length === 0 ? (
            <div className="text-center py-8 text-gray-500">
              <Bot className="h-8 w-8 mx-auto mb-2 opacity-50" />
              <p>暂无执行记录</p>
            </div>
          ) : (
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>任务类型</TableHead>
                  <TableHead>状态</TableHead>
                  <TableHead>耗时</TableHead>
                  <TableHead>创建时间</TableHead>
                  <TableHead>错误信息</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {tasks.map(task => {
                  const config = STATUS_CONFIG[task.status];
                  return (
                    <TableRow
                      key={task.id}
                      onClick={() => handleRowClick(task)}
                      className="cursor-pointer hover:bg-muted/40"
                    >
                      <TableCell className="font-medium">{task.task_type}</TableCell>
                      <TableCell>
                        <Badge className={cn("gap-1", config.color)} variant="secondary">
                          {config.icon}
                          {config.label}
                        </Badge>
                      </TableCell>
                      <TableCell>{formatDuration(task.started_at, task.completed_at)}</TableCell>
                      <TableCell className="text-muted-foreground">
                        {formatDate(task.created_at)}
                      </TableCell>
                      <TableCell className="text-red-500 max-w-xs truncate">
                        {task.error_message || "-"}
                      </TableCell>
                    </TableRow>
                  );
                })}
              </TableBody>
            </Table>
          )}
        </CardContent>
      </Card>

      {/* 执行详情弹窗 */}
      <Dialog open={!!selectedTask} onOpenChange={() => setSelectedTask(null)}>
        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>执行详情</DialogTitle>
          </DialogHeader>
          {selectedTask && (
            <div className="space-y-4">
              {/* 基本信息 */}
              <div className="grid grid-cols-2 gap-4">
                <div>
                  <p className="text-sm text-muted-foreground">任务ID</p>
                  <p className="font-mono text-sm">{selectedTask.id}</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">任务类型</p>
                  <p className="font-medium">{selectedTask.task_type}</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">状态</p>
                  <Badge
                    className={cn("gap-1", STATUS_CONFIG[selectedTask.status].color)}
                    variant="secondary"
                  >
                    {STATUS_CONFIG[selectedTask.status].icon}
                    {STATUS_CONFIG[selectedTask.status].label}
                  </Badge>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">优先级</p>
                  <p>{selectedTask.priority}</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">开始时间</p>
                  <p>{selectedTask.started_at ? formatDate(selectedTask.started_at) : "-"}</p>
                </div>
                <div>
                  <p className="text-sm text-muted-foreground">完成时间</p>
                  <p>{selectedTask.completed_at ? formatDate(selectedTask.completed_at) : "-"}</p>
                </div>
              </div>

              {/* 错误信息 */}
              {selectedTask.error_message && (
                <div className="p-3 bg-red-50 border border-red-200 rounded-lg">
                  <p className="text-sm font-medium text-red-600">错误信息</p>
                  <p className="text-sm text-red-500 mt-1">{selectedTask.error_message}</p>
                </div>
              )}

              {/* 执行日志 */}
              <div>
                <p className="text-sm font-medium mb-2">执行日志</p>
                {loadingLogs ? (
                  <div className="space-y-2">
                    {[1, 2, 3].map(i => (
                      <Skeleton key={i} className="h-8 w-full" />
                    ))}
                  </div>
                ) : taskLogs.length === 0 ? (
                  <p className="text-sm text-muted-foreground">暂无日志</p>
                ) : (
                  <div className="bg-gray-900 text-gray-100 rounded-lg p-3 font-mono text-xs max-h-64 overflow-y-auto">
                    {taskLogs.map(log => (
                      <div key={log.id} className="py-1">
                        <span className="text-gray-500">[{formatDate(log.created_at)}]</span>
                        <span
                          className={cn(
                            "ml-2",
                            log.log_level === "ERROR" && "text-red-400",
                            log.log_level === "WARNING" && "text-yellow-400",
                            log.log_level === "INFO" && "text-blue-400",
                            log.log_level === "DEBUG" && "text-gray-500"
                          )}
                        >
                          [{log.log_level}]
                        </span>
                        <span className="ml-2">{log.message}</span>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>

      <Dialog open={!!configAgent} onOpenChange={() => setConfigAgent(null)}>
        <DialogContent className="max-w-lg">
          <DialogHeader>
            <DialogTitle className="flex items-center gap-2">
              <Settings2 className="h-5 w-5" />
              配置 — {configAgent?.name}
            </DialogTitle>
          </DialogHeader>
          {configAgent && (
            <div className="space-y-4">
              <div className="space-y-2">
                <Label>配置 (JSON)</Label>
                <textarea
                  className="w-full min-h-[200px] rounded-md border bg-gray-50 p-3 font-mono text-sm focus:outline-none focus:ring-2 focus:ring-ring"
                  value={configJson}
                  onChange={(e) => setConfigJson(e.target.value)}
                />
              </div>
              <div className="flex justify-end gap-2">
                <Button variant="outline" onClick={() => setConfigAgent(null)}>
                  取消
                </Button>
                <Button onClick={saveConfig} disabled={savingConfig}>
                  {savingConfig ? (
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  ) : (
                    <Save className="mr-2 h-4 w-4" />
                  )}
                  保存
                </Button>
              </div>
            </div>
          )}
        </DialogContent>
      </Dialog>
    </div>
  );
}