<template>
  <el-drawer v-model="visible" title="主题设置" direction="rtl" size="320px">
    <div class="theme-settings">
      <!-- 主题模式 -->
      <div class="setting-section">
        <div class="section-title">主题模式</div>
        <div class="mode-options">
          <div
            v-for="mode in modeOptions"
            :key="mode.value"
            class="mode-item"
            :class="{ active: themeStore.config.mode === mode.value }"
            @click="themeStore.setMode(mode.value)"
          >
            <el-icon :size="20">
              <component :is="mode.icon" />
            </el-icon>
            <span>{{ mode.label }}</span>
          </div>
        </div>
      </div>

      <!-- 主题色 -->
      <div class="setting-section">
        <div class="section-title">主题色</div>
        <div class="color-presets">
          <el-tooltip
            effect="dark"
            v-for="(colors, key) in themeColorPresets"
            :key="key"
            :content="colors.name"
            placement="top"
          >
            <div
              class="color-item"
              :class="{ active: themeStore.config.colorScheme === key }"
              :style="{ backgroundColor: colors.primary }"
              @click="themeStore.setColorScheme(key as ThemeColorKey)"
            >
              <el-icon v-if="themeStore.config.colorScheme === key" :size="14">
                <Check />
              </el-icon>
            </div>
          </el-tooltip>
        </div>
      </div>

      <!-- 字体大小 -->
      <div class="setting-section">
        <div class="section-title">字体大小</div>
        <el-radio-group v-model="fontSize" class="font-size-group">
          <el-radio-button value="small">小</el-radio-button>
          <el-radio-button value="default">中</el-radio-button>
          <el-radio-button value="large">大</el-radio-button>
        </el-radio-group>
      </div>

      <!-- 其他选项 -->
      <div class="setting-section">
        <div class="section-title">其他设置</div>
        <div class="setting-item">
          <span>紧凑模式</span>
          <el-switch v-model="compactMode" />
        </div>
      </div>

      <!-- 重置按钮 -->
      <div class="setting-section">
        <el-button class="reset-btn" @click="themeStore.resetToDefault">
          <el-icon><RefreshRight /></el-icon>
          恢复默认设置
        </el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { Sunny, Moon, Monitor, Check, RefreshRight } from '@element-plus/icons-vue'
import { useThemeStore, type ThemeMode } from '@/store/theme'
import { themeColorPresets, type ThemeColorKey } from '@/assets/styles/theme/presets'

interface ModeOption {
  value: ThemeMode
  label: string
  icon: typeof Sunny
}

const modeOptions: ModeOption[] = [
  { value: 'light', label: '浅色', icon: Sunny },
  { value: 'dark', label: '深色', icon: Moon },
  { value: 'system', label: '跟随系统', icon: Monitor }
]

const props = defineProps<{
  modelValue: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
}>()

const themeStore = useThemeStore()

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
})

const fontSize = computed({
  get: () => themeStore.config.fontSize,
  set: (val) => themeStore.setFontSize(val)
})

const compactMode = computed({
  get: () => themeStore.config.compactMode,
  set: () => themeStore.toggleCompactMode()
})
</script>

<style lang="scss" scoped>
.theme-settings {
  padding: 0 4px;
}

.setting-section {
  margin-bottom: 28px;

  .section-title {
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--text-secondary);
    margin-bottom: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
}

.mode-options {
  display: flex;
  gap: 10px;

  .mode-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px;
    border-radius: var(--radius-lg);
    background-color: var(--bg-hover);
    cursor: pointer;
    transition: all var(--transition-base) var(--transition-timing);
    border: 2px solid transparent;

    span {
      font-size: 12px;
      color: var(--text-secondary);
    }

    &:hover {
      background-color: var(--color-primary-light-9);
    }

    &.active {
      background-color: var(--color-primary-light-9);
      border-color: var(--color-primary);

      .el-icon {
        color: var(--color-primary);
      }

      span {
        color: var(--color-primary);
        font-weight: var(--font-weight-medium);
      }
    }
  }
}

.color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;

  .color-item {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-base);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: all var(--transition-base) var(--transition-timing);
    border: 2px solid transparent;

    &:hover {
      transform: scale(1.08);
      box-shadow: var(--shadow-md);
    }

    &.active {
      border-color: var(--text-primary);
      box-shadow: 0 0 0 2px var(--bg-container);
    }
  }
}

.font-size-group {
  width: 100%;

  :deep(.el-radio-button) {
    flex: 1;

    .el-radio-button__inner {
      width: 100%;
      border-radius: var(--radius-base);
    }
  }
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-color);

  span {
    color: var(--text-regular);
    font-size: 14px;
  }

  &:last-child {
    border-bottom: none;
  }
}

.reset-btn {
  width: 100%;
  height: 40px;
  border-radius: var(--radius-base);
}
</style>
