"use client";

import { useState } from "react";
import { 
  Music, Sparkles, Briefcase, Trophy, Image as ImageIcon, Palmtree, Grid2X2, ArrowRight, ChevronLeft, ChevronRight,
  Ticket, Tag, RefreshCw, ShieldCheck, HeadphonesIcon, Calendar
} from "lucide-react";
import { EventCard } from "@/components/event/EventCard";
import { EmptyState } from "@/components/ui/EmptyState";
import { FadeInUp, StaggerContainer, StaggerItem } from "@/components/ui/motion";

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

export function EventListingClient({ events }: { events: EventData[] }) {
  const [activeCategory, setActiveCategory] = useState("Semua Event");

  const categories = [
    { id: "Semua Event", icon: Grid2X2 },
    { id: "Konser Musik", icon: Music },
    { id: "Festival", icon: Sparkles },
    { id: "Workshop", icon: Briefcase },
    { id: "Event Olahraga", icon: Trophy },
    { id: "Pameran", icon: ImageIcon },
    { id: "Wisata & Budaya", icon: Palmtree },
  ];

  return (
    <div className="max-w-[1300px] mx-auto w-full px-4 sm:px-6">
      
      {/* 1. Category Tabs */}
      <FadeInUp className="mb-16 -mt-16 relative z-20 bg-white shadow-xl shadow-red-900/5 rounded-3xl p-4 md:p-6 border border-gray-100 flex flex-col md:flex-row items-stretch gap-6">
        
        {/* Left Banner */}
        <div className="bg-red-50 rounded-2xl p-5 md:p-6 flex flex-col justify-center shrink-0 w-full md:w-[280px] border border-red-100/50">
          <div className="flex items-center gap-3 mb-2">
            <div className="w-10 h-10 rounded-full bg-[#d32f2f] flex items-center justify-center shadow-md shrink-0">
              <Calendar className="w-5 h-5 text-white" />
            </div>
            <span className="text-[16px] font-bold text-slate-900">Kategori Event</span>
          </div>
          <p className="text-[13px] text-gray-500 leading-relaxed pl-[52px]">
            Temukan event sesuai minat favoritmu.
          </p>
        </div>

        {/* Vertical Divider for desktop */}
        <div className="hidden md:block w-px bg-gray-100 shrink-0 my-2" />
        
        {/* Wrapped Pills */}
        <div className="flex-1 w-full flex items-center">
          <div className="flex flex-wrap items-center gap-3">
            {categories.map((cat) => {
              const isActive = activeCategory === cat.id;
              const Icon = cat.icon;
              return (
                <button
                  key={cat.id}
                  onClick={() => setActiveCategory(cat.id)}
                  className={`flex items-center gap-2.5 px-4 py-2.5 rounded-xl text-[13px] font-bold border transition-all shrink-0 ${
                    isActive 
                      ? "bg-[#d32f2f] border-[#d32f2f] text-white shadow-md" 
                      : "bg-white border-gray-200 text-gray-700 hover:border-gray-300 hover:bg-gray-50 shadow-sm"
                  }`}
                >
                  <Icon className={`w-[18px] h-[18px] ${isActive ? "text-white" : "text-gray-500"}`} />
                  {cat.id}
                </button>
              );
            })}
          </div>
        </div>
      </FadeInUp>

      {/* 2. Recommended Events */}
      <div className="mb-16">
        <div className="flex flex-col sm:flex-row items-start sm:items-end justify-between mb-8 gap-4">
          <h2 className="text-2xl md:text-[28px] font-black text-slate-900 uppercase tracking-tight">Event Rekomendasi</h2>
          <div className="flex items-center gap-3">
            <button className="px-5 py-2 rounded-full border border-red-200 text-[#d32f2f] font-bold text-[13px] hover:bg-red-50 transition-colors shadow-sm">
              Lihat Semua Event
            </button>
            <div className="flex items-center gap-2">
              <button className="w-9 h-9 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-400 hover:text-[#d32f2f] hover:border-red-200 transition-colors shadow-sm">
                <ChevronLeft className="w-5 h-5" />
              </button>
              <button className="w-9 h-9 rounded-full bg-white border border-gray-200 flex items-center justify-center text-gray-400 hover:text-[#d32f2f] hover:border-red-200 transition-colors shadow-sm">
                <ChevronRight className="w-5 h-5" />
              </button>
            </div>
          </div>
        </div>

        {events.length === 0 ? (
          <EmptyState message="Belum ada event yang tersedia." />
        ) : (
          <StaggerContainer className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {events.map((event) => (
              <StaggerItem key={event.id} className="h-full">
                <EventCard event={event} />
              </StaggerItem>
            ))}
          </StaggerContainer>
        )}
      </div>

      {/* 3. Benefits Bar */}
      <FadeInUp className="bg-white rounded-[24px] border border-gray-100 shadow-sm p-8 mb-16 flex flex-wrap items-center justify-center lg:justify-between gap-8 divide-y lg:divide-y-0 lg:divide-x divide-gray-100">
        {[
          { icon: Ticket, title: "Tiket Resmi", desc: "Tiket 100% resmi dan terverifikasi" },
          { icon: Tag, title: "Harga Terbaik", desc: "Dapatkan harga terbaik setiap hari" },
          { icon: RefreshCw, title: "Mudah & Cepat", desc: "Pesan tiket dalam hitungan menit" },
          { icon: ShieldCheck, title: "Aman & Terpercaya", desc: "Transaksi aman dan data terlindungi" },
          { icon: HeadphonesIcon, title: "Support 24/7", desc: "Kami siap membantu Anda kapan saja" }
        ].map((item, idx) => (
          <div key={idx} className={`flex gap-4 items-center w-full lg:w-auto pt-6 lg:pt-0 lg:pl-6 first:pt-0 first:pl-0`}>
            <item.icon className="w-8 h-8 text-[#d32f2f] shrink-0" strokeWidth={1.5} />
            <div>
              <h4 className="text-[14px] font-bold text-slate-900 mb-0.5">{item.title}</h4>
              <p className="text-[11px] text-gray-500 leading-snug max-w-[140px]">{item.desc}</p>
            </div>
          </div>
        ))}
      </FadeInUp>

    </div>
  );
}