import Image from 'next/image';
import WhiteArrow from '../../../../public/images/white-arrow.svg';
import BannerImg from '../../../../public/images/about-banner.png'
import { ClinicSubLocationsBannerProps } from '@/types/clinic-buelle';
import BookAnAppointmentModal from '@/components/CommonComponent/BookAppointmentModal';

const LOCATION_MAPS: Record<string, string> = {
    buelle: "https://maps.google.com/maps?q=Oculus+Bulle,+Switzerland&t=&z=16&ie=UTF8&iwloc=&output=embed",
    lausanne: "https://maps.google.com/maps?q=Oculus+Lausanne,+Switzerland&t=&z=16&ie=UTF8&iwloc=&output=embed",
    renens: "https://maps.google.com/maps?q=Oculus+Renens,+Switzerland&t=&z=16&ie=UTF8&iwloc=&output=embed",
    romont: "https://maps.google.com/maps?q=Oculus+Romont,+Switzerland&t=&z=16&ie=UTF8&iwloc=&output=embed",
};

const CLINIC_BUSINESS_NAMES: Record<string, string> = {
    buelle: "Oculus Bulle",
    lausanne: "Oculus Lausanne",
    renens: "Oculus Renens",
    romont: "Oculus Romont",
};

export default function ClinicSubLocationsBanner({
    title,
    clinic_address_details = [],
    image,
    cta,
    map_embed_url,
    locationSlug
}: ClinicSubLocationsBannerProps) {
    // Dynamically locate the address entry from clinic_address_details
    const addressItem = clinic_address_details?.find(
        (item) =>
            item.title?.toLowerCase().includes("address") ||
            item.title?.toLowerCase().includes("adresse")
    );

    const extractedAddress = addressItem?.details
        ? addressItem.details.replace(/\r?\n|\r/g, " ").trim()
        : null;

    // Generate Google Maps pin embed URL for the clinic business/address
    const dynamicAddressMapUrl = extractedAddress
        ? `https://maps.google.com/maps?q=${encodeURIComponent(extractedAddress)}&t=&z=16&ie=UTF8&iwloc=&output=embed`
        : null;

    const activeMapUrl =
        map_embed_url ||
        dynamicAddressMapUrl ||
        (locationSlug ? LOCATION_MAPS[locationSlug.toLowerCase()] : null);

    // Direct Google Maps Business Profile Listing URL (e.g. Oculus Bulle, Oculus Lausanne)
    const businessQuery =
        (locationSlug && CLINIC_BUSINESS_NAMES[locationSlug.toLowerCase()])
            ? CLINIC_BUSINESS_NAMES[locationSlug.toLowerCase()]
            : (title ? `Oculus ${title.replace(/^Clinic\s+/i, "")}` : extractedAddress);

    const googleMapsUrl = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(businessQuery || "Oculus Cliniques")}`;

    return (
        <section className="mb-16 md:mb-20 xl:mb-30">
            <div className="container">
                <div className="grid grid-cols-12 gap-5 items-center">
                    <div className="col-span-12 md:col-span-6">
                        <h1 className="text-[32px] xl:text-[48px] text-[#00204F] font-medium leading-[1.2] max-w-[500px] mb-3 md:mb-6">{title}</h1>
                        <ul className="grid grid-cols-1 md:grid-cols-12 md:mb-8 xl:mb-12">
                            {clinic_address_details?.map((clinic, index) => (
                                <li key={index} className="flex items-start md:col-span-12 mb-2 gap-x-3 last:mb-0">
                                    <div className="shrink-0 pt-0.5">
                                        <Image src={clinic.icon} width={24} height={24} alt={clinic.title || "Icon"} />
                                    </div>
                                    <div className="text-[14px] md:text-[16px] leading-[1.5]">
                                        <span className="text-[#00204F] font-normal mr-1">{clinic.title}</span>
                                        <span className="text-[14px] md:text-[16px] text-[#334D72] font-medium whitespace-pre-line">{clinic.details}</span>
                                    </div>
                                </li>
                            ))}
                        </ul>
                        <div className="hidden md:block">
                            <BookAnAppointmentModal
                                buttonBgClass="bg-[#1718FF]"
                                buttonTextClass="text-[#fff]"
                                buttonText={cta}
                                arrowIcon={WhiteArrow}
                            />
                        </div>
                    </div>
                    <div className="col-span-12 md:col-span-6">
                        <figure className="mb-8 md:mb-0 rounded-[24px] overflow-hidden aspect-[4/3] w-full border border-[#2B4263] bg-[#1E304B] shadow-md relative group">
                            {activeMapUrl ? (
                                <>
                                    <div className="w-full h-full overflow-hidden relative">
                                        <iframe
                                            src={activeMapUrl}
                                            width="100%"
                                            height="100%"
                                            style={{ border: 0 }}
                                            allowFullScreen
                                            loading="lazy"
                                            referrerPolicy="no-referrer-when-downgrade"
                                            title={`${title || "Clinic"} Map Location`}
                                            className="w-full h-full border-0 scale-[1.28] origin-center [filter:invert(88%)_sepia(65%)_hue-rotate(185deg)_saturate(250%)_brightness(88%)_contrast(115%)] transition-all duration-300 pointer-events-auto"
                                        />
                                    </div>
                                    {/* Interactive Clickable Cyan Pin Overlay */}
                                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none z-10">
                                        <a
                                            href={googleMapsUrl}
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            title="View Clinic Location on Google Maps"
                                            className="relative flex items-center justify-center pointer-events-auto group/pin cursor-pointer transition-transform duration-200 hover:scale-110"
                                        >
                                            {/* Soft Cyan Glow */}
                                            <span className="absolute w-10 h-10 rounded-full bg-[#4ADEDE] blur-md opacity-60 group-hover/pin:opacity-90 transition-opacity"></span>
                                            {/* Cyan Pin Icon */}
                                            <svg
                                                width="44"
                                                height="52"
                                                viewBox="0 0 24 28"
                                                fill="none"
                                                xmlns="http://www.w3.org/2000/svg"
                                                className="relative drop-shadow-[0_4px_16px_rgba(74,222,222,0.7)]"
                                            >
                                                <path
                                                    d="M12 0C5.37 0 0 5.37 0 12C0 21 12 28 12 28C12 28 24 21 24 12C24 5.37 18.63 0 12 0ZM12 16C9.79 16 8 14.21 8 12C8 9.79 9.79 8 12 8C14.21 8 16 9.79 16 12C16 14.21 14.21 16 12 16Z"
                                                    fill="#4ADEDE"
                                                />
                                                <circle cx="12" cy="12" r="3.5" fill="#1E304B" />
                                            </svg>
                                        </a>
                                    </div>

                                    {/* View Location Link Badge */}
                                    <a
                                        href={googleMapsUrl}
                                        target="_blank"
                                        rel="noopener noreferrer"
                                        className="absolute bottom-4 right-4 z-20 inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[#1E304B]/90 backdrop-blur-md border border-[#4ADEDE]/40 text-[#4ADEDE] hover:text-white hover:bg-[#1718FF] hover:border-[#1718FF] text-[13px] font-semibold transition-all shadow-lg pointer-events-auto"
                                    >
                                        <span>View Location</span>
                                        <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                            <path d="M3.5 1.5H10.5V8.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                                            <path d="M10.5 1.5L1.5 10.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                                        </svg>
                                    </a>
                                </>
                            ) : (
                                <Image
                                    src={image || BannerImg}
                                    width={630}
                                    height={460}
                                    alt={title || "Where Precision Medicine Meets Patient-Centered Care"}
                                    className="w-full h-full object-cover rounded-[16px]"
                                    priority
                                />
                            )}
                        </figure>

                        <div className="md:hidden">
                            <BookAnAppointmentModal
                                buttonBgClass="bg-[#1718FF]"
                                buttonTextClass="text-[#fff]"
                                buttonText={cta}
                                arrowIcon={WhiteArrow}
                                className="w-full justify-center"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}