"use client";

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

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

import LeftArrow from "../../../../public/images/doctors-left-arrow.svg";
import RightArrow from "../../../../public/images/doctors-right-arrow.svg";

import { ClinicalMedicalExpertsProps } from "@/types/clinics-and-doctors";

export default function ClinicalMedicalExperts({ heading, description, tabs = [] }: ClinicalMedicalExpertsProps) {
    const [activeTabIdx, setActiveTabIdx] = useState(0);

    const safeIdx = activeTabIdx < (tabs?.length || 0) ? activeTabIdx : 0;
    const activeTabObj = tabs?.[safeIdx] || tabs?.[0];
    const activeDoctors = activeTabObj?.specialist_card ?? [];

    return (
        <section className="mb-16 md:mb-24 xl:mb-30 scroll-mt-30" id="ourDoctors">
            <div className="container">

                {/* Header */}
                <div className="grid grid-cols-12 gap-y-8 lg:gap-x-8 items-end mb-10 md:mb-16">

                    {/* Left */}
                    <div className="col-span-12 lg:col-span-6">
                        <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.2] tracking-[-0.5px] mb-4">
                            {heading}
                        </h2>

                        <p className="text-[16px] md:text-[18px] text-[#334D72] leading-relaxed">
                            {description}
                        </p>
                    </div>

                    {/* Right */}
                    <div className="col-span-12 lg:col-span-6">
                        <div className="flex items-center gap-3 overflow-x-auto pb-2 lg:pb-0 scrollbar-none shrink-0 max-w-full flex-nowrap lg:flex-wrap">
                            {tabs?.map((tabItem, index) => {
                                const tabName = tabItem?.tab?.trim() || "";
                                const isActive = index === safeIdx;

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

                {/* Desktop Grid */}
                <div className="hidden md:grid grid-cols-12 gap-6">
                    {activeDoctors.map((doctor, index) => (
                        <article
                            key={index}
                            className="col-span-12 md:col-span-6 xl:col-span-3 bg-white rounded-[24px] border border-[#E5E9ED] overflow-hidden transition-shadow duration-300 hover:shadow-lg flex flex-col h-full"
                        >
                            <figure className="relative aspect-[1.1/1] shrink-0 overflow-hidden bg-[#F8FAFC]">
                                {doctor.image && (
                                    <Image
                                        src={doctor.image}
                                        alt={doctor.name}
                                        fill
                                        sizes="(max-width:768px) 100vw, (max-width:1280px) 50vw, 25vw"
                                        className="object-cover"
                                    />
                                )}
                            </figure>

                            <div className="p-6 flex flex-col flex-1 justify-between">
                                <div>
                                    <h3 className="text-[20px] font-bold text-[#00204F] mb-2">
                                        {doctor.name}
                                    </h3>

                                    <div
                                        className="text-[14px] leading-6 text-[#334D72] mb-5"
                                        dangerouslySetInnerHTML={{
                                            __html: doctor.description,
                                        }}
                                    />
                                </div>

                                {doctor.tags && (
                                    <div className="pt-2 mt-auto">
                                        <span className="inline-flex items-center rounded-full bg-[#EEF2FF] px-3 py-1 text-[12px] font-semibold text-[#1718F5]">
                                            {doctor.tags}
                                        </span>
                                    </div>
                                )}
                            </div>
                        </article>
                    ))}
                </div>

                {/* Mobile Swiper */}
                <div className="md:hidden relative">
                    <Swiper
                        key={`${safeIdx}-${activeTabObj?.tab}`}
                        modules={[Navigation]}
                        navigation={{
                            prevEl: ".experts-prev",
                            nextEl: ".experts-next",
                        }}
                        slidesPerView={1.15}
                        spaceBetween={16}
                        className="myDoctorExpertsSwiper"
                    >
                        {activeDoctors.map((doctor, index) => (
                            <SwiperSlide key={index} className="!h-auto flex flex-col">
                                <article className="rounded-[24px] border border-[#E5E9ED] bg-white overflow-hidden flex flex-col flex-1 h-full">
                                    <figure className="relative aspect-[1.1/1] shrink-0 overflow-hidden bg-[#F8FAFC]">
                                        {doctor.image && (
                                            <Image
                                                src={doctor.image}
                                                alt={doctor.name}
                                                fill
                                                sizes="90vw"
                                                className="object-cover"
                                            />
                                        )}
                                    </figure>

                                    <div className="p-6 flex flex-col flex-1 justify-between">
                                        <div>
                                            <h3 className="text-[18px] font-bold text-[#00204F] mb-2">
                                                {doctor.name}
                                            </h3>
                                            <div
                                                className="text-[13px] leading-6 text-[#334D72] mb-5"
                                                dangerouslySetInnerHTML={{
                                                    __html: doctor.description,
                                                }}
                                            />
                                        </div>
                                        {doctor.tags && (
                                            <div className="pt-2 mt-auto">
                                                <span className="inline-flex items-center rounded-full bg-[#EEF2FF] px-3 py-1 text-[11px] font-semibold text-[#1718F5]">
                                                    {doctor.tags}
                                                </span>
                                            </div>
                                        )}
                                    </div>
                                </article>
                            </SwiperSlide>
                        ))}
                    </Swiper>

                    {/* Mobile Navigation Arrows */}
                    <div className="flex items-center justify-center gap-6 mt-6">
                        <button
                            className="experts-prev flex items-center justify-center cursor-pointer"
                            aria-label="Previous slide"
                        >
                            <Image src={LeftArrow} width={40} height={40} alt="Previous Arrow" />
                        </button>
                        <button
                            className="experts-next flex items-center justify-center cursor-pointer"
                            aria-label="Next slide"
                        >
                            <Image src={RightArrow} width={40} height={40} alt="Next Arrow" />
                        </button>
                    </div>
                </div>
            </div>
        </section>
    );
}