import React, { useState } from "react";
import { Calendar } from "lucide-react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./ui/dialog";

interface BookingFormData {
  companyName: string;
  contactName: string;
  email: string;
  phone: string;
  role: string;
  teamSize: string;
  facilityZone: string;
  additionalRequirements: string;
}

interface BookingModalProps {
  isOpen: boolean;
  onClose: () => void;
  initialFacilityZone?: string;
}

export function BookingModal({ isOpen, onClose, initialFacilityZone = "" }: BookingModalProps) {
  const [bookingForm, setBookingForm] = useState<BookingFormData>({
    companyName: '',
    contactName: '',
    email: '',
    phone: '',
    role: '',
    teamSize: '',
    facilityZone: initialFacilityZone,
    additionalRequirements: ''
  });

  const handleBookingSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Booking form submitted:', bookingForm);
    // Here you would typically send the form data to your backend
    alert('Booking request submitted successfully! We will contact you within 24 hours.');
    onClose();
  };

  const updateFormField = (field: keyof BookingFormData, value: string) => {
    setBookingForm(prev => ({ ...prev, [field]: value }));
  };

  return (
    <Dialog open={isOpen} onOpenChange={(open) => {
      if (!open) {
        onClose();
      }
    }}>
      <DialogContent className="max-w-2xl max-h-[90vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle className="text-h3 mb-2">Book Our Learning Facility</DialogTitle>
          <DialogDescription className="text-body text-muted">
            Submit your booking request and we'll get back to you within 24 hours to confirm availability and discuss your requirements.
          </DialogDescription>
        </DialogHeader>
        
        <form onSubmit={handleBookingSubmit} className="space-y-6 mt-6">
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="companyName" className="text-body font-medium">Company/Organization Name *</Label>
              <Input
                id="companyName"
                value={bookingForm.companyName}
                onChange={(e) => updateFormField('companyName', e.target.value)}
                placeholder="Enter company name"
                required
                className="text-body"
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="contactName" className="text-body font-medium">Contact Person *</Label>
              <Input
                id="contactName"
                value={bookingForm.contactName}
                onChange={(e) => updateFormField('contactName', e.target.value)}
                placeholder="Enter your full name"
                required
                className="text-body"
              />
            </div>
          </div>
          
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="email" className="text-body font-medium">Email Address *</Label>
              <Input
                id="email"
                type="email"
                value={bookingForm.email}
                onChange={(e) => updateFormField('email', e.target.value)}
                placeholder="your.email@company.com"
                required
                className="text-body"
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="phone" className="text-body font-medium">Phone Number</Label>
              <Input
                id="phone"
                value={bookingForm.phone}
                onChange={(e) => updateFormField('phone', e.target.value)}
                placeholder="+1 (555) 123-4567"
                className="text-body"
              />
            </div>
          </div>
          
          <div className="grid md:grid-cols-2 gap-4">
            <div className="space-y-2">
              <Label htmlFor="role" className="text-body font-medium">Your Role/Position</Label>
              <Input
                id="role"
                value={bookingForm.role}
                onChange={(e) => updateFormField('role', e.target.value)}
                placeholder="e.g., Training Manager, HR Director"
                className="text-body"
              />
            </div>
            
            <div className="space-y-2">
              <Label htmlFor="teamSize" className="text-body font-medium">Expected Group Size *</Label>
              <Select value={bookingForm.teamSize} onValueChange={(value) => updateFormField('teamSize', value)}>
                <SelectTrigger className="text-body">
                  <SelectValue placeholder="Select group size" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1-10">1-10 participants</SelectItem>
                  <SelectItem value="11-25">11-25 participants</SelectItem>
                  <SelectItem value="26-50">26-50 participants</SelectItem>
                  <SelectItem value="51-80">51-80 participants</SelectItem>
                  <SelectItem value="80+">80+ participants</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="facilityZone" className="text-body font-medium">Preferred Learning Zone</Label>
            <Select value={bookingForm.facilityZone} onValueChange={(value) => updateFormField('facilityZone', value)}>
              <SelectTrigger className="text-body">
                <SelectValue placeholder="Select preferred zone (optional)" />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="amphitheater">Training Amphitheater (80-120 people)</SelectItem>
                <SelectItem value="collaboration">Collaboration Suites (4-8 people)</SelectItem>
                <SelectItem value="outdoor">Outdoor Learning Pavilion (20-40 people)</SelectItem>
                <SelectItem value="multiple">Multiple zones needed</SelectItem>
                <SelectItem value="flexible">Flexible - advise best option</SelectItem>
              </SelectContent>
            </Select>
          </div>
          
          <div className="space-y-2">
            <Label htmlFor="requirements" className="text-body font-medium">Additional Requirements</Label>
            <Textarea
              id="requirements"
              value={bookingForm.additionalRequirements}
              onChange={(e) => updateFormField('additionalRequirements', e.target.value)}
              placeholder="Please share any specific requirements, preferred dates, catering needs, accommodation requirements, etc."
              rows={4}
              className="text-body resize-none"
            />
          </div>
          
          <div className="flex flex-col sm:flex-row gap-3 justify-end pt-4">
            <Button 
              type="button" 
              variant="outline" 
              onClick={onClose}
              className="text-body"
            >
              Cancel
            </Button>
            <Button 
              type="submit"
              className="text-body px-8"
              style={{
                backgroundColor: 'var(--color-primary)',
                color: 'white',
                fontFamily: 'var(--font-family-base)'
              }}
            >
              <Calendar className="w-4 h-4 mr-2" />
              Submit Booking Request
            </Button>
          </div>
        </form>
      </DialogContent>
    </Dialog>
  );
}