"use client";

import { useTranslations } from "next-intl";
import { AlertTriangle, Loader2, X } from "lucide-react";
import Button from "@/components/ui/Button";

interface ConfirmModalProps {
  open: boolean;
  title: string;
  description: string;
  confirmLabel?: string;
  cancelLabel?: string;
  loading?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

export default function ConfirmModal({
  open,
  title,
  description,
  confirmLabel,
  cancelLabel,
  loading = false,
  onConfirm,
  onCancel,
}: ConfirmModalProps) {
  const tc = useTranslations("common");

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-end justify-center bg-black/70 p-0 backdrop-blur-sm sm:items-center sm:p-4">
      <button
        type="button"
        aria-label={tc("cancel")}
        className="absolute inset-0 cursor-pointer"
        disabled={loading}
        onClick={loading ? undefined : onCancel}
      />

      <div
        role="alertdialog"
        aria-modal="true"
        aria-labelledby="confirm-modal-title"
        aria-describedby="confirm-modal-desc"
        className="relative w-full max-w-sm overflow-hidden rounded-t-2xl border border-[var(--border)] bg-[var(--bg-elevated)] shadow-2xl sm:rounded-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <button
          type="button"
          disabled={loading}
          onClick={onCancel}
          aria-label={tc("cancel")}
          className="absolute end-3 top-3 z-10 flex h-8 w-8 cursor-pointer items-center justify-center rounded-lg text-[var(--text-faint)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text)] disabled:cursor-not-allowed disabled:opacity-50"
        >
          <X className="h-4 w-4" />
        </button>

        <div className="flex flex-col items-center px-6 pb-2 pt-8 text-center">
          <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-red-500/15 ring-1 ring-red-500/25">
            <AlertTriangle className="h-6 w-6 text-red-400" strokeWidth={2} />
          </div>
          <h2
            id="confirm-modal-title"
            className="text-lg font-semibold tracking-tight text-[var(--text)]"
          >
            {title}
          </h2>
          <p
            id="confirm-modal-desc"
            className="mt-2 max-w-[280px] text-sm leading-relaxed text-[var(--text-muted)]"
          >
            {description}
          </p>
        </div>

        <div className="flex items-center justify-end gap-2.5 border-t border-[var(--border)] bg-[var(--bg)]/40 px-5 py-4">
          <Button
            type="button"
            variant="secondary"
            size="md"
            disabled={loading}
            onClick={onCancel}
            className="min-w-[96px]"
          >
            {cancelLabel ?? tc("cancel")}
          </Button>
          <Button
            type="button"
            size="md"
            disabled={loading}
            onClick={onConfirm}
            className="min-w-[96px] border-transparent bg-red-500 text-white shadow-none hover:bg-red-400"
          >
            {loading ? (
              <>
                <Loader2 className="h-4 w-4 animate-spin" />
                {tc("loading")}
              </>
            ) : (
              confirmLabel ?? tc("delete")
            )}
          </Button>
        </div>
      </div>
    </div>
  );
}