<script setup lang="ts">
  import { ref, onMounted, watch } from "vue";
  import { Button } from "@/components/ui/button";
  import {
    DropdownMenu,
    DropdownMenuContent,
    DropdownMenuItem,
    DropdownMenuTrigger,
  } from "@/components/ui/dropdown-menu";
  import { useColorMode } from "@vueuse/core";
  import { Moon, Sun, Monitor } from "lucide-vue-next";

  // Pass { disableTransition: false } to enable transitions
  const mode = useColorMode();
  const isActive = ref(false);

  // Animation effect when theme changes
  const animate = () => {
    isActive.value = true;
    setTimeout(() => {
      isActive.value = false;
    }, 700);
  };

  // Watch for theme changes to trigger animation
  watch(mode, () => {
    animate();
    // Save to localStorage for Settings page
    localStorage.setItem("darkMode", mode.value === "dark" ? "true" : "false");
  });

  // Get icon based on current theme
  const currentIcon = computed(() => {
    if (mode.value === "dark") return Moon;
    if (mode.value === "light") return Sun;
    return Monitor;
  });

  // Get text label based on current theme
  const currentModeText = computed(() => {
    if (mode.value === "dark") return "Dark";
    if (mode.value === "light") return "Light";
    return "System";
  });

  // Initialize on mount - sync with Settings page
  onMounted(() => {
    // Check if a theme preference is stored
    const storedDarkMode = localStorage.getItem("darkMode");
    if (storedDarkMode === "true") {
      mode.value = "dark";
    } else if (storedDarkMode === "false") {
      mode.value = "light";
    }
  });
</script>

<template>
  <div class="relative">
    <DropdownMenu>
      <DropdownMenuTrigger as-child>
        <Button
          variant="ghost"
          size="sm"
          class="h-9 w-9 px-0 relative"
          :class="{ 'animate-pulse': isActive }">
          <Moon
            v-if="mode === 'dark'"
            class="h-[1.2rem] w-[1.2rem] transition-all" />
          <Sun
            v-else-if="mode === 'light'"
            class="h-[1.2rem] w-[1.2rem] transition-all" />
          <Monitor v-else class="h-[1.2rem] w-[1.2rem] transition-all" />
          <span class="sr-only">Toggle theme</span>

          <!-- Theme indicator dot -->
          <span
            class="absolute bottom-1 right-1 w-1.5 h-1.5 rounded-full bg-primary"></span>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" class="mt-1 w-40">
        <DropdownMenuItem @click="mode = 'light'" class="cursor-pointer">
          <Sun class="mr-2 h-4 w-4" /> Light
          <span v-if="mode === 'light'" class="ml-auto text-xs opacity-70"
            >Active</span
          >
        </DropdownMenuItem>
        <DropdownMenuItem @click="mode = 'dark'" class="cursor-pointer">
          <Moon class="mr-2 h-4 w-4" /> Dark
          <span v-if="mode === 'dark'" class="ml-auto text-xs opacity-70"
            >Active</span
          >
        </DropdownMenuItem>
        <DropdownMenuItem @click="mode = 'auto'" class="cursor-pointer">
          <Monitor class="mr-2 h-4 w-4" /> System
          <span v-if="mode === 'auto'" class="ml-auto text-xs opacity-70"
            >Active</span
          >
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>

    <!-- Visual feedback animation when theme changes -->
    <div
      v-if="isActive"
      class="fixed inset-0 z-50 bg-background opacity-10 pointer-events-none"
      :class="{ 'animate-flash': isActive }"></div>
  </div>
</template>

<style scoped>
  @keyframes flash {
    0% {
      opacity: 0.1;
    }
    10% {
      opacity: 0.2;
    }
    100% {
      opacity: 0;
    }
  }

  .animate-flash {
    animation: flash 700ms ease-out forwards;
  }
</style>
