<template>
  <div class="xt-theme-toggle">
    <!-- 简单切换按钮 -->
    <el-button
      v-if="mode === 'button'"
      :type="isDarkTheme ? 'primary' : 'default'"
      :icon="currentIcon"
      @click="toggleTheme"
      :title="buttonTitle"
      class="theme-toggle-btn"
    >
      <span v-if="showText">{{ currentLabel }}</span>
    </el-button>

    <!-- 下拉选择器 -->
    <el-select
      v-else-if="mode === 'select'"
      v-model="currentTheme"
      @change="handleThemeChange"
      :placeholder="placeholder"
      :size="size"
      class="theme-toggle-select"
    >
      <el-option
        v-for="theme in availableThemes"
        :key="theme.value"
        :label="theme.label"
        :value="theme.value"
      >
        <div class="theme-option">
          <i :class="theme.icon" class="theme-option-icon"></i>
          <span class="theme-option-label">{{ theme.label }}</span>
        </div>
      </el-option>
    </el-select>

    <!-- 分段控制器 -->
    <el-radio-group
      v-else-if="mode === 'segmented'"
      v-model="currentTheme"
      @change="handleThemeChange"
      :size="size"
      class="theme-toggle-segmented"
    >
      <el-radio-button
        v-for="theme in availableThemes"
        :key="theme.value"
        :label="theme.value"
        :title="theme.label"
      >
        <i :class="theme.icon"></i>
        <span v-if="showText" class="theme-label">{{ theme.label }}</span>
      </el-radio-button>
    </el-radio-group>

    <!-- 开关样式 -->
    <div v-else-if="mode === 'switch'" class="theme-toggle-switch">
      <div class="switch-container">
        <i class="el-icon-sunny switch-icon" :class="{ active: !isDarkTheme }"></i>
        <el-switch
          v-model="isDarkTheme"
          @change="handleSwitchChange"
          :active-color="switchActiveColor"
          :inactive-color="switchInactiveColor"
          class="theme-switch"
        />
        <i class="el-icon-moon switch-icon" :class="{ active: isDarkTheme }"></i>
      </div>
      <div v-if="showLabel" class="switch-label">
        {{ isDarkTheme ? '暗色主题' : '亮色主题' }}
      </div>
    </div>
  </div>
</template>

<script>
import { ThemeMixin } from '@/utils/theme'

export default {
  name: 'XtThemeToggle',
  mixins: [ThemeMixin],
  
  props: {
    // 显示模式：button, select, segmented, switch
    mode: {
      type: String,
      default: 'button',
      validator: value => ['button', 'select', 'segmented', 'switch'].includes(value)
    },
    
    // 组件大小
    size: {
      type: String,
      default: 'small',
      validator: value => ['large', 'medium', 'small', 'mini'].includes(value)
    },
    
    // 是否显示文本
    showText: {
      type: Boolean,
      default: false
    },
    
    // 是否显示标签（仅 switch 模式）
    showLabel: {
      type: Boolean,
      default: false
    },
    
    // 选择器占位符
    placeholder: {
      type: String,
      default: '选择主题'
    },
    
    // 开关激活颜色
    switchActiveColor: {
      type: String,
      default: '#1f2937'
    },
    
    // 开关非激活颜色
    switchInactiveColor: {
      type: String,
      default: '#f59e0b'
    }
  },

  computed: {
    availableThemes() {
      return this.$theme.getAvailableThemes()
    },

    currentIcon() {
      const iconMap = {
        light: 'el-icon-sunny',
        dark: 'el-icon-moon',
        auto: 'el-icon-monitor'
      }
      return iconMap[this.currentTheme] || 'el-icon-monitor'
    },

    currentLabel() {
      const theme = this.availableThemes.find(t => t.value === this.currentTheme)
      return theme ? theme.label : '主题'
    },

    buttonTitle() {
      return `当前主题：${this.currentLabel}，点击切换`
    }
  },

  methods: {
    toggleTheme() {
      this.$theme.toggleTheme()
    },

    handleThemeChange(theme) {
      this.$theme.setTheme(theme)
    },

    handleSwitchChange(isDark) {
      const newTheme = isDark ? 'dark' : 'light'
      this.$theme.setTheme(newTheme)
    },

    onThemeChange(event) {
      // 主题变化时的自定义处理
      this.$emit('theme-change', event)
    }
  }
}
</script>

<style lang="scss" scoped>
.xt-theme-toggle {
  display: inline-block;

  .theme-toggle-btn {
    transition: all var(--duration-200) var(--ease-out);
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow-md);
    }
  }

  .theme-toggle-select {
    min-width: 120px;

    ::v-deep .el-input__inner {
      background: var(--color-bg-card);
      border-color: var(--color-border-primary);
      color: var(--color-text-primary);
    }
  }

  .theme-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-2);

    &-icon {
      color: var(--color-text-tertiary);
      font-size: var(--font-size-base);
    }

    &-label {
      color: var(--color-text-primary);
      font-size: var(--font-size-sm);
    }
  }

  .theme-toggle-segmented {
    ::v-deep .el-radio-button__inner {
      background: var(--color-bg-card);
      border-color: var(--color-border-primary);
      color: var(--color-text-primary);
      padding: var(--spacing-2) var(--spacing-3);
      display: flex;
      align-items: center;
      gap: var(--spacing-1);
      transition: all var(--duration-200) var(--ease-out);

      &:hover {
        background: var(--color-bg-tertiary);
        color: var(--color-primary);
      }
    }

    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
      background: var(--color-primary);
      border-color: var(--color-primary);
      color: var(--color-text-inverse);
      box-shadow: var(--shadow-sm);
    }

    .theme-label {
      font-size: var(--font-size-xs);
      font-weight: var(--font-weight-medium);
    }
  }

  .theme-toggle-switch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-2);

    .switch-container {
      display: flex;
      align-items: center;
      gap: var(--spacing-3);
      padding: var(--spacing-2) var(--spacing-4);
      background: var(--color-bg-card);
      border: 1px solid var(--color-border-primary);
      border-radius: var(--radius-full);
      transition: all var(--duration-200) var(--ease-out);

      &:hover {
        box-shadow: var(--shadow-sm);
      }

      .switch-icon {
        font-size: var(--font-size-lg);
        color: var(--color-text-quaternary);
        transition: all var(--duration-200) var(--ease-out);

        &.active {
          color: var(--color-primary);
          transform: scale(1.1);
        }
      }

      .theme-switch {
        ::v-deep .el-switch__core {
          border: 1px solid var(--color-border-primary);
          background: var(--color-bg-tertiary);

          &::after {
            background: var(--color-bg-card);
            box-shadow: var(--shadow-sm);
          }
        }
      }
    }

    .switch-label {
      font-size: var(--font-size-xs);
      color: var(--color-text-tertiary);
      font-weight: var(--font-weight-medium);
    }
  }
}

// 暗色主题下的特殊样式
html.dark {
  .xt-theme-toggle {
    .theme-toggle-btn {
      &.el-button--default {
        background: var(--color-bg-tertiary);
        border-color: var(--color-border-primary);
        color: var(--color-text-primary);

        &:hover {
          background: var(--color-bg-secondary);
          border-color: var(--color-primary);
        }
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .xt-theme-toggle {
    .theme-toggle-segmented {
      .theme-label {
        display: none;
      }
    }

    .theme-toggle-switch {
      .switch-label {
        display: none;
      }
    }
  }
}
</style>
