import { useEffect, useMemo } from "react";
import { LoaderCircle } from "lucide-react";
import { useQuery, useQueryClient } from "@tanstack/react-query";
import { apiErrorMessage } from "../../api/client";
import { Button } from "../../components/ui/button";
import {
  getSensitivityAnalysisRun,
  listSensitivityAnalysisEvents,
  listSensitivityAnalysisRuns,
  type SensitivityAnalysisRun,
} from "../../api/catalog-databases";
import { useTailFollowing } from "../activityScroll";
import { FleetLedgerDrawer } from "./FleetLedgerShell";

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

const HISTORY_QUERY_KEY = ["sensitive-data-suggestion-runs", 50] as const;
const SAFE_FINAL_ERROR = "The run ended before all columns were classified. Review the event log for safe details.";

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

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

function outcomeClass(run: SensitivityAnalysisRun): string {
  if (run.status === "completed") return "thot-sensitive-run--success";
  if (["failed", "interrupted"].includes(run.status)) return "thot-sensitive-run--failure";
  return "";
}

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() : "Not available";
}

export function SensitivityAnalysisHistoryDrawer({
  open,
  databaseId = null,
  run: initialRun,
  awaitingRun = false,
  onClose,
  onRunUpdate,
}: Props) {
  const queryClient = useQueryClient();
  const runId = initialRun?.id ?? null;
  const runQuery = useQuery({
    queryKey: ["sensitive-data-suggestion-run", runId],
    queryFn: () => getSensitivityAnalysisRun(runId!),
    enabled: open && Boolean(runId),
    initialData: initialRun ?? undefined,
    retry: false,
    refetchInterval: (query) => isTerminal(query.state.data) ? false : 750,
  });
  const run = runQuery.data;
  const eventQuery = useQuery({
    queryKey: ["sensitive-data-suggestion-events", runId],
    queryFn: () => listSensitivityAnalysisEvents(runId!),
    enabled: open && Boolean(runId),
    retry: false,
    refetchInterval: run && isTerminal(run) ? false : 750,
  });
  const historyQuery = useQuery({
    queryKey: HISTORY_QUERY_KEY,
    queryFn: () => listSensitivityAnalysisRuns(50),
    enabled: open,
    retry: false,
    refetchInterval: (query) => awaitingRun
      ? 500
      : query.state.data?.some((item) => !isTerminal(item)) ? 3_000 : false,
  });
  const visibleHistory = useMemo(
    () => (historyQuery.data ?? []).filter((item) => !databaseId || item.databaseId === databaseId),
    [databaseId, historyQuery.data],
  );
  const events = eventQuery.data ?? [];
  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) return;
    const candidate = awaitingRun
      ? visibleHistory.find((item) => !isTerminal(item))
      : visibleHistory[0];
    if (!candidate || candidate.id === initialRun?.id) return;
    onRunUpdate(candidate);
  }, [awaitingRun, initialRun?.id, onRunUpdate, open, visibleHistory]);

  useEffect(() => {
    if (!run) return;
    onRunUpdate(run);
    queryClient.setQueryData<SensitivityAnalysisRun[]>(HISTORY_QUERY_KEY, (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]);

  if (!open) return null;
  if (!run && awaitingRun && !historyQuery.isError) {
    return (
      <FleetLedgerDrawer
        open
        ariaLabel="Sensitivity analysis history"
        eyebrow="Sensitivity analysis"
        title={(
          <span className="inline-flex items-center gap-2">
            <LoaderCircle className="size-5 animate-spin" aria-hidden="true" />
            Starting sensitivity analysis
          </span>
        )}
        description="Preparing the local policy and source scan."
        onClose={onClose}
        closeLabel="Close sensitivity analysis history"
        bodyClassName="thot-catalog-drawer__history-layout thot-catalog-drawer__run-layout"
      >
        <div className="thot-catalog-drawer__run-main">
          <section aria-label="Sensitivity analysis startup progress">
            <h3 className="thot-label mb-2">Progress</h3>
            <div
              role="progressbar"
              aria-label="Sensitivity analysis is starting"
              aria-valuetext="Preparing analysis run"
              className="h-2 overflow-hidden rounded-full bg-muted"
            >
              <div className="h-full w-1/3 animate-pulse rounded-full bg-primary" />
            </div>
          </section>
          <section className="thot-catalog-drawer__events mt-4" aria-label="Sensitivity analysis log">
            <div className="mb-2 flex items-center justify-between">
              <h3 className="thot-label">Events</h3>
              <span className="text-xs tabular-nums text-muted-foreground">1</span>
            </div>
            <div
              role="log"
              aria-label="Sensitivity analysis events"
              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"
            >
              <p>Preparing sensitivity analysis…</p>
            </div>
          </section>
        </div>
      </FleetLedgerDrawer>
    );
  }
  if (!run) {
    return (
      <FleetLedgerDrawer
        open
        ariaLabel="Sensitivity analysis history"
        eyebrow="Sensitive data"
        title="Analysis run history"
        onClose={onClose}
        closeLabel="Close sensitivity analysis history"
        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">
            {apiErrorMessage(historyQuery.error)}
          </div>
        ) : historyQuery.isLoading || awaitingRun || (historyQuery.data?.length ?? 0) > 0 ? (
          <p className="text-sm text-muted-foreground">
            {awaitingRun ? "Starting sensitivity analysis…" : "Loading analysis history…"}
          </p>
        ) : (
          <div className="w-full rounded-md border border-border bg-muted/25 px-4 py-5 text-sm">
            <p className="font-semibold">No sensitivity analysis runs yet.</p>
            <p className="mt-1 text-muted-foreground">
              Analyze sensitive fields to create the first history entry.
            </p>
          </div>
        )}
      </FleetLedgerDrawer>
    );
  }

  const finalError = safeFinalError(run.errorSummary);
  const engineDisplay = run.engine === "local"
    ? `Local rules (${run.policyVersion ?? "unknown policy"})`
    : `Legacy LLM (${run.modelId ?? "unknown model"})`;
  const progressCounters = [
    ["total", "Total columns"],
    ["suggestedSensitive", "Sensitive"],
    ["suggestedNonSensitive", "Not sensitive"],
    ["unknown", "Unprocessed"],
  ] as const;
  return (
    <FleetLedgerDrawer
      open
      className={outcomeClass(run)}
      ariaLabel="Sensitivity analysis history"
      eyebrow="Sensitivity analysis"
      title={(
        <span className="inline-flex items-center gap-2">
          {!isTerminal(run) ? <LoaderCircle className="size-5 animate-spin" aria-hidden="true" /> : null}
          {statusLabel(run)}
        </span>
      )}
      description={run.scope.replaceAll("_", " ")}
      onClose={onClose}
      closeLabel="Close sensitivity analysis history"
      bodyClassName="thot-catalog-drawer__history-layout thot-catalog-drawer__run-layout"
    >
      <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">
            {apiErrorMessage(runQuery.error)}
          </div>
        ) : null}

        <div className={`grid gap-4 sm:grid-cols-2${runQuery.isError ? " mt-4" : ""}`}>
          <section aria-label="Analysis engine">
            <h3 className="thot-label mb-2">Analysis engine</h3>
            <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
              <dt>Engine</dt><dd className="truncate text-right" title={engineDisplay}>{engineDisplay}</dd>
              {run.engine === "llm" ? <>
                <dt>Input tokens</dt><dd className="text-right tabular-nums">{(run.inputTokens ?? 0).toLocaleString("en-US")}</dd>
                <dt>Cache tokens</dt><dd className="text-right tabular-nums">{(run.cacheReadTokens ?? 0).toLocaleString("en-US")}</dd>
                <dt>Output tokens</dt><dd className="text-right tabular-nums">{(run.outputTokens ?? 0).toLocaleString("en-US")}</dd>
              </> : null}
            </dl>
          </section>
          <section aria-label="Sensitivity analysis timestamps">
            <h3 className="thot-label mb-2">Timestamps</h3>
            <dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
              <dt className="text-muted-foreground">Created</dt><dd className="text-right tabular-nums">{timestamp(run.createdAt)}</dd>
              <dt className="text-muted-foreground">Started</dt><dd className="text-right tabular-nums">{timestamp(run.startedAt)}</dd>
              <dt className="text-muted-foreground">Updated</dt><dd className="text-right tabular-nums">{timestamp(run.updatedAt)}</dd>
              <dt className="text-muted-foreground">Finished</dt><dd className="text-right tabular-nums">{timestamp(run.finishedAt)}</dd>
            </dl>
          </section>
        </div>

        <section className="mt-4" aria-label="Sensitivity analysis counters">
          <h3 className="thot-label mb-2">Results</h3>
          <div className="overflow-x-auto rounded-md border border-border bg-muted/20">
            <table className="w-full min-w-[20rem] table-fixed" aria-label="Sensitivity analysis 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">
                      {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">
            {finalError}
          </div>
        ) : null}

        <section className="thot-catalog-drawer__events mt-3" aria-label="Sensitivity analysis log">
          <div className="mb-2 flex items-center justify-between">
            <h3 className="thot-label">Events</h3>
            <div className="flex items-center gap-2">
              {!followingEventTail && events.length > 0 ? (
                <Button
                  type="button"
                  variant="outline"
                  size="xs"
                  onClick={jumpToLatestEvent}
                >
                  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="Sensitivity analysis 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">Waiting for events…</p> : events.map((event) => (
              <p key={event.sequence} className={event.level === "error" ? "text-red-300" : event.level === "warning" ? "text-warning" : undefined}>
                <span className="mr-2 text-zinc-500">{new Date(event.createdAt).toLocaleTimeString()}</span>{event.message}
              </p>
            ))}
          </div>
          {eventQuery.isError ? <p role="alert" className="mt-2 text-sm text-destructive">{apiErrorMessage(eventQuery.error)}</p> : null}
        </section>
      </div>

        <section className="thot-catalog-drawer__history" aria-label="Sensitivity analysis run history">
          <div className="mb-2 flex items-center justify-between gap-3">
            <h3 className="thot-label">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">{apiErrorMessage(historyQuery.error)}</p>
          ) : historyQuery.isLoading ? (
            <p className="text-sm text-muted-foreground">Loading analysis history…</p>
          ) : visibleHistory.length === 0 ? (
            <p className="text-sm text-muted-foreground">No sensitivity analysis 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)} · ${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"
                  onClick={() => onRunUpdate(item)}
                >
                  <span className="font-medium">{statusLabel(item)}</span>
                  <span className="shrink-0 text-right text-xs text-muted-foreground">
                    {item.suggestedSensitive + item.suggestedNonSensitive + item.unknown}/{item.total}<br />
                    {new Date(item.createdAt).toLocaleString()}
                  </span>
                </button>
              ))}
            </div>
          )}
        </section>
    </FleetLedgerDrawer>
  );
}