<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAuthStore } from '@/stores/auth'

defineProps<{
  open: boolean
}>()

defineEmits<{
  close: []
}>()

const route = useRoute()
const { t } = useI18n()
const authStore = useAuthStore()
const modulesExpanded = ref(true)

// Core navigation - always visible
const coreNavigation = computed(() => {
  const items = [
    { name: t('nav.dashboard'), href: '/', icon: '📊' },
    { name: t('nav.orders'), href: '/orders', icon: '📋' },
  ]

  if (authStore.canManageUsers) {
    items.push({ name: t('nav.users'), href: '/users', icon: '👥' })
  }

  items.push(
    { name: t('nav.availability'), href: '/availability', icon: '🗓️' },
    { name: t('nav.timesheets'), href: '/timesheets', icon: '⏱️' },
    { name: t('nav.objects'), href: '/objects', icon: '🏢' }
  )

  return items
})

// Premium modules - shown under "Module" section
const moduleNavigation = computed(() => {
  const items = [
    { name: t('nav.qualifications'), href: '/qualifications', icon: '🎓' },
    { name: t('nav.shifts'), href: '/shifts', icon: '📅' },
    { name: t('nav.patrols'), href: '/patrols', icon: '📍' },
    { name: t('nav.incidents'), href: '/incidents', icon: '🚨' },
    { name: t('nav.documents'), href: '/documents', icon: '📁' },
    { name: t('nav.vehicles'), href: '/vehicles', icon: '🚗' },
  ]

  if (authStore.canManageUsers) {
    items.push(
      { name: t('nav.customers'), href: '/customers', icon: '🤝' },
      { name: t('nav.partnerships'), href: '/partnerships', icon: '🔗' }
    )
  }

  if (authStore.isChef) {
    items.push({ name: t('nav.billing'), href: '/billing', icon: '💰' })
  }

  return items
})

// Bottom navigation
const bottomNavigation = computed(() => {
  const items = []
  
  if (authStore.isChef) {
    items.push({ name: t('nav.modules'), href: '/modules', icon: '⚙️' })
  }
  
  items.push(
    { name: t('nav.settings'), href: '/settings', icon: '🔧' },
    { name: t('nav.help'), href: '/help', icon: '📚' }
  )

  return items
})

function isActive(href: string) {
  if (href === '/') return route.path === '/'
  return route.path.startsWith(href)
}

function toggleModules() {
  modulesExpanded.value = !modulesExpanded.value
}
</script>

<template>
  <aside
    :class="[
      'fixed inset-y-0 left-0 z-50 w-64 bg-white dark:bg-gray-800 border-r border-gray-200 dark:border-gray-700 transform transition-transform lg:translate-x-0 flex flex-col',
      open ? 'translate-x-0' : '-translate-x-full'
    ]"
  >
    <!-- Logo -->
    <div class="h-16 flex items-center px-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
      <template v-if="authStore.orgLogo">
        <img 
          :src="authStore.orgLogo" 
          :alt="authStore.orgName"
          class="h-10 max-w-[180px] object-contain"
        >
      </template>
      <template v-else>
        <span class="text-2xl font-bold text-primary-600">🔐 SeCu</span>
      </template>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 overflow-y-auto py-4 px-3">
      <!-- Core Navigation -->
      <div class="mb-4">
        <router-link
          v-for="item in coreNavigation"
          :key="item.href"
          :to="item.href"
          :class="[
            'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors',
            isActive(item.href)
              ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
              : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
          ]"
          @click="$emit('close')"
        >
          <span class="text-xl">{{ item.icon }}</span>
          <span class="font-medium">{{ item.name }}</span>
        </router-link>
      </div>

      <!-- Modules Section -->
      <div class="mb-4">
        <button
          @click="toggleModules"
          class="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider hover:text-gray-700 dark:hover:text-gray-200"
        >
          <span>{{ t('nav.modules') }}</span>
          <svg 
            :class="['w-4 h-4 transition-transform', modulesExpanded ? 'rotate-180' : '']" 
            fill="none" 
            stroke="currentColor" 
            viewBox="0 0 24 24"
          >
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
          </svg>
        </button>
        
        <div v-show="modulesExpanded" class="mt-1">
          <router-link
            v-for="item in moduleNavigation"
            :key="item.href"
            :to="item.href"
            :class="[
              'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-sm',
              isActive(item.href)
                ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
                : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
            ]"
            @click="$emit('close')"
          >
            <span class="text-lg">{{ item.icon }}</span>
            <span class="font-medium">{{ item.name }}</span>
          </router-link>
        </div>
      </div>

      <!-- Divider -->
      <div class="border-t border-gray-200 dark:border-gray-700 my-4"></div>

      <!-- Bottom Navigation -->
      <div>
        <router-link
          v-for="item in bottomNavigation"
          :key="item.href"
          :to="item.href"
          :class="[
            'flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors',
            isActive(item.href)
              ? 'bg-primary-100 text-primary-700 dark:bg-primary-900 dark:text-primary-200'
              : 'text-gray-600 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700'
          ]"
          @click="$emit('close')"
        >
          <span class="text-xl">{{ item.icon }}</span>
          <span class="font-medium">{{ item.name }}</span>
        </router-link>
      </div>
    </nav>

    <!-- User info -->
    <div class="flex-shrink-0 p-4 border-t border-gray-200 dark:border-gray-700">
      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center">
          <span class="text-primary-600 dark:text-primary-300 font-medium">
            {{ authStore.user?.first_name?.[0] }}{{ authStore.user?.last_name?.[0] }}
          </span>
        </div>
        <div class="flex-1 min-w-0">
          <p class="text-sm font-medium text-gray-900 dark:text-white truncate">
            {{ authStore.fullName }}
          </p>
          <p class="text-xs text-gray-500 dark:text-gray-400 capitalize">
            {{ authStore.user?.role }}
          </p>
        </div>
      </div>
    </div>
  </aside>
</template>
