import { useMemo } from "react";
import { trpc } from "@/lib/trpc";
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ScrollArea } from "@/components/ui/scroll-area";
import { toast } from "sonner";
import { AlertTriangle, BellRing, CheckCircle2, ClipboardList, Loader2, RefreshCcw } from "lucide-react";

function formatTaskStatus(status: string) {
  switch (status) {
    case "running":
      return "执行中";
    case "succeeded":
      return "已完成";
    case "failed":
      return "失败";
    default:
      return "排队中";
  }
}

function formatNotificationState(isRead: number | boolean | null | undefined) {
  return isRead ? "已读" : "未读";
}

function formatStructuredValue(value: unknown) {
  if (!value) return "";
  if (typeof value === "string") return value;
  try {
    return JSON.stringify(value, null, 2);
  } catch {
    return String(value);
  }
}

function formatTaskTiming(task: {
  createdAt: string | Date;
  startedAt?: string | Date | null;
  completedAt?: string | Date | null;
}) {
  const createdAt = new Date(task.createdAt).getTime();
  const startedAt = task.startedAt ? new Date(task.startedAt).getTime() : null;
  const completedAt = task.completedAt ? new Date(task.completedAt).getTime() : null;
  const durationMs = (completedAt ?? Date.now()) - (startedAt ?? createdAt);
  const seconds = Math.max(0, Math.round(durationMs / 1000));
  if (seconds < 60) return `${seconds}s`;
  const minutes = Math.floor(seconds / 60);
  const rest = seconds % 60;
  return `${minutes}m ${rest.toString().padStart(2, "0")}s`;
}

