<script setup>
import { RouterLink } from 'vue-router'

defineProps({
  isOpen: {
    type: Boolean,
    default: true,
  },
})

const emit = defineEmits(['close'])

const navItems = [
  {
    name: 'Dashboard',
    to: '/admin/dashboard',
    icon: 'M3 3h8v8H3V3Zm10 0h8v5h-8V3ZM3 13h5v8H3v-8Zm7 3h11v5H10v-5Z',
  },
  {
    name: 'Configuracion',
    to: '/admin/configuracion',
    icon: 'M4 17h16M7 13V7m5 10V4m5 13v-8',
  },
  {
    name: 'Mis busquedas',
    to: '/admin/misbusquedas',
    icon: 'M16 19a4 4 0 0 0-8 0m4-8a3 3 0 1 0 0-6 3 3 0 0 0 0 6Zm8 8a3 3 0 0 0-6 0m3-5a2 2 0 1 0 0-4 2 2 0 0 0 0 4ZM4 19a3 3 0 0 1 6 0m-3-5a2 2 0 1 1 0-4 2 2 0 0 1 0 4Z',
  },
  {
    name: 'Facturacion',
    to: '/admin/facturacion',
    icon: 'M5 4h14v16l-3-2-3 2-3-2-3 2-2-1.33V4Zm4 4h6m-6 4h6',
  },
  {
    name: 'Integraciones',
    to: '/admin/integraciones',
    icon: 'M7 7h10v10H7V7Zm-4 4h4m10 0h4M11 3v4m0 10v4',
  },
]

const closeOnMobile = () => {
  if (window.matchMedia('(max-width: 767px)').matches) {
    emit('close')
  }
}
</script>

<template>
  <button
    v-if="isOpen"
    type="button"
    class="fixed inset-0 top-16 z-20 bg-slate-900/30 md:hidden"
    aria-label="Cerrar menu lateral"
    @click="emit('close')"
  />

  <aside
    :class="[
      'fixed left-0 top-16 z-30 flex h-[calc(100vh-4rem)] w-64 flex-col border-r border-slate-200 bg-white transition-transform duration-300',
      isOpen ? 'translate-x-0' : '-translate-x-full',
    ]"
  >
    <div class="border-b border-slate-200 px-6 py-4">
      <p class="text-xs font-semibold uppercase tracking-[0.2em] text-slate-400">Control Center</p>
      <h1 class="mt-1 text-lg font-semibold text-slate-900">Admin Panel</h1>
    </div>

    <nav class="flex-1 overflow-y-auto px-3 py-4">
      <ul class="space-y-1.5">
        <li v-for="item in navItems" :key="item.name">
          <RouterLink :to="item.to" custom v-slot="{ href, navigate, isActive }">
            <a
              :href="href"
              @click="(event) => { navigate(event); closeOnMobile() }"
              :class="[
                'group flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm transition',
                isActive
                  ? 'bg-indigo-50 text-indigo-600 font-semibold'
                  : 'text-slate-600 hover:bg-slate-100 hover:text-slate-900',
              ]"
            >
              <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" aria-hidden="true">
                <path
                  :d="item.icon"
                  stroke="currentColor"
                  stroke-width="1.8"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg>
              <span>{{ item.name }}</span>
            </a>
          </RouterLink>
        </li>
      </ul>
    </nav>
  </aside>
</template>
