<template>
  <div class="min-h-screen bg-gray-50">
    <!-- Mobile sidebar overlay -->
    <div
      v-if="mobileMenuOpen"
      class="md:hidden fixed inset-0 z-40 bg-black/50"
      @click="mobileMenuOpen = false"
    />

    <!-- Sidebar (desktop always visible, mobile slide-in) -->
    <aside
      class="fixed inset-y-0 z-50 flex w-56 flex-col transition-transform md:translate-x-0"
      :class="mobileMenuOpen ? 'translate-x-0' : '-translate-x-full'"
    >
      <div class="flex flex-col flex-grow bg-gray-900 overflow-y-auto">
        <div class="px-4 py-5 flex items-center justify-between">
          <h1 class="text-xl font-bold text-white">ROA AUTO</h1>
          <button @click="mobileMenuOpen = false" class="md:hidden text-gray-400 hover:text-white">
            <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="M6 18L18 6M6 6l12 12"/></svg>
          </button>
        </div>
        <nav class="flex-1 px-2 space-y-1">
          <router-link
            v-for="item in navItems"
            :key="item.path"
            :to="item.path"
            class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-300 hover:bg-gray-800 hover:text-white"
            active-class="!bg-gray-800 !text-white"
            @click="mobileMenuOpen = false"
          >
            {{ item.label }}
          </router-link>
        </nav>
        <div class="px-4 py-3 border-t border-gray-700">
          <div class="text-xs text-gray-400 mb-1">{{ auth.plan }} plan</div>
          <SyncIndicator />
          <button
            @click="logout"
            class="mt-2 w-full text-left text-sm text-gray-400 hover:text-white"
          >
            Deconectare
          </button>
        </div>
      </div>
    </aside>

    <!-- Main content -->
    <div class="md:pl-56">
      <!-- Mobile header -->
      <header class="md:hidden bg-white border-b border-gray-200 px-4 py-3 flex items-center justify-between">
        <button @click="mobileMenuOpen = true" class="text-gray-600 hover:text-gray-900">
          <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="M4 6h16M4 12h16M4 18h16"/></svg>
        </button>
        <h1 class="text-lg font-bold text-gray-900">ROA AUTO</h1>
        <SyncIndicator />
      </header>

      <main class="p-4 md:p-6 pb-20 md:pb-6">
        <slot />
      </main>

      <!-- Mobile bottom nav -->
      <nav class="md:hidden fixed bottom-0 inset-x-0 bg-white border-t border-gray-200 flex z-30">
        <router-link
          v-for="item in mobileNavItems"
          :key="item.path"
          :to="item.path"
          class="flex-1 flex flex-col items-center py-2 text-xs text-gray-500"
          active-class="!text-blue-600"
        >
          {{ item.label }}
        </router-link>
      </nav>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useAuthStore } from '../stores/auth.js'
import SyncIndicator from '../components/common/SyncIndicator.vue'

const router = useRouter()
const auth = useAuthStore()
const mobileMenuOpen = ref(false)

const navItems = [
  { path: '/dashboard', label: 'Dashboard' },
  { path: '/orders', label: 'Comenzi' },
  { path: '/vehicles', label: 'Vehicule' },
  { path: '/appointments', label: 'Programari' },
  { path: '/catalog', label: 'Catalog' },
  { path: '/settings', label: 'Setari' },
]

const mobileNavItems = [
  { path: '/dashboard', label: 'Acasa' },
  { path: '/orders', label: 'Comenzi' },
  { path: '/vehicles', label: 'Vehicule' },
  { path: '/appointments', label: 'Programari' },
  { path: '/settings', label: 'Setari' },
]

function logout() {
  auth.logout()
  router.push('/login')
}
</script>
