
import React, { useMemo, useState } from 'react';
import { createPortal } from 'react-dom';
import type { Event } from '../../types';
import { CLUBS } from './constants';

const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  return createPortal(children, document.body);
};

interface UpcomingEventsSliderProps {
  events: Event[];
  bookedEventIds?: string[];
  onToggleBooking?: (id: string) => void;
  userRole?: string;
}

const UpcomingEventsSlider: React.FC<UpcomingEventsSliderProps> = ({ 
  events, 
  bookedEventIds = [], 
  onToggleBooking, 
  userRole 
}) => {
  const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
  const clubInfo = useMemo(() => selectedEvent ? CLUBS.find(c => c.name === selectedEvent.club) : null, [selectedEvent]);

  const sortedEvents = useMemo(() => {
    return [...events]
      .filter(e => e.status !== 'Completed')
      .sort((a, b) => {
        return new Date(a.date).getTime() - new Date(b.date).getTime();
      });
  }, [events]);

  const displayEvents = useMemo(() => {
    if (sortedEvents.length === 0) return [];
    if (sortedEvents.length === 1) {
      return [
        ...sortedEvents,
        {
          id: 'coming-soon-1',
          title: 'Experience Coming Soon',
          location: 'To Be Announced',
          date: 'Stay Tuned',
          category: 'UPCOMING',
          image: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=800',
          isComingSoon: true,
          club: 'RIT Events Team',
          coordinator: 'Hub Admins',
          event_summary: 'We are curating the next exciting experience for you. Keep an eye out for upcoming announcements and registrations!',
          status: 'APPROVED',
          pricingType: 'FREE',
          maxParticipants: 100,
          registrationDeadline: '',
          durationDays: 1,
          deptLimits: {},
          deptSectionLimits: {},
          currentParticipants: 0,
          currentDeptCounts: {},
          currentDeptSectionCounts: {},
          created_by: '',
          participantType: 'BOTH',
          verificationStatus: 'APPROVED'
        } as any,
        {
          id: 'coming-soon-2',
          title: 'More Events Unveiling Soon',
          location: 'To Be Announced',
          date: 'Stay Tuned',
          category: 'STAY TUNED',
          image: 'https://images.unsplash.com/photo-1540575467063-178a50c2df87?auto=format&fit=crop&q=80&w=800',
          isComingSoon: true,
          club: 'RIT Events Team',
          coordinator: 'Hub Admins',
          event_summary: 'We are preparing more engaging workshops and activities. Check back later for new updates!',
          status: 'APPROVED',
          pricingType: 'FREE',
          maxParticipants: 100,
          registrationDeadline: '',
          durationDays: 1,
          deptLimits: {},
          deptSectionLimits: {},
          currentParticipants: 0,
          currentDeptCounts: {},
          currentDeptSectionCounts: {},
          created_by: '',
          participantType: 'BOTH',
          verificationStatus: 'APPROVED'
        } as any
      ];
    }
    if (sortedEvents.length === 2) {
      return [
        ...sortedEvents,
        {
          id: 'coming-soon-1',
          title: 'Experience Coming Soon',
          location: 'To Be Announced',
          date: 'Stay Tuned',
          category: 'UPCOMING',
          image: 'https://images.unsplash.com/photo-1504384308090-c894fdcc538d?auto=format&fit=crop&q=80&w=800',
          isComingSoon: true,
          club: 'RIT Events Team',
          coordinator: 'Hub Admins',
          event_summary: 'We are curating the next exciting experience for you. Keep an eye out for upcoming announcements and registrations!',
          status: 'APPROVED',
          pricingType: 'FREE',
          maxParticipants: 100,
          registrationDeadline: '',
          durationDays: 1,
          deptLimits: {},
          deptSectionLimits: {},
          currentParticipants: 0,
          currentDeptCounts: {},
          currentDeptSectionCounts: {},
          created_by: '',
          participantType: 'BOTH',
          verificationStatus: 'APPROVED'
        } as any
      ];
    }
    return sortedEvents;
  }, [sortedEvents]);

  const isMarquee = sortedEvents.length >= 3;

  const loopEvents = useMemo(() => {
    if (!isMarquee) return displayEvents;
    const minItems = 10;
    const repeats = Math.max(1, Math.ceil(minItems / Math.max(1, displayEvents.length)));
    const repeatedSegment = Array(repeats).fill(displayEvents).flat();
    return [...repeatedSegment, ...repeatedSegment];
  }, [displayEvents, isMarquee]);

  if (displayEvents.length === 0) return null;

  return (
    <div className="py-24 px-6 md:px-12 lg:px-24 bg-white overflow-hidden">
      <style>
        {`
          @keyframes merryGoRound {
            0% { transform: translate3d(0, 0, 0); }
            100% { transform: translate3d(-50%, 0, 0); }
          }
          .animate-merry-go-round {
            animation: merryGoRound 45s linear infinite;
            display: flex;
            width: max-content;
            will-change: transform;
          }
          .animate-merry-go-round:hover {
            animation-play-state: paused;
          }
        `}
      </style>
      <div className="flex flex-col lg:flex-row items-start lg:items-end justify-between mb-16 gap-8">
        <div>
          <h3 className="text-4xl md:text-5xl font-serif text-[#1A202C] tracking-tight">Upcoming Experiences</h3>
        </div>
      </div>

      <div className="relative overflow-hidden w-full">
        {/* Gradient masks removed to eliminate fogginess */}

        <div className={`${isMarquee ? 'animate-merry-go-round' : 'flex flex-wrap justify-center'} gap-6 md:gap-8`}>
          {loopEvents.map((event, idx) => (
            <div 
              key={`${event.id}-${idx}`}
              className={`w-[280px] md:w-[350px] lg:w-[400px] flex-shrink-0 bg-white rounded-[2.5rem] p-5 group transition-all shadow-xl shadow-gray-900/5 hover:-translate-y-1 border border-gray-200 transform-gpu ${
                (event as any).isComingSoon ? 'opacity-80 hover:opacity-100' : ''
              }`}
            >
              <div className="h-48 md:h-56 w-full rounded-[2rem] overflow-hidden mb-6 md:mb-8 relative bg-slate-900">
                <img 
                  src={event.image} 
                  alt={event.title} 
                  className={`w-full h-full object-cover transition-transform duration-1000 ${
                    (event as any).isComingSoon ? 'opacity-40 grayscale group-hover:scale-105' : 'group-hover:scale-110'
                  }`}
                />
                <div className="absolute top-4 right-4 bg-white px-4 py-2 rounded-full border border-gray-200">
                  <span className="text-[9px] font-black text-[#1A202C] uppercase tracking-widest">{event.category}</span>
                </div>
                {(event as any).isComingSoon && (
                  <div className="absolute inset-0 flex items-center justify-center">
                    <span className="px-5 py-2.5 bg-amber-500/90 text-slate-950 text-[10px] font-black uppercase tracking-[0.2em] rounded-xl shadow-lg border border-amber-400/20 backdrop-blur-xs flex items-center gap-2">
                      <i className="fas fa-lock text-[8px]"></i> Coming Soon
                    </span>
                  </div>
                )}
              </div>
              <div className="px-2 pb-2 md:pb-4">
                <h4 className="text-xl md:text-2xl font-serif text-[#1A202C] mb-4 md:mb-6 group-hover:text-[#f97316] transition-colors line-clamp-1">
                  {event.title}
                </h4>
                <div className="flex flex-col gap-3 text-gray-500 text-[9px] md:text-[10px] font-bold uppercase tracking-[0.2em]">
                  <div className="flex items-center gap-3">
                    <i className="far fa-calendar-alt text-[#f97316]"></i>
                    <span className="flex items-center gap-2">
                      {new Date(event.date).toLocaleString('en-IN', {
                        timeZone: 'Asia/Kolkata',
                        year: 'numeric',
                        month: 'short',
                        day: '2-digit',
                        hour: '2-digit',
                        minute: '2-digit',
                        hour12: false
                      }) + ' IST'}
                      {event.schedule?.[0]?.start_time && (
                        <>
                          <span className="w-1 h-1 bg-gray-300 rounded-full"></span>
                          <span className="text-[#f97316]">{event.schedule[0].start_time}</span>
                        </>
                      )}
                    </span>
                  </div>
                  <div className="flex items-center gap-3">
                    <i className="fas fa-location-dot text-[#f97316]"></i>
                    <span className="truncate">{event.location}</span>
                  </div>
                </div>
                <div className="mt-6 md:mt-8 pt-4 md:pt-6 border-t border-gray-200/30 flex justify-between items-center">
                   <span className="text-[8px] md:text-[9px] text-gray-400 font-black uppercase tracking-widest">
                     {(event as any).isComingSoon ? 'Stay Tuned' : 'Limited Access'}
                   </span>
                   <button 
                     onClick={() => setSelectedEvent(event)}
                     className="text-[#1A202C] text-[9px] md:text-[10px] font-black uppercase tracking-[0.3em] hover:text-[#f97316] transition-colors flex items-center gap-2 cursor-pointer"
                   >
                     {(event as any).isComingSoon ? 'Sneak Peek' : 'Details'} <i className="fas fa-arrow-right text-[8px]"></i>
                   </button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {selectedEvent && (
        <Portal>
          <div className="fixed inset-0 z-[10000] flex items-center justify-center p-4 sm:p-6 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-300" onClick={() => setSelectedEvent(null)}>
            <div className="bg-white rounded-[2rem] w-full max-w-lg shadow-2xl animate-in zoom-in-95 duration-300 max-h-[85vh] flex flex-col relative" onClick={e => e.stopPropagation()}>
              <button 
                onClick={() => setSelectedEvent(null)}
                className="absolute top-6 right-6 w-8 h-8 rounded-full bg-slate-100 text-slate-500 hover:bg-slate-200 hover:text-slate-800 transition-all flex items-center justify-center z-10 cursor-pointer"
              >
                <i className="fas fa-times text-sm"></i>
              </button>
              
              <div className="p-8 overflow-y-auto flex-1 custom-scrollbar">
                <div className="flex items-center gap-4 mb-8 pb-6 border-b border-gray-100 pr-8">
                   {clubInfo && (
                     <img src={clubInfo.image} className="w-12 h-12 rounded-full object-cover border border-slate-200 shadow-sm" alt="" />
                   )}
                   <div>
                     <span className="block text-[10px] font-black text-[#f97316] uppercase tracking-[0.2em] mb-1">{selectedEvent.club || 'Organized by'}</span>
                     <span className="text-[10px] font-bold text-gray-500 uppercase tracking-widest flex items-center gap-2">
                       <i className="fas fa-user text-[9px]"></i> {selectedEvent.coordinator}
                     </span>
                   </div>
                </div>
                
                <div className="space-y-6 pb-6 mt-6 border-t border-gray-100 pt-6">
                    <div className="flex items-center justify-between gap-2 mb-2">
                       <div className="flex items-center gap-2">
                          <div className="w-1 h-3 bg-[#f97316] rounded-full"></div>
                          <h4 className="text-[10px] font-black text-slate-800 uppercase tracking-[0.2em]">
                            {(selectedEvent as any).isComingSoon ? 'Experience Preview' : 'Summary'}
                          </h4>
                       </div>
                       {userRole === 'STUDENT' && bookedEventIds.includes(selectedEvent.id) && (
                         <span className="px-2.5 py-1 bg-emerald-50 text-emerald-600 border border-emerald-200 text-[8px] font-black rounded-lg uppercase tracking-wider">
                           Registered
                         </span>
                       )}
                    </div>
                    <div className="relative pt-2">
                       <i className="fas fa-quote-right absolute top-0 right-0 text-5xl text-slate-50 pointer-events-none -z-10"></i>
                       <p className="text-[14px] text-slate-600 leading-relaxed whitespace-pre-wrap font-medium">
                         {selectedEvent.event_summary || "Details for this session will be provided soon."}
                       </p>
                    </div>
                 </div>

                 <div className="mt-4 shrink-0 border-t border-gray-100 pt-6 flex flex-col gap-3">

                   <button 
                     onClick={() => setSelectedEvent(null)}
                     className="w-full py-4 bg-slate-900 text-white rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-black transition-all shadow-xl shadow-slate-200 focus:outline-none focus:ring-4 focus:ring-slate-100 cursor-pointer"
                   >
                     Close Summary
                   </button>
                 </div>
              </div>
            </div>
          </div>
        </Portal>
      )}
    </div>
  );
};

export default UpcomingEventsSlider;

