<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
    <!-- Navbar -->
    <div class="navbar bg-base-100 shadow-lg">
      <div class="navbar-start">
        <div class="dropdown">
          <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
            <IconLucideMenu class="w-5 h-5" aria-hidden="true" />
          </div>
          <ul
            tabindex="0"
            class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
          >
            <li class="pt-1 pb-2 lg:hidden">
              <button
                class="w-full flex items-center gap-2 rounded-md px-2 py-1 transition-colors text-base-content hover:bg-primary/10 hover:text-primary"
                @click="openDisplaySettings"
              >
                <IconLucideSettings class="w-4 h-4" aria-hidden="true" />
                Paramètres d'affichage
              </button>
            </li>
            <li>
              <NuxtLink
                to="/"
                class="rounded-md px-2 py-1 transition-colors"
                :class="
                  isActive('/')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
              >
                Vue d'ensemble
              </NuxtLink>
            </li>
            <li>
              <NuxtLink
                to="/machines"
                class="rounded-md px-2 py-1 transition-colors"
                :class="
                  isActive('/machines')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
              >
                Parc Machines
              </NuxtLink>
            </li>
            <li>
              <NuxtLink
                to="/machine-skeleton"
                class="rounded-md px-2 py-1 transition-colors"
                :class="
                  isActive('/machine-skeleton')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
              >
                Squelettes de machine
              </NuxtLink>
            </li>
            <li class="mt-1 border-t border-base-200 pt-2">
              <button
                type="button"
                class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
                :class="
                  isActive('/piece-category') || isActive('/pieces-catalog')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
                @click="toggleDropdown('pieces-mobile')"
                @keydown.enter.prevent="toggleDropdown('pieces-mobile')"
                @keydown.space.prevent="toggleDropdown('pieces-mobile')"
                :aria-expanded="openDropdown === 'pieces-mobile'"
              >
                <span>Pièces</span>
                <IconLucideChevronRight
                  class="h-4 w-4 transition-transform"
                  :class="openDropdown === 'pieces-mobile' ? 'rotate-90' : ''"
                  aria-hidden="true"
                />
              </button>
              <Transition name="nav-dropdown-mobile">
                <ul
                  v-if="openDropdown === 'pieces-mobile'"
                  class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
                >
                  <li>
                    <NuxtLink
                      to="/pieces-catalog"
                      class="rounded-md px-2 py-1 transition-colors block"
                      :class="
                        isActive('/pieces-catalog')
                          ? 'bg-primary/10 text-primary font-semibold'
                          : 'text-base-content hover:bg-primary/10 hover:text-primary'
                      "
                    >
                      Catalogue des pièces
                    </NuxtLink>
                  </li>
                  <li>
                    <NuxtLink
                      to="/piece-category"
                      class="rounded-md px-2 py-1 transition-colors block"
                      :class="
                        isActive('/piece-category')
                          ? 'bg-primary/10 text-primary font-semibold'
                          : 'text-base-content hover:bg-primary/10 hover:text-primary'
                      "
                    >
                      Catégorie de pièce
                    </NuxtLink>
                  </li>
                </ul>
              </Transition>
            </li>
            <li class="mt-1 border-t border-base-200 pt-2">
              <button
                type="button"
                class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
                :class="
                  isActive('/component-category') || isActive('/component-catalog')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
                @click="toggleDropdown('component-mobile')"
                @keydown.enter.prevent="toggleDropdown('component-mobile')"
                @keydown.space.prevent="toggleDropdown('component-mobile')"
                :aria-expanded="openDropdown === 'component-mobile'"
              >
                <span>Composant</span>
                <IconLucideChevronRight
                  class="h-4 w-4 transition-transform"
                  :class="openDropdown === 'component-mobile' ? 'rotate-90' : ''"
                  aria-hidden="true"
                />
              </button>
              <Transition name="nav-dropdown-mobile">
                <ul
                  v-if="openDropdown === 'component-mobile'"
                  class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
                >
                  <li>
                    <NuxtLink
                      to="/component-catalog"
                      class="block rounded-md px-2 py-1 transition-colors"
                      :class="
                        isActive('/component-catalog')
                          ? 'bg-primary/10 text-primary font-semibold'
                          : 'text-base-content hover:bg-primary/10 hover:text-primary'
                      "
                    >
                      Catalogue des composants
                    </NuxtLink>
                  </li>
                  <li>
                    <NuxtLink
                      to="/component-category"
                      class="block rounded-md px-2 py-1 transition-colors"
                      :class="
                        isActive('/component-category')
                          ? 'bg-primary/10 text-primary font-semibold'
                          : 'text-base-content hover:bg-primary/10 hover:text-primary'
                      "
                    >
                      Catégorie de composant
                    </NuxtLink>
                  </li>
                </ul>
              </Transition>
            </li>
            <li class="mt-1 border-t border-base-200 pt-2">
              <button
                type="button"
                class="flex w-full items-center justify-between rounded-md px-2 py-1 text-left transition-colors"
                :class="
                  isActive('/sites') ||
                  isActive('/documents') ||
                  isActive('/constructeurs')
                    ? 'bg-primary text-primary-content font-semibold shadow-sm'
                    : 'text-base-content hover:bg-primary/10 hover:text-primary'
                "
                @click="toggleDropdown('resources-mobile')"
                @keydown.enter.prevent="toggleDropdown('resources-mobile')"
                @keydown.space.prevent="toggleDropdown('resources-mobile')"
                :aria-expanded="openDropdown === 'resources-mobile'"
              >
                <span>Ressources liées</span>
                <IconLucideChevronRight
                  class="h-4 w-4 transition-transform"
                  :class="openDropdown === 'resources-mobile' ? 'rotate-90' : ''"
                  aria-hidden="true"
                />
              </button>
              <Transition name="nav-dropdown-mobile">
                <ul
                  v-if="openDropdown === 'resources-mobile'"
                  class="mt-2 space-y-1 rounded-md border border-base-200 bg-base-100 p-2 shadow-sm overflow-hidden"
                >
                  <li>
                    <NuxtLink
                      to="/sites"
                      class="block rounded-md px-2 py-1 transition-colors"
                      :class="
                        isActive('/sites')
                          ? 'bg-primary/10 text-primary font-semibold'
                          : 'text-base-content hover:bg-primary/10 hover:text-primary'
                      "
                    >
                      Sites
                    </NuxtLink>
                  </li>
                  <li>
                    <NuxtLink
                      to="/documents"
                      class="block rounded-md px-2 py-1 transition-colors"
                      :class="
                        isActive('/documents')
                          ? 'bg-primary/10 text-primary font-semibold'
                          : 'text-base-content hover:bg-primary/10 hover:text-primary'
                      "
                    >
                      Documents
                    </NuxtLink>
                  </li>
                  <li>
                    <NuxtLink
                      to="/constructeurs"
                      class="block rounded-md px-2 py-1 transition-colors"
                      :class="
                        isActive('/constructeurs')
                          ? 'bg-primary/10 text-primary font-semibold'
                          : 'text-base-content hover:bg-primary/10 hover:text-primary'
                      "
                    >
                      Fournisseurs
                    </NuxtLink>
                  </li>
                </ul>
              </Transition>
            </li>
          </ul>
        </div>
        <div class="flex items-center space-x-3">
          <div class="avatar placeholder">
            <div
              class="bg-primary text-primary-content rounded-lg w-10 grid place-items-center"
            >
              <IconLucideBoxes class="w-6 h-6" aria-hidden="true" />
            </div>
          </div>
          <NuxtLink to="/" class="btn btn-ghost text-xl">
            Inventaire Pro
          </NuxtLink>
        </div>
      </div>
      <div class="navbar-center hidden lg:flex">
        <ul class="menu menu-horizontal px-1">
          <li>
            <NuxtLink
              to="/"
              class="transition-colors px-3 py-2 rounded-md"
              :class="
                isActive('/')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
            >
              Vue d'ensemble
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/machines"
              class="transition-colors px-3 py-2 rounded-md"
              :class="
                isActive('/machines')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
            >
              Parc Machines
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/machine-skeleton"
              class="transition-colors px-3 py-2 rounded-md"
              :class="
                isActive('/machine-skeleton')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
            >
              Squelettes de machine
            </NuxtLink>
          </li>
          <li
            class="relative"
            @mouseenter="setDropdown('pieces-desktop')"
            @mouseleave="scheduleDropdownClose('pieces-desktop')"
            @focusin="setDropdown('pieces-desktop')"
            @focusout="scheduleDropdownClose('pieces-desktop')"
          >
            <button
              type="button"
              class="inline-flex items-center gap-1 rounded-md px-3 py-2 transition-colors"
              :class="
                isActive('/piece-category') || isActive('/pieces-catalog')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
              @click="toggleDropdown('pieces-desktop')"
              @keydown.enter.prevent="toggleDropdown('pieces-desktop')"
              @keydown.space.prevent="toggleDropdown('pieces-desktop')"
              :aria-expanded="openDropdown === 'pieces-desktop'"
            >
              Pièces
              <IconLucideChevronRight
                class="h-4 w-4 transition-transform"
                :class="openDropdown === 'pieces-desktop' ? 'rotate-90' : ''"
                aria-hidden="true"
              />
            </button>
            <Transition name="nav-dropdown-desktop">
              <ul
                v-if="openDropdown === 'pieces-desktop'"
                class="absolute left-0 top-full mt-2 w-60 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
              >
                <li>
                  <NuxtLink
                    to="/piece-category"
                    class="block rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/piece-category')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Catégorie de pièce
                  </NuxtLink>
                </li>
                <li>
                  <NuxtLink
                    to="/pieces-catalog"
                    class="block rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/pieces-catalog')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Catalogue des pièces
                  </NuxtLink>
                </li>
              </ul>
            </Transition>
          </li>
          <li
            class="relative"
            @mouseenter="setDropdown('component-desktop')"
            @mouseleave="scheduleDropdownClose('component-desktop')"
            @focusin="setDropdown('component-desktop')"
            @focusout="scheduleDropdownClose('component-desktop')"
          >
            <button
              type="button"
              class="inline-flex items-center gap-1 rounded-md px-3 py-2 transition-colors"
              :class="
                isActive('/component-category') ||
                isActive('/component-catalog')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
              @click="toggleDropdown('component-desktop')"
              @keydown.enter.prevent="toggleDropdown('component-desktop')"
              @keydown.space.prevent="toggleDropdown('component-desktop')"
              :aria-expanded="openDropdown === 'component-desktop'"
            >
              Composant
              <IconLucideChevronRight
                class="h-4 w-4 transition-transform"
                :class="openDropdown === 'component-desktop' ? 'rotate-90' : ''"
                aria-hidden="true"
              />
            </button>
            <Transition name="nav-dropdown-desktop">
              <ul
                v-if="openDropdown === 'component-desktop'"
                class="absolute left-0 top-full mt-2 w-64 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
              >
                <li>
                  <NuxtLink
                    to="/component-category"
                    class="block rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/component-category')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Catégorie de composant
                  </NuxtLink>
                </li>
                <li>
                  <NuxtLink
                    to="/component-catalog"
                    class="block rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/component-catalog')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Catalogue des composants
                  </NuxtLink>
                </li>
              </ul>
            </Transition>
          </li>
          <li
            class="relative"
            @mouseenter="setDropdown('resources-desktop')"
            @mouseleave="scheduleDropdownClose('resources-desktop')"
            @focusin="setDropdown('resources-desktop')"
            @focusout="scheduleDropdownClose('resources-desktop')"
          >
            <button
              type="button"
              class="inline-flex items-center gap-1 rounded-md px-3 py-2 transition-colors"
              :class="
                isActive('/sites') ||
                isActive('/documents') ||
                isActive('/constructeurs')
                  ? 'bg-primary text-primary-content font-semibold shadow-sm'
                  : 'text-base-content hover:bg-primary/10 hover:text-primary'
              "
              @click="toggleDropdown('resources-desktop')"
              @keydown.enter.prevent="toggleDropdown('resources-desktop')"
              @keydown.space.prevent="toggleDropdown('resources-desktop')"
              :aria-expanded="openDropdown === 'resources-desktop'"
            >
              Ressources liées
              <IconLucideChevronRight
                class="h-4 w-4 transition-transform"
                :class="openDropdown === 'resources-desktop' ? 'rotate-90' : ''"
                aria-hidden="true"
              />
            </button>
            <Transition name="nav-dropdown-desktop">
              <ul
                v-if="openDropdown === 'resources-desktop'"
                class="absolute left-0 top-full mt-2 w-60 rounded-lg border border-base-200 bg-base-100 p-2 shadow-lg z-50"
              >
                <li>
                  <NuxtLink
                    to="/sites"
                    class="block rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/sites')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Sites
                  </NuxtLink>
                </li>
                <li>
                  <NuxtLink
                    to="/documents"
                    class="block rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/documents')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Documents
                  </NuxtLink>
                </li>
                <li>
                  <NuxtLink
                    to="/constructeurs"
                    class="block rounded-md px-2 py-1 transition-colors"
                    :class="
                      isActive('/constructeurs')
                        ? 'bg-primary/10 text-primary font-semibold'
                        : 'text-base-content hover:bg-primary/10 hover:text-primary'
                    "
                  >
                    Fournisseurs
                  </NuxtLink>
                </li>
              </ul>
            </Transition>
          </li>
        </ul>
      </div>
      <div class="navbar-end">
        <div class="flex items-center gap-2">
          <!-- Bouton paramètres d'affichage -->
          <button
            class="btn btn-ghost btn-circle hidden lg:inline-flex"
            title="Paramètres d'affichage"
            @click="openDisplaySettings"
          >
            <IconLucideSettings class="w-5 h-5" aria-hidden="true" />
          </button>

          <ClientOnly>
            <div v-if="activeProfile" class="dropdown dropdown-end">
              <div
                tabindex="0"
                role="button"
                class="btn btn-ghost btn-circle avatar placeholder"
              >
                <div
                  class="bg-secondary text-secondary-content rounded-full w-10 h-10 grid place-items-center"
                >
                  <span
                    class="flex h-full w-full items-center justify-center text-sm font-semibold leading-none tracking-tight"
                  >
                    {{ activeProfileInitials }}
                  </span>
                </div>
              </div>
              <ul
                tabindex="0"
                class="menu dropdown-content mt-3 p-2 shadow bg-base-100 rounded-box w-64"
              >
                <li class="px-2 py-1 text-sm text-base-content/70">
                  Connecté en tant que<br />
                  <span class="font-semibold text-base-content">{{
                    activeProfileLabel
                  }}</span>
                </li>

                <li>
                  <NuxtLink to="/profiles/manage" class="justify-between">
                    Gestion des profils
                    <IconLucideChevronRight
                      class="w-4 h-4"
                      aria-hidden="true"
                    />
                  </NuxtLink>
                </li>
                <li>
                  <button
                    type="button"
                    class="text-error justify-between"
                    @click="handleLogout"
                  >
                    Déconnexion
                    <IconLucideLogOut class="w-4 h-4" aria-hidden="true" />
                  </button>
                </li>
              </ul>
            </div>
          </ClientOnly>
        </div>
      </div>
    </div>

    <!-- Page Content -->
    <NuxtPage />

    <!-- Toast Notifications -->
    <ToastContainer />

    <!-- Paramètres d'affichage -->
    <DisplaySettings
      :is-open="displaySettingsOpen"
      @close="closeDisplaySettings"
      @update-settings="handleSettingsUpdate"
    />

    <!-- Footer -->
    <footer class="footer p-4 bg-neutral text-neutral-content">
      <div class="items-center grid-flow-col">
        <p>@Malio 2025 · v{{ appVersion }}</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from "vue";
