"use client";

import { useState } from "react";
import { 
  Search, ArrowRightLeft, Plane, MapPin, Calendar, Users, ChevronDown, CheckCircle2, RefreshCw, Smartphone, Award,
  Clock, ShieldCheck, Wallet
} from "lucide-react";
import { FlightCard } from "@/components/flight/FlightCard";
import { EmptyState } from "@/components/ui/EmptyState";
import { FadeInUp, StaggerContainer, StaggerItem } from "@/components/ui/motion";

interface FlightData {
  id: number;
  airline: string;
  flightNumber: string | null;
  origin: string;
  destination: string;
  departureInfo: string | null;
  price: string | null;
  badge: string | null;
  imageUrl: string | null;
}

export function FlightListingClient({ flights }: { flights: FlightData[] }) {
  const [activeTab, setActiveTab] = useState("Pulang Pergi");

  return (
    <div className="relative -mt-16 md:-mt-24 z-20 max-w-[1300px] mx-auto w-full px-4 sm:px-6">
      
      {/* 1. Advanced Flight Search Widget */}
      <FadeInUp className="bg-white rounded-3xl shadow-xl shadow-red-900/5 border border-gray-100 overflow-hidden mb-12">
        {/* Tabs */}
        <div className="flex border-b border-gray-100">
          {["Pulang Pergi", "Sekali Jalan", "Multi-city"].map((tab) => (
            <button
              key={tab}
              onClick={() => setActiveTab(tab)}
              className={`flex items-center gap-2 px-6 py-4 text-sm font-bold transition-colors relative ${
                activeTab === tab ? "text-[#d32f2f]" : "text-gray-500 hover:text-gray-700"
              }`}
            >
              {tab === "Pulang Pergi" && <RefreshCw className="w-4 h-4" />}
              {tab === "Sekali Jalan" && <Plane className="w-4 h-4" />}
              {tab === "Multi-city" && <MapPin className="w-4 h-4" />}
              {tab}
              {activeTab === tab && (
                <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#d32f2f]" />
              )}
            </button>
          ))}
        </div>

        {/* Form Inputs */}
        <div className="p-6 md:p-8 flex flex-col md:flex-row items-center gap-4">
          <div className="flex-1 grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4 w-full">
            {/* Dari -> Ke */}
            <div className="col-span-1 sm:col-span-2 flex flex-col sm:flex-row items-center gap-2 bg-gray-50/50 border border-gray-200 rounded-2xl p-2 relative">
              <div className="flex-1 px-4 py-2 hover:bg-white rounded-xl transition-colors cursor-pointer w-full">
                <p className="text-[11px] text-gray-500 uppercase font-semibold mb-1">Dari</p>
                <p className="text-[15px] font-bold text-slate-900">CGK - Jakarta</p>
                <p className="text-[12px] text-gray-400 truncate">Soekarno-Hatta Intl. Airport</p>
              </div>
              
              <button className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-8 h-8 rounded-full bg-white border border-gray-200 shadow-sm flex items-center justify-center text-blue-600 hover:bg-gray-50 z-10">
                <ArrowRightLeft className="w-4 h-4" />
              </button>

              <div className="flex-1 px-4 py-2 hover:bg-white rounded-xl transition-colors cursor-pointer w-full pl-6 sm:pl-4">
                <p className="text-[11px] text-gray-500 uppercase font-semibold mb-1">Ke</p>
                <p className="text-[15px] font-bold text-slate-900">DPS - Bali</p>
                <p className="text-[12px] text-gray-400 truncate">Ngurah Rai Intl. Airport</p>
              </div>
            </div>

            {/* Tanggal */}
            <div className="col-span-1 flex flex-col sm:flex-row bg-gray-50/50 border border-gray-200 rounded-2xl p-2 divide-y sm:divide-y-0 sm:divide-x divide-gray-200">
              <div className="flex-1 px-4 py-2 hover:bg-white rounded-xl transition-colors cursor-pointer">
                <p className="text-[11px] text-gray-500 uppercase font-semibold mb-1">Tanggal Berangkat</p>
                <div className="flex items-center gap-2">
                  <Calendar className="w-4 h-4 text-gray-400" />
                  <p className="text-[14px] font-bold text-slate-900 truncate">25 Mei 2024</p>
                </div>
                <p className="text-[12px] text-gray-400 pl-6">Sabtu</p>
              </div>
            </div>
            
            {/* Penumpang & Kelas */}
            <div className="col-span-1 bg-gray-50/50 border border-gray-200 rounded-2xl p-2">
              <div className="px-4 py-2 hover:bg-white rounded-xl transition-colors cursor-pointer flex justify-between items-center h-full">
                <div>
                  <p className="text-[11px] text-gray-500 uppercase font-semibold mb-1">Penumpang & Kelas</p>
                  <div className="flex items-center gap-2">
                    <Users className="w-4 h-4 text-gray-400" />
                    <p className="text-[14px] font-bold text-slate-900">1 Penumpang</p>
                  </div>
                  <p className="text-[12px] text-gray-400 pl-6">Ekonomi</p>
                </div>
                <ChevronDown className="w-5 h-5 text-gray-400" />
              </div>
            </div>
          </div>

          <button className="w-full md:w-auto bg-[#d32f2f] text-white px-8 py-5 rounded-2xl font-bold flex items-center justify-center gap-2 hover:bg-[#b71c1c] transition-colors shadow-lg shadow-red-900/20 shrink-0 h-[84px]">
            <Search className="w-5 h-5" />
            Cari Penerbangan
          </button>
        </div>
      </FadeInUp>

      {/* 2. Benefits (4 Icons) */}
      <FadeInUp className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-20 max-w-5xl mx-auto border-b border-gray-100 pb-12">
        {[
          { icon: Plane, title: "Banyak Pilihan Maskapai", desc: "Pilihan maskapai lengkap domestik & internasional" },
          { icon: RefreshCw, title: "Fleksibel & Mudah", desc: "Ubah jadwal atau batalkan penerbangan dengan mudah" },
          { icon: Smartphone, title: "E-Ticket Instan", desc: "Tiket langsung di email, praktis tanpa cetak" },
          { icon: Award, title: "Miles & Rewards", desc: "Kumpulkan miles dan dapatkan reward menarik" }
        ].map((item, idx) => (
          <div key={idx} className="flex flex-col md:flex-row items-center md:items-start text-center md:text-left gap-4">
            <div className="w-12 h-12 rounded-full bg-red-50 flex items-center justify-center shrink-0">
              <item.icon className="w-6 h-6 text-[#d32f2f]" />
            </div>
            <div>
              <h4 className="text-[14px] font-bold text-slate-900 mb-1">{item.title}</h4>
              <p className="text-[12px] text-gray-500 leading-relaxed">{item.desc}</p>
            </div>
          </div>
        ))}
      </FadeInUp>

      {/* 3. Popular Routes */}
      <div className="mb-20">
        <div className="flex items-end justify-between mb-8">
          <div>
            <p className="text-[11px] font-bold text-[#d32f2f] uppercase tracking-wider mb-1">Rute Populer</p>
            <h2 className="text-3xl font-bold text-slate-900">Rute Favorit Pelanggan</h2>
          </div>
          <button className="hidden sm:block px-6 py-2 rounded-full border border-red-200 text-[#d32f2f] font-bold text-sm hover:bg-red-50 transition-colors">
            Lihat Semua Rute
          </button>
        </div>

        {flights.length === 0 ? (
          <EmptyState message="Belum ada tiket pesawat yang tersedia." />
        ) : (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {flights.map((flight) => (
              <FlightCard key={flight.id} flight={flight} />
            ))}
          </div>
        )}
      </div>

      {/* 4. Promo Banner */}
      <FadeInUp className="mb-24">
        <div className="relative rounded-[24px] overflow-hidden flex flex-col md:flex-row items-center justify-between p-8 md:p-12 shadow-2xl">
          <div className="absolute inset-0 bg-gradient-to-r from-[#d32f2f] to-[#b71c1c] z-0" />
          <img 
            src="https://images.unsplash.com/photo-1542296332-2e4473faf563?auto=format&fit=crop&w=1200&q=80" 
            alt="Airplane Window" 
            className="absolute inset-0 w-full h-full object-cover mix-blend-overlay opacity-30 object-right z-0"
          />
          
          <div className="relative z-10 text-white max-w-lg mb-8 md:mb-0 text-center md:text-left">
            <p className="text-[11px] font-bold uppercase tracking-wider mb-2 text-red-200">Promo Spesial</p>
            <h3 className="text-3xl md:text-4xl font-bold mb-3">Diskon Tiket Pesawat Hingga <span className="text-yellow-400 text-5xl">20%</span></h3>
            <p className="text-white/90 text-sm mb-6">Terbang lebih hemat ke berbagai destinasi pilihan.</p>
            <button className="bg-white text-[#d32f2f] px-6 py-3 rounded-xl font-bold text-sm hover:bg-gray-100 transition-colors inline-flex items-center gap-2 shadow-lg">
              Lihat Promo <Plane className="w-4 h-4 ml-1" />
            </button>
          </div>

          {/* Countdown */}
          <div className="relative z-10 flex gap-3">
            {[
              { label: "Hari", value: "05" },
              { label: "Jam", value: "12" },
              { label: "Menit", value: "48" },
              { label: "Detik", value: "36" },
            ].map((item, idx) => (
              <div key={idx} className="flex flex-col items-center bg-white rounded-xl w-16 py-3 shadow-xl">
                <span className="text-[#d32f2f] font-black text-2xl leading-none mb-1">{item.value}</span>
                <span className="text-[10px] text-gray-500 font-bold uppercase tracking-wider">{item.label}</span>
              </div>
            ))}
          </div>
        </div>
      </FadeInUp>

      {/* 5. Airline Partners */}
      <div className="mb-24">
        <div className="flex items-end justify-between mb-8">
          <div>
            <p className="text-[11px] font-bold text-[#d32f2f] uppercase tracking-wider mb-1">Maskapai Mitra</p>
            <h2 className="text-2xl font-bold text-slate-900">Terbang Bersama Maskapai Terbaik</h2>
          </div>
          <button className="hidden sm:block px-6 py-2 rounded-full border border-gray-200 text-gray-600 font-bold text-sm hover:bg-gray-50 transition-colors">
            Lihat Semua Maskapai
          </button>
        </div>
        
        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-4">
          {[
            { name: "Garuda Indonesia", logo: "https://logo.clearbit.com/garuda-indonesia.com" },
            { name: "Lion Air", logo: "https://logo.clearbit.com/lionair.co.id" },
            { name: "Citilink", logo: "https://logo.clearbit.com/citilink.co.id" },
            { name: "AirAsia", logo: "https://logo.clearbit.com/airasia.com" },
            { name: "Batik Air", logo: "https://logo.clearbit.com/batikair.com" },
            { name: "Sriwijaya", logo: "https://logo.clearbit.com/sriwijayaair.co.id" },
          ].map((airline, idx) => (
            <div key={idx} className="bg-white border border-gray-100 rounded-2xl h-20 flex items-center justify-center p-4 hover:shadow-md transition-shadow grayscale hover:grayscale-0">
              <img src={airline.logo} alt={airline.name} className="max-h-8 object-contain" />
            </div>
          ))}
        </div>
      </div>

      {/* 6. Why Choose Us */}
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8 mb-16 border-t border-gray-100 pt-16">
        <div className="flex flex-col items-start lg:col-span-1">
          <p className="text-[10px] font-bold text-[#d32f2f] uppercase tracking-wider mb-2">Kenapa Memilih Ranata Tour?</p>
          <div className="h-1 w-12 bg-[#d32f2f] rounded-full mb-6" />
        </div>
        {[
          { icon: Wallet, title: "Harga Terbaik", desc: "Jaminan harga terbaik untuk setiap penerbangan" },
          { icon: CheckCircle2, title: "Proses Cepat", desc: "Pemesanan mudah dan cepat hanya dalam hitungan menit" },
          { icon: ShieldCheck, title: "Aman & Terpercaya", desc: "Bekerja sama dengan maskapai resmi dan terpercaya" },
        ].map((item, idx) => (
          <div key={idx} className="flex gap-4">
            <div className="w-10 h-10 rounded-full bg-red-50 flex items-center justify-center shrink-0">
              <item.icon className="w-5 h-5 text-[#d32f2f]" />
            </div>
            <div>
              <h4 className="text-[14px] font-bold text-slate-900 mb-1">{item.title}</h4>
              <p className="text-[12px] text-gray-500 leading-relaxed">{item.desc}</p>
            </div>
          </div>
        ))}
      </div>

    </div>
  );
}