<template>
  <div class="mode-switcher">
    <div class="flex items-center space-x-4">
      <!-- B2B/B2C Toggle -->
      <div class="flex items-center space-x-2">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">{{ $t('switchMode') }}</span>
        <button
          @click="toggleAppMode"
          class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors"
          :class="isCorporate ? 'bg-corporate-blue' : 'bg-consumer-orange'"
        >
          <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
            :class="isCorporate ? 'translate-x-6' : 'translate-x-1'"
          />
        </button>
        <span class="text-sm font-medium min-w-[60px] dark:text-gray-300">
          {{ isCorporate ? $t('corporate') : $t('consumer') }}
        </span>
      </div>

      <!-- Admin Switch (only for admins) -->
      <div v-if="showAdminSwitch" class="flex items-center space-x-2">
        <div class="h-6 w-px bg-gray-300 dark:bg-gray-600"></div>
        <button
          @click="goToAdmin"
          class="flex items-center space-x-2 px-3 py-1.5 rounded-lg bg-gradient-to-r from-gray-800 to-gray-900 dark:from-gray-700 dark:to-gray-800 text-white hover:opacity-90 transition-opacity"
        >
          <span class="text-sm">⚙️</span>
          <span class="text-sm font-medium">Admin</span>
        </button>
        <button
          v-if="isInAdminMode"
          @click="exitAdmin"
          class="px-3 py-1.5 rounded-lg bg-red-900/30 hover:bg-red-900/50 text-red-400 text-sm font-medium transition-colors"
        >
          Exit Admin
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAppModeStore } from '../stores/appModeStore'
import { useAuthStore } from '../stores/authStore'

const { t } = useI18n()
const router = useRouter()
const route = useRoute()
const appModeStore = useAppModeStore()
const authStore = useAuthStore()

const isCorporate = computed(() => appModeStore.isCorporate)
const isInAdminMode = computed(() => route.path.startsWith('/admin'))

const showAdminSwitch = computed(() => {
  // Check if user has admin privileges
  return authStore.isAdmin
})

function toggleAppMode() {
  appModeStore.toggleMode()
}

function goToAdmin() {
  router.push('/admin')
}

function exitAdmin() {
  router.push('/')
}
</script>

<style scoped>
.mode-switcher {
  font-family: 'Inter', sans-serif;
}
</style>