"use client";

import { useState } from "react";
import Image from "next/image";
import { Swiper, SwiperSlide } from "swiper/react";
import { Navigation, Pagination } from "swiper/modules";
import { ClinicServicesProps } from "@/types/clinic-buelle";

// Import Swiper styles
import "swiper/css";
import "swiper/css/navigation";
import "swiper/css/pagination";

import LeftArrow from "../../../../public/images/doctors-left-arrow.svg";
import RightArrow from "../../../../public/images/doctors-right-arrow.svg";
import BlueCtaLink from "@/ui/Button/BlueButton";


export default function ClinicServices({ heading, description, specialists = [] }: ClinicServicesProps) {
    const [activeTabIdx, setActiveTabIdx] = useState(0);

    // Safeguard active index if specialists list length changes or language updates
    const safeIdx = activeTabIdx < (specialists?.length || 0) ? activeTabIdx : 0;
    const activeTabObject = specialists?.[safeIdx] || specialists?.[0];
    const activeCards = activeTabObject?.servicecard || [];

    return (
        <section className="bg-[#F2F4F6] py-16 md:py-24 xl:py-30 mb-16 md:mb-24 xl:mb-30">
            <div className="container">
                {/* 12-Column CSS Grid for Header and Navigation */}
                <div className="grid grid-cols-12 gap-y-6 md:gap-y-8 items-center mb-10 md:mb-16">
                    {/* Header text */}
                    <div className="col-span-12">
                        <h2 className="text-[28px] md:text-[48px] text-[#00204F] font-medium leading-[1.2] tracking-[-0.5px] mb-4">
                            {heading}
                        </h2>
                        <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal  leading-relaxed max-w-[650px]">
                            {description}
                        </p>
                    </div>

                    {/* Filter tabs and navigation row */}
                    <div className="col-span-12 flex items-center justify-between gap-4 mt-2">
                        {/* Tabs list (horizontal scrollable on mobile) */}
                        <div className="flex items-center gap-3 overflow-x-auto pb-2 md:pb-0 scrollbar-none shrink-0 max-w-full">
                            {specialists?.map((tab, index) => {
                                const tabName = tab?.title?.trim() || "";
                                const isActive = index === safeIdx;

                                return (
                                    <button
                                        key={index}
                                        onClick={() => setActiveTabIdx(index)}
                                        className={`px-6 py-2.5 rounded-full text-[14px] font-bold border transition-all duration-300 cursor-pointer shrink-0 ${isActive
                                            ? "bg-[#00204F] border-[#00204F] text-white"
                                            : "bg-white border-[#E5E9ED] text-[#334D72] hover:bg-[#F8FAFC]"
                                            }`}
                                    >
                                        {tabName}
                                    </button>
                                );
                            })}
                        </div>

                        {/* Navigation Arrows (Desktop only) */}
                        <div className="hidden md:flex items-center gap-3 shrink-0">
                            <button
                                className="services-prev cursor-pointer transition-all duration-300"
                                aria-label="Previous slide"
                            >
                                <Image src={LeftArrow} width={48} height={48} alt="Previous Arrow" />
                            </button>
                            <button
                                className="services-next cursor-pointer transition-all duration-300"
                                aria-label="Next slide"
                            >
                                <Image src={RightArrow} width={48} height={48} alt="Next Arrow" />
                            </button>
                        </div>
                    </div>
                </div>

                {/* Swiper Slider Wrapper */}
                <div className="relative w-full">
                    {/* We key the Swiper by safeIdx & title so it resets when changing tabs or language */}
                    <Swiper
                        key={`${safeIdx}-${activeTabObject?.title}`}
                        modules={[Navigation, Pagination]}
                        navigation={{
                            prevEl: ".services-prev",
                            nextEl: ".services-next",
                        }}
                        pagination={{
                            clickable: true,
                            el: ".services-pagination",
                        }}
                        spaceBetween={24}
                        slidesPerView={4}
                        breakpoints={{
                            320: {
                                slidesPerView: 1.15,
                                spaceBetween: 16,
                            },
                            640: {
                                slidesPerView: 2.2,
                                spaceBetween: 20,
                            },
                            768: {
                                slidesPerView: 3,
                                spaceBetween: 24,
                            },
                            1024: {
                                slidesPerView: 4,
                                spaceBetween: 24,
                            },
                        }}
                        className="myClinicServicesSwiper w-full !pb-3"
                    >
                        {activeCards.map((card, index) => (
                            <SwiperSlide key={index} className="h-auto">
                                <article className="bg-white rounded-[24px] border border-[#E5E9ED] overflow-hidden flex flex-col h-full transition-shadow duration-300 hover:shadow-lg">
                                    {/* Image Container with fixed aspect ratio */}
                                    <figure className="relative aspect-[1.33/1] w-full overflow-hidden bg-[#F8FAFC]">
                                        <Image
                                            src={card.image}
                                            alt={card.disease || "Service image"}
                                            fill
                                            className="object-cover"
                                            sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 25vw"
                                        />
                                    </figure>

                                    {/* Text content card details */}
                                    <div className="p-6 flex flex-col justify-between flex-grow">
                                        <h3 className="text-[16px] md:text-[18px] font-bold text-[#00204F] leading-[1.3]">
                                            {card.disease}
                                        </h3>
                                    </div>
                                </article>
                            </SwiperSlide>
                        ))}
                    </Swiper>

                    {/* Pagination dots container (Visible on mobile/tablet, hidden on desktop via CSS and container class) */}
                    <div className="services-pagination flex md:hidden justify-center items-center gap-2 mt-6"></div>
                </div>

                {/* Bottom CTA Button */}
                {activeTabObject?.cta && activeTabObject?.cta_link && (
                    <div className="text-center mt-10 md:mt-12">
                        <BlueCtaLink href={activeTabObject.cta_link} children={activeTabObject.cta} />
                    </div>
                )}
            </div>
        </section>
    );
}