<template>
  <div
    class="flex items-center"
    :class="{ 'space-x-2': showNextModelLabel && !isMobile }"
  >
    <div
      v-if="showNextModelLabel && !isMobile"
      class="text-xs text-gray-500 dark:text-gray-400"
    >
      Change to {{ nextMode }}
    </div>

    <button
      @click="toggleMode"
      @focus="showNextModelLabel = true"
      @blur="showNextModelLabel = false"
      @mouseenter="!isMobile && (showNextModelLabel = true)"
      @mouseleave="!isMobile && (showNextModelLabel = false)"
      type="button"
      class="relative w-10 h-6 rounded-full bg-cover bg-center ring-1 ring-gray-300 dark:ring-gray-600 hover:ring-2 focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-all duration-300 outline-none"
      :style="{ backgroundImage: `url('${nextBg}')` }"
      aria-label="Toggle color mode"
    >
      <div
        class="absolute top-[2px] h-5 w-5 bg-no-repeat bg-contain transition-all duration-300 pointer-events-none"
        :class="{
          'left-[2px]': colorMode.preference === 'light',
          'left-[18px]': colorMode.preference === 'dark', // Adjusted for w-10 button: 40px (button) - 20px (ball) - 2px (offset) = 18px
        }"
        :style="{ backgroundImage: `url('${currentBall}')` }"
      ></div>
    </button>
  </div>
</template>

<script setup lang="ts">
import { COLORSELECTOR_BG } from '@/data/assets'; // Make sure this path is correct
import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
import { useColorMode } from '#imports'; // Assuming this is from @nuxtjs/color-mode

const colorMode = useColorMode();
const showNextModelLabel = ref(false);
const isMobile = ref(false);

const checkMobile = () => {
  if (typeof window !== 'undefined') {
    isMobile.value = window.innerWidth < 768; // Example breakpoint for mobile, adjust as needed
  }
};

// Lock system mode to resolved value on first mount
onMounted(() => {
  if (colorMode.preference === 'system') {
    colorMode.preference = colorMode.value; // colorMode.value should be the resolved mode (light/dark)
  }
  checkMobile();
  if (typeof window !== 'undefined') {
    window.addEventListener('resize', checkMobile);
  }
});

onBeforeUnmount(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('resize', checkMobile);
  }
});

// Toggling behavior: only light <--> dark
const nextMode = computed(() => {
  return colorMode.preference === 'dark' ? 'light' : 'dark';
});

// Background image based on the NEXT mode
const nextBg = computed(() =>
  nextMode.value === 'light' ? COLORSELECTOR_BG.Light : COLORSELECTOR_BG.Dark
);

// Ball image based on the CURRENT mode
const currentBall = computed(() =>
  colorMode.preference === 'light'
    ? COLORSELECTOR_BG.Sun
    : COLORSELECTOR_BG.Moon
);

// Toggle action
const toggleMode = () => {
  colorMode.preference = nextMode.value;
  // Optionally hide the label after a click on mobile if it was shown by focus
  if (isMobile.value) {
    showNextModelLabel.value = false;
    // Blur the button to remove focus styling if desired after a tap
    // if (document.activeElement instanceof HTMLElement) {
    //   document.activeElement.blur();
    // }
  }
};
</script>

<style scoped>
/* Add any additional scoped styles here if needed */
</style>
