"use client";

import { useState } from "react";
import { Search, MapPin, Calendar, Clock, Wallet, Grid2X2, Flame, Users, Heart, Tent, Gem, ArrowUpDown, ChevronLeft, ChevronRight, Star } from "lucide-react";
import { TourCard } from "@/components/tour/TourCard";
import { PromoCard } from "@/components/tour/PromoCard";
import { EmptyState } from "@/components/ui/EmptyState";
import { FadeInUp, StaggerContainer, StaggerItem } from "@/components/ui/motion";
import { motion } from "framer-motion";
import { useTranslations } from "next-intl";

interface TourData {
  id: number;
  title: string;
  location: string | null;
  price: string | null;
  duration: string | null;
  badge: string | null;
  imageUrl: string | null;
  excerpt?: string | null;
}

export function TourListingClient({ tours }: { tours: TourData[] }) {
  const [activeCategory, setActiveCategory] = useState<string>("Populer");
  const [currentPage, setCurrentPage] = useState(1);
  const [activeDropdown, setActiveDropdown] = useState<string | null>(null);
  const t = useTranslations("TourPackages");

  const categories = [
    { id: "Populer", icon: Flame },
    { id: "Keluarga", icon: Users },
    { id: "Honeymoon", icon: Heart },
    { id: "Adventure", icon: Tent },
    { id: "Open Trip", icon: Users },
    { id: "Luxury", icon: Gem },
  ];

  return (
    <div className="relative -mt-16 md:-mt-24 z-20">
      
      {/* Floating Search Widget */}
      <FadeInUp className="bg-white rounded-2xl shadow-xl border border-gray-100 p-4 md:p-6 mb-8 max-w-6xl mx-auto flex flex-col md:flex-row items-center gap-4">
        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-5 gap-2 flex-1 w-full">
          {[
            { id: "dest", icon: MapPin, label: t('search.destLabel'), value: t('search.destValue') },
            { id: "date", icon: Calendar, label: t('search.dateLabel'), value: t('search.dateValue') },
            { id: "dur", icon: Clock, label: t('search.durLabel'), value: t('search.durValue') },
            { id: "budget", icon: Wallet, label: t('search.budgetLabel'), value: t('search.budgetValue') },
            { id: "cat", icon: Grid2X2, label: t('search.catLabel'), value: t('search.catValue') },
          ].map((item) => (
            <div key={item.id} className="relative">
              <motion.button 
                whileTap={{ scale: 0.95 }}
                onClick={() => setActiveDropdown(activeDropdown === item.id ? null : item.id)}
                className={`w-full text-left flex items-center gap-3 p-3 rounded-xl transition-all ${
                  activeDropdown === item.id 
                    ? "bg-red-50 border border-red-100" 
                    : "bg-transparent border border-transparent hover:bg-gray-50 hover:border-gray-100"
                }`}
              >
                <div className={`w-10 h-10 rounded-full flex items-center justify-center shrink-0 transition-colors ${
                  activeDropdown === item.id ? "bg-white text-[#c52828] shadow-sm" : "bg-gray-50 text-gray-500"
                }`}>
                  <item.icon className="w-5 h-5" />
                </div>
                <div className="flex-1 min-w-0">
                  <p className="text-[11px] font-bold text-gray-800 uppercase tracking-wide">{item.label}</p>
                  <div className="flex items-center justify-between mt-0.5">
                    <p className={`text-sm truncate transition-colors ${
                      activeDropdown === item.id ? "text-[#c52828] font-semibold" : "text-gray-500"
                    }`}>{item.value}</p>
                    <ChevronRight className={`w-4 h-4 transition-transform duration-300 ${
                      activeDropdown === item.id ? "text-[#c52828] rotate-[270deg]" : "text-gray-400 rotate-90"
                    }`} />
                  </div>
                </div>
              </motion.button>
              
              {/* Dummy Dropdown */}
              {activeDropdown === item.id && (
                <motion.div 
                  initial={{ opacity: 0, y: 10 }}
                  animate={{ opacity: 1, y: 0 }}
                  className="absolute top-full left-0 w-full mt-2 bg-white rounded-xl shadow-xl border border-gray-100 p-2 z-50"
                >
                  <p className="text-xs text-gray-500 text-center py-4">Opsi {item.label} akan tampil di sini</p>
                </motion.div>
              )}
            </div>
          ))}
        </div>
        <motion.button whileTap={{ scale: 0.95 }} className="w-full md:w-auto bg-[#c52828] text-white px-8 py-4 rounded-xl font-bold flex items-center justify-center gap-2 hover:bg-[#a02020] transition-colors shadow-lg shadow-red-900/20 shrink-0">
          <Search className="w-5 h-5" />
          {t('search.button')}
        </motion.button>
      </FadeInUp>

      {/* Category Pills */}
      <FadeInUp className="flex flex-wrap items-center justify-center gap-3 mb-16 max-w-5xl mx-auto">
        {categories.map((cat) => {
          const isActive = activeCategory === cat.id;
          const Icon = cat.icon;
          return (
            <motion.button
              key={cat.id}
              whileTap={{ scale: 0.95 }}
              onClick={() => setActiveCategory(cat.id)}
              className={`flex items-center gap-2 px-5 py-2.5 rounded-full text-[13px] font-bold border transition-all ${
                isActive 
                  ? "bg-[#c52828] border-[#c52828] text-white shadow-md" 
                  : "bg-white border-gray-200 text-gray-600 hover:border-gray-300 hover:bg-gray-50"
              }`}
            >
              <Icon className={`w-4 h-4 ${isActive ? "text-white" : "text-gray-400"}`} />
              {cat.id}
            </motion.button>
          );
        })}
      </FadeInUp>

      {/* Main Content Area */}
      <div className="mb-16">
        {/* Header & Sorting */}
        <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-8">
          <div className="flex items-center gap-4">
            <h2 className="text-2xl font-bold text-slate-900">{t('header.title')}</h2>
            <span className="bg-red-50 text-red-600 text-xs font-bold px-3 py-1 rounded-full">
              {tours.length} {t('header.available')}
            </span>
          </div>
          
          <div className="flex flex-wrap items-center gap-3 text-sm">
            <span className="text-gray-500 font-medium">{t('header.sortLabel')}</span>
            <motion.button whileTap={{ scale: 0.95 }} className="flex items-center gap-2 bg-white border border-red-200 text-red-600 px-4 py-2 rounded-lg font-bold shadow-sm">
              <Flame className="w-4 h-4" /> {t('header.sortPopular')} <ChevronRight className="w-3.5 h-3.5 rotate-90" />
            </motion.button>
            <motion.button whileTap={{ scale: 0.95 }} className="flex items-center gap-2 bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-50 transition-colors shadow-sm">
              <ArrowUpDown className="w-4 h-4 text-gray-400" /> {t('header.sortLowest')}
            </motion.button>
            <motion.button whileTap={{ scale: 0.95 }} className="flex items-center gap-2 bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-lg font-medium hover:bg-gray-50 transition-colors shadow-sm">
              <Star className="w-4 h-4 text-gray-400" /> {t('header.sortHighest')}
            </motion.button>
          </div>
        </div>

        {/* Grid Area */}
        {tours.length === 0 ? (
          <EmptyState message="Tidak ada paket tour yang cocok." />
        ) : (
          <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {tours.map((tour) => (
              <StaggerItem key={tour.id} className="h-full">
                <TourCard tour={tour} />
              </StaggerItem>
            ))}

            <StaggerItem key="promo-end" className="h-full">
              <PromoCard />
            </StaggerItem>
          </StaggerContainer>
        )}
      </div>

      {/* Pagination */}
      <div className="flex items-center justify-center gap-2 mb-16">
        <motion.button whileTap={{ scale: 0.9 }} className="w-10 h-10 rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-100 transition-colors">
          <ChevronLeft className="w-5 h-5" />
        </motion.button>
        {[1, 2, 3, 4, 5].map((page) => (
          <motion.button
            key={page}
            whileTap={{ scale: 0.9 }}
            onClick={() => setCurrentPage(page)}
            className={`w-10 h-10 rounded-lg flex items-center justify-center text-sm font-bold transition-all ${
              currentPage === page
                ? "bg-[#c52828] text-white shadow-md shadow-red-900/20"
                : "bg-white border border-gray-200 text-gray-600 hover:bg-gray-50 hover:border-gray-300"
            }`}
          >
            {page}
          </motion.button>
        ))}
        <motion.button whileTap={{ scale: 0.9 }} className="w-10 h-10 rounded-lg flex items-center justify-center text-gray-400 hover:bg-gray-100 transition-colors">
          <ChevronRight className="w-5 h-5" />
        </motion.button>
      </div>
    </div>
  );
}