import { createFileRoute, Link, useNavigate } from "@tanstack/react-router";
import { z } from "zod";
import { approveRun, cancelRun, getRun, rerunRun } from "~/fns/actions";
import { useAction } from "~/hooks/use-action";
import { usePollWhile } from "~/hooks/use-poll-while";
import { JobLog } from "~/components/JobLog";
import { DeploymentGate } from "~/components/DeploymentGate";
import { Badge } from "~/ui/Badge";
import { formatBytes, formatDuration } from "~/lib/format";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { StatusDot, runState } from "~/ui/StatusDot";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { cn } from "~/utils/cn";
import { Callout } from "~/ui/Callout";
import { ExternalLink, TextLink } from "~/ui/TextLink";
import { Heading } from "~/ui/Heading";

/** A waiting job flips to running within seconds; once its log streams, only the run's final state needs a poll. */
const WAITING_POLL_MS = 2_000;
const RUNNING_POLL_MS = 10_000;

export const Route = createFileRoute("/$owner/$repo/actions/runs/$number")({
  validateSearch: z.object({ job: z.string().optional() }),
  loader: ({ params }) => getRun({ data: { owner: params.owner, repo: params.repo, number: Number(params.number) } }),
  component: RunPage,
});

function RunPage() {
  const data = Route.useLoaderData();
  const params = Route.useParams();
  const search = Route.useSearch();
  const navigate = useNavigate();
  const cancel = useAction(cancelRun);
  const rerun = useAction(rerunRun, { invalidate: false });
  const approve = useAction(approveRun);
  const { run } = data;
  const selected =
    data.jobs.find((job) => job.id === search.job) ??
    data.jobs.find((job) => job.conclusion === "failure") ??
    data.jobs[0];
  const number = Number(params.number);
  const waiting = !selected || selected.status === "pending" || selected.status === "queued";
  usePollWhile(run.status !== "completed" && waiting, WAITING_POLL_MS);
  usePollWhile(run.status !== "completed" && !waiting, RUNNING_POLL_MS);
  const rerunAndOpen = async (failedOnly: boolean) => {
    const result = await rerun.run({ data: { ...params, number, failedOnly } });
    if (result)
      await navigate({
        to: "/$owner/$repo/actions/runs/$number",
        params: { ...params, number: String(result.number) },
      });
  };

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center gap-3">
        <StatusDot state={runState(run.status, run.conclusion)} className="size-3.5" />
        <Heading>{run.title}</Heading>
        <span className="text-kumo-subtle">
          {run.workflowName} #{run.number}
        </span>
        <div className="ml-auto flex gap-2">
          {data.canWrite && run.status !== "completed" && (
            <Button
              variant="danger"
              size="sm"
              pending={cancel.pending}
              onClick={() => cancel.run({ data: { ...params, number } })}
            >
              Cancel run
            </Button>
          )}
          {data.canWrite && run.status === "completed" && (
            <>
              {(run.conclusion === "failure" || run.conclusion === "cancelled") && data.jobs.length > 0 && (
                <Button size="sm" pending={rerun.pending} onClick={() => rerunAndOpen(true)}>
                  Re-run failed jobs
                </Button>
              )}
              <Button size="sm" pending={rerun.pending} onClick={() => rerunAndOpen(false)}>
                Re-run all jobs
              </Button>
            </>
          )}
        </div>
      </div>
      <ErrorBanner message={cancel.error ?? rerun.error ?? approve.error} />
      <DeploymentGate owner={params.owner} repo={params.repo} deployments={data.deployments} />
      {run.approvalRequired && (
        <Callout tone="warning" className="flex items-center gap-3 px-4 py-3">
          This run comes from a fork and is waiting for a maintainer to approve it before it uses runners.
          {data.canWrite && (
            <Button
              size="sm"
              variant="primary"
              className="ml-auto"
              pending={approve.pending}
              onClick={() => approve.run({ data: { ...params, number } })}
            >
              Approve and run
            </Button>
          )}
        </Callout>
      )}
      <div className="flex flex-wrap gap-4 text-sm text-kumo-subtle">
        <span>
          Triggered by <span className="text-kumo-default">{run.event}</span> {run.actor && <>· {run.actor.name}</>} ·{" "}
          <RelativeTime timestamp={run.createdAt} />
        </span>
        <TextLink to="/$owner/$repo/commit/$sha" params={{ ...params, sha: run.sha }} mono>
          {run.sha.slice(0, 7)}
        </TextLink>
        <Badge className="font-mono">{run.ref.replace(/^refs\/(heads|tags)\//, "")}</Badge>
        {run.prNumber && (
          <TextLink to="/$owner/$repo/pull/$number" params={{ ...params, number: String(run.prNumber) }}>
            #{run.prNumber}
          </TextLink>
        )}
        <span>{formatDuration(run.startedAt, run.completedAt)}</span>
        {run.rerunOf && (
          <TextLink to="/$owner/$repo/actions/runs/$number" params={{ ...params, number: String(run.rerunOf) }}>
            Re-run of #{run.rerunOf}
          </TextLink>
        )}
      </div>
      {data.jobs.length === 0 ? (
        <Panel>
          <p className="p-5 text-sm text-kumo-danger">{run.title}</p>
        </Panel>
      ) : (
        <div className="grid gap-5 lg:grid-cols-[260px_1fr]">
          <nav className="space-y-1">
            {data.jobs.map((job) => (
              <Link
                key={job.id}
                to="/$owner/$repo/actions/runs/$number"
                params={params}
                search={{ job: job.id }}
                className={cn(
                  "flex items-center gap-2 rounded-md px-3 py-2 text-sm",
                  selected?.id === job.id ? "bg-kumo-base text-white" : "text-kumo-subtle hover:bg-kumo-tint",
                )}
              >
                <StatusDot state={runState(job.status, job.conclusion)} />
                <span className="truncate">{job.name}</span>
                <span className="ml-auto text-xs text-kumo-inactive">
                  {formatDuration(job.startedAt, job.completedAt)}
                </span>
              </Link>
            ))}
            {data.artifacts.length > 0 && (
              <div className="pt-4">
                <h2 className="label-small mb-2 px-3 text-kumo-subtle">Artifacts</h2>
                {data.artifacts.map((artifact) => (
                  <ExternalLink
                    key={artifact.id}
                    href={`/api/artifacts/${artifact.id}`}
                    className="flex justify-between px-3 py-1 text-sm"
                  >
                    {artifact.name}
                    <span className="text-xs text-kumo-subtle">{formatBytes(artifact.size)}</span>
                  </ExternalLink>
                ))}
              </div>
            )}
          </nav>
          {selected && (
            <section className="min-w-0 space-y-3">
              <div className="flex items-center gap-2 text-sm">
                <span className="font-medium text-kumo-strong">{selected.name}</span>
                <Badge>{selected.runsOn.join(", ")}</Badge>
                {selected.environment && (
                  <Link to="/$owner/$repo/deployments" params={params} search={{}}>
                    <Badge>{selected.environment}</Badge>
                  </Link>
                )}
                {selected.runnerName && <span className="text-xs text-kumo-subtle">on {selected.runnerName}</span>}
              </div>
              {selected.status === "pending" || selected.status === "queued" ? (
                <Panel>
                  <p className="p-5 text-sm text-kumo-subtle">
                    {selected.status === "queued"
                      ? "Waiting for a runner to pick up this job…"
                      : selected.waiting
                        ? `Waiting for the ${selected.environment ?? ""} environment's protection rules…`
                        : "Waiting for dependencies…"}
                  </p>
                </Panel>
              ) : (
                <JobLog key={selected.id} jobId={selected.id} steps={selected.steps} />
              )}
              {selected.outputs.length > 0 && (
                <Panel title="Outputs">
                  <dl className="divide-y divide-kumo-hairline font-mono text-xs">
                    {selected.outputs.map((output) => (
                      <div key={output.name} className="flex gap-4 px-4 py-2">
                        <dt className="w-40 shrink-0 text-kumo-subtle">{output.name}</dt>
                        <dd className="min-w-0 break-all whitespace-pre-wrap text-kumo-default">{output.value}</dd>
                      </div>
                    ))}
                  </dl>
                </Panel>
              )}
            </section>
          )}
        </div>
      )}
    </div>
  );
}