"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;
}

const WatchOurPerformances = () => {
  const [items, setItems] = useState<PerformanceItem[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPerformances = async () => {
      try {
        const response = await axiosInstance.get("/cms/performances?page_id=1");
        const result = await response.data;

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

    fetchPerformances();
  }, []);

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

  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,
                },
              }}
            >
              {items.map((item) => (
                <SwiperSlide key={item.id} className="swiper-slide">
                  <div className="videobtx">
                    <div className="videobtxinner">
                      {item.thumbnail && (
                        <Image
                          src={item.thumbnail}
                          loading="lazy"
                          width={364}
                          height={222}
                          alt={item.title}
                        />
                      )}

                      {item.youtube_url && (

                        <a className="playbtn"
                          data-fancybox="VideoThumbnail"
                          href={item.youtube_url}
                        >
                          <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>

          <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>
  );
};

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;