"use client";

/**
 * Page history popover (topbar): lists page versions (usePageVersions data
 * passed in) and restores a chosen version after an explicit confirm
 * (destructive: the current state is replaced).
 */
import { useState } from "react";
import { Camera, Clock, RotateCcw } from "lucide-react";
import { useQueryClient } from "@tanstack/react-query";
import { pageApi, isApiError } from "@/lib/api";
import { formatRelativeTime } from "@/lib/utils";
import { toast } from "@/stores/ui-store";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
import type { PageVersion } from "@/lib/types";

export interface HistoryPopoverProps {
  versions: PageVersion[];
  isLoading: boolean;
  pageId: string;
  onClose: () => void;
  /** T-150/T-151: open the compare/preview dialog for a version. */
  onCompare?: (v: PageVersion) => void;
  /** T-192: true for EDIT-capable users — the "Snapshot now" button (TASK-0043
   *  criterion 5) renders only for them (VIEW users get the read-only list). */
  canEdit?: boolean;
}

export function HistoryPopover({ versions, isLoading, pageId, onClose, onCompare, canEdit }: HistoryPopoverProps) {
  const [target, setTarget] = useState<PageVersion | null>(null);
  const [restoring, setRestoring] = useState(false);
  const [snapping, setSnapping] = useState(false);
  const qc = useQueryClient();

  // TASK-0043: the only Phase-3 way to create a version (auto-snapshot on
  // block edits is deferred to Phase 4). Invalidates the versions list so the
  // new row appears without a full panel re-fetch.
  const takeSnapshot = async () => {
    if (snapping) return;
    setSnapping(true);
    try {
      await pageApi.snapshotVersion(pageId);
      qc.invalidateQueries({ queryKey: ["pages", pageId, "versions"] });
      toast("success", "Snapshot captured");
    } catch (err) {
      toast("error", "Snapshot failed", isApiError(err) ? err.message : err instanceof Error ? err.message : String(err));
    } finally {
      setSnapping(false);
    }
  };

  const doRestore = async () => {
    if (!target) return;
    setRestoring(true);
    try {
      await pageApi.restoreVersion(pageId, target.id);
      toast("success", "Version restored", `Restored to ${target.createdAt}`);
      setTarget(null);
      onClose();
    } catch (err) {
      toast("error", "Restore failed", err instanceof Error ? err.message : undefined);
    } finally {
      setRestoring(false);
    }
  };

  return (
    <>
      <div
        role="menu"
        aria-label="Page history"
        data-testid="page-versions"
        className="absolute right-0 z-50 mt-1 w-72 rounded-md border border-border bg-popover p-2 shadow-xl"
      >
        <div className="mb-1 flex items-center justify-between">
          <p className="px-1 pb-1 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
            Page history
          </p>
          {canEdit ? (
            <button
              type="button"
              data-testid="version-snapshot-button"
              onClick={() => void takeSnapshot()}
              disabled={snapping}
              className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-0.5 text-xs text-foreground/80 hover:bg-accent disabled:opacity-50"
            >
              <Camera className="size-3.5" aria-hidden /> {snapping ? "…" : "Snapshot now"}
            </button>
          ) : null}
        </div>
        {isLoading ? (
          <p className="px-1 py-2 text-sm text-muted-foreground">Loading…</p>
        ) : versions.length === 0 ? (
          <p className="px-1 py-2 text-sm text-muted-foreground">
            No versions yet — take a snapshot.
          </p>
        ) : (
          <ul className="max-h-72 space-y-0.5 overflow-y-auto">
            {versions.slice(0, 20).map((v) => (
              <li key={v.id} data-testid="page-version-entry">
                <div className="flex w-full items-center gap-1">
                  <button
                    type="button"
                    role="menuitem"
                    onClick={() => setTarget(v)}
                    className="flex min-w-0 flex-1 items-center gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
                  >
                    <Clock className="size-3.5 shrink-0 text-muted-foreground" aria-hidden />
                    <span className="min-w-0 flex-1">
                      <span className="block truncate font-medium">v{v.version}{v.note ? ` — ${v.note}` : ""}</span>
                      <span className="block text-xs text-muted-foreground">
                        {formatRelativeTime(v.createdAt)}
                      </span>
                    </span>
                    <RotateCcw className="size-3.5 shrink-0 text-muted-foreground" aria-hidden />
                  </button>
                  <button
                    type="button"
                    data-testid={`version-compare-${v.id}`}
                    onClick={() => onCompare?.(v)}
                    className="rounded px-1.5 py-1 text-xs text-muted-foreground hover:bg-accent"
                    title="Compare & preview this version"
                  >
                    Compare
                  </button>
                </div>
              </li>
            ))}
          </ul>
        )}
      </div>

      <ConfirmDialog
        open={Boolean(target)}
        title="Restore this version?"
        description={
          target
            ? `The current content will be replaced by the version from ${new Date(target.createdAt).toLocaleString()}. This cannot be undone.`
            : undefined
        }
        confirmLabel="Restore"
        destructive
        busy={restoring}
        onConfirm={() => void doRestore()}
        onClose={() => setTarget(null)}
      />
    </>
  );
}