"use client";

import { useState } from "react";
import Image from "next/image";
import BlueBorderLink from "@/ui/Button/BlueBorderButton";
import { OurLocationProps } from "@/types/homepage";
import OurLocationImg from "../../../../public/images/our-location.png";

export default function OurLocations({ heading, description, className, locations = [] }: OurLocationProps) {
  // Simple state management for active location tab index
  const [activeIndex, setActiveIndex] = useState(0);
  const activeTab = locations[activeIndex] || locations[0];
  if (!activeTab || !activeTab.locationdetails || activeTab.locationdetails.length === 0) {
    return null;
  }

  return (
    <section className={`bg-[#F2F4F6] md:bg-none mb-10 md:mb-30 ${className || ""} `}>
      <div className="container">
        <div className="md:bg-[#F2F4F6] md:rounded-[24px] py-10 md:py-20  md:px-10">
          {/* Section Header */}
          <div className="md:text-center max-w-[600px] mx-auto mb-10">
            <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.1] mb-3">
              {heading}
            </h2>
            <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.4]">
              {description}
            </p>
          </div>

          {/* Simple and Clean Tab buttons */}
          <div className="flex justify-start md:justify-center gap-2 md:gap-4 mb-8 -mx-5 px-5 overflow-x-auto scrollbar-none md:mx-0 md:px-0" role="tablist">
            {locations.map((loc, index) => {
              const isActive = activeIndex === index;
              return (
                <button
                  key={index}
                  role="tab"
                  aria-selected={isActive}
                  onClick={() => setActiveIndex(index)}
                  className={`px-4 py-2 md:px-6  rounded-[40px] border text-[14px] md:text-[16px] font-medium transition-all duration-100 ease-out cursor-pointer outline-none whitespace-nowrap ${isActive
                    ? "bg-[#0A0C5C] border-[#001354] text-white"
                    : "bg-white border-[#CCD2DC] text-[#334D72]"
                    }`}
                >
                  {loc.tab}
                </button>
              );
            })}
          </div>

          {/* Active Card content panel - transitions on key change */}
          <div
            key={activeIndex}
            className="bg-white rounded-[16px] shadow-[0_4px_40px_0_rgba(0,0,0,0.06)] border border-[#E5E9F0] overflow-hidden transition-all duration-500 ease-in-out "
          >
            {activeTab.locationdetails.map((activeLoc, detailIdx) => (
              <div
                key={detailIdx}
                className="grid grid-cols-1 lg:grid-cols-12 border-b last:border-b-0 border-[#E5E9F0]"
              >
                {/* Clinic Image panel */}
                <div className="lg:col-span-6 h-[240px] sm:h-[340px] md:h-auto">
                  <Image
                    src={activeLoc.image || OurLocationImg}
                    alt={`${activeLoc.location} Clinic`}
                    width={600}
                    height={360}
                    className="w-full h-full rounded-t-[16px] lg:rounded-l-[16px] lg:rounded-tr-none object-cover"
                    sizes="(max-width: 1024px) 100vw, 50vw"
                  />
                </div>

                {/* Clinic Details panel */}
                <div className="lg:col-span-6 p-6 md:p-10 lg:p-12 flex flex-col justify-between">
                  <div className="mb-8 xl:mb-25">
                    <h3 className="text-[20px] md:text-[24px] text-[#00204F] font-bold mb-4">
                      {activeLoc.location}
                    </h3>

                    <div className="space-y-2">
                      {activeLoc.addressdetails.map((detailItem, idx) => (
                        <div key={idx} className="flex items-start gap-3 text-[#334D72] text-[16px]">
                          {detailItem.icon && (
                            <Image
                              src={detailItem.icon}
                              alt={`${detailItem.address} Icon`}
                              width={20}
                              height={20}
                              className="flex-shrink-0 mt-0.5"
                            />
                          )}
                          <p className="text-[14px] md:text-[16px] text-[#00204F] font-normal">
                            {detailItem.address}:
                            <span className="font-medium text-[#00204F] block md:inline"> {detailItem.details}</span>
                          </p>
                        </div>
                      ))}
                    </div>
                  </div>

                  {/* Action CTA Link */}
                  <div className="mt-8 lg:mt-0">
                    <BlueBorderLink href={activeLoc.cta_link || "#"} className="w-full sm:w-auto justify-center">
                      {activeLoc.cta}
                    </BlueBorderLink>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}