import { useState } from "react";
import { motion } from "motion/react";
import { Button } from "./ui/button";
import { Input } from "./ui/input";
import { Label } from "./ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
import { Calendar, MapPin, Clock, Users, Phone, User, Mail } from "lucide-react";
import { indiaLocations, serviceTypes } from "../constants/locations";

interface BookingFormProps {
  onSubmit: (data: any) => void;
}

export function BookingForm({ onSubmit }: BookingFormProps) {
  const [formData, setFormData] = useState({
    pickup: "",
    dropoff: "",
    date: "",
    time: "",
    passengers: "1",
    vehicleType: "",
    contactNumber: "",
    contactName: "",
  });



  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit(formData);
  };

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

  const currentDate = new Date().toISOString().split('T')[0];
  const currentTime = new Date().toTimeString().slice(0, 5);
  


  return (
    <motion.div
      initial={{ opacity: 0, y: 20, scale: 0.95 }}
      animate={{ opacity: 1, y: 0, scale: 1 }}
      transition={{ duration: 0.6 }}
      className="w-full max-w-2xl mx-auto"
    >
      <Card className="w-full bg-white border-0 shadow-none">
      <CardHeader className="text-center pb-4 sm:pb-6 lg:pb-8 bg-transparent px-4 sm:px-6 rounded-[0px]">
        <motion.div
          initial={{ opacity: 0, y: -20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <CardTitle className="flex flex-col sm:flex-row items-center justify-center gap-2 text-center text-lg sm:text-xl lg:text-2xl bg-gradient-to-r from-primary to-primary/80 bg-clip-text text-transparent">
            <div className="mb-1 sm:mb-0">
              <MapPin className="h-5 w-5 sm:h-6 sm:w-6 text-primary" />
            </div>
            <span className="font-bold leading-tight text-[32px]">Book Your Airport Taxi Now</span>
          </CardTitle>
        </motion.div>
        <motion.div 
          className="w-16 sm:w-20 lg:w-24 h-1 bg-gradient-to-r from-primary/30 via-primary to-primary/30 mx-auto mt-2 sm:mt-3 lg:mt-4 rounded-full"
          initial={{ scaleX: 0 }}
          animate={{ scaleX: 1 }}
          transition={{ delay: 0.3, duration: 0.8 }}
        />

      </CardHeader>
      <CardContent className="bg-transparent px-4 sm:px-6 pt-[0px] pr-[21px] pb-[21px] pl-[21px]">
        <form onSubmit={handleSubmit} className="space-y-4 sm:space-y-6">
          {/* Location Inputs */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
            <div className="space-y-2">
              <Label htmlFor="pickup" className="text-sm sm:text-base">Pickup Location</Label>
              <Select value={formData.pickup} onValueChange={(value) => handleInputChange("pickup", value)} required>
                <SelectTrigger className="h-10 sm:h-11">
                  <SelectValue placeholder="Select pickup city" />
                </SelectTrigger>
                <SelectContent className="max-h-48">
                  {indiaLocations.map((location) => (
                    <SelectItem key={location} value={location}>
                      {location}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="dropoff" className="text-sm sm:text-base">Drop-off Location / Service</Label>
              <Select value={formData.dropoff} onValueChange={(value) => handleInputChange("dropoff", value)} required>
                <SelectTrigger className="h-10 sm:h-11">
                  <SelectValue placeholder="Select destination or service" />
                </SelectTrigger>
                <SelectContent className="max-h-48">
                  <div className="px-2 py-1 text-xs text-muted-foreground border-b">Services</div>
                  {serviceTypes.map((service) => (
                    <SelectItem key={service} value={service}>
                      {service}
                    </SelectItem>
                  ))}
                  <div className="px-2 py-1 text-xs text-muted-foreground border-b">All India Locations</div>
                  {indiaLocations.map((location) => (
                    <SelectItem key={location} value={location}>
                      {location}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>

          {/* Date and Time */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
            <div className="space-y-2">
              <Label htmlFor="date" className="flex items-center gap-2 text-sm sm:text-base">
                <Calendar className="h-3 w-3 sm:h-4 sm:w-4" />
                Date
              </Label>
              <Input
                id="date"
                type="date"
                min={currentDate}
                value={formData.date}
                onChange={(e) => handleInputChange("date", e.target.value)}
                className="h-10 sm:h-11"
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="time" className="flex items-center gap-2 text-sm sm:text-base">
                <Clock className="h-3 w-3 sm:h-4 sm:w-4" />
                Time
              </Label>
              <Input
                id="time"
                type="time"
                value={formData.time}
                onChange={(e) => handleInputChange("time", e.target.value)}
                className="h-10 sm:h-11"
                required
              />
            </div>
          </div>

          {/* Contact Information */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
            <div className="space-y-2">
              <Label htmlFor="contactName" className="flex items-center gap-2 text-sm sm:text-base">
                <User className="h-3 w-3 sm:h-4 sm:w-4" />
                Contact Name
              </Label>
              <Input
                id="contactName"
                type="text"
                placeholder="Enter your name"
                value={formData.contactName}
                onChange={(e) => handleInputChange("contactName", e.target.value)}
                className="h-10 sm:h-11"
                required
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="contactNumber" className="flex items-center gap-2 text-sm sm:text-base">
                <Phone className="h-3 w-3 sm:h-4 sm:w-4" />
                Contact Number
              </Label>
              <Input
                id="contactNumber"
                type="tel"
                placeholder="Enter your contact number"
                value={formData.contactNumber}
                onChange={(e) => handleInputChange("contactNumber", e.target.value)}
                className="h-10 sm:h-11"
                required
              />
            </div>
          </div>

          {/* Email (Optional) */}
          <div className="space-y-2">
            <Label htmlFor="customerEmail" className="flex items-center gap-2 text-sm sm:text-base">
              <Mail className="h-3 w-3 sm:h-4 sm:w-4" />
              Email Address <span className="text-xs text-muted-foreground">(For booking confirmation)</span>
            </Label>
            <Input
              id="customerEmail"
              type="email"
              placeholder="Enter your email address"
              value={formData.customerEmail}
              onChange={(e) => handleInputChange("customerEmail", e.target.value)}
              className="h-10 sm:h-11"
            />
          </div>

          {/* Passengers and Vehicle Type */}
          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
            <div className="space-y-2">
              <Label className="flex items-center gap-2 text-sm sm:text-base">
                <Users className="h-3 w-3 sm:h-4 sm:w-4" />
                Passengers
              </Label>
              <Select value={formData.passengers} onValueChange={(value) => handleInputChange("passengers", value)}>
                <SelectTrigger className="h-10 sm:h-11">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="1">1 Passenger</SelectItem>
                  <SelectItem value="2">2 Passengers</SelectItem>
                  <SelectItem value="3">3 Passengers</SelectItem>
                  <SelectItem value="4">4 Passengers</SelectItem>
                  <SelectItem value="5">5 Passengers</SelectItem>
                  <SelectItem value="6">6 Passengers</SelectItem>
                  <SelectItem value="7">7 Passengers</SelectItem>
                  <SelectItem value="8">8+ Passengers</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label className="text-sm sm:text-base">Vehicle Type</Label>
              <Select value={formData.vehicleType} onValueChange={(value) => handleInputChange("vehicleType", value)} required>
                <SelectTrigger className="h-10 sm:h-11">
                  <SelectValue placeholder="Select vehicle" />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="5-seater">
                    <span className="text-xs sm:text-sm">5 Seater - Airport Taxi </span>
                  </SelectItem>
                  <SelectItem value="7-seater">
                    <span className="text-xs sm:text-sm">7 Seater (Ertiga) - Airport Taxi </span>
                  </SelectItem>
                  <SelectItem value="innova">
                    <span className="text-xs sm:text-sm">Innova - Airport Taxi </span>
                  </SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>

          <div className="space-y-3 sm:space-y-4">
            <motion.div
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
            >
              <Button type="submit" className="w-full h-11 sm:h-12 text-sm sm:text-base shadow-lg hover:shadow-xl transition-all duration-300 rounded-[8px]">
                <span className="font-semibold">
                  Book Your Airport Taxi
                </span>
              </Button>
            </motion.div>
            
            <div className="flex items-center gap-2">
              <div className="h-px bg-border flex-1"></div>
              <span className="text-xs text-muted-foreground px-2">OR</span>
              <div className="h-px bg-border flex-1"></div>
            </div>
            
            <motion.div
              whileHover={{ scale: 1.02 }}
              whileTap={{ scale: 0.98 }}
              className="relative"
            >
              <motion.div
                className="absolute inset-0 bg-gradient-to-r from-green-400 to-green-600 rounded-lg"
                animate={{
                  opacity: [0.8, 1, 0.8],
                  scale: [1, 1.02, 1]
                }}
                transition={{
                  duration: 2,
                  repeat: Infinity,
                  ease: "easeInOut"
                }}
              />
              <Button 
                type="button"
                className="w-full h-11 sm:h-12 relative z-10 bg-gradient-to-r from-green-500 to-green-600 hover:from-green-600 hover:to-green-700 text-white border-0 shadow-lg"
                onClick={() => window.open('tel:+91-7477247488', '_self')}
              >
                <Phone className="h-3 w-3 sm:h-4 sm:w-4 mr-2" />
                <div className="text-center">
                  <div className="font-semibold text-sm sm:text-base">Call to Book Taxi</div>
                  <div className="text-xs opacity-90">7477247488</div>
                </div>
              </Button>
            </motion.div>
          </div>
        </form>
      </CardContent>
    </Card>
    </motion.div>
  );
}