import { useRoute, navigateTo, useRuntimeConfig } from "#imports";
import { useProfileSession } from "~/composables/useProfileSession";
import IconLucideMenu from "~icons/lucide/menu";
import IconLucideSettings from "~icons/lucide/settings";
import IconLucideBoxes from "~icons/lucide/boxes";
import IconLucidePlus from "~icons/lucide/plus";
import IconLucideCpu from "~icons/lucide/cpu";
import IconLucideFilePlus from "~icons/lucide/file-plus";
import IconLucideMapPin from "~icons/lucide/map-pin";
import IconLucideChevronRight from "~icons/lucide/chevron-right";
import IconLucideLogOut from "~icons/lucide/log-out";

// État du modal des paramètres d'affichage
const displaySettingsOpen = ref(false);
const { activeProfile, ensureSession, logout } = useProfileSession();
const runtimeConfig = useRuntimeConfig();
const appVersion = computed(() => runtimeConfig.public?.appVersion ?? "0.1.0");

// Route active pour souligner l'onglet sélectionné dans la navbar
const route = useRoute();
const isActive = (path) => {
  if (path === "/") {
    return route.path === "/";
  }
  return route.path.startsWith(path);
};

// Ouvrir les paramètres d'affichage
const openDisplaySettings = () => {
  displaySettingsOpen.value = true;
};

