import React, { useState, useEffect } 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { Loader2 } from 'lucide-react';
import { Reservation, Listing } from '@/hooks/useChannelManager';

interface ReservationFormModalProps {
  open: boolean;
  onClose: () => void;
  onSubmit: (data: any) => Promise<boolean>;
  reservation?: Reservation | null;
  listings: Listing[];
  mode: 'create' | 'edit';
}

export const ReservationFormModal: React.FC<ReservationFormModalProps> = ({ 
  open, 
  onClose, 
  onSubmit,
  reservation,
  listings,
  mode 
}) => {
  const [loading, setLoading] = useState(false);
  const [formData, setFormData] = useState({
    listingId: '',
    guestName: '',
    guestEmail: '',
    guestPhone: '',
    checkIn: '',
    checkOut: '',
    guests: 1,
    totalAmount: 0,
    status: 'pending' as 'confirmed' | 'pending' | 'cancelled' | 'completed',
    paymentStatus: 'pending' as 'paid' | 'pending' | 'refunded',
    channel: 'direct',
    specialRequests: '',
  });

  useEffect(() => {
    if (reservation && mode === 'edit') {
      setFormData({
        listingId: reservation.listingId,
        guestName: reservation.guestName,
        guestEmail: reservation.guestEmail,
        guestPhone: reservation.guestPhone,
        checkIn: reservation.checkIn,
        checkOut: reservation.checkOut || '',
        guests: reservation.guests,
        totalAmount: reservation.totalAmount,
        status: reservation.status,
        paymentStatus: reservation.paymentStatus,
        channel: reservation.channel,
        specialRequests: reservation.specialRequests || '',
      });
    } else if (mode === 'create') {
      setFormData({
        listingId: '',
        guestName: '',
        guestEmail: '',
        guestPhone: '',
        checkIn: '',
        checkOut: '',
        guests: 1,
        totalAmount: 0,
        status: 'pending',
        paymentStatus: 'pending',
        channel: 'direct',
        specialRequests: '',
      });
    }
  }, [reservation, mode, open]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    const success = await onSubmit(formData);
    if (success) {
      onClose();
    }
    setLoading(false);
  };

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

  return (
    <Dialog open={open} onOpenChange={onClose}>
      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>
            {mode === 'create' ? 'Crear Nueva Reserva' : 'Editar Reserva'}
          </DialogTitle>
          <DialogDescription>
            {mode === 'create' 
              ? 'Complete los datos para crear una nueva reserva' 
              : 'Modifique los datos de la reserva'}
          </DialogDescription>
        </DialogHeader>
        
        <form onSubmit={handleSubmit} className="space-y-4">
          {/* Listing Selection */}
          <div className="space-y-2">
            <Label htmlFor="listing">Propiedad *</Label>
            <Select 
              value={formData.listingId} 
              onValueChange={(value) => handleChange('listingId', value)}
              disabled={mode === 'edit'}
            >
              <SelectTrigger>
                <SelectValue placeholder="Seleccione una propiedad" />
              </SelectTrigger>
              <SelectContent>
                {listings.map((listing) => (
                  <SelectItem key={listing.id} value={listing.id}>
                    {listing.name} ({listing.type})
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          {/* Guest Information */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="guestName">Nombre del Huésped *</Label>
              <Input
                id="guestName"
                value={formData.guestName}
                onChange={(e) => handleChange('guestName', e.target.value)}
                required
              />
            </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
              />
            </div>
          </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
            />
          </div>

          {/* Dates */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="checkIn">Check-in *</Label>
              <Input
                id="checkIn"
                type="datetime-local"
                value={formData.checkIn}
                onChange={(e) => handleChange('checkIn', e.target.value)}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="checkOut">Check-out</Label>
              <Input
                id="checkOut"
                type="datetime-local"
                value={formData.checkOut}
                onChange={(e) => handleChange('checkOut', e.target.value)}
              />
            </div>
          </div>

          {/* Guests and Amount */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="guests">Número de Huéspedes *</Label>
              <Input
                id="guests"
                type="number"
                min="1"
                value={formData.guests}
                onChange={(e) => handleChange('guests', parseInt(e.target.value))}
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="totalAmount">Monto Total *</Label>
              <Input
                id="totalAmount"
                type="number"
                min="0"
                step="0.01"
                value={formData.totalAmount}
                onChange={(e) => handleChange('totalAmount', parseFloat(e.target.value))}
                required
              />
            </div>
          </div>

          {/* Status */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="status">Estado de Reserva</Label>
              <Select 
                value={formData.status} 
                onValueChange={(value) => handleChange('status', value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="pending">Pendiente</SelectItem>
                  <SelectItem value="confirmed">Confirmada</SelectItem>
                  <SelectItem value="completed">Completada</SelectItem>
                  <SelectItem value="cancelled">Cancelada</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="paymentStatus">Estado de Pago</Label>
              <Select 
                value={formData.paymentStatus} 
                onValueChange={(value) => handleChange('paymentStatus', value)}
              >
                <SelectTrigger>
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="pending">Pendiente</SelectItem>
                  <SelectItem value="paid">Pagado</SelectItem>
                  <SelectItem value="refunded">Reembolsado</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          {/* Channel */}
          <div className="space-y-2">
            <Label htmlFor="channel">Canal</Label>
            <Select 
              value={formData.channel} 
              onValueChange={(value) => handleChange('channel', value)}
            >
              <SelectTrigger>
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="direct">Directo</SelectItem>
                <SelectItem value="booking.com">Booking.com</SelectItem>
                <SelectItem value="expedia">Expedia</SelectItem>
                <SelectItem value="airbnb">Airbnb</SelectItem>
                <SelectItem value="vrbo">VRBO</SelectItem>
                <SelectItem value="agoda">Agoda</SelectItem>
              </SelectContent>
            </Select>
          </div>

          {/* Special Requests */}
          <div className="space-y-2">
            <Label htmlFor="specialRequests">Solicitudes Especiales</Label>
            <Textarea
              id="specialRequests"
              value={formData.specialRequests}
              onChange={(e) => handleChange('specialRequests', e.target.value)}
              rows={3}
              placeholder="Solicitudes o notas especiales..."
            />
          </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" />}
              {mode === 'create' ? 'Crear Reserva' : 'Guardar Cambios'}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
};
