import { getLocale, useI18n, translate } from "../../i18n";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { LoaderCircle, LockOpen, Square } from "lucide-react";
import { toast } from "sonner";
import { Button } from "../../components/ui/button";
import { ApiError, apiErrorMessage } from "../../api/client";
import {
  cancelDescriptionGenerationRun,
  descriptionGenerationEventsUrl,
  getDescriptionGenerationRun,
  listDescriptionGenerationEvents,
  listDescriptionGenerationRuns,
  type DescriptionGenerationEvent,
  type DescriptionGenerationRun,
  unlockDescriptionGenerationRun,
} from "../../api/catalog-databases";
import { useTailFollowing } from "../activityScroll";
import { FleetLedgerDrawer } from "./FleetLedgerShell";

interface Props {
  open: boolean;
  databaseId?: string | null;
  run: DescriptionGenerationRun | null;
  modelLabel: string;
  onClose: () => void;
  onRunUpdate: (run: DescriptionGenerationRun) => void;
  onTerminal: (run: DescriptionGenerationRun) => void;
}

const APPARENTLY_STALE_AFTER_MS = 5 * 60 * 1_000;
const SAFE_FINAL_ERROR = "The run ended before all targets were processed. Review the event log for safe details.";

function statusLabel(run: DescriptionGenerationRun): string {
  const label = run.status.replaceAll("_", " ");
  return translate(`${label[0].toUpperCase()}${label.slice(1)}`);
}

function isTerminal(run?: DescriptionGenerationRun): boolean {
  return Boolean(run && [
    "completed", "completed_with_errors", "cancelled", "failed", "interrupted",
  ].includes(run.status));
}

function isApparentlyStale(run: DescriptionGenerationRun): boolean {
  if (!["queued", "running"].includes(run.status)) return false;
  const updatedAt = new Date(run.updatedAt).getTime();
  return Number.isFinite(updatedAt) && Date.now() - updatedAt >= APPARENTLY_STALE_AFTER_MS;
}

