<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useTimerStore } from '../stores/timer'
import { useSettingsStore } from '../stores/settings'
import { useInvoicesStore } from '../stores/invoices'
import {
  LayoutDashboard,
  Clock,
  Users,
  FolderKanban,
  List,
  CalendarDays,
  Grid3X3,
  BarChart3,
  FileText,
  Settings,
  PanelLeftOpen,
  PanelLeftClose
} from 'lucide-vue-next'

const route = useRoute()
const router = useRouter()
const timerStore = useTimerStore()
const settingsStore = useSettingsStore()
const invoicesStore = useInvoicesStore()

const expanded = ref(false)

interface NavItem {
  name: string
  path: string
  icon: any
}

interface NavGroup {
  label: string
  items: NavItem[]
}

const groups: NavGroup[] = [
  {
    label: 'Track',
    items: [
      { name: 'Dashboard', path: '/', icon: LayoutDashboard },
      { name: 'Timer', path: '/timer', icon: Clock },
    ],
  },
  {
    label: 'Manage',
    items: [
      { name: 'Clients', path: '/clients', icon: Users },
      { name: 'Projects', path: '/projects', icon: FolderKanban },
      { name: 'Entries', path: '/entries', icon: List },
    ],
  },
  {
    label: 'Views',
    items: [
      { name: 'Calendar', path: '/calendar', icon: CalendarDays },
      { name: 'Timesheet', path: '/timesheet', icon: Grid3X3 },
    ],
  },
  {
    label: 'Business',
    items: [
      { name: 'Invoices', path: '/invoices', icon: FileText },
      { name: 'Reports', path: '/reports', icon: BarChart3 },
    ],
  },
]

const settingsItem: NavItem = { name: 'Settings', path: '/settings', icon: Settings }

const currentPath = computed(() => route.path)

// Only show tooltips when nav is collapsed (labels are hidden)
function tip(text: string) {
  return expanded.value ? '' : text
}

function navigate(path: string) {
  router.push(path)
}

async function toggleExpanded() {
  expanded.value = !expanded.value
  await settingsStore.updateSetting('nav_expanded', expanded.value ? 'true' : 'false')
}

// Watch for settings to load (NavRail mounts before App.vue's fetchSettings resolves)
watch(() => settingsStore.settings.nav_expanded, (val) => {
  if (val !== undefined) {
    expanded.value = val === 'true'
  }
}, { immediate: true })
</script>

