import { useState, useEffect, useMemo, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import Layout from '../components/layout/Layout';
import { eventsAPI } from '../services/api';
import { Calendar, MapPin, Users, Loader2, CheckCircle, QrCode } from 'lucide-react';

const EventsPage = () => {
  const navigate = useNavigate();
  const [events, setEvents] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');
  // Pagination controls for revealing older/newer events around the nearest 5
  const [pastShownCount, setPastShownCount] = useState(0);
  const [futureShownCount, setFutureShownCount] = useState(0);

  useEffect(() => {
    const fetchEvents = async () => {
      try {
        setLoading(true);
        const data = await eventsAPI.getAll();
        setEvents(data);
      } catch (err) {
        setError('Failed to load events');
        console.error('Error loading events:', err);
      } finally {
        setLoading(false);
      }
    };

    fetchEvents();
  }, []);

  // Build visible list and animation guards BEFORE any conditional returns
  const threshold = new Date();
  threshold.setDate(threshold.getDate() - 3);

  const { visibleEvents, pastPool, futurePool, canLoadMorePast, canLoadMoreFuture, initialFutureIds } = useMemo(() => {
    const sorted = [...events].sort((a, b) => new Date(a.startDate) - new Date(b.startDate));
    const idxStart = sorted.findIndex((e) => new Date(e.startDate) >= threshold);
    const startIdx = idxStart === -1 ? sorted.length : idxStart;
    const pastPool = sorted.slice(0, startIdx);
    const initialFuture = sorted.slice(startIdx, startIdx + 5);
    const futurePool = sorted.slice(startIdx + 5);

    const showPast = pastPool.slice(Math.max(0, pastPool.length - pastShownCount));
    const showFuture = futurePool.slice(0, futureShownCount);
    const visibleEvents = [...showPast, ...initialFuture, ...showFuture];
    return {
      visibleEvents,
      pastPool,
      futurePool,
      canLoadMorePast: pastShownCount < pastPool.length,
      canLoadMoreFuture: futureShownCount < futurePool.length,
      initialFutureIds: new Set(initialFuture.map((e) => e.id)),
    };
  }, [events, pastShownCount, futureShownCount]);

  // Track previously visible IDs to animate only newly added items
  const prevVisibleIdsRef = useRef(new Set());
  const listTopRef = useRef(null);
  const isNewById = useMemo(() => {
    const map = new Map();
    for (const ev of visibleEvents) {
      map.set(ev.id, !prevVisibleIdsRef.current.has(ev.id));
    }
    return map;
  }, [visibleEvents]);

  useEffect(() => {
    prevVisibleIdsRef.current = new Set(visibleEvents.map((e) => e.id));
  }, [visibleEvents]);

  // Preserve scroll position when prepending past items
  const handleLoadPrevious = () => {
    const containerTop = listTopRef.current?.getBoundingClientRect().top || 0;
    setPastShownCount((c) => Math.min(c + 10, pastPool.length));
    requestAnimationFrame(() => {
      const newTop = listTopRef.current?.getBoundingClientRect().top || 0;
      const delta = newTop - containerTop;
      if (delta !== 0) window.scrollBy({ top: delta, left: 0, behavior: 'instant' });
    });
  };

  const handleLoadLater = () => {
    setFutureShownCount((c) => Math.min(c + 10, futurePool.length));
  };

  const handleJoinEvent = (slug) => {
    navigate(`/events/${slug}/chat`);
  };

  if (loading) {
    return (
      <Layout>
        <div className="max-w-4xl mx-auto flex items-center justify-center min-h-[400px]">
          <div className="flex flex-col items-center gap-3">
            <Loader2 className="w-12 h-12 animate-spin text-primary-600" />
            <p className="text-gray-600">Loading events...</p>
          </div>
        </div>
      </Layout>
    );
  }

  if (error) {
    return (
      <Layout>
        <div className="max-w-4xl mx-auto">
          <div className="bg-red-50 border border-red-200 rounded-md p-4 text-red-700">
            {error}
          </div>
        </div>
      </Layout>
    );
  }

  

  // Animated card for smoother reveal of newly mounted items (CSS keyframes)
  const EventCard = ({ event, delay = 0, isNew = false, showCheckin = false }) => {
    const handleJoinEvent = () => navigate(`/events/${event.slug}/chat`);
    return (
      <div
        className={`bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border-2 ${
          event.isJoined ? 'border-primary-500' : 'border-gray-200'
        } ${isNew ? 'animate-fade-slide-in' : ''}`}
        style={isNew ? { animationDelay: `${delay}ms` } : undefined}
      >
        <div className="flex items-start justify-between mb-3">
          <h3 className="text-xl font-bold text-gray-900">{event.name}</h3>
          {event.isJoined && (
            <span className="flex items-center gap-1 px-2 py-1 bg-primary-100 text-primary-700 text-xs font-medium rounded-full">
              <CheckCircle className="w-3 h-3" />
              Joined
            </span>
          )}
        </div>

        <div className="space-y-2 mb-4">
          <div className="flex items-center text-gray-600">
            <MapPin className="w-4 h-4 mr-2" />
            <span className="text-sm">{event.location}</span>
          </div>
          <div className="flex items-center text-gray-600">
            <Calendar className="w-4 h-4 mr-2" />
            <span className="text-sm">
              {new Date(event.startDate).toLocaleDateString('en-US')} - {new Date(event.endDate).toLocaleDateString('en-US')}
            </span>
          </div>
          <div className="flex items-center text-gray-600">
            <Users className="w-4 h-4 mr-2" />
            <span className="text-sm">{event.participantsCount} participants</span>
          </div>
        </div>

        {event.description && (
          <p className="text-gray-600 text-sm mb-4">{event.description}</p>
        )}

        <div className="space-y-2">
          {event.isJoined ? (
            <button
              onClick={handleJoinEvent}
              className="w-full px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors"
            >
              Open chat
            </button>
          ) : showCheckin ? (
            <div className="bg-amber-50 border border-amber-200 rounded-md p-4 text-sm text-amber-800">
              <div className="flex items-center gap-2 font-medium mb-2">
                <QrCode className="w-5 h-5" />
                Check-in required
              </div>
              <p className="text-amber-700">
                Scan the QR code at the event venue to join the chat
              </p>
            </div>
          ) : null}

          {/* Development mode: Show details link */}
          {import.meta.env.DEV && (
            <button
              onClick={() => navigate(`/events/${event.slug}/details`)}
              className="w-full px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition-colors text-sm"
            >
              View details (dev)
            </button>
          )}
        </div>
      </div>
    );
  };

  return (
    <Layout>
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">Choose an event</h1>
        <p className="text-gray-600 mb-8">Join an event and start connecting with other dancers</p>

        {canLoadMorePast && (
          <div className="mb-4 flex justify-center">
            <button
              onClick={handleLoadPrevious}
              className="px-3 py-1.5 text-sm border border-gray-200 rounded-full text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
            >
              Load previous
            </button>
          </div>
        )}

        <div ref={listTopRef} className="grid gap-6 md:grid-cols-2">
          {visibleEvents.map((event, idx) => (
            <EventCard
              key={event.id}
              event={event}
              isNew={isNewById.get(event.id)}
              delay={isNewById.get(event.id) ? Math.min(idx * 80, 640) : 0}
              showCheckin={initialFutureIds.has(event.id)}
            />
          ))}
        </div>

        {canLoadMoreFuture && (
          <div className="mt-6 flex justify-center">
            <button
              onClick={handleLoadLater}
              className="px-3 py-1.5 text-sm border border-gray-200 rounded-full text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors"
            >
              Load later
            </button>
          </div>
        )}
      </div>
    </Layout>
  );
};

export default EventsPage;