"use client";

import { useEffect } from "react";
import Image from "next/image";
import BookAnAppointmentModal from "@/components/CommonComponent/BookAppointmentModal";
import WhiteArrow from "../../../../public/images/white-arrow.svg";
import GreenCheck from "../../../../public/images/green-check.svg";
import { AestheticPricingProps } from "@/types/about-aesthetic";

export default function AestheticPricing({
    title,
    heading,
    description,
    price_cards,
}: AestheticPricingProps) {
    useEffect(() => {
        const isFromHome = sessionStorage.getItem("scrollToPricing") === "true";
        const hasHash = window.location.hash === "#pricing";

        if (isFromHome || hasHash) {
            sessionStorage.removeItem("scrollToPricing");
            setTimeout(() => {
                document.getElementById("pricing")?.scrollIntoView({ behavior: "smooth" });
            }, 500);
        }
    }, []);
    // Helper to format tab title into readable sentence case (e.g., OUR PRICES -> Our prices)
    const formatSubtitle = (text?: string) => {
        if (!text) return "";
        return text.trim().toUpperCase();
    };

    // Helper to split and format baseline alignment of currency strings
    const formatAmount = (amt?: string) => {
        if (!amt) return null;
        const cleaned = amt.trim().replace(/,\s*$/, "");
        if (cleaned.toLowerCase().startsWith("from")) {
            const val = cleaned.slice(4).trim();
            return (
                <div className="flex items-baseline justify-center gap-1.5 mb-6">
                    <span className="text-[14px] text-[#334D72] font-semibold">From</span>
                    <span className="text-[32px] md:text-[40px] text-[#00204F] font-medium leading-none">
                        {val}
                    </span>
                </div>
            );
        }
        return (
            <div className="text-[32px] md:text-[40px] text-[#00204F] font-bold text-center mb-6">
                {cleaned}
            </div>
        );
    };

    return (
        <section className="scroll-mt-20 bg-[#F2F4F6] py-10 md:py-24 xl:py-30 mb-10" id="pricing">
            <div className="container">
                {/* Header section (Centered layout) */}
                <div className="text-center mb-10 md:mb-16">
                    <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium tracking-[0.5px] uppercase block mb-3">
                        {formatSubtitle(title || heading)}
                    </span>
                    <h2 className="text-[32px] md:text-[44px] xl:text-[48px] text-[#00204F] font-medium leading-tight mb-4">
                        Our prices
                    </h2>
                    <p className="text-[20px] text-[#334D72] leading-relaxed max-w-[750px] mx-auto">
                        {description}
                    </p>
                </div>

                {/* 12-Column Responsive CSS Grid */}
                <div className="grid grid-cols-12 gap-6 lg:gap-8 items-stretch">
                    {price_cards?.map((card, index) => {
                        const isRecommended = index === 1; // Middle card (Cosmetic surgery) is recommended

                        return (
                            <article
                                key={index}
                                className={`col-span-12 md:col-span-6 xl:col-span-4 bg-white rounded-[24px] border border-[#CCD2DC] overflow-hidden flex flex-col relative pt-12 pb-8 px-6 md:px-8 transition-shadow duration-300 hover:shadow-lg ${isRecommended
                                    ? "border-[#00D8F6] ring-1 ring-[#00D8F6]/20"
                                    : ""
                                    }`}
                            >
                                {/* Recommended Header Bar */}
                                {/* {isRecommended && (
                                    <div className="absolute top-0 left-0 right-0 h-10 bg-[#23F8FF] text-black font-bold uppercase tracking-wider text-[11px] flex items-center justify-center">
                                        RECOMMENDED
                                    </div>
                                )} */}

                                {/* Card Header title */}
                                <h3 className="text-[20px] font-bold text-[#00204F] uppercase tracking-[0.5px] block text-center mb-4">
                                    {card.title}
                                </h3>

                                {/* Currency Amount Display */}
                                {formatAmount(card.amount)}

                                {/* Thin Divider Line */}
                                <div className="w-full h-px bg-[#E5E9ED] mb-6 shrink-0" />

                                {/* Checklist Points Area */}
                                <div className="flex flex-col gap-4 flex-grow">
                                    {card.points?.map((pt, pIdx) => (
                                        <div key={pIdx} className="flex items-start gap-3">
                                            <div className="shrink-0 mt-0.5">
                                                <Image
                                                    src={GreenCheck}
                                                    width={20}
                                                    height={20}
                                                    alt="Green check"
                                                />
                                            </div>
                                            <p className="text-[14px] md:text-[15px] text-[#334D72] leading-normal font-medium">
                                                {pt?.point?.trim() || ""}
                                            </p>
                                        </div>
                                    ))}
                                </div>
                            </article>
                        );
                    })}
                </div>

                {/* Bottom Appointment Modal Booking CTA Trigger */}
                <div className="flex justify-center mt-12 md:mt-16">
                    <BookAnAppointmentModal
                        buttonText="Book my beauty consultation"
                        buttonBgClass="bg-[#1718F5]"
                        buttonTextClass="text-white"
                        arrowIcon={WhiteArrow}
                        className="w-auto"
                    />
                </div>
            </div>
        </section>
    );
}