/**
 * Pipeline admin dashboard — video list with status, retrigger/revoke,
 * expandable event log with token usage and collapsible JSON viewer.
 */

import { useCallback, useEffect, useRef, useState } from "react";
import { useSearchParams } from "react-router-dom";
import { useDocumentTitle } from "../hooks/useDocumentTitle";
import {
  fetchPipelineVideos,
  fetchPipelineEvents,
  fetchPipelineRuns,
  fetchWorkerStatus,
  fetchDebugMode,
  setDebugMode,
  triggerPipeline,
  revokePipeline,
  cleanRetriggerPipeline,
  fetchCreators,
  fetchRecentActivity,
  type PipelineVideoItem,
  type PipelineEvent,
  type PipelineRunItem,
  type WorkerStatusResponse,
  type RecentActivityItem,
} from "../api/public-client";

// ── Helpers ──────────────────────────────────────────────────────────────────

function formatDate(iso: string | null): string {
  if (!iso) return "—";
  return new Date(iso).toLocaleString(undefined, {
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
  });
}

function formatTokens(n: number): string {
  if (n === 0) return "0";
  if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`;
  if (n >= 1_000) return `${(n / 1_000).toFixed(1)}k`;
  return String(n);
}

const STATUS_LABELS: Record<string, string> = {
  not_started: "Not Started",
  queued: "Queued",
  processing: "In Progress",
  error: "Errored",
  complete: "Complete",
};

function statusBadgeClass(status: string): string {
  switch (status) {
    case "complete":
      return "pipeline-badge--success";
    case "processing":
      return "pipeline-badge--active";
    case "error":
      return "pipeline-badge--error";
    case "not_started":
    case "queued":
      return "pipeline-badge--pending";
    default:
      return "";
  }
}

function eventTypeIcon(eventType: string): string {
  switch (eventType) {
    case "start":
      return "▶";
    case "complete":
      return "✓";
    case "error":
      return "✗";
    case "llm_call":
      return "⚙";
    default:
      return "·";
  }
}

// ── Collapsible JSON ─────────────────────────────────────────────────────────

function JsonViewer({ data }: { data: Record<string, unknown> | null }) {
  const [open, setOpen] = useState(false);
  if (!data || Object.keys(data).length === 0) return null;

  return (
    <div className="json-viewer">
      <button
        className="json-viewer__toggle"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        title="Raw JSON event data logged by the pipeline stage"
      >
        {open ? "▾ Hide payload" : "▸ Show payload"}
      </button>
      {open && (
        <pre className="json-viewer__content">
          {JSON.stringify(data, null, 2)}
        </pre>
      )}
    </div>
  );
}

// ── Debug Payload Viewer ─────────────────────────────────────────────────────

interface DebugSection {
  label: string;
  content: string;
}

function DebugPayloadViewer({ event }: { event: PipelineEvent }) {
  const sections: DebugSection[] = [];
  if (event.system_prompt_text) sections.push({ label: "System Prompt", content: event.system_prompt_text });
  if (event.user_prompt_text) sections.push({ label: "User Prompt", content: event.user_prompt_text });
  if (event.response_text) sections.push({ label: "Response", content: event.response_text });

  const [openSections, setOpenSections] = useState<Record<string, boolean>>({});
  const [copiedKey, setCopiedKey] = useState<string | null>(null);

  const SECTION_TOOLTIPS: Record<string, string> = {
    "System Prompt": "Instructions sent to the LLM defining its role and output format for this pipeline stage",
    "User Prompt": "The actual transcript content and extraction request sent to the LLM",
    "Response": "Raw LLM output before parsing — the extracted data that feeds the next stage",
  };

  if (sections.length === 0) return null;

  const toggleSection = (label: string) => {
    setOpenSections((prev) => ({ ...prev, [label]: !prev[label] }));
  };

  const copyToClipboard = async (label: string, text: string) => {
    try {
      await navigator.clipboard.writeText(text);
      setCopiedKey(label);
      setTimeout(() => setCopiedKey(null), 1500);
    } catch {
      // Fallback for non-HTTPS contexts
      const ta = document.createElement("textarea");
      ta.value = text;
      ta.style.position = "fixed";
      ta.style.opacity = "0";
      document.body.appendChild(ta);
      ta.select();
      document.execCommand("copy");
      document.body.removeChild(ta);
      setCopiedKey(label);
      setTimeout(() => setCopiedKey(null), 1500);
    }
  };

  const exportAsJson = () => {
    const data: Record<string, string | null> = {
      event_id: event.id,
      stage: event.stage,
      event_type: event.event_type,
      model: event.model,
      system_prompt_text: event.system_prompt_text,
      user_prompt_text: event.user_prompt_text,
      response_text: event.response_text,
    };
    const blob = new Blob([JSON.stringify(data, null, 2)], { type: "application/json" });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
    a.download = `debug-${event.stage}-${event.id.slice(0, 8)}.json`;
    a.click();
    URL.revokeObjectURL(url);
  };

  return (
    <div className="debug-viewer">
      <div className="debug-viewer__header">
        <span className="debug-viewer__label">LLM Debug</span>
        <button className="debug-viewer__export" onClick={exportAsJson} title="Export debug payload as JSON">
          ↓ JSON
        </button>
      </div>
      {sections.map((sec) => {
        const isOpen = !!openSections[sec.label];
        return (
          <div key={sec.label} className="debug-viewer__section">
            <div className="debug-viewer__section-header">
              <button
                className="debug-viewer__section-toggle"
                onClick={() => toggleSection(sec.label)}
                aria-expanded={isOpen}
                title={SECTION_TOOLTIPS[sec.label] ?? ""}
              >
                {isOpen ? "▾" : "▸"} {sec.label}
              </button>
              <button
                className="debug-viewer__copy"
                onClick={() => void copyToClipboard(sec.label, sec.content)}
                title={`Copy ${sec.label}`}
              >
                {copiedKey === sec.label ? "✓ Copied" : "Copy"}
              </button>
            </div>
            {isOpen && (
              <pre className="debug-viewer__content">{sec.content}</pre>
            )}
          </div>
        );
      })}
    </div>
  );
}

// ── Event Log ────────────────────────────────────────────────────────────────

function EventLog({ videoId, status, runId }: { videoId: string; status: string; runId?: string }) {
  const [events, setEvents] = useState<PipelineEvent[]>([]);
  const [total, setTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [offset, setOffset] = useState(0);
  const [viewMode, setViewMode] = useState<"head" | "tail">("tail");
  const limit = 50;
  const initialLoaded = useRef(false);

  const load = useCallback(async (silent = false) => {
    if (!silent) setLoading(true);
    setError(null);
    try {
      const res = await fetchPipelineEvents(videoId, {
        offset,
        limit,
        order: viewMode === "head" ? "asc" : "desc",
        run_id: runId,
      });
      setEvents(res.items);
      setTotal(res.total);
      initialLoaded.current = true;
    } catch (err) {
      if (!silent) setError(err instanceof Error ? err.message : "Failed to load events");
    } finally {
      if (!silent) setLoading(false);
    }
  }, [videoId, offset, viewMode]);

  useEffect(() => {
    void load();
  }, [load]);

  // Auto-refresh when video is actively processing
  useEffect(() => {
    if (status !== "processing" && status !== "queued") return;
    const id = setInterval(() => void load(true), 10_000);
    return () => clearInterval(id);
  }, [status, load]);

  if (loading) return <div className="loading">Loading events…</div>;
  if (error) return <div className="loading error-text">Error: {error}</div>;
  if (events.length === 0) return <div className="pipeline-events__empty">No events recorded.</div>;

  const hasNext = offset + limit < total;
  const hasPrev = offset > 0;

  return (
    <div className="pipeline-events">
      <div className="pipeline-events__header">
        <span className="pipeline-events__count">{total} event{total !== 1 ? "s" : ""}</span>
        <div className="pipeline-events__view-toggle">
          <button
            className={`pipeline-events__view-btn${viewMode === "head" ? " pipeline-events__view-btn--active" : ""}`}
            onClick={() => { setViewMode("head"); setOffset(0); }}
          >
            Oldest first
          </button>
          <button
            className={`pipeline-events__view-btn${viewMode === "tail" ? " pipeline-events__view-btn--active" : ""}`}
            onClick={() => { setViewMode("tail"); setOffset(0); }}
          >
            Newest first
          </button>
        </div>
      </div>

      <div className="pipeline-events__list">
        {events.map((evt) => (
          <div key={evt.id} className={`pipeline-event pipeline-event--${evt.event_type}`}>
            <div className="pipeline-event__row">
              <span className="pipeline-event__icon">{eventTypeIcon(evt.event_type)}</span>
              <span className="pipeline-event__stage">{evt.stage}</span>
              <span className={`pipeline-badge pipeline-badge--event-${evt.event_type}`}>
                {evt.event_type}
              </span>
              {typeof evt.payload?.context === "string" && (
                <span className="pipeline-event__context" title="Processing context">
                  {evt.payload.context}
                </span>
              )}
              {evt.model && <span className="pipeline-event__model">{evt.model}</span>}
              {evt.total_tokens != null && evt.total_tokens > 0 && (
                <span className="pipeline-event__tokens" title={`prompt: ${evt.prompt_tokens ?? 0} / completion: ${evt.completion_tokens ?? 0}`}>
                  {formatTokens(evt.total_tokens)} tok
                </span>
              )}
              {evt.duration_ms != null && (
                <span className="pipeline-event__duration">{evt.duration_ms}ms</span>
              )}
              <span className="pipeline-event__time">{formatDate(evt.created_at)}</span>
            </div>
            <JsonViewer data={evt.payload} />
            <DebugPayloadViewer event={evt} />
          </div>
        ))}
      </div>

      {(hasPrev || hasNext) && (
        <div className="pipeline-events__pager">
          <button
            className="btn btn--small btn--secondary"
            disabled={!hasPrev}
            onClick={() => setOffset((o) => Math.max(0, o - limit))}
          >
            ← Prev
          </button>
          <span className="pipeline-events__pager-info">
            {offset + 1}–{Math.min(offset + limit, total)} of {total}
          </span>
          <button
            className="btn btn--small btn--secondary"
            disabled={!hasNext}
            onClick={() => setOffset((o) => o + limit)}
          >
            Next →
          </button>
        </div>
      )}
    </div>
  );
}

// ── Worker Status ────────────────────────────────────────────────────────────

function WorkerStatus() {
  const [status, setStatus] = useState<WorkerStatusResponse | null>(null);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      setError(null);
      const res = await fetchWorkerStatus();
      setStatus(res);
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed");
    }
  }, []);

  useEffect(() => {
    void load();
    const id = setInterval(() => void load(), 15_000);
    return () => clearInterval(id);
  }, [load]);

  if (error) {
    return (
      <div className="worker-status worker-status--error">
        <span className="worker-status__dot worker-status__dot--offline" />
        Worker: error ({error})
      </div>
    );
  }

  if (!status) {
    return (
      <div className="worker-status">
        <span className="worker-status__dot worker-status__dot--unknown" />
        Worker: checking…
      </div>
    );
  }

  return (
    <div className={`worker-status ${status.online ? "worker-status--online" : "worker-status--offline"}`}>
      <span className={`worker-status__dot ${status.online ? "worker-status__dot--online" : "worker-status__dot--offline"}`} />
      <span className="worker-status__label">
        {status.online ? `${status.workers.length} worker${status.workers.length !== 1 ? "s" : ""} online` : "Workers offline"}
      </span>
      {status.workers.map((w) => (
        <span key={w.name} className="worker-status__detail" title={w.name}>
          {w.active_tasks.length > 0
            ? `${w.active_tasks.length} active`
            : "idle"}
          {w.pool_size != null && ` · pool ${w.pool_size}`}
        </span>
      ))}
    </div>
  );
}

// ── Debug Mode Toggle ────────────────────────────────────────────────────────

function DebugModeToggle({
  debugMode,
  onDebugModeChange,
}: {
  debugMode: boolean | null;
  onDebugModeChange: (mode: boolean) => void;
}) {
  const [debugLoading, setDebugLoading] = useState(false);

  async function handleToggle() {
    if (debugMode === null || debugLoading) return;
    setDebugLoading(true);
    try {
      const res = await setDebugMode(!debugMode);
      onDebugModeChange(res.debug_mode);
    } catch {
      // swallow — leave previous state
    } finally {
      setDebugLoading(false);
    }
  }

  if (debugMode === null) return null;

  return (
    <div className="debug-toggle" title="When enabled, pipeline runs capture full LLM prompts and responses for inspection in the event log">
      <span className="debug-toggle__label">
        Debug {debugMode ? "On" : "Off"}
      </span>
      <button
        type="button"
        className={`debug-toggle__switch ${debugMode ? "debug-toggle__switch--active" : ""}`}
        onClick={handleToggle}
        disabled={debugLoading}
        aria-label={`Turn debug mode ${debugMode ? "off" : "on"}`}
      />
    </div>
  );
}

// ── Status Filter ────────────────────────────────────────────────────────────

function StatusFilter({
  videos,
  activeFilter,
  onFilterChange,
}: {
  videos: PipelineVideoItem[];
  activeFilter: string | null;
  onFilterChange: (filter: string | null) => void;
}) {
  // Fixed display order for pipeline lifecycle
  const STATUS_ORDER = ["not_started", "queued", "processing", "error", "complete"];
  const present = new Set(videos.map((v) => v.processing_status));
  const ordered = STATUS_ORDER.filter((s) => present.has(s));

  if (ordered.length <= 1) return null;

  return (
    <div className="filter-tabs">
      <button
        type="button"
        className={`filter-tab ${activeFilter === null ? "filter-tab--active" : ""}`}
        onClick={() => onFilterChange(null)}
      >
        All ({videos.length})
      </button>
      {ordered.map((status) => {
        const count = videos.filter((v) => v.processing_status === status).length;
        return (
          <button
            key={status}
            type="button"
            className={`filter-tab ${activeFilter === status ? "filter-tab--active" : ""}`}
            onClick={() => onFilterChange(status)}
          >
            {STATUS_LABELS[status] ?? status} ({count})
          </button>
        );
      })}
    </div>
  );
}

// ── Run List ─────────────────────────────────────────────────────────────────

const TRIGGER_LABELS: Record<string, string> = {
  manual: "Manual",
  clean_reprocess: "Clean Reprocess",
  auto_ingest: "Auto Ingest",
  bulk: "Bulk",
};

const RUN_STATUS_CLASS: Record<string, string> = {
  running: "pipeline-badge--active",
  complete: "pipeline-badge--success",
  error: "pipeline-badge--error",
  cancelled: "pipeline-badge--pending",
};

function RunList({ videoId, videoStatus }: { videoId: string; videoStatus: string }) {
  const [runs, setRuns] = useState<PipelineRunItem[]>([]);
  const [legacyCount, setLegacyCount] = useState(0);
  const [loading, setLoading] = useState(true);
  const [expandedRunId, setExpandedRunId] = useState<string | null>(null);
  const [showLegacy, setShowLegacy] = useState(false);

  const load = useCallback(async (silent = false) => {
    if (!silent) setLoading(true);
    try {
      const res = await fetchPipelineRuns(videoId);
      setRuns(res.items);
      setLegacyCount(res.legacy_event_count);
      // Auto-expand the latest run on first load
      if (!silent && res.items.length > 0 && expandedRunId === null) {
        const firstRun = res.items[0];
        if (firstRun) setExpandedRunId(firstRun.id);
      }
    } catch {
      // silently fail
    } finally {
      if (!silent) setLoading(false);
    }
  }, [videoId, expandedRunId]);

  useEffect(() => {
    void load();
  }, [load]);

  // Auto-refresh when video is processing
  useEffect(() => {
    if (videoStatus !== "processing" && videoStatus !== "queued") return;
    const id = setInterval(() => void load(true), 10_000);
    return () => clearInterval(id);
  }, [videoStatus, load]);

  if (loading) return <div className="loading">Loading runs…</div>;

  if (runs.length === 0 && legacyCount === 0) {
    return <div className="pipeline-events__empty">No pipeline runs recorded.</div>;
  }

  return (
    <div className="run-list">
      {runs.map((run) => {
        const isExpanded = expandedRunId === run.id;
        return (
          <div key={run.id} className={`run-card run-card--${run.status}`}>
            <button
              className="run-card__header"
              onClick={() => setExpandedRunId(isExpanded ? null : run.id)}
              aria-expanded={isExpanded}
            >
              <span className="run-card__arrow">{isExpanded ? "▾" : "▸"}</span>
              <span className="run-card__number">Run #{run.run_number}</span>
              <span className="run-card__trigger">{TRIGGER_LABELS[run.trigger] ?? run.trigger}</span>
              <span className={`pipeline-badge ${RUN_STATUS_CLASS[run.status] ?? ""}`}>
                {run.status}
              </span>
              <span className="run-card__time">{formatDate(run.started_at)}</span>
              {run.finished_at && (
                <span className="run-card__duration" title={`Finished: ${formatDate(run.finished_at)}`}>
                  → {formatDate(run.finished_at)}
                </span>
              )}
              <span className="run-card__tokens">{formatTokens(run.total_tokens)} tokens</span>
              <span className="run-card__events">{run.event_count} events</span>
              {run.error_stage && (
                <span className="run-card__error-stage">Failed at: {run.error_stage}</span>
              )}
            </button>
            {isExpanded && (
              <div className="run-card__body">
                <EventLog videoId={videoId} status={run.status} runId={run.id} />
              </div>
            )}
          </div>
        );
      })}

      {legacyCount > 0 && (
        <div className="run-card run-card--legacy">
          <button
            className="run-card__header"
            onClick={() => setShowLegacy((v) => !v)}
            aria-expanded={showLegacy}
          >
            <span className="run-card__arrow">{showLegacy ? "▾" : "▸"}</span>
            <span className="run-card__number">Legacy</span>
            <span className="run-card__trigger">Pre-run tracking</span>
            <span className="run-card__events">{legacyCount} events</span>
          </button>
          {showLegacy && (
            <div className="run-card__body">
              <EventLog videoId={videoId} status="complete" />
            </div>
          )}
        </div>
      )}
    </div>
  );
}

// ── Stage Timeline ───────────────────────────────────────────────────────────

const PIPELINE_STAGES = [
  { key: "stage2_segmentation", label: "Segment" },
  { key: "stage3_extraction", label: "Extract" },
  { key: "stage4_classification", label: "Classify" },
  { key: "stage5_synthesis", label: "Synthesize" },
  { key: "stage6_embed", label: "Embed" },
];

function StageTimeline({ video }: { video: PipelineVideoItem }) {
  if (video.processing_status !== "processing" && video.processing_status !== "complete" && video.processing_status !== "error") {
    return null;
  }

  const activeStage = video.active_stage;
  const activeStatus = video.active_stage_status; // "start" = running, "complete" = done, "error" = failed

  // Determine each stage's state
  const activeIdx = PIPELINE_STAGES.findIndex((s) => s.key === activeStage);

  return (
    <div className="stage-timeline">
      {PIPELINE_STAGES.map((stage, i) => {
        let stateClass = "stage-timeline__step--future";
        if (activeIdx >= 0) {
          if (i < activeIdx) {
            stateClass = "stage-timeline__step--done";
          } else if (i === activeIdx) {
            if (activeStatus === "start") stateClass = "stage-timeline__step--active";
            else if (activeStatus === "complete") stateClass = "stage-timeline__step--done";
            else if (activeStatus === "error") stateClass = "stage-timeline__step--error";
          }
        }
        // If video is complete, all stages are done
        if (video.processing_status === "complete") {
          stateClass = "stage-timeline__step--done";
        }

        return (
          <div key={stage.key} className={`stage-timeline__step ${stateClass}`}>
            <div className="stage-timeline__dot" title={stage.label} />
            <span className="stage-timeline__label">{stage.label}</span>
          </div>
        );
      })}
    </div>
  );
}

// ── Recent Activity Feed ─────────────────────────────────────────────────────

function RecentActivityFeed() {
  const [items, setItems] = useState<RecentActivityItem[]>([]);
  const [collapsed, setCollapsed] = useState(false);
  const [loading, setLoading] = useState(true);

  const load = useCallback(async () => {
    try {
      const res = await fetchRecentActivity(8);
      setItems(res.items);
    } catch {
      // silently fail
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    void load();
    const id = setInterval(() => void load(), 15_000);
    return () => clearInterval(id);
  }, [load]);

  if (loading || items.length === 0) return null;

  return (
    <div className="recent-activity">
      <button
        className="recent-activity__toggle"
        onClick={() => setCollapsed((v) => !v)}
        aria-expanded={!collapsed}
      >
        <span className="recent-activity__title">Recent Activity</span>
        <span className="recent-activity__arrow">{collapsed ? "▸" : "▾"}</span>
      </button>
      {!collapsed && (
        <div className="recent-activity__list">
          {items.map((item) => (
            <div key={item.id} className={`recent-activity__item recent-activity__item--${item.event_type}`}>
              <span className="recent-activity__icon">
                {item.event_type === "complete" ? "✓" : "✗"}
              </span>
              <span className="recent-activity__stage">{item.stage.replace("stage", "S").replace("_", " ")}</span>
              <span className="recent-activity__file" title={item.filename}>
                {item.filename}
              </span>
              <span className="recent-activity__creator">{item.creator_name}</span>
              {item.duration_ms != null && (
                <span className="recent-activity__duration">
                  {item.duration_ms > 60000
                    ? `${(item.duration_ms / 60000).toFixed(1)}m`
                    : item.duration_ms > 1000
                      ? `${(item.duration_ms / 1000).toFixed(1)}s`
                      : `${item.duration_ms}ms`}
                </span>
              )}
              <span className="recent-activity__time">{formatDate(item.created_at)}</span>
            </div>
          ))}
        </div>
      )}
    </div>
  );
}

// ── Main Page ────────────────────────────────────────────────────────────────

interface BulkProgress {
  total: number;
  completed: number;
  failed: number;
  current: string | null;
  active: boolean;
}

interface BulkLogEntry {
  filename: string;
  ok: boolean;
  message: string;
}

export default function AdminPipeline() {
  useDocumentTitle("Pipeline Management — Chrysopedia");
  const [searchParams] = useSearchParams();
  const [videos, setVideos] = useState<PipelineVideoItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [expandedId, setExpandedId] = useState<string | null>(null);
  const [actionLoading, setActionLoading] = useState<string | null>(null);
  const [actionMessage, setActionMessage] = useState<{ id: string; text: string; ok: boolean } | null>(null);
  const [activeFilter, setActiveFilter] = useState<string | null>(null);
  const [debugMode, setDebugModeState] = useState<boolean | null>(null);
  const [creators, setCreators] = useState<{ name: string; slug: string }[]>([]);
  const [creatorFilter, setCreatorFilter] = useState<string | null>(null);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [bulkProgress, setBulkProgress] = useState<BulkProgress | null>(null);
  const [bulkLog, setBulkLog] = useState<BulkLogEntry[]>([]);
  const [changedIds, setChangedIds] = useState<Set<string>>(new Set());
  const [autoRefresh, setAutoRefresh] = useState(true);
  const bulkCancelRef = useRef(false);
  const prevStatusRef = useRef<Map<string, string>>(new Map());
  const videoRefs = useRef<Map<string, HTMLDivElement>>(new Map());
  const deepLinked = useRef(false);

  // Compute filtered list (status + creator)
  const filteredVideos = videos.filter((v) => {
    if (activeFilter !== null && v.processing_status !== activeFilter) return false;
    if (creatorFilter !== null && v.creator_name !== creatorFilter) return false;
    return true;
  });

  const load = useCallback(async (isAutoRefresh = false) => {
    if (!isAutoRefresh) setLoading(true);
    setError(null);
    try {
      const res = await fetchPipelineVideos();
      // Detect status changes for highlight animation
      if (prevStatusRef.current.size > 0) {
        const changed = new Set<string>();
        for (const v of res.items) {
          const prev = prevStatusRef.current.get(v.id);
          if (prev && prev !== v.processing_status) {
            changed.add(v.id);
          }
        }
        if (changed.size > 0) {
          setChangedIds(changed);
          // Clear highlights after animation
          setTimeout(() => setChangedIds(new Set()), 2000);
        }
      }
      // Store current statuses for next comparison
      const statusMap = new Map<string, string>();
      for (const v of res.items) {
        statusMap.set(v.id, v.processing_status);
      }
      prevStatusRef.current = statusMap;
      setVideos(res.items);
    } catch (err) {
      if (!isAutoRefresh) {
        setError(err instanceof Error ? err.message : "Failed to load videos");
      }
    } finally {
      if (!isAutoRefresh) setLoading(false);
    }
  }, []);

  useEffect(() => {
    void load();
  }, [load]);

  // Auto-refresh every 15 seconds
  useEffect(() => {
    if (!autoRefresh) return;
    const id = setInterval(() => void load(true), 15_000);
    return () => clearInterval(id);
  }, [autoRefresh, load]);

  // Load creators for filter dropdown
  useEffect(() => {
    fetchCreators({ limit: 200 })
      .then((res) => {
        const list = res.items.map((c: { name: string; slug: string }) => ({
          name: c.name,
          slug: c.slug,
        }));
        list.sort((a: { name: string }, b: { name: string }) => a.name.localeCompare(b.name));
        setCreators(list);
      })
      .catch(() => {
        // silently fail — filter stays hidden
      });
  }, []);

  // Deep-link: auto-expand and scroll to ?video=<id> on first load
  useEffect(() => {
    if (deepLinked.current || loading || videos.length === 0) return;
    const targetVideoId = searchParams.get("video");
    if (!targetVideoId) return;
    const match = videos.find((v) => v.id === targetVideoId);
    if (!match) return;
    deepLinked.current = true;
    setExpandedId(targetVideoId);
    requestAnimationFrame(() => {
      const el = videoRefs.current.get(targetVideoId);
      if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
    });
  }, [loading, videos, searchParams]);

  useEffect(() => {
    let cancelled = false;
    fetchDebugMode()
      .then((res) => {
        if (!cancelled) setDebugModeState(res.debug_mode);
      })
      .catch(() => {});
    return () => { cancelled = true; };
  }, []);

  // Clear selection when filters change
  useEffect(() => {
    setSelectedIds(new Set());
  }, [activeFilter, creatorFilter]);

  const handleTrigger = async (videoId: string) => {
    setActionLoading(videoId);
    setActionMessage(null);
    try {
      const res = await triggerPipeline(videoId);
      setActionMessage({ id: videoId, text: `Triggered (${res.status})`, ok: true });
      setTimeout(() => void load(), 2000);
    } catch (err) {
      setActionMessage({
        id: videoId,
        text: err instanceof Error ? err.message : "Trigger failed",
        ok: false,
      });
    } finally {
      setActionLoading(null);
    }
  };

  const handleRevoke = async (videoId: string) => {
    setActionLoading(videoId);
    setActionMessage(null);
    try {
      const res = await revokePipeline(videoId);
      setActionMessage({
        id: videoId,
        text: res.tasks_revoked > 0
          ? `Revoked ${res.tasks_revoked} task${res.tasks_revoked !== 1 ? "s" : ""}`
          : "No active tasks",
        ok: true,
      });
      setTimeout(() => void load(), 2000);
    } catch (err) {
      setActionMessage({
        id: videoId,
        text: err instanceof Error ? err.message : "Revoke failed",
        ok: false,
      });
    } finally {
      setActionLoading(null);
    }
  };

  const toggleExpand = (id: string) => {
    setExpandedId((prev) => (prev === id ? null : id));
  };

  // ── Selection ───────────────────────────────────────────────────────────

  const toggleSelect = (id: string) => {
    setSelectedIds((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });
  };

  const toggleSelectAll = () => {
    const visibleIds = filteredVideos.map((v) => v.id);
    const allSelected = visibleIds.every((id) => selectedIds.has(id));
    if (allSelected) {
      setSelectedIds(new Set());
    } else {
      setSelectedIds(new Set(visibleIds));
    }
  };

  const allVisibleSelected = filteredVideos.length > 0 && filteredVideos.every((v) => selectedIds.has(v.id));

  // ── Bulk Actions ────────────────────────────────────────────────────────

  const runBulk = async (clean: boolean) => {
    const ids = Array.from(selectedIds);
    if (ids.length === 0) return;

    bulkCancelRef.current = false;
    setBulkLog([]);
    setBulkProgress({ total: ids.length, completed: 0, failed: 0, current: null, active: true });

    let completed = 0;
    let failed = 0;

    for (const id of ids) {
      if (bulkCancelRef.current) break;

      const video = videos.find((v) => v.id === id);
      const filename = video?.filename ?? id;
      setBulkProgress((p) => p ? { ...p, current: filename } : null);

      try {
        if (clean) {
          await cleanRetriggerPipeline(id);
        } else {
          await triggerPipeline(id);
        }
        completed++;
        setBulkLog((prev) => [...prev, { filename, ok: true, message: clean ? "clean retriggered" : "triggered" }]);
      } catch (err) {
        failed++;
        setBulkLog((prev) => [...prev, {
          filename,
          ok: false,
          message: err instanceof Error ? err.message : "failed",
        }]);
      }

      setBulkProgress((p) => p ? { ...p, completed: completed, failed } : null);

      // Brief pause between dispatches to avoid slamming the API
      if (!bulkCancelRef.current && ids.indexOf(id) < ids.length - 1) {
        await new Promise((r) => setTimeout(r, 500));
      }
    }

    setBulkProgress((p) => p ? { ...p, active: false, current: null } : null);
    setSelectedIds(new Set());
    // Refresh video list after bulk completes
    setTimeout(() => void load(), 2000);
  };

  const cancelBulk = () => {
    bulkCancelRef.current = true;
  };

  return (
    <div className="admin-pipeline">
      <div className="admin-pipeline__header">
        <div>
          <h1 className="admin-pipeline__title">Pipeline Management</h1>
          <p className="admin-pipeline__subtitle">
            {videos.length} video{videos.length !== 1 ? "s" : ""}
          </p>
        </div>
        <div className="admin-pipeline__header-right">
          <DebugModeToggle debugMode={debugMode} onDebugModeChange={setDebugModeState} />
          <WorkerStatus />
          <label className="auto-refresh-toggle" title="Auto-refresh video list every 15 seconds">
            <input
              type="checkbox"
              checked={autoRefresh}
              onChange={(e) => setAutoRefresh(e.target.checked)}
            />
            Auto-refresh
          </label>
          <button className="btn btn--secondary" onClick={() => void load()} disabled={loading}>
            ↻ Refresh
          </button>
        </div>
      </div>

      {loading ? (
        <div className="loading">Loading videos…</div>
      ) : error ? (
        <div className="loading error-text">Error: {error}</div>
      ) : videos.length === 0 ? (
        <div className="empty-state">No videos in pipeline.</div>
      ) : (
        <>
          <RecentActivityFeed />
          <div className="admin-pipeline__filters">
            <StatusFilter
              videos={videos}
              activeFilter={activeFilter}
              onFilterChange={setActiveFilter}
            />
            {creators.length > 1 && (
              <div className="creator-filter">
                <select
                  className="creator-filter__select"
                  value={creatorFilter ?? ""}
                  onChange={(e) => setCreatorFilter(e.target.value || null)}
                >
                  <option value="">All Creators</option>
                  {creators.map((c) => (
                    <option key={c.slug} value={c.name}>{c.name}</option>
                  ))}
                </select>
              </div>
            )}
          </div>

          {/* Bulk toolbar */}
          {selectedIds.size > 0 && (
            <div className="bulk-toolbar">
              <span className="bulk-toolbar__count">
                {selectedIds.size} selected
              </span>
              {bulkProgress?.active ? (
                <>
                  <div className="bulk-toolbar__progress">
                    <div className="bulk-toolbar__progress-bar">
                      <div
                        className="bulk-toolbar__progress-fill"
                        style={{ width: `${((bulkProgress.completed + bulkProgress.failed) / bulkProgress.total) * 100}%` }}
                      />
                    </div>
                    <span className="bulk-toolbar__progress-text">
                      {bulkProgress.completed + bulkProgress.failed}/{bulkProgress.total}
                      {bulkProgress.failed > 0 && <span className="error-text"> ({bulkProgress.failed} failed)</span>}
                    </span>
                    {bulkProgress.current && (
                      <span className="bulk-toolbar__current" title={bulkProgress.current}>
                        {bulkProgress.current}
                      </span>
                    )}
                  </div>
                  <button className="btn btn--small btn--danger" onClick={cancelBulk}>
                    Cancel
                  </button>
                </>
              ) : (
                <>
                  <button
                    className="btn btn--small btn--primary"
                    onClick={() => void runBulk(false)}
                    title="Retrigger pipeline for selected videos"
                  >
                    ▶ Retrigger Selected
                  </button>
                  <button
                    className="btn btn--small btn--warning"
                    onClick={() => void runBulk(true)}
                    title="Wipe pipeline output (events, moments, segments) then retrigger"
                  >
                    🧹 Clean Reprocess
                  </button>
                  <button
                    className="btn btn--small btn--secondary"
                    onClick={() => setSelectedIds(new Set())}
                  >
                    Clear
                  </button>
                </>
              )}
            </div>
          )}

          {/* Bulk completion message */}
          {bulkProgress && !bulkProgress.active && (
            <div className={`bulk-toolbar__done ${bulkProgress.failed > 0 ? "bulk-toolbar__done--warn" : "bulk-toolbar__done--ok"}`}>
              Bulk operation complete: {bulkProgress.completed} succeeded
              {bulkProgress.failed > 0 && `, ${bulkProgress.failed} failed`}
              {bulkCancelRef.current && " (cancelled)"}
              <button className="bulk-toolbar__dismiss" onClick={() => setBulkProgress(null)}>✕</button>
            </div>
          )}

          {/* Bulk operation log */}
          {bulkLog.length > 0 && (bulkProgress?.active || (bulkProgress && !bulkProgress.active)) && (
            <div className="bulk-log">
              <div className="bulk-log__list">
                {bulkLog.map((entry, i) => (
                  <div key={i} className={`bulk-log__entry ${entry.ok ? "bulk-log__entry--ok" : "bulk-log__entry--err"}`}>
                    <span className="bulk-log__icon">{entry.ok ? "✓" : "✗"}</span>
                    <span className="bulk-log__file">{entry.filename}</span>
                    <span className="bulk-log__msg">{entry.message}</span>
                  </div>
                ))}
              </div>
            </div>
          )}

          <div className="admin-pipeline__list">
            {filteredVideos.map((video) => (
            <div key={video.id} className={`pipeline-video${changedIds.has(video.id) ? " pipeline-video--changed" : ""}`} ref={(el) => { if (el) videoRefs.current.set(video.id, el); }}>
              <div
                className="pipeline-video__header"
                onClick={() => toggleExpand(video.id)}
              >
                <div className="pipeline-video__checkbox" onClick={(e) => e.stopPropagation()}>
                  <input
                    type="checkbox"
                    checked={selectedIds.has(video.id)}
                    onChange={() => toggleSelect(video.id)}
                    disabled={bulkProgress?.active ?? false}
                    aria-label={`Select ${video.filename}`}
                  />
                </div>
                <div className="pipeline-video__info">
                  <span className="pipeline-video__filename" title={video.filename}>
                    {video.filename}
                  </span>
                  <span className="pipeline-video__creator">{video.creator_name}</span>
                </div>

                <div className="pipeline-video__meta">
                  <span className={`pipeline-badge ${statusBadgeClass(video.processing_status)}`}>
                    {STATUS_LABELS[video.processing_status] ?? video.processing_status}
                  </span>
                  <StageTimeline video={video} />
                  <span className="pipeline-video__stat" title="Events">
                    {video.event_count} events
                  </span>
                  <span className="pipeline-video__stat" title="Total tokens used">
                    {formatTokens(video.total_tokens_used)} tokens
                  </span>
                  <span className="pipeline-video__time">
                    {formatDate(video.last_event_at)}
                  </span>
                </div>

                <div className="pipeline-video__actions" onClick={(e) => e.stopPropagation()}>
                  <button
                    className="btn btn--small btn--primary"
                    onClick={() => void handleTrigger(video.id)}
                    disabled={actionLoading === video.id}
                    title="Retrigger pipeline"
                  >
                    {actionLoading === video.id ? "…" : debugMode ? "▶ Trigger (debug)" : "▶ Trigger"}
                  </button>
                  <button
                    className="btn btn--small btn--danger"
                    onClick={() => void handleRevoke(video.id)}
                    disabled={actionLoading === video.id}
                    title="Revoke active tasks"
                  >
                    {actionLoading === video.id ? "…" : "■ Revoke"}
                  </button>
                </div>
              </div>

              {actionMessage?.id === video.id && (
                <div className={`pipeline-video__message ${actionMessage.ok ? "pipeline-video__message--ok" : "pipeline-video__message--err"}`}>
                  {actionMessage.text}
                </div>
              )}

              {expandedId === video.id && (
                <div className="pipeline-video__detail">
                  <div className="pipeline-video__detail-meta">
                    <span>Created: {formatDate(video.created_at)}</span>
                    <span>Updated: {formatDate(video.updated_at)}</span>
                  </div>
                  <RunList videoId={video.id} videoStatus={video.processing_status} />
                </div>
              )}
            </div>
          ))}
          {filteredVideos.length > 0 && (
            <div className="admin-pipeline__select-all">
              <label>
                <input
                  type="checkbox"
                  checked={allVisibleSelected}
                  onChange={toggleSelectAll}
                  disabled={bulkProgress?.active ?? false}
                />
                {allVisibleSelected ? "Deselect" : "Select"} all {filteredVideos.length} visible
              </label>
            </div>
          )}
        </div>
        </>
      )}
    </div>
  );
}