"use client";

import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { AlertTriangle, Loader2, ShieldAlert, X } from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

const dangerConfirmVariants = cva(
  "relative flex w-full max-w-md flex-col overflow-hidden rounded-xl border bg-card text-card-foreground shadow-2xl",
  {
    variants: {
      variant: {
        danger: "border-rose-500/30",
        warning: "border-amber-500/30",
      },
    },
    defaultVariants: {
      variant: "danger",
    },
  }
);

export type DangerConfirmMode = "type" | "hold" | "checklist";

export interface DangerConfirmProps
  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">,
    VariantProps<typeof dangerConfirmVariants> {
  /** Controlled open state. Omit for uncontrolled usage (defaults to visible). */
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  title: string;
  description?: React.ReactNode;
  /** The exact phrase the user must type. Required when `mode="type"`. */
  itemName?: string;
  /** Bullet points describing what will happen. Doubles as the checklist items in `mode="checklist"`. */
  consequences?: string[];
  /** Confirmation gesture: retype the name, press-and-hold, or tick every consequence. */
  mode?: DangerConfirmMode;
  confirmText?: string;
  cancelText?: string;
  /** Pass to fully control the pending state (e.g. while an API call is in flight). */
  loading?: boolean;
  /** How long the user must hold the button in `mode="hold"`, in ms. */
  holdDuration?: number;
  onConfirm?: () => void;
  onCancel?: () => void;
}

/**
 * DangerConfirm — a type-to-confirm / hold-to-confirm / checklist-confirm
 * dialog for irreversible actions.
 *
 * The problem: a plain `window.confirm("Are you sure?")` (or a two-button
 * modal with a "Delete" button in the same spot every time) is exactly the
 * kind of UI muscle memory that lets a tired developer nuke a production
 * database, force-delete a customer's account, or wipe a repo with a single
 * misclick. This component borrows the "type the resource name to confirm"
 * pattern popularized by GitHub/Vercel and packages it — plus two
 * alternative confirmation gestures — as a drop-in, dependency-light block.
 */
