"use client";

import { createFileRoute, useNavigate } from "@tanstack/react-router";
import { useTRPC } from "@/integrations/trpc/react";
import { useQuery } from "@tanstack/react-query";
import Header from "@/components/Header";
import { Button } from "@bullstudio/ui/components/button";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@bullstudio/ui/components/table";
import { Skeleton } from "@bullstudio/ui/components/skeleton";
import {
  JobStatusBadge,
  type JobStatus,
  EmptyState,
} from "@bullstudio/ui/shared";
import { Workflow, RefreshCw, Inbox, CheckCircle, XCircle } from "lucide-react";
import dayjs from "@bullstudio/dayjs";

export const Route = createFileRoute("/flows/")({
  component: FlowsPage,
});

function FlowsPage() {
  const trpc = useTRPC();
  const navigate = useNavigate();

  const {
    data: flows,
    isLoading,
    refetch,
    isFetching,
  } = useQuery(
    trpc.flows.list.queryOptions(undefined, {
      refetchInterval(query) {
        const flowsData = query.state.data;
        if (!flowsData || flowsData.length === 0) return false;
        const hasActiveFlows = flowsData.some(
          (f) => !["completed", "failed"].includes(f.status)
        );
        return hasActiveFlows ? 2000 : false;
      },
    })
  );

  const navigateToFlow = (flowId: string, queueName: string) => {
    navigate({
      to: "/flows/$flowId",
      params: { flowId },
      search: { queueName },
    });
  };

  return (
    <div className="space-y-6">
      <div className="flex items-center justify-between">
        <Header title="Flows" />
        <Button
          variant="outline"
          size="sm"
          onClick={() => refetch()}
          disabled={isFetching}
          className="border-zinc-800 hover:bg-zinc-800"
        >
          <RefreshCw
            className={`size-4 mr-2 ${isFetching ? "animate-spin" : ""}`}
          />
          Refresh
        </Button>
      </div>

      {isLoading ? (
        <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 overflow-hidden">
          <div className="p-8 space-y-4">
            {[...Array(5)].map((_, i) => (
              <Skeleton key={i} className="h-12 w-full" />
            ))}
          </div>
        </div>
      ) : !flows || flows.length === 0 ? (
        <EmptyState
          icon={<Inbox className="size-12" />}
          title="No flows found"
          description="Flows will appear here when parent jobs with children are created using BullMQ's FlowProducer"
        />
      ) : (
        <div className="rounded-lg border border-zinc-800 bg-zinc-900/50 overflow-hidden">
          <Table>
            <TableHeader>
              <TableRow className="border-zinc-800 hover:bg-transparent">
                <TableHead>Flow</TableHead>
                <TableHead>Queue</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Jobs</TableHead>
                <TableHead>Created</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {flows.map((flow) => (
                <TableRow
                  key={`${flow.queueName}-${flow.id}`}
                  className="border-zinc-800 cursor-pointer hover:bg-zinc-800/50 transition-colors"
                  onClick={() => navigateToFlow(flow.id, flow.queueName)}
                >
                  <TableCell>
                    <div className="flex items-center gap-3">
                      <div className="p-2 rounded-lg bg-cyan-500/10 border border-cyan-500/20">
                        <Workflow className="size-4 text-cyan-400" />
                      </div>
                      <div className="flex flex-col">
                        <span className="font-medium text-zinc-100">
                          {flow.name}
                        </span>
                        <span className="text-xs text-zinc-500 font-mono">
                          {flow.id}
                        </span>
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <span className="font-mono text-sm text-zinc-400">
                      {flow.queueName}
                    </span>
                  </TableCell>
                  <TableCell>
                    <JobStatusBadge status={flow.status as JobStatus} size="sm" />
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-col gap-1">
                      <span className="text-sm text-zinc-300">
                        {flow.totalJobs} total
                      </span>
                      <div className="flex items-center gap-3 text-xs">
                        {flow.completedJobs > 0 && (
                          <span className="flex items-center gap-1 text-emerald-400">
                            <CheckCircle className="size-3" />
                            {flow.completedJobs}
                          </span>
                        )}
                        {flow.failedJobs > 0 && (
                          <span className="flex items-center gap-1 text-red-400">
                            <XCircle className="size-3" />
                            {flow.failedJobs}
                          </span>
                        )}
                      </div>
                    </div>
                  </TableCell>
                  <TableCell>
                    <div className="flex flex-col">
                      <span className="text-sm text-zinc-300">
                        {dayjs(flow.timestamp).fromNow()}
                      </span>
                      <span className="text-xs text-zinc-500 font-mono">
                        {dayjs(flow.timestamp).format("MMM D, HH:mm:ss")}
                      </span>
                    </div>
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>

          <div className="px-4 py-3 border-t border-zinc-800 text-sm text-zinc-500">
            Showing {flows.length} flow{flows.length !== 1 ? "s" : ""}
          </div>
        </div>
      )}
    </div>
  );
}