---
import { LogOut } from "lucide-react";
import { Image } from "astro:assets";
import HseqLogo from "../../assets/images/Logo_xs.png";
import SideBarMenuOptions from "../../components/Collaborators/NavMenus/SideBarMenuOptions";

interface Props {
  variant: "desktop" | "mobile";
}

const { variant } = Astro.props;
---

<aside
  class={`h-screen bg-white border-r w-72 flex flex-col z-50`}
  data-variant={variant}
  data-sidebar="true"
  transition:persist
>
  <!-- LOGO -->
  <div class="flex px-2 border-b h-16">
    <h1 class="flex text-lg font-bold">
      <a
        href="/collaborators"
        class="cursor-pointer flex items-center justify-between gap-2"
      >
        <Image
          src={HseqLogo}
          alt={"HSEQ Logo xs"}
          width={40}
          quality={"mid"}
          format="webp"
        />
        Panel de Colaboradores
      </a>
    </h1>
  </div>

  <!-- MENU -->
  <SideBarMenuOptions client:load />

  <!-- FOOTER USER -->
  <div class="flex justify-between p-4 gap-2 border-t">
    <div class="max-w-40">
      <p id="userFirtsName" class="text-sm font-medium"></p>
      <p id="userEmail" class="text-xs text-gray-500 truncate overflow-hidden">
      </p>
    </div>
    <button
      id="logout-btn-desktop"
      class="px-2 py-1 hidden lg:flex lg:gap-2 lg:items-center bg-blue-600/30 text-blue-600 rounded-lg"
    >
      Salir
      <LogOut />
    </button>
    <button
      id="logout-btn-mobile"
      class="px-2 py-1 lg:hidden bg-blue-600/30 text-blue-600 rounded-lg"
    >
      <LogOut />
    </button>
  </div>
</aside>

<script>
  import { $user, authStore } from "../../store/authStore";

  // Función para poblar los datos del usuario en TODOS los sidebars
  function populateUserData() {
    authStore.hydrate();

    const user = $user.get();

    // Encontrar TODOS los sidebars (desktop y mobile)
    const sidebars = document.querySelectorAll('[data-sidebar="true"]');

    sidebars.forEach((sidebar) => {
      // Asignacion del nombre de usuario
      const userElement = sidebar.querySelector(
        "#userFirtsName",
      ) as HTMLParagraphElement | null;
      if (userElement) {
        userElement.innerText = user?.firstName || "";
      }

      // Asignacion del email de usuario
      const emailElement = sidebar.querySelector(
        "#userEmail",
      ) as HTMLParagraphElement | null;
      if (emailElement) {
        emailElement.innerText = user?.email || "admin@docs.com";
      }
    });
  }

  // Función de logout
  function handleLogout() {
    authStore.logout();
    window.location.href = "/";
  }

  // Ejecutar cuando el DOM esté listo
  populateUserData();

  // También ejecutar después de cada transición de vista de Astro
  document.addEventListener("astro:page-load", () => {
    populateUserData();

    // Attach event listeners to logout buttons
    const desktopBtn = document.getElementById("logout-btn-desktop");
    const mobileBtn = document.getElementById("logout-btn-mobile");

    desktopBtn?.addEventListener("click", handleLogout);
    mobileBtn?.addEventListener("click", handleLogout);
  });
</script>