import { useCallback, useState } from "react";
import { useRouter } from "@tanstack/react-router";
import { useJobLog } from "~/hooks/use-job-log";
import { formatDuration } from "~/lib/format";
import { StatusDot, runState } from "~/ui/StatusDot";
import { cn } from "~/utils/cn";

const ANSI = /\u001b\[[0-9;?]*[A-Za-z]/g;
const SETUP_STEP = -1;

type Step = {
  index: number;
  name: string;
  status: string;
  conclusion: string | null;
  startedAt: number | null;
  completedAt: number | null;
};

export function JobLog({ jobId, steps }: { jobId: string; steps: Step[] }) {
  const router = useRouter();
  const refresh = useCallback(() => {
    router.invalidate();
  }, [router]);
  const log = useJobLog(jobId, refresh);
  const [open, setOpen] = useState<Set<number>>(new Set());

  const sections = [
    {
      index: SETUP_STEP,
      name: "Set up job",
      status: "completed",
      conclusion: null,
      startedAt: null,
      completedAt: null,
    },
    ...steps,
  ];
  const failing = steps.find((step) => step.conclusion === "failure")?.index;
  const isOpen = (index: number) =>
    open.has(index) ||
    (open.size === 0 &&
      (index === failing || (log.live && steps.find((step) => step.status === "in_progress")?.index === index)));

  return (
    <div className="overflow-hidden rounded-lg border border-kumo-hairline bg-black/40 font-mono text-sm">
      {log.error && <p className="px-4 py-2 text-kumo-danger">{log.error}</p>}
      {sections.map((section) => {
        const lines = log.rows
          .filter((row) => row.step === section.index)
          .flatMap((row) => row.text.split("\n").map((text, index) => ({ key: `${row.seq}:${index}`, text })));
        const expanded = isOpen(section.index);
        return (
          <div key={section.index} className="border-b border-kumo-hairline last:border-b-0">
            <button
              type="button"
              aria-expanded={expanded}
              onClick={() =>
                setOpen((current) => {
                  const next = new Set(current);
                  if (next.has(section.index)) next.delete(section.index);
                  else next.add(section.index);
                  return next;
                })
              }
              className="flex w-full items-center gap-3 px-4 py-2 text-left hover:bg-kumo-tint"
            >
              <span className="w-3 text-kumo-inactive">{expanded ? "▾" : "▸"}</span>
              {section.index !== SETUP_STEP && <StatusDot state={runState(section.status, section.conclusion)} />}
              <span className="text-kumo-default">{section.name}</span>
              <span className="ml-auto text-kumo-inactive">
                {formatDuration(section.startedAt, section.completedAt)}
              </span>
            </button>
            {expanded && (
              <pre className="overflow-x-auto px-4 pb-3 leading-5 text-kumo-default">
                {lines.length === 0 ? (
                  <span className="text-kumo-inactive">{log.live ? "Waiting for output…" : "No output"}</span>
                ) : null}
                {lines.map((line, number) => (
                  <div
                    key={line.key}
                    className={cn("flex gap-4 hover:bg-kumo-tint", /error|fail/i.test(line.text) && "text-kumo-danger")}
                  >
                    <span className="w-10 shrink-0 text-right text-kumo-inactive select-none">{number + 1}</span>
                    <span className="whitespace-pre-wrap">{line.text.replace(ANSI, "")}</span>
                  </div>
                ))}
              </pre>
            )}
          </div>
        );
      })}
      {log.live && <div className="animate-pulse-dot px-4 py-2 text-xs text-kumo-warning">● streaming</div>}
    </div>
  );
}