'use client';

import * as Dialog from '@radix-ui/react-dialog';
import { useTranslations } from 'next-intl';
import { cn } from '@/lib/utils';

interface ConfirmationModalProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  description: string;
  confirmLabel: string;
  /**
   * Optional override for the cancel button label. When omitted, defaults to
   * `common.cancel` from the active next-intl locale. Pass an explicit string
   * (already localized) when you need a different verb, e.g. "Keep it".
   */
  cancelLabel?: string;
  onConfirm: () => void;
  confirmVariant?: 'danger' | 'primary';
  children?: React.ReactNode;
}

export function ConfirmationModal({
  open,
  onOpenChange,
  title,
  description,
  confirmLabel,
  cancelLabel,
  onConfirm,
  confirmVariant = 'primary',
  children,
}: ConfirmationModalProps) {
  const tCommon = useTranslations('common');
  const resolvedCancelLabel = cancelLabel ?? tCommon('cancel');
  const handleConfirm = () => {
    onConfirm();
    onOpenChange(false);
  };

  return (
    <Dialog.Root open={open} onOpenChange={onOpenChange}>
      <Dialog.Portal>
        {/* Overlay */}
        <Dialog.Overlay className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />

        {/* Content — alert dialog role so screen readers treat it as a blocking alert */}
        <Dialog.Content
          role="alertdialog"
          aria-modal="true"
          className="fixed start-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-2xl bg-white p-6 shadow-xl focus:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
        >
          <Dialog.Title className="mb-2 text-base font-semibold text-neutral-900">
            {title}
          </Dialog.Title>
          <Dialog.Description className="mb-4 text-sm text-neutral-500 leading-relaxed">
            {description}
          </Dialog.Description>

          {/* Optional extra content (form fields, etc.) */}
          {children && <div className="mb-5 space-y-3">{children}</div>}

          {/* Action buttons */}
          <div className="flex items-center justify-end gap-3">
            <Dialog.Close asChild>
              <button
                type="button"
                className="rounded-lg border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-700 hover:bg-neutral-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-300 transition-colors"
              >
                {resolvedCancelLabel}
              </button>
            </Dialog.Close>

            <button
              type="button"
              onClick={handleConfirm}
              className={cn(
                'rounded-lg px-4 py-2 text-sm font-medium text-white focus-visible:outline-none focus-visible:ring-2 transition-colors',
                confirmVariant === 'danger'
                  ? 'bg-red-600 hover:bg-red-700 focus-visible:ring-red-400'
                  : 'bg-primary-600 hover:bg-primary-700 focus-visible:ring-primary-400',
              )}
            >
              {confirmLabel}
            </button>
          </div>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}