function safeFinalError(summary: string | null): string | null {
  const value = summary?.trim();
  if (!value) return null;
  if (
    value.length > 500
    || /[\r\n]/.test(value)
    || /traceback|stack trace|(?:^|\s)at\s+\S+[:(]|prompt|provider\s+payload|source\s+sample|bearer\s+\S+|api[_ -]?key|sk-[a-z0-9_-]+/i.test(value)
  ) return SAFE_FINAL_ERROR;
  return value;
}

function timestamp(value: string | null): string {
  return value ? new Date(value).toLocaleString(getLocale()) : translate("Not available");
}

export function DescriptionGenerationDrawer({
  open,
  databaseId = null,
  run: initialRun,
  modelLabel,
  onClose,
  onRunUpdate,
  onTerminal,
}: Props) {
  const { t } = useI18n();
  const queryClient = useQueryClient();
  const runId = initialRun?.id ?? null;
  const [events, setEvents] = useState<DescriptionGenerationEvent[]>([]);
  const [action, setAction] = useState<"stop" | "unlock" | null>(null);
  const lastSequence = useRef(0);
  const terminalRuns = useRef(new Set<string>());
  const finalEventsRun = useRef<string | null>(null);
  const runQuery = useQuery({
    queryKey: ["description-generation-run", runId],
    queryFn: () => getDescriptionGenerationRun(runId!),
    enabled: Boolean(runId),
    initialData: initialRun ?? undefined,
    retry: false,
    refetchInterval: (query) => isTerminal(query.state.data) ? false : 1_000,
  });
  const run = runQuery.data;
  const eventQuery = useQuery({
    queryKey: ["description-generation-events", runId],
    queryFn: () => listDescriptionGenerationEvents(runId!, lastSequence.current),
    enabled: Boolean(runId),
    retry: false,
    refetchInterval: run && isTerminal(run) ? false : 1_500,
  });
  const historyQuery = useQuery({
    queryKey: ["description-generation-runs", 50],
    queryFn: () => listDescriptionGenerationRuns(50),
    enabled: open,
    retry: false,
    refetchInterval: (query) => query.state.data?.some((item) => !isTerminal(item))
      ? 3_000
      : false,
  });
  const visibleHistory = useMemo(
    () => (historyQuery.data ?? []).filter((item) => !databaseId || item.databaseId === databaseId),
    [databaseId, historyQuery.data, t],
  );
  const latestEventSequence = events.at(-1)?.sequence ?? 0;
  const {
    followingTail: followingEventTail,
    handleScroll: handleEventLogScroll,
    jumpToTail: jumpToLatestEvent,
    viewportRef: eventLogRef,
  } = useTailFollowing<HTMLDivElement>({
    active: open && Boolean(run),
    resetKey: runId,
    tail: latestEventSequence,
  });

  useEffect(() => {
    if (!open || initialRun || !visibleHistory[0]) return;
    onRunUpdate(visibleHistory[0]);
  }, [initialRun, onRunUpdate, open, visibleHistory]);

  const mergeEvents = useCallback((incoming: DescriptionGenerationEvent[]) => {
    if (incoming.length === 0) return;
    setEvents((current) => {
      const bySequence = new Map(current.map((event) => [event.sequence, event]));
      for (const event of incoming) bySequence.set(event.sequence, event);
      const merged = [...bySequence.values()].sort((left, right) => left.sequence - right.sequence);
      lastSequence.current = merged.at(-1)?.sequence ?? lastSequence.current;
      return merged;
    });
  }, [t]);

  useEffect(() => {
    setEvents([]);
    lastSequence.current = 0;
    finalEventsRun.current = null;
  }, [runId]);

  useEffect(() => {
    mergeEvents(eventQuery.data ?? []);
  }, [eventQuery.data, mergeEvents]);

  const live = Boolean(run && !isTerminal(run));
  useEffect(() => {
    if (
      !runId
      || !open
      || !live
      || !eventQuery.isFetched
      || typeof EventSource === "undefined"
    ) return;

    let source: EventSource | null = null;
    let reconnectTimer: number | null = null;
    let disposed = false;

    const connect = () => {
      if (disposed) return;
      const polledSequence = (eventQuery.data ?? []).reduce(
        (latest, event) => Math.max(latest, event.sequence),
        0,
      );
      lastSequence.current = Math.max(lastSequence.current, polledSequence);
      let currentSource: EventSource;
      try {
        currentSource = new EventSource(descriptionGenerationEventsUrl(runId, lastSequence.current));
      } catch {
        return;
      }
      source = currentSource;
      const isCurrent = () => !disposed && source === currentSource;
      const log = (message: MessageEvent<string>) => {
        if (!isCurrent()) return;
        try {
          mergeEvents([JSON.parse(message.data) as DescriptionGenerationEvent]);
        } catch { /* ordered polling remains authoritative */ }
      };
      const update = (message: MessageEvent<string>) => {
        if (!isCurrent()) return;
        try {
          queryClient.setQueryData(
            ["description-generation-run", runId],
            JSON.parse(message.data) as DescriptionGenerationRun,
          );
        } catch { /* status polling remains authoritative */ }
      };
      const message = (incoming: MessageEvent<string>) => {
        if (!isCurrent()) return;
        try {
          const parsed = JSON.parse(incoming.data) as DescriptionGenerationEvent | DescriptionGenerationRun;
          if ("sequence" in parsed) mergeEvents([parsed]);
          else if ("status" in parsed) queryClient.setQueryData(["description-generation-run", runId], parsed);
        } catch { /* polling remains authoritative */ }
      };
      currentSource.addEventListener("log", log as EventListener);
      currentSource.addEventListener("run", update as EventListener);
      currentSource.onmessage = message;
      currentSource.onerror = () => {
        if (!isCurrent() || reconnectTimer !== null) return;
        currentSource.close();
        source = null;
        void eventQuery.refetch().finally(() => {
          if (disposed || reconnectTimer !== null) return;
          reconnectTimer = window.setTimeout(() => {
            reconnectTimer = null;
            connect();
          }, 200);
        });
      };
    };

    connect();
    return () => {
      disposed = true;
      source?.close();
      if (reconnectTimer !== null) window.clearTimeout(reconnectTimer);
    };
  }, [eventQuery.isFetched, eventQuery.refetch, live, mergeEvents, open, queryClient, runId]);

  useEffect(() => {
    if (!run) return;
    onRunUpdate(run);
    queryClient.setQueryData<DescriptionGenerationRun[]>(
      ["description-generation-runs", 50],
      (current) => {
        if (!current) return [run];
        return current.some((item) => item.id === run.id)
          ? current.map((item) => item.id === run.id ? run : item)
          : [run, ...current];
      },
    );
  }, [onRunUpdate, queryClient, run]);

  useEffect(() => {
    if (!run || !isTerminal(run) || finalEventsRun.current === run.id) return;
    finalEventsRun.current = run.id;
    void eventQuery.refetch();
  }, [eventQuery.refetch, run]);

  useEffect(() => {
    if (!run || !isTerminal(run) || terminalRuns.current.has(run.id)) return;
    terminalRuns.current.add(run.id);
    onTerminal(run);
  }, [onTerminal, run]);

  const stop = async () => {
    if (!run || isTerminal(run)) return;
    setAction("stop");
    try {
      const next = await cancelDescriptionGenerationRun(run.id);
      queryClient.setQueryData(["description-generation-run", run.id], next);
      onRunUpdate(next);
      await historyQuery.refetch();
    } catch (error) {
      toast.error(t(apiErrorMessage(error)));
    } finally {
      setAction(null);
    }
  };

  const unlock = async () => {
    if (!run || !isApparentlyStale(run)) return;
    setAction("unlock");
    try {
      const next = await unlockDescriptionGenerationRun();
      queryClient.setQueryData(["description-generation-run", next.id], next);
      onRunUpdate(next);
      await historyQuery.refetch();
    } catch (error) {
      toast.error(error instanceof ApiError && error.status === 409
        ? t("Unlock was refused because a live description worker is still running.")
        : apiErrorMessage(error));
    } finally {
      setAction(null);
    }
  };

  if (!open) return null;
  if (!run) {
    return (
      <FleetLedgerDrawer
        open
        ariaLabel={t("Description generation")}
        eyebrow={t("Description generation")}
        title={t("Run history")}
        onClose={onClose}
        closeLabel={t("Close description generation")}
        busy={action !== null}
        bodyClassName="thot-catalog-drawer__body--empty"
      >
        {historyQuery.isError ? (
          <div role="alert" className="w-full rounded-md border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm text-destructive">
            {t(apiErrorMessage(historyQuery.error))}
          </div>
        ) : historyQuery.isLoading || (historyQuery.data?.length ?? 0) > 0 ? (
          <p className="text-sm text-muted-foreground">{t("Loading run history…")}</p>
        ) : (
          <div className="w-full rounded-md border border-border bg-muted/25 px-4 py-5 text-sm">
            <p className="font-semibold">{t("No description generation runs yet.")}</p>
            <p className="mt-1 text-muted-foreground">
              {t("Start a description generation to create the first history entry.")}</p>
          </div>
        )}
      </FleetLedgerDrawer>
    );
  }
  const apparentlyStale = isApparentlyStale(run);
  const finalError = safeFinalError(run.errorSummary);
  const modelDisplay = modelLabel && modelLabel !== run.modelId
    ? `${modelLabel} (${run.modelId})`
    : run.modelId;
  const progressCounters = [
    ["total", t("Total")],
    ["processed", t("Processed")],
    ["generated", t("Generated")],
    ["nonGeneratable", t("Not generated")],
    ["failed", t("Failed")],
  ] as const;
  const footer = ["queued", "running"].includes(run.status) ? (
    <div className="w-full">
      {apparentlyStale ? (
        <p
          id="description-generation-unlock-help"
          className="mb-3 rounded-md border border-warning/35 bg-warning/8 px-3 py-2 text-xs leading-5 text-muted-foreground"
        >
          {t("Unlock interrupts apparently stale work and marks the run interrupted. A live worker will prevent it.")}</p>
      ) : null}
      <div className="flex flex-wrap justify-end gap-2">
        {apparentlyStale ? (
          <Button
            type="button"
            variant="outline"
            aria-label={t("Unlock stale run")}
            aria-describedby="description-generation-unlock-help"
            disabled={action !== null}
            onClick={() => void unlock()}
          >
            {action === "unlock" ? <LoaderCircle className="animate-spin" /> : <LockOpen />}
            {action === "unlock" ? t("Unlocking…") : t("Unlock")}
          </Button>
        ) : null}
        <Button
          type="button"
          variant="destructive"
          disabled={action !== null}
          onClick={() => void stop()}
        >
          {action === "stop" ? <LoaderCircle className="animate-spin" /> : <Square />}
          {action === "stop" ? t("Stopping…") : t("Stop")}
        </Button>
      </div>
    </div>
  ) : undefined;
  return (
    <FleetLedgerDrawer
      open
      ariaLabel={t("Description generation")}
      eyebrow={t("Description generation")}
      title={(
        <span className="inline-flex items-center gap-2">
          {!isTerminal(run) ? <LoaderCircle className="size-5 animate-spin" aria-hidden="true" /> : null}
          {t(statusLabel(run))}
        </span>
      )}
      description={t(run.scope.replaceAll("_", " "))}
      onClose={onClose}
      closeLabel={t("Close description generation")}
      busy={action !== null}
      bodyClassName="thot-catalog-drawer__history-layout thot-catalog-drawer__run-layout"
      footer={footer}
    >
      <div className="thot-catalog-drawer__run-main">
        {runQuery.isError ? (
          <div role="alert" className="rounded-md border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm text-destructive">
            {t(apiErrorMessage(runQuery.error))}
          </div>
        ) : null}

        <div className={`grid gap-4 sm:grid-cols-2${runQuery.isError ? " mt-4" : ""}`}>
          <section aria-label={t("AI usage")}>
            <h3 className="thot-label mb-2">{t("AI usage")}</h3>
            <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
              <dt>{t("Model")}</dt><dd className="truncate text-right" title={modelDisplay}>{modelDisplay}</dd>
              <dt>{t("Input tokens")}</dt><dd className="text-right tabular-nums">{(run.inputTokens ?? 0).toLocaleString(getLocale())}</dd>
              <dt>{t("Cache tokens")}</dt><dd className="text-right tabular-nums">{(run.cacheReadTokens ?? 0).toLocaleString(getLocale())}</dd>
              <dt>{t("Output tokens")}</dt><dd className="text-right tabular-nums">{(run.outputTokens ?? 0).toLocaleString(getLocale())}</dd>
            </dl>
          </section>
          <section aria-label={t("Description generation timestamps")}>
            <h3 className="thot-label mb-2">{t("Timestamps")}</h3>
            <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
              <dt className="text-muted-foreground">{t("Created")}</dt><dd className="text-right tabular-nums">{timestamp(run.createdAt)}</dd>
              <dt className="text-muted-foreground">{t("Started")}</dt><dd className="text-right tabular-nums">{timestamp(run.startedAt)}</dd>
              <dt className="text-muted-foreground">{t("Updated")}</dt><dd className="text-right tabular-nums">{timestamp(run.updatedAt)}</dd>
              <dt className="text-muted-foreground">{t("Finished")}</dt><dd className="text-right tabular-nums">{timestamp(run.finishedAt)}</dd>
            </dl>
          </section>
        </div>

        <section className="mt-4" aria-label={t("Description generation counters")}>
          <h3 className="thot-label mb-2">{t("Progress")}</h3>
          <div className="overflow-x-auto rounded-md border border-border bg-muted/20">
            <table className="w-full min-w-[28rem] table-fixed" aria-label={t("Description generation progress")}>
              <thead>
                <tr className="border-b border-border bg-muted/45">
                  {progressCounters.map(([name, label]) => (
                    <th key={name} scope="col" className="border-l border-border px-2 py-1.5 text-left text-xs font-semibold text-muted-foreground first:border-l-0">
                      {t(label)}
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                <tr>
                  {progressCounters.map(([name]) => (
                    <td key={name} data-count={name} className="border-l border-border px-2 py-1.5 text-base font-semibold tabular-nums first:border-l-0">
                      {run[name]}
                    </td>
                  ))}
                </tr>
              </tbody>
            </table>
          </div>
        </section>

        {finalError ? (
          <div className="mt-3 rounded-md border border-destructive/35 bg-destructive/5 px-4 py-3 text-sm text-destructive">
            {t(finalError)}
          </div>
        ) : null}

        <section className="thot-catalog-drawer__events mt-3" aria-label={t("Description generation log")}>
          <div className="mb-2 flex items-center justify-between">
            <h3 className="thot-label">{t("Events")}</h3>
            <div className="flex items-center gap-2">
              {!followingEventTail && events.length > 0 ? (
                <Button type="button" variant="outline" size="xs" onClick={jumpToLatestEvent}>
                  {t("Jump to latest")}</Button>
              ) : null}
              <span className="text-xs tabular-nums text-muted-foreground">{events.length}</span>
            </div>
          </div>
          <div
            ref={eventLogRef}
            role="log"
            aria-label={t("Description generation events")}
            aria-relevant="additions"
            tabIndex={0}
            onScroll={handleEventLogScroll}
            className="thot-catalog-drawer__event-log overflow-y-auto rounded-md bg-zinc-950 p-3 font-mono text-xs leading-5 text-zinc-200"
          >
            {events.length === 0 ? <p className="text-zinc-500">{t("Waiting for events…")}</p> : events.map((event) => (
              <p key={event.sequence} className={event.level === "error" ? "text-red-300" : event.level === "warning" ? "text-amber-300" : undefined}>
                <span className="mr-2 text-zinc-500">{new Date(event.createdAt).toLocaleTimeString(getLocale())}</span>{t(event.message)}
              </p>
            ))}
          </div>
          {eventQuery.isError ? <p role="alert" className="mt-2 text-sm text-destructive">{t(apiErrorMessage(eventQuery.error))}</p> : null}
        </section>
      </div>

        <section className="thot-catalog-drawer__history" aria-label={t("Description generation history")}>
          <div className="mb-2 flex items-center justify-between gap-3">
            <h3 className="thot-label">{t("Recent runs")}</h3>
            <span className="text-xs tabular-nums text-muted-foreground">
              {visibleHistory.length}
            </span>
          </div>
          {historyQuery.isError ? (
            <p role="alert" className="text-sm text-destructive">
              {t(apiErrorMessage(historyQuery.error))}
            </p>
          ) : historyQuery.isLoading ? (
            <p className="text-sm text-muted-foreground">{t("Loading run history…")}</p>
          ) : visibleHistory.length === 0 ? (
            <p className="text-sm text-muted-foreground">{t("No description generation runs yet.")}</p>
          ) : (
            <div className="thot-catalog-drawer__history-list divide-y divide-border overflow-y-auto rounded-md border border-border">
              {visibleHistory.map((item) => (
                <button
                  key={item.id}
                  type="button"
                  aria-label={`${statusLabel(item)} · ${t(item.scope.replaceAll("_", " "))}`}
                  aria-current={item.id === run.id ? "true" : undefined}
                  data-status={item.status}
                  className={`flex w-full items-start justify-between gap-3 px-3 py-2 text-left text-sm hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/25${item.status === "completed" ? " bg-[oklch(var(--success)/0.1)]" : ""}`}
                  onClick={() => onRunUpdate(item)}
                >
                  <span className="font-medium">{t(statusLabel(item))}</span>
                  <span className="shrink-0 text-right text-xs text-muted-foreground">
                    {item.processed}/{item.total}<br />{new Date(item.createdAt).toLocaleString(getLocale())}
                  </span>
                </button>
              ))}
            </div>
          )}
        </section>
    </FleetLedgerDrawer>
  );
}