"use client";

import { useEffect, useRef, useState } from "react";

export default function AestheticsTestimonials() {
    const widgetRef = useRef<HTMLDivElement>(null);
    const [lang, setLang] = useState<"en" | "fr">("fr");

    useEffect(() => {
        const getLangFromCookie = (): "en" | "fr" => {
            const matches = document.cookie.match(/(?:^|; )lang=([^;]*)/);
            const value = matches ? matches[1]?.toLowerCase() : "fr";
            return value === "en" ? "en" : "fr";
        };

        setLang(getLangFromCookie());

        const handleLanguageUpdate = () => {
            setLang(getLangFromCookie());
        };

        window.addEventListener("languageChange", handleLanguageUpdate);
        window.addEventListener("click", handleLanguageUpdate);

        return () => {
            window.removeEventListener("languageChange", handleLanguageUpdate);
            window.removeEventListener("click", handleLanguageUpdate);
        };
    }, []);

    useEffect(() => {
        if (!widgetRef.current) return;

        widgetRef.current.innerHTML = "";

        const script = document.createElement("script");

        script.defer = true;
        script.src =
            `https://dbwx2z9xa7qt9.cloudfront.net/bundle.js?cachebust=1783599876413&lang=${lang}`;

        script.setAttribute("theme", "light");
        script.setAttribute("footer", "false");
        script.setAttribute("widget-type", "carousel");
        script.setAttribute("token", "6678908046ee15aede57f468");
        script.setAttribute(
            "apiurl",
            "https://server.onlinereviews.tech/api/v0.0.9"
        );
        script.setAttribute("stats", "true");
        script.setAttribute("addReview", "false");
        script.setAttribute("profile-pic", "true");
        script.setAttribute("review-name", "true");
        script.setAttribute("positive-stars", "true");
        script.setAttribute("wl", "true");
        script.setAttribute(
            "wlndig",
            "https://medicalreviews.chokri.ch/esthetika-UXi6ve"
        );
        script.setAttribute("lang", lang);

        script.setAttribute(
            "brandStyle",
            "%7B%22sidebar_background%22%3A%22%23000000%22%2C%22sidebar_text%22%3A%22%23ffffff%22%2C%22brand_button_text_color%22%3A%22%23ffffff%22%2C%22brand_main_color%22%3A%22%23000000%22%2C%22brand_button_border_radius%22%3A%228px%22%2C%22brand_sidebar_text_color_opacity%22%3A%22%23ffffff1a%22%2C%22brand_button_hover%22%3A%22rgb(0%2C%200%2C%200)%22%2C%22brand_button_active%22%3A%22rgb(0%2C%200%2C%200)%22%2C%22brand_main_color_opacity%22%3A%22%230000001a%22%2C%22brand_font%22%3A%22Montserrat%2CInter%2CHelvetica%2CArial%2Csans-serif%22%2C%22star_color%22%3A%22%23128c7e%22%2C%22brand_main_background%22%3A%22%23F6F8F7%22%2C%22brand_card_background%22%3A%22white%22%2C%22poweredByLink%22%3A%22https%3A%2F%2Fwww.climbo.com%22%2C%22poweredicon%22%3A%22https%3A%2F%2Frecensioni-io-static-folder.s3.eu-central-1.amazonaws.com%2Fpublic_onlinereviews%2Ffreemium%2F66774aff42a32b39f74bde3c%2Fpowered.png%22%7D"
        );

        widgetRef.current.appendChild(script);
    }, [lang]);

    return (
        <div
            ref={widgetRef}
            id="wid_1783599876413"
            className="w-full"
        />
    );
}