<script setup lang="ts">
  /**
   * Navigation Component
   * -------------------
   * This component renders the app's navigation menu with links.
   * It's similar to a Navigation component in React that might use React Router.
   */

  import { defineComponent } from "vue";
  import {
    Home,
    LogIn,
    Info,
    PieChart,
    Plus,
    CreditCard,
    Settings,
    Shield,
    Tag,
  } from "lucide-vue-next"; // Icon library (equivalent to something like react-icons)
  import { useAuthStore } from "@/stores/auth";

  // defineComponent is optional in <script setup> but provides better TypeScript support and naming
  // In React, this would be like: function Navigation() { ... }
  defineComponent({
    name: "Navigation", // Component name for debugging
  });

  const authStore = useAuthStore();

  /**
   * Note: With <script setup>, we don't need to explicitly export the component
   * All top-level variables and functions are automatically available in the template
   * There's no explicit "return" of JSX like in React functional components
   */
</script>

<template>
  <!-- 
    Vue Template Section
    -------------------
    This is similar to the JSX returned by a React component
    Key differences:
    - Vue uses <router-link> instead of React Router's <Link>
    - Vue directives use v- prefix (v-if, v-for, etc.) instead of React's { } expressions
    - Vue uses 'class' attribute directly instead of React's 'className'
    - Vue's binding syntax is :prop="value" instead of React's prop={value}
  -->
  <div class="py-2">
    <ul class="space-y-1">
      <!-- Auth-required links -->
      <template v-if="authStore.isAuthenticated">
        <li>
          <router-link
            to="/"
            class="flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors"
            active-class="bg-secondary">
            <Home class="mr-3 h-5 w-5" />
            Dashboard
          </router-link>
        </li>
        <li>
          <router-link
            to="/transactions"
            class="flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors"
            active-class="bg-secondary">
            <CreditCard class="mr-3 h-5 w-5" />
            Transactions
          </router-link>
        </li>
        <li>
          <router-link
            to="/add"
            class="flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors"
            active-class="bg-secondary">
            <Plus class="mr-3 h-5 w-5" />
            Add Transaction
          </router-link>
        </li>
        <li>
          <router-link
            to="/reports"
            class="flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors"
            active-class="bg-secondary">
            <PieChart class="mr-3 h-5 w-5" />
            Reports
          </router-link>
        </li>
        <li>
          <router-link
            to="/categories"
            class="flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors"
            active-class="bg-secondary">
            <Tag class="mr-3 h-5 w-5" />
            Categories
          </router-link>
        </li>
        <li>
          <router-link
            to="/settings"
            class="flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors"
            active-class="bg-secondary">
            <Settings class="mr-3 h-5 w-5" />
            Settings
          </router-link>
        </li>

        <!-- Admin only link -->
        <li v-if="authStore.user?.role === 'admin'">
          <router-link
            to="/admin/categories"
            class="flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors"
            active-class="bg-secondary">
            <Shield class="mr-3 h-5 w-5" />
            Manage Categories
          </router-link>
        </li>
      </template>

      <!-- Guest links -->
      <li v-if="!authStore.isAuthenticated">
        <router-link
          to="/login"
          class="flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors hover:bg-secondary"
          active-class="bg-secondary">
          <LogIn class="mr-3 h-5 w-5" />
          Login
        </router-link>
      </li>
      <li>
        <router-link
          to="/about"
          class="flex items-center px-4 py-2 text-sm font-medium rounded-md transition-colors"
          active-class="bg-secondary">
          <Info class="mr-3 h-5 w-5" />
          About
        </router-link>
      </li>
    </ul>
  </div>
</template>

<!--
  Notes for React developers:
  1. In Vue, you don't need to import React or use React.Fragment
  2. Vue templates can have multiple root elements without needing a wrapper
  3. Vue's router-link handles active states out of the box (no need for useLocation hook)
  4. Vue components have built-in optimization - no need for memo or useMemo in most cases
-->
