'use client';

import { useState } from 'react';
import { ClubEvent } from '@/lib/hbfc-data';
import { Calendar, MapPin, Clock, ArrowRight, Sparkles, X, CheckCircle, Shield } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';

interface EventsSectionProps {
  events: ClubEvent[];
  onRegisterWalkathon: () => void;
  onVolunteerClick?: () => void;
}

export function EventsSection({
  events,
  onRegisterWalkathon,
  onVolunteerClick,
}: EventsSectionProps) {
  const [activeCategory, setActiveCategory] = useState<string>('all');
  const [selectedEvent, setSelectedEvent] = useState<ClubEvent | null>(null);

  const categories = [
    { id: 'all', label: 'All Events' },
    { id: 'walkathon', label: 'Walkathons' },
    { id: 'expedition', label: 'Expeditions' },
    { id: 'outreach', label: 'Outreach' },
  ];

  const filteredEvents =
    activeCategory === 'all'
      ? events
      : events.filter((e) => e.category === activeCategory);

  const handleAction = (event: ClubEvent) => {
    if (event.category === 'walkathon' && event.registrationOpen) {
      onRegisterWalkathon();
    } else {
      setSelectedEvent(event);
    }
  };

  return (
    <section id="events" className="py-10 sm:py-16 md:py-20 relative bg-white border-t border-neutral-200 overflow-hidden">
      <div className="max-w-7xl mx-auto px-3.5 sm:px-6 lg:px-8">
        {/* Section Header */}
        <motion.div
          initial={{ opacity: 0, y: 25 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ duration: 0.5 }}
          className="flex flex-col md:flex-row md:items-end justify-between mb-8 sm:mb-12 gap-4 sm:gap-6"
        >
          <div>
            <div className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 text-emerald-800 text-[10px] sm:text-xs font-bold uppercase tracking-widest mb-2.5">
              <Calendar className="w-3 h-3 text-amber-600" />
              <span>Calendar of Activities</span>
            </div>
            <h2 className="text-2xl sm:text-3xl md:text-4xl font-black text-neutral-900 uppercase tracking-tight">
              Featured Events
            </h2>
            <p className="text-neutral-600 text-xs sm:text-sm mt-1">
              Join our flagship gatherings, high-altitude climbs, and civic impact outreaches.
            </p>
          </div>

          {/* Category Filters */}
          <div className="flex flex-wrap items-center gap-1 bg-neutral-100 p-1 rounded-xl border border-neutral-200">
            {categories.map((cat) => (
              <motion.button
                whileHover={{ scale: 1.03 }}
                whileTap={{ scale: 0.97 }}
                key={cat.id}
                id={`events-filter-${cat.id}`}
                onClick={() => setActiveCategory(cat.id)}
                className={`px-3 py-1 rounded-lg text-[10px] sm:text-xs font-bold uppercase tracking-wider transition-all cursor-pointer ${
                  activeCategory === cat.id
                    ? 'bg-emerald-600 text-white shadow-xs'
                    : 'text-neutral-600 hover:text-neutral-900 hover:bg-neutral-200'
                }`}
              >
                {cat.label}
              </motion.button>
            ))}
          </div>
        </motion.div>

        {/* Events Cards Grid */}
        <div className="grid grid-cols-1 md:grid-cols-3 gap-5 sm:gap-7">
          {filteredEvents.map((evt, idx) => (
            <motion.div
              key={evt.id}
              initial={{ opacity: 0, y: 25 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ duration: 0.5, delay: idx * 0.1 }}
              whileHover={{ y: -6, transition: { duration: 0.2 } }}
              className="rounded-2xl bg-white border border-neutral-200 overflow-hidden flex flex-col hover:border-amber-300 transition-colors shadow-xs hover:shadow-xl group"
            >
              {/* Event Image */}
              <div className="relative h-56 overflow-hidden bg-neutral-100">
                <img
                  src={evt.image}
                  alt={evt.title}
                  className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-neutral-950/60 via-transparent to-transparent" />
                
                {/* Badges */}
                <div className="absolute top-4 left-4 flex gap-2">
                  <span className="px-2.5 py-1 rounded-md text-[11px] font-bold uppercase tracking-wider bg-white/95 backdrop-blur-md text-neutral-900 border border-neutral-200 shadow-xs">
                    {evt.edition}
                  </span>
                  {evt.distance && (
                    <span className="px-2.5 py-1 rounded-md text-[11px] font-black uppercase tracking-wider bg-emerald-600 text-white shadow-xs">
                      {evt.distance}
                    </span>
                  )}
                </div>

                {evt.registrationOpen ? (
                  <span className="absolute bottom-3 right-4 px-2.5 py-1 rounded-md text-[10px] font-black uppercase tracking-wider bg-amber-400 text-neutral-950 shadow-sm">
                    Registration Open
                  </span>
                ) : evt.category === 'walkathon' ? (
                  <span className="absolute bottom-3 right-4 px-2.5 py-1 rounded-md text-[10px] font-black uppercase tracking-wider bg-neutral-800 text-neutral-200 border border-neutral-600 shadow-sm">
                    Concluded
                  </span>
                ) : null}
              </div>

              {/* Event Info */}
              <div className="p-6 flex-1 flex flex-col justify-between">
                <div>
                  <div className="flex items-center gap-2 text-xs font-semibold text-emerald-800 mb-2">
                    <Calendar className="w-3.5 h-3.5 text-amber-600" />
                    <span>{evt.date}</span>
                    <span className="text-neutral-300">•</span>
                    <Clock className="w-3.5 h-3.5 text-neutral-500" />
                    <span className="text-neutral-600">{evt.time}</span>
                  </div>

                  <h3 className="text-xl font-bold text-neutral-900 mb-2 group-hover:text-emerald-800 transition-colors">
                    {evt.title}
                  </h3>

                  <p className="text-xs font-medium text-neutral-500 flex items-center gap-1.5 mb-4">
                    <MapPin className="w-3.5 h-3.5 text-rose-500 shrink-0" />
                    <span className="truncate">{evt.location}</span>
                  </p>

                  <p className="text-sm text-neutral-600 line-clamp-3 leading-relaxed mb-6">
                    {evt.description}
                  </p>
                </div>

                {/* Card Button */}
                <div className="pt-4 border-t border-neutral-100 flex items-center justify-between">
                  <button
                    id={`event-details-btn-${evt.id}`}
                    onClick={() => setSelectedEvent(evt)}
                    className="text-xs font-bold uppercase tracking-wider text-neutral-500 hover:text-neutral-900 transition-colors cursor-pointer"
                  >
                    View Details
                  </button>

                  <motion.button
                    whileHover={{ scale: 1.04 }}
                    whileTap={{ scale: 0.96 }}
                    id={`event-action-btn-${evt.id}`}
                    onClick={() => handleAction(evt)}
                    className={`px-4 py-2 rounded-xl text-xs font-bold uppercase tracking-wider text-white shadow-xs flex items-center gap-1.5 transition-all cursor-pointer ${
                      evt.category === 'walkathon' && !evt.registrationOpen
                        ? 'bg-neutral-800 hover:bg-neutral-900'
                        : 'bg-emerald-600 hover:bg-emerald-700'
                    }`}
                  >
                    <span>
                      {evt.category === 'walkathon' && evt.registrationOpen
                        ? 'Register'
                        : evt.category === 'walkathon'
                        ? 'Highlights & Recap'
                        : 'Info & RSVPs'}
                    </span>
                    <ArrowRight className="w-3.5 h-3.5" />
                  </motion.button>
                </div>
              </div>
            </motion.div>
          ))}
        </div>

        {/* Event Details Modal */}
        <AnimatePresence>
          {selectedEvent && (
            <motion.div
              initial={{ opacity: 0 }}
              animate={{ opacity: 1 }}
              exit={{ opacity: 0 }}
              id="event-detail-modal"
              className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 backdrop-blur-sm"
              onClick={() => setSelectedEvent(null)}
            >
              <motion.div
                initial={{ opacity: 0, scale: 0.95, y: 20 }}
                animate={{ opacity: 1, scale: 1, y: 0 }}
                exit={{ opacity: 0, scale: 0.95, y: 20 }}
                className="relative w-full max-w-2xl bg-white border border-neutral-200 rounded-3xl overflow-hidden shadow-2xl"
                onClick={(e) => e.stopPropagation()}
              >
                <div className="relative h-64">
                  <img
                    src={selectedEvent.image}
                    alt={selectedEvent.title}
                    className="w-full h-full object-cover"
                  />
                  <div className="absolute inset-0 bg-gradient-to-t from-neutral-950/80 via-neutral-950/20 to-transparent" />
                  <button
                    id="event-modal-close-btn"
                    onClick={() => setSelectedEvent(null)}
                    className="absolute top-4 right-4 p-2 rounded-full bg-white/90 text-neutral-800 hover:bg-white transition-colors shadow-sm cursor-pointer"
                  >
                    <X className="w-5 h-5" />
                  </button>
                  <div className="absolute bottom-4 left-6">
                    <span className="px-2.5 py-1 rounded-md text-xs font-black uppercase bg-emerald-600 text-white mb-2 inline-block">
                      {selectedEvent.edition}
                    </span>
                    <h3 className="text-2xl font-black text-white">{selectedEvent.title}</h3>
                  </div>
                </div>

                <div className="p-6 sm:p-8 space-y-6">
                  <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 text-xs">
                    <div className="p-3 rounded-xl bg-neutral-50 border border-neutral-200">
                      <span className="text-neutral-500 block mb-1">Date & Time</span>
                      <span className="text-neutral-900 font-bold">{selectedEvent.date} at {selectedEvent.time}</span>
                    </div>
                    <div className="p-3 rounded-xl bg-neutral-50 border border-neutral-200">
                      <span className="text-neutral-500 block mb-1">Venue Location</span>
                      <span className="text-neutral-900 font-bold">{selectedEvent.location}</span>
                    </div>
                  </div>

                  <div>
                    <h4 className="text-sm font-bold text-neutral-900 uppercase tracking-wider mb-2">
                      Event Overview
                    </h4>
                    <p className="text-sm text-neutral-600 leading-relaxed">
                      {selectedEvent.description}
                    </p>
                  </div>

                  <div className="p-4 rounded-xl bg-emerald-50 border border-emerald-200 flex items-start gap-3">
                    <Shield className="w-5 h-5 text-emerald-700 shrink-0 mt-0.5" />
                    <div className="text-xs text-neutral-700">
                      <span className="font-bold text-neutral-900 block mb-0.5">Participation Guidelines</span>
                      All events are officially coordinated under the Health & Safety Protocols of Healthy Billionaires Fitness Club with certified medical escorts, safety escorts, and hydration stations.
                    </div>
                  </div>

                  <div className="pt-4 border-t border-neutral-200 flex items-center justify-end gap-3">
                    <button
                      onClick={() => setSelectedEvent(null)}
                      className="px-4 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider text-neutral-600 hover:text-neutral-900 cursor-pointer"
                    >
                      Close
                    </button>

                    {selectedEvent.category === 'walkathon' && selectedEvent.registrationOpen ? (
                      <button
                        onClick={() => {
                          setSelectedEvent(null);
                          onRegisterWalkathon();
                        }}
                        className="px-6 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider bg-emerald-600 hover:bg-emerald-700 text-white shadow-md cursor-pointer"
                      >
                        Proceed to Registration
                      </button>
                    ) : (
                      <button
                        onClick={() => {
                          setSelectedEvent(null);
                          if (onVolunteerClick) {
                            onVolunteerClick();
                          } else {
                            window.location.href = '/membership';
                          }
                        }}
                        className="px-6 py-2.5 rounded-xl text-xs font-bold uppercase tracking-wider bg-emerald-700 hover:bg-emerald-800 text-white font-bold shadow-md cursor-pointer transition-all"
                      >
                        Volunteer / Participate
                      </button>
                    )}
                  </div>
                </div>
              </motion.div>
            </motion.div>
          )}
        </AnimatePresence>
      </div>
    </section>
  );
}

export default EventsSection;