"use client";

import { useEffect, useState } from "react";

export default function WPConsentLoader() {
  const [templateHtml, setTemplateHtml] = useState<string>("");

  // 1. Fetch live WPConsent template directly from WordPress backend
  useEffect(() => {
    async function fetchWpTemplate() {
      try {
        const res = await fetch("https://cms.terralogic.in/oculus_be/", {
          cache: "no-store",
        });
        if (res.ok) {
          const html = await res.text();
          const match = html.match(
            /<template id="wpconsent-template">([\s\S]*?)<\/template>/i
          );
          if (match && match[1]) {
            setTemplateHtml(match[1]);
          }
        }
      } catch (err) {
        console.warn("Could not fetch live WPConsent template from WP, using fallback", err);
      }
    }
    fetchWpTemplate();
  }, []);

  // 2. Initialize WPConsent script and apply styling/layout/French overrides
  useEffect(() => {
    const updateLanguageAndStyles = () => {
      const matches = document.cookie.match(/(?:^|; )lang=([^;]*)/);
      const lang = (matches ? matches[1] : "fr").toLowerCase();
      const isFr = lang === "fr";

      const container = document.getElementById("wpconsent-container");
      const shadowRoot = container?.shadowRoot;

      if (shadowRoot) {
        if (!shadowRoot.querySelector("#wpconsent-custom-styles")) {
          const style = document.createElement("style");
          style.id = "wpconsent-custom-styles";
          style.textContent = `
            #wpconsent-banner-holder {
              background-color: #ffffff !important;
              box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.06) !important;
              border-top: 1px solid #E2E8F0 !important;
              width: 100% !important;
              max-width: 100% !important;
              padding: 0 !important;
              
            }
            .wpconsent-banner {
              display: flex !important;
              flex-direction: row !important;
              align-items: center !important;
              justify-content: space-between !important;
              width: 100% !important;
              //
              margin: 0 auto !important;
              padding: 20px !important;
              background-color: #ffffff !important;
              gap: 20px !important;

            }
            .wpconsent-banner-header {
              display: none !important;
              width: 100% !important;
               max-width: 1280px !important;
            }
            .wpconsent-banner-logo {
              display: none !important;
            }
            .wpconsent-banner-body {
              flex: 1 1 auto !important;
              margin: 0 !important;
              padding: 0 !important;
              text-align: left !important;
            }
            .wpconsent-banner-message p {
              color: #334D72 !important;
              font-size: 14px !important;
              font-weight: 500 !important;
              margin: 0 !important;
              text-align: left !important;
            }
            .wpconsent-banner-footer {
              display: flex !important;
              align-items: center !important;
              gap: 12px !important;
              margin: 0 !important;
              padding: 0 !important;
              flex-shrink: 0 !important;
            }
            #wpconsent-preferences-all {
              display: none !important;
            }
            .wpconsent-accept-all {
              background-color: #1718FF !important;
              color: #ffffff !important;
              border-radius: 8px !important;
              padding: 8px 20px !important;
              font-size: 14px !important;
              font-weight: 600 !important;
            }
            .wpconsent-cancel-all {
              background-color: #F1F5F9 !important;
              color: #334D72 !important;
              border-radius: 8px !important;
              padding: 8px 20px !important;
              font-size: 14px !important;
              font-weight: 600 !important;
            }
          `;
          shadowRoot.appendChild(style);
        }

        // Only override message text if French language is active
        const messageP = shadowRoot.querySelector(".wpconsent-banner-message p");
        if (messageP && isFr) {
          messageP.textContent =
            "Nous utilisons des cookies pour améliorer votre expérience sur notre site. En utilisant notre site, vous acceptez l'utilisation des cookies.";
        }

        const rejectBtn = shadowRoot.querySelector("#wpconsent-cancel-all");
        if (rejectBtn) {
          rejectBtn.textContent = isFr ? "Refuser" : "Reject";
        }

        const acceptBtn = shadowRoot.querySelector("#wpconsent-accept-all");
        if (acceptBtn) {
          acceptBtn.textContent = isFr ? "Accepter tout" : "Accept All";
        }
      }
    };

    const initWPConsent = () => {
      if (typeof window !== "undefined" && (window as any).WPConsent) {
        try {
          (window as any).WPConsent.init();
        } catch (e) {
          console.error("WPConsent init error:", e);
        }
      }
      updateLanguageAndStyles();
    };

    const timer1 = setTimeout(initWPConsent, 150);
    const timer2 = setTimeout(updateLanguageAndStyles, 400);
    const timer3 = setTimeout(updateLanguageAndStyles, 800);

    window.addEventListener("languageChange", updateLanguageAndStyles);

    return () => {
      clearTimeout(timer1);
      clearTimeout(timer2);
      clearTimeout(timer3);
      window.removeEventListener("languageChange", updateLanguageAndStyles);
    };
  }, [templateHtml]);

  return (
    <>
      <div id="wpconsent-container" style={{ display: "none" }} />
      <template
        id="wpconsent-template"
        dangerouslySetInnerHTML={{ __html: templateHtml }}
      />
    </>
  );
}