"use client";

import { useEffect, useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";

import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";
import axiosInstance from "@/lib/axiosInstance";
import Link from "next/link";

interface PerformanceItem {
  id: string;
  title: string;
  youtube_url: string | null;
  thumbnail: string | null;
  sort_order: number | null;
  status: boolean | null;
}

// Extracts an 11-char YouTube video ID from common YouTube URL formats
function getYouTubeVideoId(url: string): string | null {
  const match = url.match(
    /(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/
  );
  return match ? match[1] : null;
}

interface PerformanceItemProps {
  pageId?: number | string;
}

const WatchOurPerformances = ({ pageId = 1 }: PerformanceItemProps) => {
  const [items, setItems] = useState<PerformanceItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [activeVideoId, setActiveVideoId] = useState<string | null>(null);

  useEffect(() => {
    const fetchPerformances = async () => {
      try {
        const response = await axiosInstance.get(`/cms/performances?page_id=${pageId}`);
        const result = await response.data;

        if (result.success) {
          setItems(result.data || []);
        }
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false);
      }
    };

    fetchPerformances();
  }, []);

  const openVideoModal = (e: React.MouseEvent, youtubeUrl: string) => {
    e.preventDefault();
    const videoId = getYouTubeVideoId(youtubeUrl);
    if (videoId) {
      setActiveVideoId(videoId);
    }
  };

  const closeVideoModal = () => {
    setActiveVideoId(null);
  };

  if (loading || items.length === 0) return null;

  return (
    <>
      <div className={Number(pageId ==1 )? "videocontainer": "videocontainer not-home"}>
        <div className="container container-xxl">
          <div className="row">
            <div className="col-12">
              <div
                className={Number(pageId ==1 )? "section-heading secondary-heading text-center" : "section-heading text-center"}
                data-aos="fade-in"
                data-aos-duration="700"
              >
                <h2>
                  <span>Watch Our Performances</span>
                </h2>
              </div>
            </div>
          </div>
          <div className="row">
            <div
              className="col-12 position-relative"
              data-aos="fade-up"
              data-aos-duration="800"
            >
              <Swiper
                id="OurPerformances"
                className="swiper"
                modules={[Navigation]}
                speed={700}
                spaceBetween={15}
                slidesPerView={1}
                loop={true}
                navigation={{
                  nextEl: ".swiper-button-next-our-performances",
                  prevEl: ".swiper-button-prev-our-performances",
                  addIcons: false
                }}
                pagination={{
                  el: ".swiper-pagination-our-performances",
                  clickable: true,
                  type: "progressbar",
                }}
                breakpoints={{
                  100: {
                    slidesPerView: 1,
                    spaceBetween: 0,
                  },
                  260: {
                    slidesPerView: 1,
                    spaceBetween: 0,
                  },
                  370: {
                    slidesPerView: 1,
                    spaceBetween: 0,
                  },
                  440: {
                    slidesPerView: 1,
                    spaceBetween: 0,
                  },
                  574: {
                    slidesPerView: 2,
                    spaceBetween: 12,
                  },
                  768: {
                    slidesPerView: 2,
                    spaceBetween: 15,
                  },
                  992: {
                    slidesPerView: 3,
                    spaceBetween: 15,
                  },
                  1200: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                  },
                  1400: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                  },
                  1700: {
                    slidesPerView: 3,
                    spaceBetween: 20,
                  },
                }}
              >
                {items.map((item) => (
                  <SwiperSlide key={item.id} className="swiper-slide">
                    <div className="videobtx">
                      <div className={`videobtxinner${!item.thumbnail ? " no-thumbnail" : ""}`}>
                        {item.thumbnail && (
                          <Image
                            src={item.thumbnail}
                            loading="lazy"
                            width={364}
                            height={222}
                            alt={item.title}
                          />
                        )}

                        {item.youtube_url && (

                          <a className="playbtn"
                            href={item.youtube_url}
                            onClick={(e) => openVideoModal(e, item.youtube_url as string)}
                          >
                            <svg
                              viewBox="0 0 63 44"
                              fill="none"
                              xmlns="http://www.w3.org/2000/svg"
                            >
                              <path
                                d="M0 8.00076C0 4.35576 2.79368 1.324 6.4301 1.07416C13.0048 0.622455 23.3253 0.010156 31.0849 0.000120761C38.939 -0.0100368 49.7546 0.62275 56.5607 1.0826C60.2023 1.32865 63 4.36268 63 8.01258V34.8169C63 38.408 60.2877 41.4127 56.7098 41.7202C50.1721 42.2819 39.8233 43.0511 32.0164 43.0667C24.0955 43.0825 13.1315 42.282 6.30768 41.7078C2.72175 41.4061 0 38.3976 0 34.799V8.00076Z"
                                fill="#FF0000"
                              />
                              <path
                                d="M43.7187 21.516L25.645 31.9509L25.645 11.0811L43.7187 21.516Z"
                                fill="white"
                              />
                            </svg>
                          </a>
                        )}

                        <div className="videooverlay">
                          <h3>{item.title}</h3>
                        </div>
                      </div>
                    </div>
                  </SwiperSlide>
                ))}
              </Swiper>

              <div className="swiper-nav mt-0">
                <div className="swiper-button-prev swiper-button-prev-our-performances"></div>
                <div className="swiper-button-next swiper-button-next-our-performances"></div>
              </div>

              <div className="swiper-pagination swiper-pagination-our-performances"></div>
            </div>

            {pageId === 1 && (
              <div className="col-12">
                <div className="freevirtualclass text-center">
                  <div className="section-heading secondary-heading text-center">
                    <h2>Try 4 Free Virtual Classes!</h2>
                  </div>

                  <Link href="/student/register" className="default-btn">
                    Register Now
                  </Link>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
        {activeVideoId && (
          <div
            className="video-modal-overlay"
            onClick={closeVideoModal}
          >
            <div
              className="video-modal-content"
              onClick={(e) => e.stopPropagation()}
            >
              <button
                className="video-modal-close"
                onClick={closeVideoModal}
                aria-label="Close video"
              >
                <i className="icon icon-clearclose"></i>
              </button>
              <iframe
                width="100%"
                height="100%"
                src={`https://www.youtube.com/embed/${activeVideoId}?autoplay=1`}
                title="YouTube video player"
                frameBorder="0"
                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                allowFullScreen
              ></iframe>
            </div>
          </div>
        )}
      </>
      );
};

      export default WatchOurPerformances;

// "use client";

// import Image from "next/image";
// import { Swiper, SwiperSlide } from "swiper/react";
// import { Navigation, Pagination } from "swiper/modules";

// import "swiper/css";
// import "swiper/css/navigation";
// import "swiper/css/pagination";

// import VideoImg1 from "@/images/video-img-1.webp";
// import VideoImg2 from "@/images/video-img-2.webp";
// import VideoImg3 from "@/images/video-img-3.webp";

// const WatchOurPerformances = () => {
//   return (
//     <div className="videocontainer">
//       <div className="container container-xxl">
//         <div className="row">
//           <div className="col-12">
//             <div
//               className="section-heading secondary-heading text-center"
//               data-aos="fade-in"
//               data-aos-duration="700"
//             >
//               <h2>
//                 <span>Watch Our Performances</span>
//               </h2>
//             </div>
//           </div>
//         </div>


//         <div className="row">
//           <div
//             className="col-12 position-relative"
//             data-aos="fade-up"
//             data-aos-duration="800"
//           >
//             <Swiper
//               id="OurPerformances"
//               className="swiper"
//               modules={[Navigation]}
//               speed={700}
//               spaceBetween={15}
//               slidesPerView={1}
//               loop={true}
//               navigation={{
//                 nextEl: ".swiper-button-next-our-performances",
//                 prevEl: ".swiper-button-prev-our-performances",
//                 addIcons: false
//               }}
//               pagination={{
//                 el: ".swiper-pagination-our-performances",
//                 clickable: true,
//                 type: "progressbar",
//               }}
//               breakpoints={{
//                 100: {
//                   slidesPerView: 1,
//                   spaceBetween: 0,
//                 },
//                 260: {
//                   slidesPerView: 1,
//                   spaceBetween: 0,
//                 },
//                 370: {
//                   slidesPerView: 1,
//                   spaceBetween: 0,
//                 },
//                 440: {
//                   slidesPerView: 1,
//                   spaceBetween: 0,
//                 },
//                 574: {
//                   slidesPerView: 2,
//                   spaceBetween: 12,
//                 },
//                 768: {
//                   slidesPerView: 2,
//                   spaceBetween: 15,
//                 },
//                 992: {
//                   slidesPerView: 3,
//                   spaceBetween: 15,
//                 },
//                 1200: {
//                   slidesPerView: 3,
//                   spaceBetween: 20,
//                 },
//                 1400: {
//                   slidesPerView: 3,
//                   spaceBetween: 20,
//                 },
//                 1700: {
//                   slidesPerView: 3,
//                   spaceBetween: 20,
//                 },
//               }}
//             >
//               <SwiperSlide className="swiper-slide">
//                 <div className="videobtx">
//                   <div className="videobtxinner">
//                     <Image src={VideoImg1} loading="lazy" width="364" height="222" alt="Video Thumbnail 1" />
//                     <a className="playbtn" data-fancybox="VideoThumbnail" href="https://www.youtube.com/watch?v=D0UnqGm_miA">
//                       <svg viewBox="0 0 63 44" fill="none" xmlns="http://www.w3.org/2000/svg">
//                         <path d="M0 8.00076C0 4.35576 2.79368 1.324 6.4301 1.07416C13.0048 0.622455 23.3253 0.010156 31.0849 0.000120761C38.939 -0.0100368 49.7546 0.62275 56.5607 1.0826C60.2023 1.32865 63 4.36268 63 8.01258V34.8169C63 38.408 60.2877 41.4127 56.7098 41.7202C50.1721 42.2819 39.8233 43.0511 32.0164 43.0667C24.0955 43.0825 13.1315 42.282 6.30768 41.7078C2.72175 41.4061 0 38.3976 0 34.799V8.00076Z" fill="#FF0000" />
//                         <path d="M43.7187 21.516L25.645 31.9509L25.645 11.0811L43.7187 21.516Z" fill="white" />
//                       </svg>
//                     </a>
//                     <div className="videooverlay">
//                       <h3>Kuchipudi Ballet Showcase</h3>
//                     </div>
//                   </div>
//                 </div>
//               </SwiperSlide>

//               <SwiperSlide className="swiper-slide">
//                 <div className="videobtx">
//                   <div className="videobtxinner">
//                     <Image src={VideoImg2} loading="lazy" width="364" height="222" alt="Video Thumbnail 2" />
//                     <a className="playbtn" data-fancybox="VideoThumbnail" href="https://www.youtube.com/watch?v=D0UnqGm_miA">
//                       <svg viewBox="0 0 63 44" fill="none" xmlns="http://www.w3.org/2000/svg">
//                         <path d="M0 8.00076C0 4.35576 2.79368 1.324 6.4301 1.07416C13.0048 0.622455 23.3253 0.010156 31.0849 0.000120761C38.939 -0.0100368 49.7546 0.62275 56.5607 1.0826C60.2023 1.32865 63 4.36268 63 8.01258V34.8169C63 38.408 60.2877 41.4127 56.7098 41.7202C50.1721 42.2819 39.8233 43.0511 32.0164 43.0667C24.0955 43.0825 13.1315 42.282 6.30768 41.7078C2.72175 41.4061 0 38.3976 0 34.799V8.00076Z" fill="#FF0000" />
//                         <path d="M43.7187 21.516L25.645 31.9509L25.645 11.0811L43.7187 21.516Z" fill="white" />
//                       </svg>
//                     </a>
//                     <div className="videooverlay">
//                       <h3>Traditional Dance Recital</h3>
//                     </div>
//                   </div>
//                 </div>
//               </SwiperSlide>

//               <SwiperSlide className="swiper-slide">
//                 <div className="videobtx">
//                   <div className="videobtxinner">
//                     <Image src={VideoImg3} loading="lazy" width="364" height="222" alt="Video Thumbnail 3" />
//                     <a className="playbtn" data-fancybox="VideoThumbnail" href="https://www.youtube.com/watch?v=D0UnqGm_miA">
//                       <svg viewBox="0 0 63 44" fill="none" xmlns="http://www.w3.org/2000/svg">
//                         <path d="M0 8.00076C0 4.35576 2.79368 1.324 6.4301 1.07416C13.0048 0.622455 23.3253 0.010156 31.0849 0.000120761C38.939 -0.0100368 49.7546 0.62275 56.5607 1.0826C60.2023 1.32865 63 4.36268 63 8.01258V34.8169C63 38.408 60.2877 41.4127 56.7098 41.7202C50.1721 42.2819 39.8233 43.0511 32.0164 43.0667C24.0955 43.0825 13.1315 42.282 6.30768 41.7078C2.72175 41.4061 0 38.3976 0 34.799V8.00076Z" fill="#FF0000" />
//                         <path d="M43.7187 21.516L25.645 31.9509L25.645 11.0811L43.7187 21.516Z" fill="white" />
//                       </svg>
//                     </a>
//                     <div className="videooverlay">
//                       <h3>Kuchipudi Showcase</h3>
//                     </div>
//                   </div>
//                 </div>
//               </SwiperSlide>

//               <SwiperSlide className="swiper-slide">
//                 <div className="videobtx">
//                   <div className="videobtxinner">
//                     <Image src={VideoImg1} loading="lazy" width="364" height="222" alt="Video Thumbnail 1" />
//                     <a className="playbtn" data-fancybox="VideoThumbnail" href="https://www.youtube.com/watch?v=D0UnqGm_miA">
//                       <svg viewBox="0 0 63 44" fill="none" xmlns="http://www.w3.org/2000/svg">
//                         <path d="M0 8.00076C0 4.35576 2.79368 1.324 6.4301 1.07416C13.0048 0.622455 23.3253 0.010156 31.0849 0.000120761C38.939 -0.0100368 49.7546 0.62275 56.5607 1.0826C60.2023 1.32865 63 4.36268 63 8.01258V34.8169C63 38.408 60.2877 41.4127 56.7098 41.7202C50.1721 42.2819 39.8233 43.0511 32.0164 43.0667C24.0955 43.0825 13.1315 42.282 6.30768 41.7078C2.72175 41.4061 0 38.3976 0 34.799V8.00076Z" fill="#FF0000" />
//                         <path d="M43.7187 21.516L25.645 31.9509L25.645 11.0811L43.7187 21.516Z" fill="white" />
//                       </svg>
//                     </a>
//                     <div className="videooverlay">
//                       <h3>Kuchipudi Ballet Showcase</h3>
//                     </div>
//                   </div>
//                 </div>
//               </SwiperSlide>

//               <SwiperSlide className="swiper-slide">
//                 <div className="videobtx">
//                   <div className="videobtxinner">
//                     <Image src={VideoImg3} loading="lazy" width="364" height="222" alt="Video Thumbnail 3" />
//                     <a className="playbtn" data-fancybox="VideoThumbnail" href="https://www.youtube.com/watch?v=D0UnqGm_miA">
//                       <svg viewBox="0 0 63 44" fill="none" xmlns="http://www.w3.org/2000/svg">
//                         <path d="M0 8.00076C0 4.35576 2.79368 1.324 6.4301 1.07416C13.0048 0.622455 23.3253 0.010156 31.0849 0.000120761C38.939 -0.0100368 49.7546 0.62275 56.5607 1.0826C60.2023 1.32865 63 4.36268 63 8.01258V34.8169C63 38.408 60.2877 41.4127 56.7098 41.7202C50.1721 42.2819 39.8233 43.0511 32.0164 43.0667C24.0955 43.0825 13.1315 42.282 6.30768 41.7078C2.72175 41.4061 0 38.3976 0 34.799V8.00076Z" fill="#FF0000" />
//                         <path d="M43.7187 21.516L25.645 31.9509L25.645 11.0811L43.7187 21.516Z" fill="white" />
//                       </svg>
//                     </a>
//                     <div className="videooverlay">
//                       <h3>Kuchipudi Showcase</h3>
//                     </div>
//                   </div>
//                 </div>
//               </SwiperSlide>

//               <SwiperSlide className="swiper-slide">
//                 <div className="videobtx">
//                   <div className="videobtxinner">
//                     <Image src={VideoImg1} loading="lazy" width="364" height="222" alt="Video Thumbnail 1" />
//                     <a className="playbtn" data-fancybox="VideoThumbnail" href="https://www.youtube.com/watch?v=D0UnqGm_miA">
//                       <svg viewBox="0 0 63 44" fill="none" xmlns="http://www.w3.org/2000/svg">
//                         <path d="M0 8.00076C0 4.35576 2.79368 1.324 6.4301 1.07416C13.0048 0.622455 23.3253 0.010156 31.0849 0.000120761C38.939 -0.0100368 49.7546 0.62275 56.5607 1.0826C60.2023 1.32865 63 4.36268 63 8.01258V34.8169C63 38.408 60.2877 41.4127 56.7098 41.7202C50.1721 42.2819 39.8233 43.0511 32.0164 43.0667C24.0955 43.0825 13.1315 42.282 6.30768 41.7078C2.72175 41.4061 0 38.3976 0 34.799V8.00076Z" fill="#FF0000" />
//                         <path d="M43.7187 21.516L25.645 31.9509L25.645 11.0811L43.7187 21.516Z" fill="white" />
//                       </svg>
//                     </a>
//                     <div className="videooverlay">
//                       <h3>Kuchipudi Ballet Showcase</h3>
//                     </div>
//                   </div>
//                 </div>
//               </SwiperSlide>
//             </Swiper>

//             <div className="swiper-nav mt-0">
//               <div className="swiper-button-prev swiper-button-prev-our-performances"></div>
//               <div className="swiper-button-next swiper-button-next-our-performances"></div>
//             </div>

//             <div className="swiper-pagination swiper-pagination-our-performances"></div>
//           </div>
//           <div className="col-12">
//             <div className="freevirtualclass text-center">
//               <div className="section-heading secondary-heading text-center">
//                 <h2>Try 4 Free Virtual Classes!</h2>
//               </div>
//               <a href="javascript:void(0);" className="default-btn">Register Now</a>
//             </div>
//           </div>
//         </div>
//       </div>
//     </div>
//   );
// };

// export default WatchOurPerformances;