import { Button } from "@/components/ui/button";
import {
  Dialog,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { RotateCcw, AlertCircle, Loader2 } from "lucide-react";

interface ResetConfirmationModalProps {
  isOpen: boolean;
  onClose: () => void;
  onConfirm: () => void;
  isResetting: boolean;
}

export const ResetConfirmationModal = ({
  isOpen,
  onClose,
  onConfirm,
  isResetting,
}: ResetConfirmationModalProps) => {
  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <DialogTitle className="flex items-center">
            <RotateCcw className="w-5 h-5 mr-2 text-warning" />
            Nueva Consulta
          </DialogTitle>
        </DialogHeader>
        <div className="mt-4">
          <div className="bg-warning/10 border border-warning/20 rounded-lg p-4 mb-4">
            <div className="flex items-center">
              <AlertCircle className="w-5 h-5 text-warning mr-2" />
              <span className="text-sm font-medium text-warning">
                Confirmación Requerida
              </span>
            </div>
          </div>
          <p className="text-foreground mb-4">
            ¿Estás seguro de que quieres iniciar una nueva consulta?
          </p>
          <div className="space-y-2 text-sm text-muted-foreground">
            <p>Se guardará un reporte con la conversación actual</p>
            <p>Se perderán las recomendaciones pendientes</p>
            <p>Se iniciará una consulta completamente nueva</p>
          </div>
        </div>
        <div className="mt-6 flex space-x-2">
          <Button
            onClick={onClose}
            variant="outline"
            className="flex-1"
          >
            Cancelar
          </Button>
          <Button
            onClick={onConfirm}
            disabled={isResetting}
            className="flex-1 bg-warning hover:bg-warning/90"
          >
            {isResetting ? (
              <>
                <Loader2 className="w-4 h-4 mr-2 animate-spin" />
                Procesando...
              </>
            ) : (
              <>
                <RotateCcw className="w-4 h-4 mr-2" />
                Confirmar
              </>
            )}
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  );
};