<script setup lang="ts">
import { computed } from 'vue';
import { useUserStore } from '@KTXC/stores/userStore';
import { useIntegrationStore } from '@KTXC/stores/integrationStore';
import { useLayoutStore } from '@KTXC/stores/layoutStore';
import { useRouter } from 'vue-router';
import { useL10n, t as tGlobal } from '@KTXC/composables/useL10n';
import defaultAvatar from '@KTXC/assets/images/users/avatar-1.png';

const { t } = useL10n('core');

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

const userAuth = computed(() => userStore.auth);
const profileMenuItems = computed(() => integrationStore.getItems('profile_menu'));
const userAvatar = computed(() => userStore.getProfileField('avatar') || defaultAvatar);
const userName = computed(() => {
  const given = userStore.getProfileField('name_given');
  const family = userStore.getProfileField('name_family');
  if (given && family) return `${given} ${family}`;
  return userAuth.value?.label || 'User';
});
const userEmail = computed(() => userStore.getProfileField('email') || '');

// Theme mode cycle: light -> dark -> system, driven by the stored preference
// (not the resolved theme name, which never reads 'system')
const THEME_MODES = ['light', 'dark', 'system'] as const;
type ThemeMode = (typeof THEME_MODES)[number];

const MODE_PRESENTATION: Record<ThemeMode, { icon: string; l10n: string; label: string }> = {
  light: { icon: 'mdi-weather-sunny', l10n: 'userMenu.lightMode', label: 'Light Mode' },
  dark: { icon: 'mdi-weather-night', l10n: 'userMenu.darkMode', label: 'Dark Mode' },
  system: { icon: 'mdi-theme-light-dark', l10n: 'userMenu.systemMode', label: 'System Mode' },
};

const themeMode = computed(() => (layoutStore.theme ?? 'light') as ThemeMode);
const nextThemeMode = computed(() => THEME_MODES[(THEME_MODES.indexOf(themeMode.value) + 1) % THEME_MODES.length]);
const cycleTheme = () => {
  // App.vue watches layoutStore.theme and applies it via theme.change()
  layoutStore.setTheme(nextThemeMode.value);
};

// 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 pb-4">
      <v-avatar size="40" class="mr-3">
        <v-img :src="userAvatar" :alt="userName" cover />
      </v-avatar>
      <div class="flex-grow-1">
        <h6 class="text-h6 mb-0 font-weight-medium">
          {{ userName }}
        </h6>
        <p class="text-caption mb-0 text-medium-emphasis">{{ userEmail }}</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">{{ tGlobal(item.l10n, item.label) }}</v-list-item-title>
        </v-list-item>

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

        <!-- Theme Mode Cycle (light -> dark -> system) -->
        <v-list-item @click="cycleTheme" color="primary" rounded="0">
          <template v-slot:prepend>
            <v-icon>{{ MODE_PRESENTATION[nextThemeMode].icon }}</v-icon>
          </template>
          <v-list-item-title class="text-h6">{{ t(MODE_PRESENTATION[nextThemeMode].l10n, MODE_PRESENTATION[nextThemeMode].label) }}</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">{{ t('userMenu.settings', '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">{{ t('userMenu.logout', 'Logout') }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </perfect-scrollbar>
  </div>
</template>
