<template>
  <div :class="variant === 'icon' ? 'relative group' : 'w-full space-y-3'">
    <!-- Trigger: click cycles -->
    <button
      type="button"
      :class="
        variant === 'icon'
          ? 'text-art-muted hover:text-art-text transition-colors p-1'
          : 'flex items-center gap-2 text-art-muted hover:text-art-text transition-colors text-sm'
      "
      :title="themeLabel"
      :aria-label="themeLabel"
      :aria-haspopup="variant === 'icon'"
      @click="cycleTheme"
    >
      <Icon :name="themeIcon" :size="variant === 'icon' ? 20 : 18" />
      <span v-if="variant === 'label'">{{ themeLabel }}</span>
    </button>

    <!-- Desktop: hover / focus-within dropdown -->
    <div
      v-if="variant === 'icon'"
      class="absolute right-0 top-full pt-2 opacity-0 invisible pointer-events-none group-hover:opacity-100 group-hover:visible group-hover:pointer-events-auto group-focus-within:opacity-100 group-focus-within:visible group-focus-within:pointer-events-auto transition-opacity duration-150 z-[60]"
    >
      <div
        class="min-w-[9.5rem] py-1 rounded-lg border border-art-border bg-art-surface/95 backdrop-blur-md shadow-xl"
        role="menu"
      >
        <button
          v-for="opt in options"
          :key="opt.value"
          type="button"
          role="menuitemradio"
          :aria-checked="themePref === opt.value"
          class="flex w-full items-center gap-2.5 px-3 py-2 text-sm text-left transition-colors hover:bg-art-text/5"
          :class="themePref === opt.value ? 'text-art-accent' : 'text-art-muted hover:text-art-text'"
          @click.stop="setThemePref(opt.value)"
        >
          <Icon :name="opt.icon" :size="16" />
          <span>{{ opt.label }}</span>
        </button>
      </div>
    </div>

    <!-- Mobile label: inline three options -->
    <div v-else class="flex flex-col gap-0.5" role="menu">
      <button
        v-for="opt in options"
        :key="opt.value"
        type="button"
        role="menuitemradio"
        :aria-checked="themePref === opt.value"
        class="flex items-center gap-2.5 px-2 py-2 text-sm text-left rounded-md transition-colors"
        :class="themePref === opt.value ? 'text-art-accent bg-art-text/5' : 'text-art-muted hover:text-art-text hover:bg-art-text/5'"
        @click="setThemePref(opt.value)"
      >
        <Icon :name="opt.icon" :size="16" />
        <span>{{ opt.label }}</span>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTheme, type ThemePref } from '../composables/useTheme'
import Icon from './Icon.vue'

withDefaults(defineProps<{
  variant?: 'icon' | 'label'
}>(), {
  variant: 'icon',
})

const { themePref, themeIcon, themeLabel, setThemePref, cycleTheme } = useTheme()

const options: Array<{ value: ThemePref; label: string; icon: string }> = [
  { value: 'system', label: '跟随系统', icon: 'monitor' },
  { value: 'light', label: '亮色', icon: 'sun' },
  { value: 'dark', label: '暗色', icon: 'moon' },
]
</script>
