karibeo_backend_admin/src/components/BookingModal.tsx

import React, { useState } from 'react';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Loader2 } from 'lucide-react';
import { useAuth } from '@/contexts/AuthContext';
import { useBooking } from '@/hooks/useBooking';
import { useToast } from '@/hooks/use-toast';

interface BookingModalProps {
  open: boolean;
  onClose: () => void;
  listingId: string;
  listingTitle: string;
  listingPrice: number;
  selectedDate?: Date;
  selectedTimeSlot?: string;
  guests: number;
  onSuccess?: () => void;
}

export const BookingModal: React.FC<BookingModalProps> = ({
  open,
  onClose,
  listingId,
  listingTitle,
  listingPrice,
  selectedDate,
  selectedTimeSlot,
  guests,
  onSuccess
}) => {
  const { user } = useAuth();
  const { createBooking, loading } = useBooking();
  const { toast } = useToast();
  
  const [formData, setFormData] = useState({
    guestName: (user as any)?.name || '',
    guestEmail: (user as any)?.email || '',
    guestPhone: '',
    specialRequests: '',
  });

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    if (!selectedDate) {
      toast({
        title: 'Error',
        description: 'Por favor selecciona una fecha',
        variant: 'destructive',
      });
      return;
    }

    const checkInDate = new Date(selectedDate);
    if (selectedTimeSlot) {
      const [hours, minutes] = selectedTimeSlot.split(':');
      checkInDate.setHours(parseInt(hours), parseInt(minutes), 0, 0);
    }

    const bookingData = {
      listingId,
      guestName: formData.guestName,
      guestEmail: formData.guestEmail,
      guestPhone: formData.guestPhone,
      checkIn: checkInDate.toISOString(),
      guests,
      totalAmount: listingPrice * guests,
      specialRequests: formData.specialRequests,
    };

    const result = await createBooking(bookingData);

    if (result.success) {
      toast({
        title: '¡Reserva creada!',
        description: 'Tu reserva ha sido creada exitosamente. Te enviaremos un correo de confirmación.',
      });
      onClose();
      if (onSuccess) onSuccess();
    } else {
      toast({
        title: 'Error',
        description: result.error || 'No se pudo crear la reserva',
        variant: 'destructive',
      });
    }
  };

  const handleChange = (field: string, value: string) => {
    setFormData(prev => ({ ...prev, [field]: value }));
  };

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <DialogTitle>Confirmar Reserva</DialogTitle>
          <DialogDescription>
            Completa tus datos para confirmar la reserva de {listingTitle}
          </DialogDescription>
        </DialogHeader>

        <form onSubmit={handleSubmit} className="space-y-4">
          {/* Booking Summary */}
          <div className="bg-muted p-4 rounded-lg space-y-2">
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Propiedad:</span>
              <span className="font-medium">{listingTitle}</span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Fecha:</span>
              <span className="font-medium">
                {selectedDate?.toLocaleDateString('es-ES', { 
                  year: 'numeric', 
                  month: 'long', 
                  day: 'numeric' 
                })}
                {selectedTimeSlot && ` - ${selectedTimeSlot}`}
              </span>
            </div>
            <div className="flex justify-between text-sm">
              <span className="text-muted-foreground">Huéspedes:</span>
              <span className="font-medium">{guests} {guests === 1 ? 'persona' : 'personas'}</span>
            </div>
            <div className="flex justify-between text-sm pt-2 border-t">
              <span className="text-muted-foreground">Total:</span>
              <span className="font-bold text-lg">${(listingPrice * guests).toLocaleString()}</span>
            </div>
          </div>

          {/* Guest Information */}
          <div className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="guestName">Nombre completo *</Label>
              <Input
                id="guestName"
                value={formData.guestName}
                onChange={(e) => handleChange('guestName', e.target.value)}
                required
                placeholder="Tu nombre completo"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="guestEmail">Email *</Label>
              <Input
                id="guestEmail"
                type="email"
                value={formData.guestEmail}
                onChange={(e) => handleChange('guestEmail', e.target.value)}
                required
                placeholder="tu@email.com"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="guestPhone">Teléfono *</Label>
              <Input
                id="guestPhone"
                type="tel"
                value={formData.guestPhone}
                onChange={(e) => handleChange('guestPhone', e.target.value)}
                required
                placeholder="+1 234 567 890"
              />
            </div>

            <div className="space-y-2">
              <Label htmlFor="specialRequests">Solicitudes especiales (opcional)</Label>
              <Textarea
                id="specialRequests"
                value={formData.specialRequests}
                onChange={(e) => handleChange('specialRequests', e.target.value)}
                rows={3}
                placeholder="¿Alguna solicitud especial?"
              />
            </div>
          </div>

          <DialogFooter className="gap-2">
            <Button type="button" variant="outline" onClick={onClose} disabled={loading}>
              Cancelar
            </Button>
            <Button type="submit" disabled={loading}>
              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
              Confirmar Reserva
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};