"use client";

import { useState } from "react";
import Image from "next/image";
import { PrecautionTabs as PrecautionTabsData } from "@/types/precaution";

interface PrecautionTabsProps {
  heading: string;
  description: string;
  tabs: PrecautionTabsData[];
}

export default function PrecautionBannerTabs({ heading, description, tabs }: PrecautionTabsProps) {
  const [activeTabIdx, setActiveTabIdx] = useState<number>(0);
  const [activeFaqIndex, setActiveFaqIndex] = useState<number | null>(0);

  if (!tabs || tabs.length === 0) return null;

  const safeIdx = activeTabIdx < tabs.length ? activeTabIdx : 0;
  const activeTab = tabs[safeIdx] || tabs[0];

  const toggleFaq = (index: number) => {
    setActiveFaqIndex(activeFaqIndex === index ? null : index);
  };

  return (
    <>

      {/* Dynamic Tabs Selection */}
      <div className="border-b border-[#E5E9F0]">
        <div className="container">
          {/* banner heading and description */}
          <div className="max-w-none md:max-w-[846px] mx-auto my-12 md:my-20">
            <h1 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.2] max-w-none md:max-w-[650px] mb-5">{heading}</h1>
            <p className="text-[18px] md:text-[20px] text-[#334D72] font-normal leading-[1.3] max-w-none md:max-w-[846px]">{description}</p>
          </div>
          <div className="max-w-[1064px] mx-auto">
            <div className="flex lg:grid lg:grid-cols-3 justify-start overflow-x-auto scrollbar-none gap-8 lg:gap-0 text-[16px] md:text-[18px]">
              {tabs.map((tab, idx) => {
                const isActive = idx === safeIdx;
                return (
                  <button
                    key={tab.tabs_title || idx}
                    onClick={() => {
                      setActiveTabIdx(idx);
                      setActiveFaqIndex(0); // Reset FAQ accordion to first item open
                    }}
                    className={`pb-4 font-medium transition-all duration-300 relative cursor-pointer whitespace-nowrap lg:whitespace-normal text-center ${isActive ? "text-[#1718FF]" : "text-[#6D7C95] hover:text-[#00204F]"
                      }`}
                  >
                    {tab.tabs_title}
                    {isActive && (
                      <span className="absolute bottom-0 left-0 right-0 h-[2px] bg-[#1718FF] " />
                    )}
                  </button>
                );
              })}
            </div>
          </div>
        </div>
      </div>

      {/* Main Content Area keyed with safeIdx and title to trigger animation and clean re-renders */}
      <div key={`${safeIdx}-${activeTab?.tabs_title}`} className="animate-fade-in-up">
        {/* Precautions Cards Section */}
        {activeTab.cards && activeTab.cards.length > 0 && (
          <section className="md:pt-20 md:pb-30 py-16 mb-16 md:mb-30 bg-[#F2F4F6]">
            <div className="container !p-0 !ps-5 md:!px-5">
              <div className="max-w-[1064px] mx-auto ">
                <h2 className="text-[32px] md:text-[40px] text-[#00204F] font-medium leading-[1.2] mb-4 md:text-center pr-4 md:pr-0">
                  {activeTab.heading}
                </h2>
                <p className="text-[16px] md:text-[18px] text-[#334D72] leading-[1.4] max-w-[720px] mx-auto md:text-center mb-8 md:mb-12 pr-4 md:pr-0">
                  {activeTab.description}
                </p>

                {/* Flex row layout scrolling horizontally on mobile, standard grid on desktop */}
                <div className="flex md:grid md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 gap-4 md:gap-6 overflow-x-auto md:overflow-x-visible pb-6 md:pb-0 scrollbar-none snap-x snap-mandatory">
                  {activeTab.cards.map((card, idx) => (
                    <div
                      key={idx}
                      className="bg-white rounded-2xl border border-[#F0F2F6] p-5 md:p-6 shadow-[0_4px_24px_rgba(0,32,79,0.02)] transition-all duration-300  w-[65vw] sm:w-[320px] md:w-auto shrink-0 snap-start"
                    >
                      <div className="w-16 h-16 xl:w-18 md:h-18 rounded-[40px] bg-[#F0F4FF] flex items-center justify-center mb-6">
                        <Image
                          src={card.icon.startsWith("http") ? card.icon : `/images/precautions/${card.icon}.svg`}
                          width={40}
                          height={40}
                          alt={card.title}
                          priority={idx < 3} // Priority load initial cards
                        />
                      </div>
                      <h3 className="text-[18px] md:text-[20px] text-[#00204F] font-bold mb-3">
                        {card.title}
                      </h3>
                      <p className="text-[14px] md:text-[16px] text-[#6D7C95] font-medium leading-relaxed">
                        {card.description}
                      </p>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </section>
        )}

        {/* Dynamic FAQ Section */}
        {activeTab.faqs && activeTab.faqs.length > 0 && (
          <section className="mb-16 md:mb-30">
            <div className="container">
              <div className="max-w-[846px] mx-auto">
                {activeTab.faqs_title && (
                  <p className="text-[12px] md:text-[14px] text-[#334D72] font-medium mb-2 text-left md:text-center uppercase tracking-[0.5px]">
                    {activeTab.faqs_title}
                  </p>
                )}
                <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.2] mb-4 text-left md:text-center">
                  {activeTab.faqs_heading}
                </h2>
                <p className="text-[16px] md:text-[20px] text-left text-[#334D72] md:text-center mb-10 md:mb-12">
                  {activeTab.faqs_description}
                </p>

                <div className="space-y-4">
                  {activeTab.faqs.map((item, index) => {
                    const isOpen = activeFaqIndex === index;

                    return (
                      <div
                        key={index}
                        className="overflow-hidden rounded-2xl bg-[#F3F5F8] transition-all duration-300"
                      >
                        <button
                          onClick={() => toggleFaq(index)}
                          className="flex w-full items-center justify-between p-4 sm:p-5 md:px-6 md:py-5 text-left cursor-pointer"
                        >
                          <span className="text-[18px] md:text-[20px] font-bold text-[#00204F] max-w-[260px] sm:max-w-none md:max-w-none">
                            {item.questions}
                          </span>
                          {/* Dynamic SVG Arrow matching faq-arrow.svg color and transition */}
                          <svg
                            width="20"
                            height="20"
                            viewBox="0 0 24 24"
                            fill="none"
                            xmlns="http://www.w3.org/2000/svg"
                            className={`transition-transform duration-300 ${isOpen ? "rotate-180" : ""}`}
                          >
                            <path
                              d="M20.0307 9.53104L12.5307 17.031C12.461 17.1008 12.3783 17.1561 12.2873 17.1938C12.1962 17.2316 12.0986 17.251 12.0001 17.251C11.9015 17.251 11.8039 17.2316 11.7128 17.1938C11.6218 17.1561 11.5391 17.1008 11.4694 17.031L3.96943 9.53104C3.8287 9.39031 3.74963 9.19944 3.74963 9.00042C3.74963 8.80139 3.8287 8.61052 3.96943 8.46979C4.11016 8.32906 4.30103 8.25 4.50005 8.25C4.69907 8.25 4.88995 8.32906 5.03068 8.46979L12.0001 15.4401L18.9694 8.46979C19.0391 8.40011 19.1218 8.34483 19.2129 8.30712C19.3039 8.26941 19.4015 8.25 19.5001 8.25C19.5986 8.25 19.6962 8.26941 19.7872 8.30712C19.8783 8.34483 19.961 8.40011 20.0307 8.46979C20.1004 8.53947 20.1556 8.6222 20.1933 8.71324C20.2311 8.80429 20.2505 8.90187 20.2505 9.00042C20.2505 9.09896 20.2311 9.19654 20.1933 9.28759C20.1556 9.37863 20.1004 9.46136 20.0307 9.53104Z"
                              fill="#667995"
                            />
                          </svg>
                        </button>

                        {/* Smooth Collapsible Content */}
                        <div
                          className={`grid transition-all duration-500 ease-in-out ${isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                            }`}
                        >
                          <div className="overflow-hidden">
                            <p className=" text-[14px] md:text-[18px] font-normal text-[#334D72] px-6 pb-5 text-sm leading-relaxed]">
                              {item.answers}
                            </p>
                          </div>
                        </div>
                      </div>
                    );
                  })}
                </div>
              </div>
            </div>
          </section>
        )}
      </div>
    </>
  );
}