// Fermer les paramètres d'affichage
const closeDisplaySettings = () => {
  displaySettingsOpen.value = false;
};

// Gérer les mises à jour des paramètres
const handleSettingsUpdate = (settings) => {
  console.log("Paramètres d'affichage mis à jour:", settings);
};

const handleLogout = async () => {
  await logout();
  await navigateTo("/profiles");
};

const openDropdown = ref(null);
let dropdownCloseTimer = null;

const setDropdown = (name) => {
  if (dropdownCloseTimer) {
    clearTimeout(dropdownCloseTimer);
    dropdownCloseTimer = null;
  }
  if (openDropdown.value !== name) {
    openDropdown.value = name;
  }
};

const scheduleDropdownClose = (name) => {
  if (dropdownCloseTimer) {
    clearTimeout(dropdownCloseTimer);
  }
  dropdownCloseTimer = setTimeout(() => {
    if (openDropdown.value === name) {
      openDropdown.value = null;
    }
    dropdownCloseTimer = null;
  }, 200);
};

const closeDropdownNow = () => {
  if (dropdownCloseTimer) {
    clearTimeout(dropdownCloseTimer);
    dropdownCloseTimer = null;
  }
  openDropdown.value = null;
};

const toggleDropdown = (name) => {
  if (openDropdown.value === name) {
    closeDropdownNow();
    return;
  }
  setDropdown(name);
};

