<template>
  <el-dropdown trigger="click" @command="onSelect">
    <button class="theme-trigger" type="button" :title="`当前主题：${ui.activeTheme.name}`">
      <span class="swatch" :style="swatchStyle" />
      <span class="theme-label">{{ ui.activeTheme.name }}</span>
      <el-icon class="caret"><CaretBottom /></el-icon>
    </button>
    <template #dropdown>
      <el-dropdown-menu class="theme-menu">
        <el-dropdown-item
          v-for="t in ui.availableThemes"
          :key="t.id"
          :command="t.id"
          :class="{ 'is-active': t.id === ui.themeId }">
          <span class="option-swatch" :style="optionSwatch(t)" />
          <span class="option-text">
            <span class="option-name">{{ t.name }}</span>
            <span class="option-desc">{{ t.description }}</span>
          </span>
          <el-icon v-if="t.id === ui.themeId" class="check"><Check /></el-icon>
        </el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { CaretBottom, Check } from '@element-plus/icons-vue'
import { useUiStore } from '@/stores/ui'
import type { ThemePreset } from '@/styles/themes'

const ui = useUiStore()

const swatchStyle = computed(() => ({
  background: `linear-gradient(135deg, ${ui.activeTheme.preview} 0%, ${ui.activeTheme.previewAccent} 100%)`
}))

function optionSwatch(t: ThemePreset) {
  const merged = ui.getMergedTheme(t)
  return {
    background: `linear-gradient(135deg, ${merged.preview} 0%, ${merged.previewAccent} 100%)`
  }
}

function onSelect(id: string) {
  ui.setThemeId(id)
}
</script>

<style scoped>
/* 会话 N+2：把硬编码的白字 / 白底改成基于 --mg-* 主题变量，
 * 让 fame-lavender 浅紫主题下（header 白底）也能看清楚。
 * 默认深主题：--mg-text-light = #fff，--mg-glass-bg = rgba(255,255,255,0.06)；
 * fame-lavender：--mg-text-light = #1a0f3d 深紫，--mg-glass-bg = rgba(255,255,255,0.95) 近纯白。 */
.theme-trigger {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px 4px 8px;
  border-radius: 999px;
  border: 1px solid var(--mg-glass-border, rgba(255, 255, 255, 0.18));
  background: var(--mg-glass-bg, rgba(255, 255, 255, 0.05));
  color: var(--mg-text-light, rgba(255, 255, 255, 0.9));
  cursor: pointer;
  transition: var(--mg-transition, all 0.25s ease);
  font-size: 12.5px;
}
.theme-trigger:hover {
  background: rgba(var(--mg-accent-rgb), 0.18);
  border-color: rgba(var(--mg-accent-rgb), 0.45);
  color: var(--mg-text-light, #fff);
}
.swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--mg-glass-border-hi, rgba(255, 255, 255, 0.25));
  flex-shrink: 0;
}
.theme-label {
  font-weight: 600;
  letter-spacing: 0.3px;
  white-space: nowrap;
}
.caret {
  font-size: 12px;
  opacity: 0.7;
}
</style>

<style>
/* 下拉面板项布局（teleport 到 body，需全局样式） */
.theme-menu .el-dropdown-menu__item {
  display: flex !important;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  padding: 10px 16px !important;
}
.theme-menu .el-dropdown-menu__item.is-active {
  background: rgba(var(--mg-accent-rgb), 0.22) !important;
}
.theme-menu .option-swatch {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.theme-menu .option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}
.theme-menu .option-name {
  font-weight: 600;
  font-size: 13px;
}
.theme-menu .option-desc {
  font-size: 11px;
  opacity: 0.65;
}
.theme-menu .check {
  color: var(--mg-accent);
  font-size: 16px;
}
</style>
