"use client";

import { useEffect } from "react";
import Image from "next/image";
import Link from "next/link";
import GreenCheckIcon from "../../../../public/images/green-check.svg";
import PhoneIcon from "../../../../public/images/phone.svg";
import BlueArrowIcon from "../../../../public/images/blue-arrow.svg";
import WhiteArrowIcon from "../../../../public/images/white-arrow.svg";
import BookAnAppointmentModal from "@/components/CommonComponent/BookAppointmentModal";
import { ChoosePlanProps } from "@/types/laser-vision";

export default function ChoosePlan({ title, heading, price_cards = [], not_sure, className }: ChoosePlanProps) {
    if (!heading && (!price_cards || price_cards.length === 0)) return null;

    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);
        }
    }, []);

    return (
        <section className={`scroll-mt-20 py-16 md:py-24 bg-[#F8FAFC] ${className}`} id="pricing">
            <div className="container">
                {/* Header Section */}
                <div className="text-center max-w-[800px] mx-auto mb-8 md:mb-15">
                    <span className="text-[12px] md:text-[14px] font-medium text-[#334D72] tracking-[0.5px] uppercase block mb-2">
                        {title}
                    </span>
                    <h2 className="text-[32px] md:text-[48px] text-[#00204F] font-medium leading-[1.1]">
                        {heading}
                    </h2>
                </div>

                {/* Cards Grid: 12-column system, 3 cards on desktop (col-span-4) */}
                <div className="grid grid-cols-12 gap-6 lg:gap-8">
                    {/* Standard Pricing Plans */}
                    {price_cards?.map((priceItem, index) => (
                        <div
                            key={index}
                            className={`col-span-12 md:col-span-6 xl:col-span-4 bg-white rounded-[24px] border flex flex-col overflow-hidden transition-all duration-300 ${priceItem.tag
                                ? 'border-[#CCD2DC] md:mt-[-38px] md:h-[calc(100%+38px)]'
                                : 'border-[#CCD2DC] h-full'
                                }`}
                        >
                            {/* Recommended Highlight Bar */}
                            {priceItem.tag && (
                                <div className="bg-[#23F8FF] text-[#00204F] font-bold text-[14px] uppercase py-2 px-3 text-center">
                                    {priceItem.tag}
                                </div>
                            )}

                            {/* Card Content Area */}
                            <div className="p-5 md:p-6 xl:p-8 flex flex-col flex-grow text-center">
                                <h3 className="text-[18px] text-[#334D72] font-bold tracking-wide uppercase mb-4">
                                    {priceItem.title}
                                </h3>
                                <div className="mb-2">
                                    <span className="text-[24px] md:text-[40px] text-[#00204F] font-bold md:font-medium leading-none">
                                        {priceItem.amount}
                                    </span>
                                </div>
                                <p className="text-[12px] text-[#667995] font-bold tracking-wider uppercase mb-5">
                                    {priceItem.description}
                                </p>

                                <div className="inline-block mx-auto bg-[#E8F1FF] text-[#1718FF] text-[14px] font-bold px-4 py-1.5 rounded-full mb-8">
                                    {priceItem.range}
                                </div>

                                {/* Divider */}
                                <div className="border-t border-[#E2E8F0] mb-8"></div>

                                {/* Features List */}
                                <ul className="space-y-4 text-left flex-grow mb-10">
                                    {priceItem.points?.map((ListItem, fIndex) => (
                                        <li key={fIndex} className="flex items-start gap-3 text-[15px] text-[#334D72] font-medium leading-tight">
                                            <Image src={GreenCheckIcon} width={20} height={20} alt="check" className="shrink-0" />
                                            <span>{ListItem.point}</span>
                                        </li>
                                    ))}
                                </ul>

                                {/* CTA Button */}
                                {priceItem.cta_text && (
                                    <Link
                                        href={priceItem.cta_link}
                                        className={`w-full px-4 py-3 rounded-[16px] font-bold text-[15px] transition-all flex items-center justify-center gap-1 group ${priceItem.tag
                                            ? 'bg-[#1718FF] hover:bg-[#0f10c6] text-white shadow-md'
                                            : 'bg-white hover:bg-[#EEF2FF] text-[#1718FF] border border-[#1718FF]'
                                            }`}
                                    >
                                        <span>{priceItem.cta_text}</span>
                                        <Image
                                            src={priceItem.tag ? WhiteArrowIcon : BlueArrowIcon}
                                            width={20}
                                            height={20}
                                            alt="arrow"
                                            className="transition-transform group-hover:translate-x-1"
                                        />
                                    </Link>
                                )}
                            </div>
                        </div>
                    ))}

                    {/* Contact / Consultation Callout Card */}
                    <div className="col-span-12 md:col-span-12 xl:col-span-4 bg-white rounded-[24px] border border-[#E2E8F0] flex flex-col h-full overflow-hidden transition-all duration-300">
                        <div className="p-5 md:p-6 xl:p-8 flex flex-col flex-grow text-center">
                            <div className="w-14 h-14 rounded-full bg-[#E8F1FF] flex items-center justify-center mx-auto mb-6 shrink-0">
                                <Image src={PhoneIcon} width={24} height={24} alt="phone" />
                            </div>

                            <h3 className="text-[20px] text-[#00204F] font-bold mb-3">
                                {not_sure.title}
                            </h3>
                            <p className="text-[14px] md:text-[15px] text-[#334D72] leading-normal font-medium mb-8">
                                {not_sure.description}
                            </p>

                            <div className="border-t border-[#E2E8F0] mb-8"></div>

                            <ul className="space-y-4 text-left flex-grow mb-10">
                                {not_sure.points?.map((point, index) => (
                                    <li key={index} className="flex items-start gap-3 text-[15px] text-[#334D72] font-medium leading-tight">
                                        <Image src={GreenCheckIcon} width={20} height={20} alt="check" className="shrink-0" />
                                        <span>{point.point}</span>
                                    </li>
                                ))}
                            </ul>

                            <BookAnAppointmentModal
                                buttonBgClass="bg-white border border-[#1718FF]"
                                buttonTextClass="text-[#1718FF]"
                                className="w-full !rounded-[16px] !py-3.5 !text-[15px]"
                                buttonText={not_sure.cta_text}
                                arrowIcon={BlueArrowIcon}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}