import { useState } from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { useTranslation } from '@/components/locales';

type ConfirmDialogProps = {
  open: boolean;
  title: string;
  description?: string;
  onConfirm: () => void;
  onCancel: () => void;
  disabled?: boolean;
  children?: React.ReactNode;
  confirmLabel?: string;
  confirmVariant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
};

export const ConfirmDialog = (props: ConfirmDialogProps) => {
  const [confirming, setConfirming] = useState(false);
  const { t } = useTranslation();
  const { open, disabled = false, title, description, children } = props;
  const { onConfirm, onCancel, confirmLabel, confirmVariant = 'default' } = props;

  const handleConfirm = async () => {
    setConfirming(true);
    await onConfirm();
    setConfirming(false);
  };

  return (
    <Dialog open={open} onOpenChange={onCancel}>
      <DialogContent className="sm:max-w-3xl p-0 pb-4 pr-4 overflow-hidden">
        <DialogHeader className="px-6 pt-6 pb-2">
          <DialogTitle className="text-xl">{title}</DialogTitle>
          {description && <p className="text-sm text-muted-foreground">{description}</p>}
        </DialogHeader>

        {children && <div className="px-6 pb-6">{children}</div>}

        <div className="mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end">
          <Button type="button" variant="outline" onClick={onCancel}>
            {t('button.cancel')}
          </Button>
          <Button
            type="button"
            variant={confirmVariant}
            onClick={handleConfirm}
            disabled={disabled || confirming}
            className="sm:ms-2"
          >
            {confirmLabel ?? t('button.confirm')}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};