<template>
  <nav
    aria-label="Main navigation"
    class="flex flex-col bg-bg-surface border-r border-border-subtle shrink-0 transition-[width] duration-200 ease-out overflow-hidden"
    :class="expanded ? 'w-[180px]' : 'w-12'"
  >
    <!-- Scrollable nav items -->
    <div class="relative flex-1 flex flex-col pt-1 overflow-y-auto overflow-x-hidden">
      <div
        v-for="(group, groupIndex) in groups"
        :key="group.label"
      >
        <!-- Section header (expanded only) -->
        <div
          class="overflow-hidden transition-[max-height,opacity] duration-200 ease-out"
          :class="expanded ? 'max-h-8 opacity-100' : 'max-h-0 opacity-0'"
        >
          <p
            class="px-3 pt-3 pb-1 text-[0.5625rem] text-text-tertiary uppercase tracking-[0.08em] font-medium truncate"
            aria-hidden="true"
          >
            {{ group.label }}
          </p>
        </div>

        <!-- Divider (collapsed only, between groups) -->
        <div
          class="mx-2.5 border-t border-border-subtle overflow-hidden transition-[max-height,opacity,margin] duration-200 ease-out"
          :class="!expanded && groupIndex > 0 ? 'max-h-2 opacity-100 my-1' : 'max-h-0 opacity-0 my-0'"
          aria-hidden="true"
        />

        <!-- Items -->
        <button
          v-for="item in group.items"
          :key="item.path"
          v-tooltip.right="tip(item.name)"
          @click="navigate(item.path)"
          class="nav-item relative w-full flex items-center h-11 transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent"
          :class="currentPath === item.path
            ? 'text-text-primary'
            : 'text-text-tertiary hover:text-text-secondary'"
          :aria-label="item.name"
          :aria-current="currentPath === item.path ? 'page' : undefined"
        >
          <!-- Active indicator -->
          <div
            class="absolute left-0 top-1 bottom-1 w-[2px] rounded-full transition-opacity duration-200"
            :class="currentPath === item.path ? 'bg-accent opacity-100' : 'opacity-0'"
            aria-hidden="true"
          />

          <!-- Fixed-width icon container - always centered in 48px -->
          <div class="relative w-12 flex items-center justify-center shrink-0">
            <component :is="item.icon" aria-hidden="true" class="w-[18px] h-[18px]" :stroke-width="1.5" />
            <span
              v-if="item.path === '/invoices' && invoicesStore.overdueCount > 0"
              class="absolute top-[-2px] right-1.5 min-w-[1rem] h-4 flex items-center justify-center text-[0.5625rem] font-bold text-white bg-status-error rounded-full px-1"
              :aria-label="`${invoicesStore.overdueCount} overdue invoices`"
            >
              {{ invoicesStore.overdueCount }}
            </span>
          </div>

          <!-- Label (fades in with expand) -->
          <span
            class="text-[0.75rem] truncate whitespace-nowrap transition-opacity duration-200"
            :class="expanded ? 'opacity-100' : 'opacity-0 pointer-events-none'"
          >
            {{ item.name }}
          </span>
        </button>
      </div>
    </div>

    <!-- Bottom section: Settings + toggle + timer -->
    <div class="flex flex-col pb-1.5 border-t border-border-subtle">
      <!-- Settings -->
      <button
        v-tooltip.right="tip(settingsItem.name)"
        @click="navigate(settingsItem.path)"
        class="nav-item relative w-full flex items-center h-11 transition-colors duration-150 focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent"
        :class="currentPath === settingsItem.path
          ? 'text-text-primary'
          : 'text-text-tertiary hover:text-text-secondary'"
        :aria-label="settingsItem.name"
        :aria-current="currentPath === settingsItem.path ? 'page' : undefined"
      >
        <!-- Active indicator -->
        <div
          class="absolute left-0 top-1 bottom-1 w-[2px] rounded-full transition-opacity duration-200"
          :class="currentPath === settingsItem.path ? 'bg-accent opacity-100' : 'opacity-0'"
          aria-hidden="true"
        />

        <div class="w-12 flex items-center justify-center shrink-0">
          <component :is="settingsItem.icon" aria-hidden="true" class="w-[18px] h-[18px]" :stroke-width="1.5" />
        </div>

        <span
          class="text-[0.75rem] truncate whitespace-nowrap transition-opacity duration-200"
          :class="expanded ? 'opacity-100' : 'opacity-0 pointer-events-none'"
        >
          {{ settingsItem.name }}
        </span>
      </button>

      <!-- Expand/collapse toggle -->
      <button
        v-tooltip.right="tip(expanded ? 'Collapse' : 'Expand')"
        @click="toggleExpanded"
        class="relative w-full flex items-center h-11 transition-colors duration-150 text-text-tertiary hover:text-text-secondary focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-accent"
        :aria-label="expanded ? 'Collapse navigation' : 'Expand navigation'"
        :aria-expanded="expanded"
      >
        <div class="w-12 flex items-center justify-center shrink-0">
          <component
            :is="expanded ? PanelLeftClose : PanelLeftOpen"
            aria-hidden="true"
            class="w-[16px] h-[16px]"
            :stroke-width="1.5"
          />
        </div>
        <span
          class="text-[0.6875rem] truncate whitespace-nowrap transition-opacity duration-200"
          :class="expanded ? 'opacity-100' : 'opacity-0 pointer-events-none'"
        >
          Collapse
        </span>
      </button>

      <!-- Timer status indicator (only when running/paused) -->
      <div
        v-if="timerStore.isRunning || timerStore.isPaused"
        class="flex items-center h-7"
        role="status"
      >
        <span class="sr-only">
          {{ timerStore.isRunning ? 'Timer running' : 'Timer paused' }}
        </span>
        <div class="w-12 flex items-center justify-center shrink-0">
          <div
            v-if="timerStore.isRunning"
            class="w-2 h-2 rounded-full bg-status-running animate-pulse-dot"
            aria-hidden="true"
          />
          <div
            v-else
            class="w-2 h-2 rounded-full bg-status-warning animate-pulse-dot"
            aria-hidden="true"
          />
        </div>
        <span
          class="text-[0.6875rem] truncate whitespace-nowrap transition-opacity duration-200"
          :class="[
            expanded ? 'opacity-100' : 'opacity-0',
            timerStore.isRunning ? 'text-status-running' : 'text-status-warning'
          ]"
        >
          {{ timerStore.isRunning ? 'Running' : 'Paused' }}
        </span>
      </div>
    </div>
  </nav>
</template>
