<script setup lang="ts">
import { computed } from 'vue';
import { useTheme } from 'vuetify';
import { useUserStore } from '@KTXC/stores/userStore';
import { useIntegrationStore } from '@KTXC/stores/integrationStore';
import { useLayoutStore } from '@KTXC/stores/layoutStore';
import { useRouter } from 'vue-router';

const theme = useTheme();
const router = useRouter();
const userStore = useUserStore();
const integrationStore = useIntegrationStore();
const layoutStore = useLayoutStore();

const identityData = computed(() => userStore.user);
const profileMenuItems = computed(() => integrationStore.getItems('profile_menu'));

// Theme toggle
const isDarkMode = computed(() => theme.global.name.value === 'dark');
const toggleTheme = () => {
  const newTheme = theme.global.name.value === 'light' ? 'dark' : 'light';
  theme.global.name.value = newTheme;
  localStorage.setItem('theme', newTheme);
};

// Navigate to settings
const goToSettings = () => {
  layoutStore.setMenuMode('settings');
  // Navigate to first settings item or a default settings route
  router.push('/modules'); // TODO: Make this dynamic based on first settings menu item
};
</script>

<template>
  <!-- ---------------------------------------------- -->
  <!-- Profile Dropdown -->
  <!-- ---------------------------------------------- -->
  <div>
    <!-- User Info Header -->
    <div class="d-flex align-center pa-5">
      <v-avatar size="32" class="mr-2">
        <img src="@KTXC/assets/images/users/avatar-1.png" width="32" />
      </v-avatar>
      <div>
        <h6 class="text-h6 mb-0">
          {{ identityData?.label || 'User Name' }}
        </h6>
        <p class="text-caption mb-0">{{ identityData?.email || '' }}</p>
      </div>
    </div>
    <v-divider />
    
    <perfect-scrollbar style="max-height: 280px">
      <v-list class="py-0" aria-label="profile menu" aria-busy="true">
        <!-- Dynamic Profile Menu Items (from modules) -->
        <v-list-item
          v-for="item in profileMenuItems"
          :key="item.id"
          :to="item.toType === 'external' ? undefined : item.to"
          :href="item.toType === 'external' ? item.to : undefined"
          :target="item.toType === 'external' ? '_blank' : undefined"
          color="primary"
          rounded="0"
        >
          <template v-slot:prepend>
            <v-icon v-if="item.icon">{{ item.icon }}</v-icon>
          </template>
          <v-list-item-title class="text-h6">{{ item.label }}</v-list-item-title>
        </v-list-item>

        <v-divider v-if="profileMenuItems.length" class="my-2" />

        <!-- Theme Toggle -->
        <v-list-item @click="toggleTheme" color="primary" rounded="0">
          <template v-slot:prepend>
            <v-icon>{{ isDarkMode ? 'mdi-weather-sunny' : 'mdi-weather-night' }}</v-icon>
          </template>
          <v-list-item-title class="text-h6">{{ isDarkMode ? 'Light Mode' : 'Dark Mode' }}</v-list-item-title>
        </v-list-item>

        <!-- Go to Settings -->
        <v-list-item @click="goToSettings" color="primary" rounded="0">
          <template v-slot:prepend>
            <v-icon>mdi-cog-outline</v-icon>
          </template>
          <v-list-item-title class="text-h6">Settings</v-list-item-title>
        </v-list-item>

        <v-divider class="my-2" />

        <!-- Logout -->
        <v-list-item @click="userStore.logout()" color="secondary" rounded="0">
          <template v-slot:prepend>
            <v-icon>mdi-logout</v-icon>
          </template>
          <v-list-item-title class="text-h6">Logout</v-list-item-title>
        </v-list-item>
      </v-list>
    </perfect-scrollbar>
  </div>
</template>
