<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
                @click="openDisplaySettings"
                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"
              >
                <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'"
              >
                Dashboard
              </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'"
              >
                Machines
              </NuxtLink>
            </li>
            <li>
              <NuxtLink
                to="/types"
                class="rounded-md px-2 py-1 transition-colors"
                :class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
              >
                Types de Machines
              </NuxtLink>
            </li>
            <li>
              <NuxtLink
                to="/models"
                class="rounded-md px-2 py-1 transition-colors"
                :class="isActive('/models') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
              >
                Modèles
              </NuxtLink>
            </li>
            <li>
              <NuxtLink
                to="/sites"
                class="rounded-md px-2 py-1 transition-colors"
                :class="isActive('/sites') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
              >
                Sites
              </NuxtLink>
            </li>
            <li>
              <NuxtLink
                to="/generator"
                class="rounded-md px-2 py-1 transition-colors"
                :class="isActive('/generator') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
              >
                Générateur
              </NuxtLink>
            </li>
            <li>
              <NuxtLink
                to="/documents"
                class="rounded-md px-2 py-1 transition-colors"
                :class="isActive('/documents') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
              >
                Documents
              </NuxtLink>
            </li>
            <li>
              <NuxtLink
                to="/constructeurs"
                class="rounded-md px-2 py-1 transition-colors"
                :class="isActive('/constructeurs') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
              >
                Constructeurs
              </NuxtLink>
            </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'"
            >
              Dashboard
            </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'"
            >
              Machines
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/types"
              class="transition-colors px-3 py-2 rounded-md"
              :class="isActive('/types') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
            >
              Types de Machines
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/models"
              class="transition-colors px-3 py-2 rounded-md"
              :class="isActive('/models') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
            >
              Modèles
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/sites"
              class="transition-colors px-3 py-2 rounded-md"
              :class="isActive('/sites') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
            >
              Sites
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/generator"
              class="transition-colors px-3 py-2 rounded-md"
              :class="isActive('/generator') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
            >
              Générateur
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/documents"
              class="transition-colors px-3 py-2 rounded-md"
              :class="isActive('/documents') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
            >
              Documents
            </NuxtLink>
          </li>
          <li>
            <NuxtLink
              to="/constructeurs"
              class="transition-colors px-3 py-2 rounded-md"
              :class="isActive('/constructeurs') ? 'bg-primary text-primary-content font-semibold shadow-sm' : 'text-base-content hover:bg-primary/10 hover:text-primary'"
            >
              Constructeurs
            </NuxtLink>
          </li>
        </ul>
      </div>
      <div class="navbar-end">
        <div class="flex items-center gap-2">
          <!-- Bouton paramètres d'affichage -->
          <button 
            @click="openDisplaySettings" 
            class="btn btn-ghost btn-circle hidden lg:inline-flex"
            title="Paramètres d'affichage"
          >
            <IconLucideSettings class="w-5 h-5" aria-hidden="true" />
          </button>
          
          <!-- Menu Nouveau -->
          <div class="dropdown dropdown-end">
            <div tabindex="0" role="button" class="btn btn-primary">
              <IconLucidePlus class="w-5 h-5 mr-2" aria-hidden="true" />
              Nouveau
            </div>
            <ul tabindex="0" class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52">
              <li>
                <NuxtLink to="/machines?add=true" class="flex items-center gap-2">
                  <IconLucideCpu class="w-4 h-4" aria-hidden="true" />
                  Nouvelle Machine
                </NuxtLink>
              </li>
              <li>
                <NuxtLink to="/generator" class="flex items-center gap-2">
                  <IconLucideFilePlus class="w-4 h-4" aria-hidden="true" />
                  Nouveau Type
                </NuxtLink>
              </li>
              <li>
                <NuxtLink to="/sites?add=true" class="flex items-center gap-2">
                  <IconLucideMapPin class="w-4 h-4" aria-hidden="true" />
                  Nouveau Site
                </NuxtLink>
              </li>
            </ul>
          </div>

          <ClientOnly>
            <div class="dropdown dropdown-end" v-if="activeProfile">
              <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><hr class="my-1" /></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</p>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRoute, navigateTo } 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()

// 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 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()
})
</script>
