"use client"
import React, { useEffect, useLayoutEffect, useState, useCallback } from "react";

type CertificationLogoItem = {
    image: string;
    alt?: string;
    image_alt_tag?: string;
};

export type CertificationsData = {
    title?: string;
    logos?: CertificationLogoItem[];
};

const Card = ({ Component, size = "default" }: { Component: React.ComponentType; size?: "default" | "compact" }) => (
    <div className={` flex-shrink-0 bg-[#D9E5DB]/40 rounded-[10px] border border-[#D9D9D9] flex items-center justify-center shadow-sm ${size === "compact" ? "w-[265px] h-[153px]" : "w-[292px] h-[169px]"}`}>
        <Component />
    </div>
);

const NavBtn = ({ onClick, children, variant = "prev" }: { onClick: () => void; children: React.ReactNode; variant?: "prev" | "next" }) => (
    <button
        onClick={onClick}
        className={`w-[50px] h-[50px] rounded-full flex items-center justify-center shadow-md transition-colors ${variant === "next"
            ? "bg-[#DAE6DC] text-[#053F31] hover:bg-[#c5dcc8] border border-[#053F31]/30"
            : "bg-[#053F31] text-white hover:bg-[#0F3F32]"
            }`}
    >
        {children}
    </button>
);

const Certifications = ({ data }: { data?: CertificationsData }) => {
    const logosToRender = (data?.logos ?? []).map((logo, index) => ({
        key: `api-logo-${index}`,
        Component: () => <img src={logo.image} alt={logo.alt ?? logo.alt ?? ""} />,
    }));
    const total = logosToRender.length;

    const [isMobile, setIsMobile] = useState(true); 
    const [is2xl, setIs2xl] = useState(false);     
    const [index, setIndex] = useState(0);

    const update = useCallback(() => {
        const w = typeof window !== "undefined" ? window.innerWidth : 640;
        setIsMobile(w < 640);
        setIs2xl(w >= 1536);
    }, []);
    useLayoutEffect(() => {
        update();
        window.addEventListener("resize", update);
        return () => window.removeEventListener("resize", update);
    }, [update]);

    const visible = isMobile ? 1 : 5;

    useEffect(() => {
        if (total < 1) return;
        setIndex((prev) => Math.min(prev, total - visible));
    }, [visible, total]);

    const prev = useCallback(() => setIndex((i) => (i - 1 + total) % total), [total]);
    const next = useCallback(() => {
        setIndex((i) => {
            const n = (i + 1) % total;
            if (n === 0) setTimeout(() => setIndex(0), 0);
            return n;
        });
    }, [total]);

    const CARD_W = 292;
    const GAP = 20;
    const UNIT = CARD_W + GAP;

    const isBigScreen = !isMobile;

    if (!logosToRender.length) return null;

    return (
        <section className="mb-[50px] sm:mb-12 md:mb-14 lg:mb-16 xl:mb-[70px]">
            <div className="mx-auto md:px-[20px] md:px-[30px] max-w-7xl 2xl:max-w-[1540px]">

                <h2 className="font-lexend text-center mb-10 leading-tight text-3xl md:text-4xl">
                    {(() => {
                        const words = (data?.title ?? "").trim().split(/\s+/).filter(Boolean);
                        if (!words.length) return null;
                        const first = words[0];
                        const rest = words.slice(1).join(" ");
                        return (
                            <>
                                <span className="font-extralight">{first}</span>
                                {rest ? (
                                    <>
                                        {" "}
                                        <span className="font-medium">{rest}</span>
                                    </>
                                ) : null}
                            </>
                        );
                    })()}
                </h2>

                <div className="hidden sm:flex gap-[15px]">
                    {logosToRender.map(({ Component, key }) => (
                        <div
                            key={key}
                            className="flex-1 bg-[#D9E5DB]/40 rounded-[10px] border border-[#D9D9D9] flex items-center justify-center shadow-sm px-[10px] h-[150px] 2xl:h-[169px]"
                        >
                            <Component />
                        </div>
                    ))}
                </div>

                <div className="flex sm:hidden flex-col items-center gap-6">
                    <div className="overflow-hidden" style={{ width: CARD_W, maxWidth: "100%" }}>
                        <div
                            className="flex gap-[20px] transition-transform duration-500 ease-in-out"
                            style={{ transform: `translateX(-${index * UNIT}px)` }}
                        >
                            {logosToRender.map(({ Component, key }) => (
                                <Card key={key} Component={Component} />
                            ))}
                        </div>
                    </div>

                    <div className="flex gap-4">
                        <NavBtn onClick={prev} variant="prev">
                            <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M36 18C36 8.05888 27.9411 0 18 0C8.05887 0 0 8.05888 0 18C0 27.9411 8.05887 36 18 36C27.9411 36 36 27.9411 36 18Z" fill="#053F31" />
                                <path d="M26 18H10.5M10.5 18L16.5 12M10.5 18L16.5 24.5" stroke="#F7FAF8" strokeWidth="2" />
                            </svg>

                        </NavBtn>
                        <NavBtn onClick={next} variant="next">
                            <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M0 18C0 8.05888 8.05888 0 18 0C27.9411 0 36 8.05888 36 18C36 27.9411 27.9411 36 18 36C8.05888 36 0 27.9411 0 18Z" fill="#DAE6DC" />
                                <path d="M10 18H25.5M25.5 18L19.5 12M25.5 18L19.5 24.5" stroke="#053F31" strokeWidth="2" />
                            </svg>

                        </NavBtn>
                    </div>

                </div>

            </div>
        </section>
    );
};

export default Certifications;