"use client";
import { useState, useEffect, useCallback } from "react";
import Image from "next/image";
import { ChevronLeft, ChevronRight, Search, MapPin, Calendar, Users, Plane } from "lucide-react";

type TourSlideItem = {
  id: string;
  label: string;
  title: string;
  desc: string;
  image: string;
  price: string;
};

const fallbackSlides: TourSlideItem[] = [
  {
    id: "1",
    label: "Best Seller · Bali, Indonesia",
    title: "Discover the Island of Gods",
    desc: "Sacred temples, terraced rice fields, and pristine beaches. Bali is a feast for every sense.",
    image: "https://images.unsplash.com/photo-1537953773345-d172ccf13cf1?w=1600&q=80",
    price: "from $2,490",
  },
  {
    id: "2",
    label: "Most Popular · Turkey",
    title: "Istanbul: Where East Meets West",
    desc: "Walk between continents — mosques, bazaars, Bosphorus sunsets, and world-class cuisine await.",
    image: "https://images.unsplash.com/photo-1524231757912-21f4fe3a7200?w=1600&q=80",
    price: "from $4,200",
  },
  {
    id: "3",
    label: "Limited Seats · Japan",
    title: "Japan Sakura Cherry Blossom Tour",
    desc: "Cherry blossoms, ancient shrines, ramen culture, and neon-lit Tokyo streets — the ultimate Japan experience.",
    image: "https://images.unsplash.com/photo-1528360983277-13d401cdc186?w=1600&q=80",
    price: "from $5,800",
  },
  {
    id: "4",
    label: "Luxury · Dubai, UAE",
    title: "Dubai Luxury Experience",
    desc: "Burj Khalifa, desert safaris, infinity pools, and the world's finest shopping — all in one iconic destination.",
    image: "https://images.unsplash.com/photo-1512453979798-5ea266f8880c?w=1600&q=80",
    price: "from $6,500",
  },
];

export default function ToursSlider({ slides = fallbackSlides }: { slides?: TourSlideItem[] }) {
  const [current, setCurrent] = useState(0);
  const safeSlides = slides.length > 0 ? slides : fallbackSlides;
  const next = useCallback(() => setCurrent((c) => (c + 1) % safeSlides.length), [safeSlides.length]);
  const prev = () => setCurrent((c) => (c - 1 + safeSlides.length) % safeSlides.length);

  useEffect(() => {
    const t = setInterval(next, 6000);
    return () => clearInterval(t);
  }, [next]);

  useEffect(() => {
    if (current >= safeSlides.length) setCurrent(0);
  }, [current, safeSlides.length]);

  const slide = safeSlides[current];

  return (
    <div className="relative">
      {/* Slider frame */}
      <div className="relative h-[420px] md:h-[480px] overflow-hidden">
        {safeSlides.map((s, i) => (
          <div
            key={s.id}
            className={`absolute inset-0 transition-opacity duration-1000 ${i === current ? "opacity-100" : "opacity-0"}`}
          >
            <Image src={s.image} alt={s.title} fill className="object-cover" priority={i === 0} sizes="100vw" />
            <div className="absolute inset-0 bg-gradient-to-r from-navy-900/90 via-navy-900/60 to-transparent" />
          </div>
        ))}

        {/* Content */}
        <div className="relative z-10 h-full flex flex-col justify-center pb-16">
          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
            <div className="max-w-2xl">
              <div className="inline-flex items-center gap-2 px-3 py-1 bg-gold-500/20 text-gold-300 text-xs font-semibold rounded-full mb-5 border border-gold-500/30">
                <Plane size={11} /> {slide.label}
              </div>
              <h1 className="text-4xl md:text-5xl font-bold text-white leading-tight mb-4">{slide.title}</h1>
              <p className="text-navy-200 text-base leading-relaxed mb-6 max-w-lg">{slide.desc}</p>
              <div className="inline-flex items-center gap-2 bg-white/10 backdrop-blur-sm border border-white/20 rounded-xl px-4 py-2 text-white text-sm font-semibold">
                {slide.price}
              </div>
            </div>
          </div>
        </div>

        {/* Dots */}
        <div className="absolute bottom-20 left-1/2 -translate-x-1/2 z-10 flex gap-2">
          {safeSlides.map((_, i) => (
            <button
              key={i}
              onClick={() => setCurrent(i)}
              className={`transition-all rounded-full ${i === current ? "w-8 h-2 bg-gold-400" : "w-2 h-2 bg-white/40 hover:bg-white/70"}`}
            />
          ))}
        </div>

        {/* Arrows */}
        <button onClick={prev} className="absolute left-4 top-1/2 -translate-y-1/2 z-10 w-10 h-10 bg-white/15 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-colors border border-white/20">
          <ChevronLeft size={20} />
        </button>
        <button onClick={next} className="absolute right-4 top-1/2 -translate-y-1/2 z-10 w-10 h-10 bg-white/15 backdrop-blur-sm rounded-full flex items-center justify-center text-white hover:bg-white/30 transition-colors border border-white/20">
          <ChevronRight size={20} />
        </button>
      </div>

      {/* Floating search bar — outside overflow-hidden */}
      <div className="relative z-20 -mt-8 px-4 sm:px-6">
        <div className="max-w-5xl mx-auto">
          <div className="bg-white rounded-2xl shadow-2xl border border-neutral-200 flex items-stretch overflow-hidden">
            {/* Destination */}
            <div className="flex items-center gap-2 flex-1 px-4 border-r border-neutral-200">
              <Search size={17} className="text-neutral-400 shrink-0" />
              <input
                type="search"
                placeholder="Where do you want to go?"
                className="flex-1 py-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:outline-none bg-transparent"
              />
            </div>
            {/* Date */}
            <div className="flex items-center gap-2 px-4 border-r border-neutral-200 w-44 shrink-0">
              <Calendar size={15} className="text-neutral-400 shrink-0" />
              <input
                type="text"
                placeholder="Travel date"
                className="flex-1 py-4 text-sm text-neutral-800 placeholder:text-neutral-400 focus:outline-none bg-transparent"
              />
            </div>
            {/* Pax */}
            <div className="flex items-center gap-2 px-4 border-r border-neutral-200 w-40 shrink-0">
              <Users size={15} className="text-neutral-400 shrink-0" />
              <select className="flex-1 py-4 text-sm text-neutral-600 bg-transparent focus:outline-none cursor-pointer">
                <option>1 Traveller</option>
                <option>2 Travellers</option>
                <option>3–5 Travellers</option>
                <option>6–10 Travellers</option>
                <option>Group (10+)</option>
              </select>
            </div>
            {/* Type */}
            <div className="flex items-center border-r border-neutral-200">
              <select className="h-full text-sm text-neutral-600 px-4 bg-transparent focus:outline-none cursor-pointer">
                <option>All Types</option>
                <option>Local</option>
                <option>Regional</option>
                <option>International</option>
                <option>Religious</option>
                <option>Adventure</option>
              </select>
            </div>
            <button className="px-8 py-4 bg-navy-700 text-white text-sm font-semibold hover:bg-navy-800 transition-colors shrink-0 flex items-center gap-2">
              <MapPin size={15} /> Search Tours
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}