export function DangerConfirm({
  className,
  variant,
  open,
  onOpenChange,
  title,
  description,
  itemName,
  consequences,
  mode = "type",
  confirmText = "Delete",
  cancelText = "Cancel",
  loading,
  holdDuration = 2200,
  onConfirm,
  onCancel,
  ...props
}: DangerConfirmProps) {
  const isControlled = open !== undefined;
  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(true);
  const isOpen = isControlled ? open : uncontrolledOpen;

  const [typedValue, setTypedValue] = React.useState("");
  const [checked, setChecked] = React.useState<Record<number, boolean>>({});
  const [holdProgress, setHoldProgress] = React.useState(0);
  const [isHolding, setIsHolding] = React.useState(false);
  const [internalLoading, setInternalLoading] = React.useState(false);

  const holdFrame = React.useRef<number | undefined>(undefined);
  const holdStart = React.useRef(0);

  const isDanger = variant !== "warning";
  const effectiveLoading = loading !== undefined ? loading : internalLoading;
  const items =
    consequences && consequences.length > 0
      ? consequences
      : ["This action is permanent and cannot be undone."];

  const setOpen = React.useCallback(
    (next: boolean) => {
      if (!isControlled) setUncontrolledOpen(next);
      onOpenChange?.(next);
    },
    [isControlled, onOpenChange]
  );

  const handleCancel = React.useCallback(() => {
    if (effectiveLoading) return;
    onCancel?.();
    setOpen(false);
  }, [effectiveLoading, onCancel, setOpen]);

  const handleConfirm = React.useCallback(() => {
    if (effectiveLoading) return;
    onConfirm?.();
    // Pure demo / unmanaged usage: simulate a brief "working" state so the
    // component feels alive without requiring the consumer to wire up a
    // real async handler. Real apps that control `open`/`loading` opt out.
    if (!isControlled && loading === undefined) {
      setInternalLoading(true);
      window.setTimeout(() => {
        setInternalLoading(false);
        setOpen(false);
      }, 700);
    }
  }, [effectiveLoading, onConfirm, isControlled, loading, setOpen]);

  React.useEffect(() => {
    if (!isOpen) return;
    const onKeyDown = (e: KeyboardEvent) => {
      if (e.key === "Escape") handleCancel();
    };
    window.addEventListener("keydown", onKeyDown);
    return () => window.removeEventListener("keydown", onKeyDown);
  }, [isOpen, handleCancel]);

  React.useEffect(() => {
    return () => {
      if (holdFrame.current) cancelAnimationFrame(holdFrame.current);
    };
  }, []);

  const startHold = () => {
    if (effectiveLoading) return;
    setIsHolding(true);
    holdStart.current = Date.now();
    const tick = () => {
      const elapsed = Date.now() - holdStart.current;
      const pct = Math.min(100, (elapsed / holdDuration) * 100);
      setHoldProgress(pct);
      if (pct >= 100) {
        setIsHolding(false);
        handleConfirm();
        return;
      }
      holdFrame.current = requestAnimationFrame(tick);
    };
    holdFrame.current = requestAnimationFrame(tick);
  };

  const cancelHold = () => {
    setIsHolding(false);
    setHoldProgress(0);
    if (holdFrame.current) cancelAnimationFrame(holdFrame.current);
  };

  if (!isOpen) return null;

  const stripeColor = isDanger ? "#f43f5e" : "#f59e0b"; // rose-500 / amber-500
  const isMatch = !itemName || typedValue === itemName;
  const allChecked = items.every((_, i) => checked[i]);
  const canConfirm =
    mode === "type"
      ? isMatch && typedValue.length > 0
      : mode === "checklist"
      ? allChecked
      : true;

  return (
    // Deliberately a normal-flow block, not `fixed inset-0` — this registry ships copy-paste
    // source, not a portaled runtime component, so it has to render correctly wherever it's
    // dropped (a docs thumbnail, a scaled preview, a plain page section) without an ancestor
    // that happens to be sized for it. The backdrop below spotlights the dialog itself rather
    // than the whole viewport; swap this wrapper to `fixed inset-0 z-50` for a true full-page
    // overlay once you've copied this into an app where that's what you want.
    <div className="relative flex w-full items-center justify-center p-4">
      <div
        className="absolute inset-0 bg-black/60 backdrop-blur-sm"
        onClick={handleCancel}
        aria-hidden="true"
      />

      <div
        role="alertdialog"
        aria-modal="true"
        aria-label={title}
        className={cn(dangerConfirmVariants({ variant }), className)}
        {...props}
      >
        <div
          className="h-1.5 w-full shrink-0"
          style={{
            backgroundImage: `repeating-linear-gradient(135deg, ${stripeColor}66 0px, ${stripeColor}66 10px, transparent 10px, transparent 20px)`,
          }}
        />

        <div className="flex items-start gap-3 p-6 pb-4">
          <div
            className={cn(
              "flex h-10 w-10 shrink-0 items-center justify-center rounded-full",
              isDanger ? "bg-rose-500/10 text-rose-500" : "bg-amber-500/10 text-amber-500"
            )}
          >
            {isDanger ? <ShieldAlert className="h-5 w-5" /> : <AlertTriangle className="h-5 w-5" />}
          </div>
          <div className="flex-1 pt-1">
            <h3 className="text-base font-semibold leading-none tracking-tight">{title}</h3>
            {description && <p className="mt-2 text-sm text-muted-foreground">{description}</p>}
          </div>
          <button
            onClick={handleCancel}
            className="rounded-md p-1 text-muted-foreground/60 transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
            aria-label="Close"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        {mode === "type" && (
          <div className="px-6 pb-2">
            {items.length > 0 && (
              <ul className="mb-3 space-y-1 text-sm text-muted-foreground">
                {items.map((item, i) => (
                  <li key={i} className="flex gap-1.5">
                    <span className="select-none text-muted-foreground/50">&bull;</span>
                    {item}
                  </li>
                ))}
              </ul>
            )}
            {itemName && (
              <>
                <p className="mb-2 text-sm text-muted-foreground">
                  Type{" "}
                  <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-semibold text-foreground">
                    {itemName}
                  </code>{" "}
                  to confirm.
                </p>
                <input
                  value={typedValue}
                  onChange={(e) => setTypedValue(e.target.value)}
                  onPaste={(e) => e.preventDefault()}
                  placeholder={itemName}
                  autoComplete="off"
                  spellCheck={false}
                  disabled={effectiveLoading}
                  className={cn(
                    "w-full rounded-md border bg-background px-3 py-2 text-sm font-mono outline-none transition-colors focus-visible:ring-2 focus-visible:ring-offset-0 disabled:opacity-60",
                    typedValue.length === 0
                      ? "border-input"
                      : isMatch
                      ? "border-emerald-500 focus-visible:ring-emerald-500/30"
                      : "border-rose-500 focus-visible:ring-rose-500/30"
                  )}
                />
                <p className="mt-1.5 text-xs text-muted-foreground/70">
                  Pasting is disabled — typing it yourself is the point.
                </p>
              </>
            )}
          </div>
        )}

        {mode === "checklist" && (
          <div className="flex flex-col gap-2 px-6 pb-2">
            {items.map((item, i) => (
              <label
                key={i}
                className="flex cursor-pointer items-start gap-2.5 rounded-md p-2 text-sm transition-colors hover:bg-muted/60"
              >
                <input
                  type="checkbox"
                  checked={!!checked[i]}
                  disabled={effectiveLoading}
                  onChange={(e) => setChecked((prev) => ({ ...prev, [i]: e.target.checked }))}
                  className="mt-0.5 h-4 w-4 shrink-0 accent-rose-500"
                />
                <span className={cn(checked[i] && "text-muted-foreground line-through decoration-muted-foreground/50")}>
                  {item}
                </span>
              </label>
            ))}
          </div>
        )}

        {mode === "hold" && (
          <div className="px-6 pb-2">
            <ul className="mb-4 space-y-1 text-sm text-muted-foreground">
              {items.map((item, i) => (
                <li key={i} className="flex gap-1.5">
                  <span className="select-none text-muted-foreground/50">&bull;</span>
                  {item}
                </li>
              ))}
            </ul>
            <button
              onPointerDown={startHold}
              onPointerUp={cancelHold}
              onPointerLeave={cancelHold}
              disabled={effectiveLoading}
              className={cn(
                "relative w-full select-none overflow-hidden rounded-md border py-2.5 text-sm font-medium transition-colors disabled:opacity-60",
                isDanger
                  ? "border-rose-500/40 text-rose-600 dark:text-rose-400"
                  : "border-amber-500/40 text-amber-600 dark:text-amber-400"
              )}
            >
              <span
                className={cn("absolute inset-y-0 left-0", isDanger ? "bg-rose-500/20" : "bg-amber-500/20")}
                style={{ width: `${holdProgress}%`, transition: isHolding ? "none" : "width 150ms ease-out" }}
              />
              <span className="relative flex items-center justify-center gap-2">
                {effectiveLoading && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
                {holdProgress >= 100
                  ? "Confirmed"
                  : isHolding
                  ? "Keep holding…"
                  : `Press and hold ${(holdDuration / 1000).toFixed(1)}s to ${confirmText.toLowerCase()}`}
              </span>
            </button>
          </div>
        )}

        <div className="mt-4 flex items-center justify-end gap-2 border-t bg-muted/30 p-4">
          <Button variant="outline" size="sm" onClick={handleCancel} disabled={effectiveLoading}>
            {cancelText}
          </Button>
          {mode !== "hold" && (
            <Button
              size="sm"
              onClick={handleConfirm}
              disabled={!canConfirm || effectiveLoading}
              className={cn(isDanger && "bg-rose-600 text-white hover:bg-rose-700 focus-visible:ring-rose-500")}
            >
              {effectiveLoading ? (
                <>
                  <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" />
                  Working…
                </>
              ) : (
                confirmText
              )}
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}
Danger Confirm
