"use client";

import Image from "next/image";
import { useEffect, useState } from "react";
import type { Swiper as SwiperType } from "swiper";
import { Autoplay, FreeMode, Navigation, Thumbs } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import type {
  TestimonialSlide,
  TestimonialTab,
} from "@/data/home/testimonials";

type Props = {
  tabs: TestimonialTab[];
};

function TestimonialSliderPane({
  panelId,
  slides,
}: {
  panelId: string;
  slides: TestimonialSlide[];
}) {
  const [thumbsSwiper, setThumbsSwiper] = useState<SwiperType | null>(null);
  const mainCount = slides.length;
  const thumbCount = slides.length;
  const navSel = `.slider-nav-${panelId}`;

  return (
    <div className="slider-area">
      <div className="tesi-info">
        <Swiper
          modules={[FreeMode, Thumbs]}
          onSwiper={setThumbsSwiper}
          spaceBetween={10}
          slidesPerView={5}
          freeMode
          watchSlidesProgress
          loop={thumbCount > 5}
          className="thumbSwiper"
        >
          {slides.map((s) => (
            <SwiperSlide key={`${panelId}-thumb-${s.id}`}>
              <Image
                src={s.thumbSrc}
                alt={s.thumbAlt}
                width={120}
                height={120}
                style={{ width: "auto", height: "auto" }}
                className="w-100 h-auto rounded-circle"
              />
            </SwiperSlide>
          ))}
        </Swiper>
        <Swiper
          modules={[Navigation, Thumbs, Autoplay]}
          spaceBetween={10}
          loop={mainCount > 5}
          autoplay={{ delay: 2500, disableOnInteraction: false }}
          thumbs={{
            swiper:
              thumbsSwiper && !thumbsSwiper.destroyed
                ? thumbsSwiper
                : undefined,
          }}
          navigation={{
            prevEl: `${navSel} .swiper-button-prev`,
            nextEl: `${navSel} .swiper-button-next`,
            addIcons: false,
          }}
          className="mainSwiper"
        >
          {slides.map((s) => (
            <SwiperSlide key={`${panelId}-main-${s.id}`}>
              <div className="testi-content">
                <p>{s.quote}</p>
                <h3 className="name">
                  {s.authorName}
                  <span>{s.authorRole}</span>
                </h3>
              </div>
            </SwiperSlide>
          ))}
        </Swiper>
      </div>
      <div className={`slider-btn slider-nav-${panelId}`}>
        <div className="swiper-button-prev">
          <Image
            src="/assets/images/icon/slide-arrow.svg"
            alt="Previous slide"
            width={18}
            height={18}
            style={{ width: "auto", height: "auto" }}
          />
        </div>
        <div className="swiper-button-next">
          <Image
            src="/assets/images/icon/slide-arrow2.svg"
            alt="Next slide"
            width={18}
            height={18}
            style={{ width: "auto", height: "auto" }}
          />
        </div>
      </div>
    </div>
  );
}

/** Tabbed testimonial block + thumb/main Swipers — crm-html index testimonial-sec + main.js tab sliders. */
export default function HomeTestimonialSlider({ tabs }: Props) {
  const [activeIndex, setActiveIndex] = useState(0);
  const activeTab = tabs[activeIndex] ?? tabs[0];

  useEffect(() => {
    requestAnimationFrame(() => {
      document.querySelectorAll(".slider-area .swiper").forEach((el) => {
        const inst = (el as HTMLElement & { swiper?: { update: () => void } })
          .swiper;
        inst?.update();
      });
    });
  }, [activeIndex]);

  return (
    <>
      <nav>
        <div className="nav nav-tabs" id="nav-tab" role="tablist">
          {tabs.map((tab, i) => (
            <button
              key={tab.panelId}
              className={`nav-link${i === activeIndex ? " active" : ""}`}
              id={`${tab.panelId}-tab`}
              type="button"
              role="tab"
              aria-controls={tab.panelId}
              aria-selected={i === activeIndex}
              onClick={() => setActiveIndex(i)}
            >
              {tab.label}
            </button>
          ))}
        </div>
      </nav>
      <div className="tab-content" id="nav-tabContent">
        <div
          key={activeTab.panelId}
          className="tab-pane fade show active testimonial-pane-enter"
          id={activeTab.panelId}
          role="tabpanel"
          aria-labelledby={`${activeTab.panelId}-tab`}
        >
          <TestimonialSliderPane
            panelId={activeTab.panelId}
            slides={activeTab.slides}
          />
        </div>
      </div>
    </>
  );
}