"use client";

import { useEffect } from "react";

/**
 * Ports the Bootstrap behaviours (tabs, collapse, modals, accordions)
 * that the original jQuery/Bootstrap provided, using the same markup
 * attributes the PHP views already use.
 */
export default function BootstrapCompat() {
  useEffect(() => {
    const onDocumentClick = (e: MouseEvent) => {
      const target = e.target as HTMLElement;

      // Tabs: a[data-toggle="tab"]
      const tabTrigger = (target.closest('a[data-toggle="tab"]') ||
        target.closest('[data-bs-toggle="tab"]')) as HTMLAnchorElement | null;
      if (tabTrigger) {
        e.preventDefault();
        const href = tabTrigger.getAttribute("href");
        const tabList = tabTrigger.closest(".nav-tabs, .nav");
        if (tabList) {
          tabList.querySelectorAll('[data-toggle="tab"], [data-bs-toggle="tab"]').forEach((t) => {
            t.classList.remove("active");
            t.setAttribute("aria-selected", "false");
          });
          tabTrigger.classList.add("active");
          tabTrigger.setAttribute("aria-selected", "true");
        }
        const id = href?.startsWith("#") ? href.slice(1) : tabTrigger.getAttribute("data-target")?.slice(1);
        if (id) {
          const parent = tabTrigger.closest(".tab-content, .tab-vertical, .row");
          const pane = document.getElementById(id);
          if (pane) {
            (tabTrigger.closest(".tab-content, .tab-vertical, .row") || document).querySelectorAll(".tab-pane").forEach((p) => {
              p.classList.remove("active", "show", "in");
            });
            pane.classList.add("active", "show", "in");
          }
        }
        return;
      }

      // Collapse: [data-toggle="collapse"] / [data-bs-toggle="collapse"]
      const collapseTrigger = target.closest('[data-toggle="collapse"], [data-bs-toggle="collapse"]') as HTMLElement | null;
      if (collapseTrigger) {
        e.preventDefault();
        const sel = collapseTrigger.getAttribute("data-target") || collapseTrigger.getAttribute("href");
        if (sel) {
          const els = document.querySelectorAll(sel);
          els.forEach((el) => {
            el.classList.toggle("in");
            el.classList.toggle("show");
            if (el.classList.contains("show")) {
              collapseTrigger.classList.add("collapsed");
            } else {
              collapseTrigger.classList.remove("collapsed");
            }
          });
        }
        return;
      }

      // Accordion (custom theme): .accordion-box .accord-btn
      const accordBtn = target.closest(".accord-btn") as HTMLElement | null;
      if (accordBtn) {
        e.preventDefault();
        const accordion = accordBtn.closest(".accordion-box, .accordion");
        const content = accordion?.querySelector(
          `#${accordBtn.getAttribute("data-accordion")}`
        ) as HTMLElement | null;
        if (accordion) {
          accordion.querySelectorAll(".accord-btn").forEach((b) => b.classList.remove("active"));
          accordion.querySelectorAll(".accord-content").forEach((c) => {
            (c as HTMLElement).style.display = "none";
          });
        }
        if (content) {
          accordBtn.classList.add("active");
          content.style.display = "block";
        }
        return;
      }

      // Modal open: [data-toggle="modal"] / [data-bs-toggle="modal"]
      const modalTrigger = target.closest('[data-toggle="modal"], [data-bs-toggle="modal"]') as HTMLElement | null;
      if (modalTrigger) {
        e.preventDefault();
        const sel = modalTrigger.getAttribute("data-target") || modalTrigger.getAttribute("href");
        if (sel) {
          const modal = document.querySelector<HTMLElement>(sel);
          if (modal) openModal(modal);
        }
        return;
      }

      // Modal close triggers
      if (target.closest('[data-dismiss="modal"], [data-bs-dismiss="modal"]')) {
        const modal = target.closest(".modal");
        if (modal) closeModal(modal as HTMLElement);
        return;
      }
    };

    const openModal = (modal: HTMLElement) => {
      modal.classList.add("show");
      modal.style.display = "block";
      let backdrop = modal.parentElement?.querySelector(".modal-backdrop") as HTMLElement | null;
      if (!backdrop) {
        backdrop = document.createElement("div");
        backdrop.className = "modal-backdrop fade show";
        modal.parentElement?.appendChild(backdrop);
      } else {
        backdrop.classList.add("show");
      }
      document.body.classList.add("modal-open");
      const close = (e: MouseEvent) => {
        if (e.target === modal || (e.target as HTMLElement).classList.contains("modal-backdrop")) {
          closeModal(modal);
        }
      };
      setTimeout(() => modal.addEventListener("click", close), 50);
      modal.dataset.autoClose = "true";
    };

    const closeModal = (modal: HTMLElement) => {
      modal.classList.remove("show");
      modal.style.display = "none";
      const backdrop = modal.parentElement?.querySelector(".modal-backdrop");
      if (backdrop) backdrop.classList.remove("show");
      if (!document.querySelector(".modal.show")) {
        document.body.classList.remove("modal-open");
      }
    };

    document.addEventListener("click", onDocumentClick);
    return () => document.removeEventListener("click", onDocumentClick);
  }, []);

  return null;
}