export default function Logs() {
  const utils = trpc.useUtils();
  const taskListQuery = trpc.task.list.useQuery(
    { limit: 50 },
    {
      retry: 3,
      retryDelay: (attempt) => Math.min(1_000 * 2 ** attempt, 8_000),
      placeholderData: (previous) => previous,
      refetchInterval: (query) => {
        const hasActiveTask = (query.state.data ?? []).some((task) => task.status === "queued" || task.status === "running");
        return hasActiveTask ? 3_000 : 10_000;
      },
    },
  );
  const notificationQuery = trpc.notification.list.useQuery({ limit: 50 });
  const retryMutation = trpc.task.retry.useMutation({
    onSuccess: () => {
      utils.task.list.invalidate();
      toast.success("任务已重新排队");
    },
    onError: (error) => toast.error(`任务重试失败: ${error.message}`),
  });

  const activeTaskCount = useMemo(
    () => (taskListQuery.data ?? []).filter((task) => task.status === "queued" || task.status === "running").length,
    [taskListQuery.data],
  );
  const failedTaskCount = useMemo(
    () => (taskListQuery.data ?? []).filter((task) => task.status === "failed").length,
    [taskListQuery.data],
  );
  const unreadNotificationCount = useMemo(
    () => (notificationQuery.data ?? []).filter((item) => !item.isRead).length,
    [notificationQuery.data],
  );

  if (taskListQuery.isLoading && notificationQuery.isLoading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-28 w-full" />
        <Skeleton className="h-96 w-full" />
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
        <div>
          <h1 className="text-2xl font-bold tracking-tight">系统日志</h1>
          <p className="mt-1 text-sm text-muted-foreground">
            查看后台任务、归档失败原因和通知记录。录制结束失败、训练计划生成失败等信息会保留在这里。
          </p>
        </div>
        <div className="flex flex-wrap gap-2">
          <Badge variant="secondary">活动任务 {activeTaskCount}</Badge>
          <Badge variant={failedTaskCount > 0 ? "destructive" : "secondary"}>失败任务 {failedTaskCount}</Badge>
          <Badge variant="outline">未读通知 {unreadNotificationCount}</Badge>
        </div>
      </div>

      <Alert>
        <ClipboardList className="h-4 w-4" />
        <AlertTitle>排障入口</AlertTitle>
        <AlertDescription>
          如果录制归档、视频分析或训练计划生成失败，先看“后台任务”里的错误信息，再根据任务标题定位具体模块。
        </AlertDescription>
      </Alert>

      {taskListQuery.isError ? (
        <Alert variant="destructive">
          <AlertTriangle className="h-4 w-4" />
          <AlertTitle>任务列表刷新失败</AlertTitle>
          <AlertDescription>
            当前显示最近一次成功拉取的数据。服务恢复后页面会自动继续刷新。
          </AlertDescription>
        </Alert>
      ) : null}

      <Tabs defaultValue="tasks" className="space-y-4">
        <TabsList>
          <TabsTrigger value="tasks">后台任务</TabsTrigger>
          <TabsTrigger value="notifications">通知记录</TabsTrigger>
        </TabsList>

        <TabsContent value="tasks">
          <ScrollArea className="max-h-[70vh] pr-3">
            <div className="space-y-4">
              {(taskListQuery.data ?? []).length === 0 ? (
                <Card className="border-dashed">
                  <CardContent className="pt-6 text-sm text-muted-foreground">
                    还没有后台任务记录。
                  </CardContent>
                </Card>
              ) : (
                (taskListQuery.data ?? []).map((task) => (
                  <Card key={task.id} className="border-0 shadow-sm">
                    <CardHeader className="pb-3">
                      <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                        <div className="space-y-1">
                          <CardTitle className="text-base">{task.title}</CardTitle>
                          <CardDescription>
                            {new Date(task.createdAt).toLocaleString("zh-CN")} · {task.type}
                          </CardDescription>
                        </div>
                        <Badge variant={task.status === "failed" ? "destructive" : "secondary"}>
                          {formatTaskStatus(task.status)}
                        </Badge>
                      </div>
                    </CardHeader>
                    <CardContent className="space-y-3">
                      <p className="text-sm text-muted-foreground">{task.message || formatTaskStatus(task.status)}</p>

                      {task.error ? (
                        <div className="rounded-xl bg-red-50 px-3 py-2 text-sm text-red-700">
                          <div className="flex items-start gap-2">
                            <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
                            <span className="whitespace-pre-wrap break-words">{task.error}</span>
                          </div>
                        </div>
                      ) : null}

                      {task.result ? (
                        <pre className="overflow-x-auto rounded-xl bg-muted/60 p-3 text-xs leading-5 whitespace-pre-wrap break-words">
                          {formatStructuredValue(task.result)}
                        </pre>
                      ) : null}

                      <div className="flex items-center justify-between text-xs text-muted-foreground">
                        <span>
                          进度 {task.progress}% · 尝试 {task.attempts}/{task.maxAttempts} · 耗时 {formatTaskTiming(task)}
                        </span>
                        {task.status === "failed" ? (
                          <Button
                            variant="outline"
                            size="sm"
                            className="gap-2"
                            onClick={() => retryMutation.mutate({ taskId: task.id })}
                            disabled={retryMutation.isPending}
                          >
                            {retryMutation.isPending ? <Loader2 className="h-4 w-4 animate-spin" /> : <RefreshCcw className="h-4 w-4" />}
                            重试
                          </Button>
                        ) : task.status === "succeeded" ? (
                          <span className="inline-flex items-center gap-1 text-emerald-600">
                            <CheckCircle2 className="h-3.5 w-3.5" />
                            已完成
                          </span>
                        ) : (
                          <span className="inline-flex items-center gap-1 text-primary">
                            <Loader2 className="h-3.5 w-3.5 animate-spin" />
                            处理中
                          </span>
                        )}
                      </div>
                    </CardContent>
                  </Card>
                ))
              )}
            </div>
          </ScrollArea>
        </TabsContent>

        <TabsContent value="notifications">
          <ScrollArea className="max-h-[70vh] pr-3">
            <div className="space-y-4">
              {(notificationQuery.data ?? []).length === 0 ? (
                <Card className="border-dashed">
                  <CardContent className="pt-6 text-sm text-muted-foreground">
                    还没有通知记录。
                  </CardContent>
                </Card>
              ) : (
                (notificationQuery.data ?? []).map((item) => (
                  <Card key={item.id} className="border-0 shadow-sm">
                    <CardHeader className="pb-3">
                      <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                        <div className="space-y-1">
                          <CardTitle className="text-base">{item.title}</CardTitle>
                          <CardDescription>
                            {new Date(item.createdAt).toLocaleString("zh-CN")} · {item.notificationType}
                          </CardDescription>
                        </div>
                        <Badge variant={item.isRead ? "secondary" : "outline"}>
                          {formatNotificationState(item.isRead)}
                        </Badge>
                      </div>
                    </CardHeader>
                    <CardContent>
                      <div className="flex items-start gap-2 text-sm">
                        <BellRing className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
                        <p className="whitespace-pre-wrap break-words">{item.message || "无附加内容"}</p>
                      </div>
                    </CardContent>
                  </Card>
                ))
              )}
            </div>
          </ScrollArea>
        </TabsContent>
      </Tabs>
    </div>
  );
}