import { useState } from "react";
import { useNavigate } from "react-router-dom";
import heroBg from "../../assets/hero_bg.png";
import LocationAutocomplete from "./LocationAutocomplete";
import DateTimePicker from "./DateTimePicker";
import { ArrowRight, Plane, Navigation, Repeat, MapPin } from "lucide-react";

const tripTypes = [
  {
    key: "round",
    label: "Round Trip",
    icon: <Repeat className="w-4 h-4" />,
  },
  {
    key: "oneway",
    label: "One Way",
    icon: <ArrowRight className="w-4 h-4" />,
  },
  {
    key: "local",
    label: "Local Trip",
    icon: <Navigation className="w-4 h-4" />,
  },
  {
    key: "airport",
    label: "Airport Trip",
    icon: <Plane className="w-4 h-4" />,
  },
];

const localPackages = [
  "4Hr 40Km",
  "8Hr 80Km",
  "12Hr 120Km",
];

const HeroSection = () => {
  const navigate = useNavigate();
  const [activeTrip, setActiveTrip] = useState("round");
  const [pickupLocation, setPickupLocation] = useState("");
  const [dropLocation, setDropLocation] = useState("");
  const [pickupDate, setPickupDate] = useState(null);
  const [returnDate, setReturnDate] = useState(null);
  const [selectedPackage, setSelectedPackage] = useState(localPackages[0]);
  const [airportName, setAirportName] = useState("");

  const handleSearch = () => {
    if (!pickupLocation) {
      alert("Please enter a pickup location.");
      return;
    }

    const searchParams = new URLSearchParams({
      tripType: activeTrip,
      pickup: pickupLocation,
      drop: dropLocation || airportName || "",
      pickupDate: pickupDate?.toISOString() || "",
      returnDate: returnDate?.toISOString() || "",
      package: activeTrip === 'local' ? selectedPackage : "",
    });

    navigate(`/search?${searchParams.toString()}`);
  };

  const getFormFields = () => {
    switch (activeTrip) {
      case "round":
        return (
          <>
            <LocationAutocomplete 
              label="From City" 
              placeholder="Enter Pickup City" 
              value={pickupLocation} 
              onChange={setPickupLocation} 
            />
            <Divider />
            <LocationAutocomplete 
              label="To City" 
              placeholder="Enter Drop Location" 
              value={dropLocation} 
              icon="destination"
              onChange={setDropLocation} 
            />
            <Divider />
            <DateTimePicker 
              label="Pickup date & time" 
              placeholder="Select Date" 
              selected={pickupDate} 
              onChange={setPickupDate} 
            />
            <Divider />
            <DateTimePicker 
              label="Return date & time" 
              placeholder="Select Date" 
              selected={returnDate} 
              onChange={setReturnDate} 
              minDate={pickupDate || new Date()}
            />
          </>
        );
      case "oneway":
        return (
          <>
            <LocationAutocomplete 
              label="From City" 
              placeholder="Enter Pickup City" 
              value={pickupLocation} 
              onChange={setPickupLocation} 
            />
            <Divider />
            <LocationAutocomplete 
              label="To City" 
              placeholder="Enter Drop Location" 
              value={dropLocation} 
              icon="destination"
              onChange={setDropLocation} 
            />
            <Divider />
            <DateTimePicker 
              label="Pickup date & time" 
              placeholder="Select Date" 
              selected={pickupDate} 
              onChange={setPickupDate} 
            />
          </>
        );
      case "local":
        return (
          <>
            <LocationAutocomplete 
              label="From City" 
              placeholder="Enter Pickup City" 
              value={pickupLocation} 
              onChange={setPickupLocation} 
            />
            <Divider />
            <div className="flex-1 min-w-[200px] px-4 py-3">
              <div className="flex items-center gap-2">
                <Navigation className="w-4 h-4 text-primary-600 flex-shrink-0" />
                <div>
                  <p className="text-[11px] text-badge-text font-medium leading-none mb-1">Select Package</p>
                  <select
                    value={selectedPackage}
                    onChange={(e) => setSelectedPackage(e.target.value)}
                    className="text-sm font-semibold text-dark-900 bg-transparent border-none outline-none cursor-pointer appearance-none"
                  >
                    {localPackages.map((pkg) => (
                      <option key={pkg} value={pkg}>{pkg}</option>
                    ))}
                  </select>
                </div>
              </div>
            </div>
            <Divider />
            <DateTimePicker 
              label="Pickup date & time" 
              placeholder="Select Date" 
              selected={pickupDate} 
              onChange={setPickupDate} 
            />
          </>
        );
      case "airport":
        return (
          <>
            <LocationAutocomplete 
              label="From" 
              placeholder="Enter Pickup Location" 
              value={pickupLocation} 
              onChange={setPickupLocation} 
            />
            <Divider />
            <LocationAutocomplete 
              label="Airport" 
              placeholder="Enter Airport Name" 
              value={airportName}
              icon="destination"
              onChange={setAirportName} 
            />
            <Divider />
            <DateTimePicker 
              label="Pickup date & time" 
              placeholder="Select Date" 
              selected={pickupDate} 
              onChange={setPickupDate} 
            />
          </>
        );
      default:
        return null;
    }
  };

  return (
    <section id="hero" className="relative min-h-[520px] md:min-h-[580px] flex flex-col items-center justify-center overflow-hidden">
      {/* Background */}
      <div className="absolute inset-0">
        <img
          src={heroBg}
          alt=""
          className="w-full h-full object-cover"
        />
        <div className="absolute inset-0 bg-gradient-to-b from-dark-900/70 via-dark-900/50 to-dark-900/70" />
      </div>

      {/* Content */}
      <div className="relative z-10 w-full max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 md:py-16">
        {/* Heading */}
        <h1 className="text-center text-3xl sm:text-4xl md:text-5xl font-bold text-white leading-tight mb-10 md:mb-14 drop-shadow-lg">
          Your Memorable Travel<br className="hidden sm:block" /> Experience begins here
        </h1>

        {/* Booking widget */}
        <div className="max-w-[1100px] mx-auto">
          {/* Trip tabs */}
          <div className="flex justify-center mb-4">
            <div className="inline-flex gap-1 p-1.5 bg-white/90 backdrop-blur-sm rounded-2xl shadow-lg border border-white/20">
              {tripTypes.map((trip) => {
                const isActive = trip.key === activeTrip;
                return (
                  <button
                    key={trip.key}
                    onClick={() => setActiveTrip(trip.key)}
                    className={`
                      flex items-center gap-2 px-4 sm:px-5 py-2.5 text-sm font-semibold rounded-xl
                      transition-all duration-250 ease-out cursor-pointer
                      ${
                        isActive
                          ? "bg-primary-600 text-white shadow-md shadow-primary-600/30"
                          : "text-dark-700 hover:bg-gray-50 hover:text-primary-600"
                      }
                    `}
                  >
                    {trip.icon}
                    <span className="hidden sm:inline">{trip.label}</span>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Form */}
          <div className="bg-white/95 backdrop-blur-sm rounded-2xl shadow-xl p-2">
            <div className="flex flex-col xl:flex-row items-stretch xl:items-center gap-1 sm:gap-0">
              {getFormFields()}

              {/* CTA Button */}
              <button 
                onClick={handleSearch}
                className="flex-shrink-0 inline-flex items-center justify-center gap-2 bg-primary-600 hover:bg-primary-700 text-white font-semibold text-sm px-6 py-4 rounded-xl transition-all duration-200 shadow-md shadow-primary-600/20 hover:shadow-lg hover:shadow-primary-600/30 cursor-pointer m-1 xl:ml-auto"
              >
                Start Booking Now
                <ArrowRight className="w-4 h-4" />
              </button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* --- Sub-components --- */

const Divider = () => (
  <div className="hidden xl:block w-px h-10 bg-gray-200 self-center flex-shrink-0 mx-2" />
);

export default HeroSection;