watch(
  () => route.fullPath,
  () => {
    closeDropdownNow();
  },
);

const activeProfileLabel = computed(() => {
  if (!activeProfile.value) {
    return "Profil inconnu";
  }
  return `${activeProfile.value.firstName} ${activeProfile.value.lastName}`;
});

const activeProfileInitials = computed(() => {
  if (!activeProfile.value) {
    return "??";
  }
  const { firstName = "", lastName = "" } = activeProfile.value;
  return (
    `${firstName.charAt(0) || ""}${lastName.charAt(0) || ""}`.toUpperCase() ||
    "??"
  );
});

onMounted(async () => {
  await ensureSession();
});

onUnmounted(() => {
  if (dropdownCloseTimer) {
    clearTimeout(dropdownCloseTimer);
    dropdownCloseTimer = null;
  }
});
</script>

<style scoped>
.nav-dropdown-desktop-enter-active,
.nav-dropdown-desktop-leave-active {
  transition: opacity 0.15s ease, transform 0.15s ease;
}
.nav-dropdown-desktop-enter-from,
.nav-dropdown-desktop-leave-to {
  opacity: 0;
  transform: translateY(0.25rem);
}
.nav-dropdown-desktop-enter-to,
.nav-dropdown-desktop-leave-from {
  opacity: 1;
  transform: translateY(0);
}

.nav-dropdown-mobile-enter-active,
.nav-dropdown-mobile-leave-active {
  transition: max-height 0.2s ease, opacity 0.2s ease;
}
.nav-dropdown-mobile-enter-from,
.nav-dropdown-mobile-leave-to {
  max-height: 0;
  opacity: 0;
}
.nav-dropdown-mobile-enter-to,
.nav-dropdown-mobile-leave-from {
  max-height: 12rem;
  opacity: 1;
}
</style>
