"use client";

import Image from "next/image";
import Link from "next/link";
import PinIcon from "../../../../public/images/location-pin.svg";
import PhoneIcon from "../../../../public/images/phone.svg";
import ClockIcon from "../../../../public/images/clock.svg";
import BlueArrow from "../../../../public/images/blue-arrow.svg";
import { AestheticClinicsProps } from "@/types/about-aesthetic";
import { getImageSrc } from "@/utils/image";

export default function AestheticClinics({
    heading,
    description,
    locations = [],
}: AestheticClinicsProps) {
    if (!heading && (!locations || locations.length === 0)) return null;

    // Helper to format/fix the phone details string (corrects address strings returned by CMS as phone numbers)
    const formatPhoneDetails = (details: string = "", index: number) => {
        const trimmed = (details || "").trim();
        if (index === 1) {
            // Check if it is a duplicate address or invalid format
            if (!trimmed.match(/\d{3}/) || trimmed.toLowerCase().includes("avenue")) {
                return "Tel: 058 445 11 05";
            }
            return trimmed.toLowerCase().startsWith("tel:") ? trimmed : `Tel: ${trimmed}`;
        }
        return trimmed;
    };

    return (
        <section className="mb-16 md:mb-24 xl:mb-30">
            <div className="container">
                {/* Rounded grey outer container */}
                <div className="bg-[#F2F4F6] rounded-[24px] md:rounded-[32px] p-4 md:p-10 lg:p-12 xl:p-14">
                    {/* Centered header content */}
                    <div className="max-w-[750px] mx-auto">
                        <div className="md:text-center mb-8 md:mb-12">
                            <span className="text-[12px] md:text-[14px] text-[#334D72] font-medium tracking-[0.5px] uppercase block mb-2 md:mb-3">
                                OUR CLINICS
                            </span>
                            <h2 className="text-[28px] md:text-[36px] xl:text-[40px] text-[#00204F] font-medium leading-tight mb-3 md:mb-4">
                                {heading}
                            </h2>
                            <p className="text-[15px] md:text-[16px] text-[#334D72] leading-relaxed max-w-[600px] mx-auto">
                                {description}
                            </p>
                        </div>

                        {/* 12-Column Responsive CSS Grid */}
                        <div className="grid grid-cols-12 gap-6 lg:gap-8 items-stretch">
                            {locations?.map((loc, index) => {
                                if (!loc || !loc.locationdetails) return null;
                                const detail = loc.locationdetails?.[0];
                                if (!detail) return null;

                                return (
                                    <div
                                        key={index}
                                        className="col-span-12 md:col-span-6 flex flex-col"
                                    >
                                        <article className="bg-white rounded-[20px] md:rounded-[24px] border border-[#E5E9ED] overflow-hidden flex flex-col flex-1 w-full transition-shadow duration-300 hover:shadow-md">
                                            {/* Clinic cover image */}
                                            {getImageSrc(detail.image) && (
                                                <figure className="relative aspect-[1.65/1] w-full overflow-hidden shrink-0 bg-[#F2F4F6]">
                                                    <Image
                                                        src={getImageSrc(detail.image)!}
                                                        alt={detail.location || "clinic location"}
                                                        fill
                                                        className="object-cover"
                                                        sizes="(max-width: 768px) 100vw, 50vw"
                                                    />
                                                </figure>
                                            )}

                                            {/* Clinic body content */}
                                            <div className="p-6 md:p-8 flex flex-col justify-between flex-grow">
                                                {/* Details List */}
                                                <div className="flex flex-col gap-4 flex-grow">
                                                    <h3 className="text-[18px] md:text-[22px] font-bold text-[#00204F] leading-snug">
                                                        {detail.location}
                                                    </h3>

                                                    {detail.addressdetails?.map((item, idx) => {
                                                        // Dynamic check for pin, phone, or clock svg based on index
                                                        let iconSrc = PinIcon;
                                                        if (idx === 1) iconSrc = PhoneIcon;
                                                        if (idx === 2) iconSrc = ClockIcon;

                                                        return (
                                                            <div key={idx} className="flex items-start gap-3.5">
                                                                <div className="w-[18px] h-[18px] shrink-0 mt-0.5 relative">
                                                                    <Image
                                                                        src={iconSrc}
                                                                        fill
                                                                        alt="clinic details icon"
                                                                        className="object-contain"
                                                                    />
                                                                </div>
                                                                <p className="text-[16px] text-[#00204F] leading-normal font-normal flex-1">
                                                                    {formatPhoneDetails(item.details, idx)}
                                                                </p>
                                                            </div>
                                                        );
                                                    })}
                                                </div>

                                                {/* Know More Outlined Action button */}
                                                {detail.cta && detail.cta_link && (
                                                    <div className="mt-6 shrink-0">
                                                        <Link
                                                            href={detail.cta_link}
                                                            className="inline-flex items-center gap-2 border border-[#1718F5]/30 hover:border-[#1718F5] text-[#1718F5] font-bold text-[16px] px-4 py-2 rounded-[8px] transition-all cursor-pointer bg-white"
                                                        >
                                                            {detail.cta?.trim() || ""}
                                                            <Image
                                                                src={BlueArrow}
                                                                width={16}
                                                                height={16}
                                                                alt="blue arrow icon"
                                                            />
                                                        </Link>
                                                    </div>
                                                )}
                                            </div>
                                        </article>
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    );
}