"use client";

import { useEffect, useRef, useState } from "react";
import { X } from "lucide-react";
import { useOutboxStore } from "@/stores/offlineQueue";

/** A short, human description of a failed mutation (the dialog row label). */
function describeItem(item: { method: string; path: string }): string {
  const segs = item.path.split("?")[0]?.split("/").filter(Boolean) ?? [];
  const root = segs[0] ?? "";
  const id = segs[1] ?? "";
  const noun = root === "comments" ? "a comment" : root === "blocks" ? "a block" : root === "records" ? "a record" : root === "pages" ? "a page" : `a ${root}`;
  return `${item.method} ${id ? `to ${noun} ${id.slice(0, 8)}…` : `to create ${noun}`}`;
}

/**
 * The "N changes couldn't be synced — Review" dialog (TASK-0095 R1/R2): lists
 * the outbox's FAILED items with their error + a per-item Retry (a FRESH key —
 * a retry is a new attempt) / Discard (a confirm — the user's explicit choice,
 * the item is deleted). A Discard deletes the mutation (never silently).
 */
export function ReviewFailedDialog({ onClose }: { onClose: () => void }) {
  const failedItems = useOutboxStore((s) => s.failedItems);
  const retry = useOutboxStore((s) => s.retry);
  const discard = useOutboxStore((s) => s.discard);
  const [confirmKey, setConfirmKey] = useState<string | null>(null);
  const closeRef = useRef<HTMLButtonElement>(null);

  const items = failedItems();

  // Escape closes the dialog; focus the close button on open (a11y).
  useEffect(() => {
    closeRef.current?.focus();
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
    };
    document.addEventListener("keydown", onKey);
    return () => document.removeEventListener("keydown", onKey);
  }, [onClose]);

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
      onMouseDown={(e) => {
        if (e.target === e.currentTarget) onClose();
      }}
    >
      <div
        role="dialog"
        aria-modal="true"
        aria-label="Failed offline changes"
        data-testid="review-failed-dialog"
        className="w-full max-w-md rounded-lg border border-border bg-background p-4 shadow-lg"
      >
        <div className="mb-3 flex items-center justify-between">
          <h2 className="text-sm font-semibold">
            {items.length} change{items.length === 1 ? "" : "s"} couldn't be synced — Review
          </h2>
          <button
            ref={closeRef}
            type="button"
            onClick={onClose}
            aria-label="Close"
            className="rounded p-1 text-foreground/60 hover:bg-accent hover:text-foreground"
          >
            <X className="size-4" aria-hidden />
          </button>
        </div>

        <ul className="max-h-72 space-y-2 overflow-y-auto">
          {items.length === 0 ? (
            <li className="py-4 text-center text-sm text-muted-foreground">No failed changes.</li>
          ) : (
            items.map((item) => (
              <li
                key={item.key}
                className="rounded-md border border-border p-2.5 text-sm"
              >
                <div className="font-medium">{describeItem(item)}</div>
                {item.lastError ? (
                  <div className="mt-0.5 text-xs text-destructive">{item.lastError}</div>
                ) : null}
                <div className="mt-2 flex gap-2">
                  <button
                    type="button"
                    data-testid="failed-item-retry"
                    onClick={() => {
                      retry(item.key);
                      // A Retry that succeeds drains; if the list empties, close.
                      if (items.length === 1) onClose();
                    }}
                    className="rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground hover:opacity-90"
                  >
                    Retry
                  </button>
                  {confirmKey === item.key ? (
                    <button
                      type="button"
                      data-testid="failed-item-discard-confirm"
                      onClick={() => {
                        discard(item.key);
                        setConfirmKey(null);
                        if (items.length === 1) onClose();
                      }}
                      className="rounded-md border border-destructive px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10"
                    >
                      Confirm discard?
                    </button>
                  ) : (
                    <button
                      type="button"
                      data-testid="failed-item-discard"
                      onClick={() => setConfirmKey(item.key)}
                      className="rounded-md border border-border px-2.5 py-1 text-xs font-medium text-foreground/70 hover:bg-accent"
                    >
                      Discard
                    </button>
                  )}
                </div>
              </li>
            ))
          )}
        </ul>
      </div>
    </div>
  );
}