'use client';

import React, { useEffect, useState } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import { motion } from 'framer-motion';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/autoplay';
import { EventTypes } from "@/lib/types";

const OurEvents: React.FC = () => {
  const [events, setEvents] = useState<EventTypes[]>([]);
  useEffect(() => {
    async function fetchEvents() {
      try {
        const res = await fetch('/api/events/list', { method: 'POST' });
        const data = await res.json();
        if (data?.eventsData) {
          // ✅ Only keep events with cover image
          setEvents(data.eventsData.filter((ev: EventTypes) => ev.se_cover));
        }
      } catch (err) {
        console.error('Failed to fetch events', err);
      }
    }
    fetchEvents();
  }, []);
  const chunkedSlides: EventTypes[][] = [];
  for (let i = 0; i < events.length; i++) {
    if (i % 3 === 0 && i + 1 < events.length) {
      chunkedSlides.push([events[i]]);
    } else if (i % 3 === 1 && i + 1 < events.length) {
      chunkedSlides.push([events[i], events[i + 1]]);
      i++;
    }
  }
  return (
    <Container className="py-5 text-center">      
      <Row className='g-3 g-md-5'>
        <Col md={12}>
            <motion.h2 className="display-3 fw-bold text-danger text-center">
              Work. Play. Repeat.
            </motion.h2>
            <motion.p className="text-center">
              Behind every breakthrough is a team that celebrates together.
            </motion.p>             
        </Col>
        <Col md={12}>
          <Swiper slidesPerView="auto" spaceBetween={20} loop={true} autoplay={{delay:3000}} modules={[Autoplay]}>
            {chunkedSlides.map((group, idx) => (
              <SwiperSlide key={idx} style={{ width: group.length === 1 ? '260px' : '280px' }}>
                <div className="d-flex flex-column gap-3" style={{height: group.length === 1 ? '100%' : '440px',justifyContent: group.length === 1 ? 'center' : 'space-between'}}>
                  {group.map((event, i) => (
                    <div key={i} className="position-relative rounded shadow-sm overflow-hidden" style={{width: '100%',height: group.length === 1 ? '440px' : '210px'}}>
                      <motion.img src={event.se_cover?.src} alt={event.se_name} width={event.se_cover?.up_width} height={event.se_cover?.up_height} style={{objectFit: 'cover',position: 'absolute',width: '100%',height: '100%',top: 0,left: 0}} 
                      whileInView={{scale:[1.2,1]}} transition={{duration:2}} />
                      <div className="position-absolute bottom-0 start-0 w-100 bg-dark bg-opacity-50 text-white p-2 fw-bold text-center">{event.se_name}</div>
                    </div>
                  ))}
                </div>
              </SwiperSlide>
            ))}
          </Swiper>          
        </Col>
        <Col md={12}>
          <motion.a href='/gallery' className="btn btn-outline-danger rounded-pill" whileInView={{scale:[0.2,1]}} transition={{duration:1.6}}>
            View Full Gallery
          </motion.a>
        </Col>
      </Row>      
    </Container>
  );
};

export default OurEvents;