<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">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h8m-8 6h16"></path>
            </svg>
          </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><NuxtLink to="/">Dashboard</NuxtLink></li>
            <li><NuxtLink to="/machines">Machines</NuxtLink></li>
            <li><NuxtLink to="/types">Types de Machines</NuxtLink></li>
            <li><NuxtLink to="/sites">Sites</NuxtLink></li>
            <li><NuxtLink to="/generator">Générateur</NuxtLink></li>
            <li><NuxtLink to="/documents">Documents</NuxtLink></li>
            <li><NuxtLink to="/constructeurs">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">
              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
              </svg>
            </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="link link-hover">Dashboard</NuxtLink></li>
          <li><NuxtLink to="/machines" class="link link-hover">Machines</NuxtLink></li>
          <li><NuxtLink to="/types" class="link link-hover">Types de Machines</NuxtLink></li>
          <li><NuxtLink to="/sites" class="link link-hover">Sites</NuxtLink></li>
          <li><NuxtLink to="/generator" class="link link-hover">Générateur</NuxtLink></li>
          <li><NuxtLink to="/documents" class="link link-hover">Documents</NuxtLink></li>
          <li><NuxtLink to="/constructeurs" class="link link-hover">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"
            title="Paramètres d'affichage"
          >
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
            </svg>
          </button>
          
          <!-- Menu Nouveau -->
          <div class="dropdown dropdown-end">
            <div tabindex="0" role="button" class="btn btn-primary">
              <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
              </svg>
              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">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                  </svg>
                  Nouvelle Machine
                </NuxtLink>
              </li>
              <li>
                <NuxtLink to="/generator" class="flex items-center gap-2">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                  </svg>
                  Nouveau Type
                </NuxtLink>
              </li>
              <li>
                <NuxtLink to="/sites?add=true" class="flex items-center gap-2">
                  <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
                  </svg>
                  Nouveau Site
                </NuxtLink>
              </li>
            </ul>
          </div>
        </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 } from 'vue'

// État du modal des paramètres d'affichage
const displaySettingsOpen = ref(false)

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