"use client";

import React, { useState, useRef, useEffect } from 'react';
import { ShieldCheck, Medal, Users, Star, Sparkles, MapPin, Calendar, Plus, Minus, ChevronDown } from 'lucide-react';
import { Button } from '@/components/ui/button';

export function HeroSection() {
  const [tripType, setTripType] = useState<'return' | 'oneway'>('return');
  const [destination, setDestination] = useState('Havelock');
  const [departDate, setDepartDate] = useState('');
  const [returnDate, setReturnDate] = useState('');
  
  // Advanced Passenger Logic
  const [showPassengers, setShowPassengers] = useState(false);
  const [adults, setAdults] = useState(2);
  const [children, setChildren] = useState(0);
  const [infants, setInfants] = useState(0);
  
  const passengersRef = useRef<HTMLDivElement>(null);

  // Close popover when clicking outside
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (passengersRef.current && !passengersRef.current.contains(event.target as Node)) {
        setShowPassengers(false);
      }
    }
    document.addEventListener("mousedown", handleClickOutside);
    return () => document.removeEventListener("mousedown", handleClickOutside);
  }, []);

  const totalPassengers = adults + children + infants;
  const passengerText = `${totalPassengers} Passenger${totalPassengers !== 1 ? 's' : ''}`;
  const passengerSubtext = `${adults} Adult${adults !== 1 ? 's' : ''}${children > 0 ? `, ${children} Child` : ''}${infants > 0 ? `, ${infants} Infant` : ''}`;

  const handleSearch = () => {
    alert(`Searching for ${tripType} trip to ${destination} for ${passengerSubtext}. Depart: ${departDate}, Return: ${returnDate}`);
  };

  return (
    <section className="relative min-h-[90vh] pt-32 pb-20 flex flex-col justify-center overflow-hidden">
      {/* Background Image & Overlay */}
      <div 
        className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat"
        style={{ backgroundImage: "url('/images/hero_bg.png')" }}
      >
        <div className="absolute inset-0 bg-gradient-to-r from-navy/90 via-navy/60 to-transparent"></div>
        <div className="absolute inset-0 bg-gradient-to-t from-navy/90 via-transparent to-transparent"></div>
      </div>

      <div className="container relative z-10 mx-auto px-4 lg:px-8 pt-10 flex-grow flex flex-col justify-center">
        <div className="max-w-4xl">
          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-navy/40 backdrop-blur-md border border-white/20 mb-8">
            <Sparkles className="w-4 h-4 text-gold" />
            <span className="text-white text-sm font-medium">#1 Trusted Andaman Tour Operator</span>
          </div>

          <h1 className="font-serif text-5xl md:text-6xl lg:text-7xl text-white font-bold leading-[1.1] mb-6">
            Andaman Tour Packages with Hotels, Ferry, Transport & <span className="text-white/90">Entry Tickets Included</span>
          </h1>

          <p className="text-lg md:text-xl text-white/90 max-w-3xl mb-10 leading-relaxed font-light">
            One booking. Everything sorted. Crystal-clear waters, hand-picked stays and a 24×7 concierge — crafted by locals who know every cove of the islands.
          </p>
        </div>
      </div>

      {/* Advanced Search Widget */}
      <div className="container relative z-20 mx-auto px-4 mt-auto">
        <div className="bg-white/95 backdrop-blur-xl rounded-3xl p-3 md:p-5 shadow-2xl max-w-5xl border border-white/20">
          
          {/* Top Bar */}
          <div className="flex flex-col md:flex-row md:items-center justify-between mb-4 px-2">
            <div className="flex items-center gap-4 bg-gray-100/80 p-1.5 rounded-xl">
              <button 
                onClick={() => setTripType('return')}
                className={`px-6 py-2 rounded-lg font-semibold transition-all duration-300 ${tripType === 'return' ? 'bg-white text-navy shadow-sm' : 'text-gray-500 hover:text-navy'}`}
              >
                Return Trip
              </button>
              <button 
                onClick={() => setTripType('oneway')}
                className={`px-6 py-2 rounded-lg font-semibold transition-all duration-300 ${tripType === 'oneway' ? 'bg-white text-navy shadow-sm' : 'text-gray-500 hover:text-navy'}`}
              >
                One Way
              </button>
            </div>
            <div className="hidden md:flex items-center gap-2 text-sm text-gray-500 font-medium">
              <Sparkles className="w-4 h-4 text-gold" />
              Premium concierge included
            </div>
          </div>
          
          {/* Input Grid */}
          <div className="grid grid-cols-1 md:grid-cols-12 gap-2">
            
            {/* Destination - 3 cols */}
            <div className="md:col-span-3 p-3 border border-gray-200 bg-white rounded-2xl flex flex-col justify-center relative group cursor-pointer hover:border-navy/30 transition-colors">
              <label htmlFor="destination" className="text-xs text-gray-500 font-semibold mb-1 uppercase flex items-center gap-1">
                <MapPin className="w-3 h-3" /> Destination
              </label>
              <div className="flex items-center gap-2 font-bold text-navy">
                <select 
                  id="destination"
                  value={destination}
                  onChange={(e) => setDestination(e.target.value)}
                  className="bg-transparent font-bold text-lg text-navy outline-none cursor-pointer w-full appearance-none"
                >
                  <option value="Port Blair">Port Blair</option>
                  <option value="Havelock">Havelock Island</option>
                  <option value="Neil Island">Neil Island</option>
                  <option value="Baratang">Baratang</option>
                  <option value="Diglipur">Diglipur</option>
                </select>
                <ChevronDown className="w-4 h-4 text-gray-400 absolute right-4 pointer-events-none" />
              </div>
            </div>

            {/* Dates Container - 4 cols */}
            <div className="md:col-span-4 flex bg-white border border-gray-200 rounded-2xl overflow-hidden hover:border-navy/30 transition-colors group">
              <div className="w-1/2 p-3 border-r border-gray-100 flex flex-col justify-center relative">
                <label htmlFor="departDate" className="text-xs text-gray-500 font-semibold mb-1 uppercase flex items-center gap-1">
                  <Calendar className="w-3 h-3" /> Depart
                </label>
                <input 
                  type="date" 
                  id="departDate"
                  value={departDate}
                  onChange={(e) => setDepartDate(e.target.value)}
                  className="bg-transparent font-bold text-lg text-navy outline-none w-full cursor-pointer"
                />
              </div>
              <div className={`w-1/2 p-3 flex flex-col justify-center relative transition-opacity ${tripType === 'oneway' ? 'opacity-40 pointer-events-none bg-gray-50' : ''}`}>
                <label htmlFor="returnDate" className="text-xs text-gray-500 font-semibold mb-1 uppercase flex items-center gap-1">
                  <Calendar className="w-3 h-3" /> Return
                </label>
                <input 
                  type="date" 
                  id="returnDate"
                  value={returnDate}
                  onChange={(e) => setReturnDate(e.target.value)}
                  disabled={tripType === 'oneway'}
                  className="bg-transparent font-bold text-lg text-navy outline-none w-full cursor-pointer disabled:bg-transparent"
                />
              </div>
            </div>

            {/* Passengers Popover - 3 cols */}
            <div className="md:col-span-3 relative" ref={passengersRef}>
              <div 
                className="h-full p-3 border border-gray-200 bg-white rounded-2xl flex flex-col justify-center cursor-pointer hover:border-navy/30 transition-colors"
                onClick={() => setShowPassengers(!showPassengers)}
              >
                <label className="text-xs text-gray-500 font-semibold mb-1 uppercase flex items-center gap-1 cursor-pointer">
                  <Users className="w-3 h-3" /> Passengers
                </label>
                <div className="flex items-center justify-between">
                  <div className="flex flex-col">
                    <span className="font-bold text-lg text-navy">{passengerText}</span>
                    <span className="text-xs text-gray-400 truncate w-32">{passengerSubtext}</span>
                  </div>
                  <ChevronDown className="w-4 h-4 text-gray-400" />
                </div>
              </div>

              {/* Popover Content */}
              {showPassengers && (
                <div className="absolute top-[110%] left-0 w-full md:w-80 bg-white border border-gray-200 shadow-2xl rounded-2xl p-4 z-50 animate-in fade-in slide-in-from-top-4">
                  
                  {/* Adults */}
                  <div className="flex items-center justify-between py-3 border-b border-gray-100">
                    <div>
                      <div className="font-bold text-navy">Adults</div>
                      <div className="text-xs text-gray-500">12+ years</div>
                    </div>
                    <div className="flex items-center gap-3">
                      <button 
                        onClick={(e) => { e.stopPropagation(); setAdults(Math.max(1, adults - 1)); }}
                        disabled={adults <= 1}
                        className="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center text-navy hover:border-navy hover:bg-navy/5 disabled:opacity-30"
                      >
                        <Minus className="w-4 h-4" />
                      </button>
                      <span className="w-4 text-center font-bold">{adults}</span>
                      <button 
                        onClick={(e) => { e.stopPropagation(); setAdults(Math.min(9, adults + 1)); }}
                        className="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center text-navy hover:border-navy hover:bg-navy/5"
                      >
                        <Plus className="w-4 h-4" />
                      </button>
                    </div>
                  </div>

                  {/* Children */}
                  <div className="flex items-center justify-between py-3 border-b border-gray-100">
                    <div>
                      <div className="font-bold text-navy">Children</div>
                      <div className="text-xs text-gray-500">2-11 years</div>
                    </div>
                    <div className="flex items-center gap-3">
                      <button 
                        onClick={(e) => { e.stopPropagation(); setChildren(Math.max(0, children - 1)); }}
                        disabled={children <= 0}
                        className="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center text-navy hover:border-navy hover:bg-navy/5 disabled:opacity-30"
                      >
                        <Minus className="w-4 h-4" />
                      </button>
                      <span className="w-4 text-center font-bold">{children}</span>
                      <button 
                        onClick={(e) => { e.stopPropagation(); setChildren(Math.min(9, children + 1)); }}
                        className="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center text-navy hover:border-navy hover:bg-navy/5"
                      >
                        <Plus className="w-4 h-4" />
                      </button>
                    </div>
                  </div>

                  {/* Infants */}
                  <div className="flex items-center justify-between py-3">
                    <div>
                      <div className="font-bold text-navy">Infants</div>
                      <div className="text-xs text-gray-500">Under 2 years</div>
                    </div>
                    <div className="flex items-center gap-3">
                      <button 
                        onClick={(e) => { e.stopPropagation(); setInfants(Math.max(0, infants - 1)); }}
                        disabled={infants <= 0}
                        className="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center text-navy hover:border-navy hover:bg-navy/5 disabled:opacity-30"
                      >
                        <Minus className="w-4 h-4" />
                      </button>
                      <span className="w-4 text-center font-bold">{infants}</span>
                      <button 
                        onClick={(e) => { e.stopPropagation(); setInfants(Math.min(adults, infants + 1)); }} // Max 1 infant per adult
                        className="w-8 h-8 rounded-full border border-gray-300 flex items-center justify-center text-navy hover:border-navy hover:bg-navy/5"
                      >
                        <Plus className="w-4 h-4" />
                      </button>
                    </div>
                  </div>
                  
                  <div className="mt-2 pt-2 border-t border-gray-100 flex justify-end">
                    <Button onClick={() => setShowPassengers(false)} className="w-full bg-navy text-white rounded-lg">
                      Done
                    </Button>
                  </div>

                </div>
              )}
            </div>

            {/* Search Button - 2 cols */}
            <div className="md:col-span-2 flex items-center justify-center">
              <Button 
                onClick={handleSearch}
                className="w-full h-full min-h-[64px] bg-gold hover:bg-gold/90 text-white rounded-2xl text-lg font-bold shadow-xl shadow-gold/20 flex flex-col gap-1 items-center justify-center"
              >
                <span>Search</span>
                <span className="text-[10px] uppercase tracking-widest font-normal opacity-90">Packages</span>
              </Button>
            </div>
            
          </div>
        </div>
      </div>
    </section>
  );
}