"use client";

/**
 * Automations — RUN HISTORY (shared by the list row-expander and the detail
 * page). Lists the automation's runs (GET /automations/:id/runs?limit=50,
 * `{ data, nextCursor }`), each row showing status (lowercase text —
 * "succeeded"/"failed"/"dead-letter"), trigger type, startedAt, duration and
 * retryCount. Clicking a run expands its logs
 * (GET /automations/:id/runs/:runId → `{ …, logs: [{level, message, data,
 * createdAt}] }`) as a monospace console panel. FAILED/DEAD_LETTER runs get a
 * Retry button (POST …/runs/:runId/retry).
 */
import { useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { Loader2, RefreshCw } from "lucide-react";
import { apiFetch } from "@/lib/api";
import { toast } from "@/stores/ui-store";
import { formatRelativeTime } from "@/lib/utils";
import { runStatusLabel, runStatusCls, type RunDetail, type RunLog, type RunSummary } from "./lib";

interface RunHistoryProps {
  automationId: string;
  /** Compact variant (inside a list row): tighter spacing. */
  compact?: boolean;
}

export function RunHistory({ automationId, compact }: RunHistoryProps) {
  const [expanded, setExpanded] = useState<string | null>(null);

  const runs = useQuery({
    queryKey: ["automations", automationId, "runs"],
    queryFn: async (): Promise<RunSummary[]> => {
      const res = await apiFetch<{ data: RunSummary[]; nextCursor: string | null }>(
        `/automations/${automationId}/runs?limit=50`
      );
      return res.data;
    },
    enabled: !!automationId,
    // Poll while a run is in flight so "Run now" / retries settle visibly.
    refetchInterval: (q) => (q.state.data?.some((r) => r.status === "PENDING" || r.status === "RUNNING") ? 4000 : false)
  });

  const page = runs.data ?? [];

  return (
    <div className={compact ? "mt-2 border-t border-border pt-2" : ""}>
      <ul className={compact ? "space-y-1" : "space-y-1.5"}>
        {runs.isLoading && <li className="text-xs text-muted-foreground">Loading runs…</li>}
        {!runs.isLoading && page.length === 0 && (
          <li className="text-xs text-muted-foreground">No runs yet. Use the Run now button to trigger one.</li>
        )}
        {page.map((r) => (
          <li key={r.id} className="rounded-md border border-border">
            <div
              data-testid={`automation-run-${r.id}`}
              className="flex w-full flex-wrap items-center gap-x-3 gap-y-1 px-2.5 py-1.5 text-left text-xs"
            >
              <button
                type="button"
                className="flex min-w-0 flex-1 flex-wrap items-center gap-x-3 gap-y-1 text-left hover:opacity-80"
                onClick={() => setExpanded(expanded === r.id ? null : r.id)}
                aria-expanded={expanded === r.id}
                aria-label={`Expand run ${runStatusLabel(r.status)}`}
              >
                <span className={`w-24 shrink-0 rounded px-1.5 py-0.5 text-center font-medium ${runStatusCls(r.status)}`}>
                  {runStatusLabel(r.status)}
                </span>
                <span className="shrink-0 text-muted-foreground">{r.triggerType ?? "—"}</span>
                <span
                  className="min-w-0 flex-1 truncate text-muted-foreground"
                  title={`started ${formatRelativeTime(r.startedAt ?? r.createdAt)}`}
                >
                  {r.startedAt ? formatRelativeTime(r.startedAt) : "not started"}
                  {durationOf(r) ? ` · ${durationOf(r)}` : ""}
                </span>
                <span className="shrink-0 text-muted-foreground">retries: {r.retryCount}</span>
              </button>
              {(r.status === "FAILED" || r.status === "DEAD_LETTER") && (
                <RetryButton automationId={automationId} runId={r.id} />
              )}
            </div>
            {expanded === r.id && <RunLogs automationId={automationId} runId={r.id} />}
          </li>
        ))}
      </ul>
    </div>
  );
}

function RetryButton({ automationId, runId }: { automationId: string; runId: string }) {
  const qc = useQueryClient();
  const [busy, setBusy] = useState(false);
  return (
    <button
      type="button"
      data-testid={`automation-retry-run-${runId}`}
      className="inline-flex shrink-0 items-center gap-1 rounded-md border px-2 py-0.5 text-xs disabled:opacity-50"
      disabled={busy}
      onClick={async () => {
        setBusy(true);
        try {
          await apiFetch(`/automations/${automationId}/runs/${runId}/retry`, { method: "POST" });
          toast("success", "Run re-queued");
          qc.invalidateQueries({ queryKey: ["automations", automationId, "runs"] });
          qc.invalidateQueries({ queryKey: ["automations", automationId, "run", runId] });
        } catch (err) {
          toast("error", "Retry failed", err instanceof Error ? err.message : undefined);
        } finally {
          setBusy(false);
        }
      }}
    >
      {busy ? <Loader2 className="size-3 animate-spin" /> : <RefreshCw className="size-3" />}
      Retry
    </button>
  );
}

function RunLogs({ automationId, runId }: { automationId: string; runId: string }) {
  const detail = useQuery({
    queryKey: ["automations", automationId, "run", runId],
    queryFn: async (): Promise<RunDetail> => {
      // The service returns the run object directly (summary fields spread +
      // input/output/logs); tolerate an envelope `{ run }` shape too.
      const res = await apiFetch<RunDetail & { run?: RunDetail }>(`/automations/${automationId}/runs/${runId}`);
      return res.run ? res.run : res;
    }
  });

  if (detail.isLoading) return <p className="px-2.5 pb-2 text-xs text-muted-foreground">Loading logs…</p>;
  if (detail.isError)
    return <p className="px-2.5 pb-2 text-xs text-destructive">Failed to load logs: {(detail.error as Error).message}</p>;

  const logs: RunLog[] = detail.data?.logs ?? [];
  return (
    <div className="px-2.5 pb-2.5">
      <div
        data-testid={`automation-run-log-${runId}`}
        className="max-h-72 overflow-auto rounded-md bg-zinc-950 p-3 font-mono text-[11px] leading-5 text-zinc-100"
      >
        {detail.data?.error != null && <p className="mb-1 whitespace-pre-wrap text-red-400">error: {jsonText(detail.data.error)}</p>}
        {logs.length === 0 && <p className="text-zinc-500">no log lines</p>}
        {logs.map((l, i) => (
          <p key={i} className="whitespace-pre-wrap break-all">
            <span className="text-zinc-500">{new Date(l.createdAt).toISOString()} </span>
            <span className={levelColor(l.level)}>{String(l.level).toUpperCase().padEnd(5)}</span>{" "}
            {l.message}
            {l.data != null ? <span className="text-zinc-400"> {jsonText(l.data)}</span> : null}
          </p>
        ))}
      </div>
    </div>
  );
}

function levelColor(level: string): string {
  switch (level?.toUpperCase()) {
    case "ERROR":
      return "text-red-400";
    case "WARN":
      return "text-amber-300";
    case "INFO":
      return "text-sky-300";
    default:
      return "text-zinc-300";
  }
}

function jsonText(v: unknown): string {
  try {
    return typeof v === "string" ? v : JSON.stringify(v);
  } catch {
    return String(v);
  }
}

function durationOf(r: RunSummary): string {
  if (!r.startedAt || !r.finishedAt) return "";
  const ms = new Date(r.finishedAt).getTime() - new Date(r.startedAt).getTime();
  if (!Number.isFinite(ms) || ms < 0) return "";
  return ms < 1000 ? `${Math.round(ms)}ms` : `${(ms / 1000).toFixed(1)}s`;
}