import * as React from 'react';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';

interface PersonalTicketDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  price: number;
  onConfirm: (quantity: number) => void;
}

export default function PersonalTicketDialog({
  open,
  onOpenChange,
  price,
  onConfirm,
}: PersonalTicketDialogProps) {
  const [quantity, setQuantity] = React.useState(1);

  React.useEffect(() => {
    if (!open) setQuantity(1);
  }, [open]);

  const handleConfirm = () => {
    if (quantity > 0) {
      onConfirm(quantity);
      onOpenChange(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-xs">
        <DialogHeader>
          <DialogTitle>Selecciona la cantidad de entradas</DialogTitle>
        </DialogHeader>
        <div className="flex flex-col gap-4 py-2">
          <label className="text-sm font-medium text-slate-300">
            Entradas a comprar:
          </label>
          <Input
            type="number"
            min={1}
            value={quantity}
            onChange={e => setQuantity(Math.max(1, Number(e.target.value)))}
            className="w-full"
          />
          <div className="text-sm text-slate-300 mt-1">
            Has ingresado <span className="font-bold text-[#f4a825]">{quantity}</span> {quantity === 1 ? 'entrada' : 'entradas'}.
          </div>
          <div className="text-xs text-yellow-500 mt-1">
            ¿Estás seguro de que deseas comprar esta cantidad de entradas?
          </div>
          <div className="text-lg font-bold text-[#f4a825]">
            Total: ${(price * quantity).toFixed(2)} USD
          </div>
        </div>
        <DialogFooter>
          <Button onClick={handleConfirm} className="w-full" disabled={quantity < 1}>
            Confirmar
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}