<template>
  <div class="theme-customizer">
    <p class="tc-hint">
      为各主题单独调色；修改后立即预览。当前生效主题会同步应用到全站。保存系统配置时一并写入本地。
    </p>
    <el-collapse v-model="expanded" accordion>
      <el-collapse-item v-for="t in ui.availableThemes" :key="t.id" :name="t.id">
        <template #title>
          <div class="tc-title-row">
            <span class="tc-swatch" :style="swatchStyle(t.id)" />
            <span class="tc-name">{{ t.name }}</span>
            <el-tag v-if="hasCustom(t.id)" size="small" type="warning" effect="plain">已自定义</el-tag>
            <el-tag v-if="t.id === ui.themeId" size="small" type="success" effect="plain">当前</el-tag>
          </div>
        </template>
        <div class="tc-panel">
          <el-form label-width="100px" class="tc-form">
            <el-form-item
              v-for="f in THEME_COLOR_FIELDS"
              :key="f.key"
              :label="f.label">
              <div class="tc-picker-row">
                <el-color-picker
                  :model-value="ui.getThemeColor(t.id, f.key)"
                  color-format="hex"
                  :predefine="predefineColors"
                  @update:model-value="(v: string | null) => onPick(t.id, f.key, v)" />
                <span class="tc-hex">{{ ui.getThemeColor(t.id, f.key) }}</span>
                <span class="tc-field-hint">{{ f.hint }}</span>
              </div>
            </el-form-item>
          </el-form>
          <div class="tc-actions">
            <el-button size="small" @click="ui.setThemeId(t.id)">切换到此主题</el-button>
            <el-button size="small" :disabled="!hasCustom(t.id)" @click="resetOne(t.id)">恢复默认</el-button>
          </div>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div class="tc-footer">
      <el-button size="small" type="warning" plain :disabled="!anyCustom" @click="resetAll">
        重置全部主题配色
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useUiStore } from '@/stores/ui'
import { THEME_COLOR_FIELDS, type ThemeColorKey } from '@/styles/themeCustomize'
import { findTheme } from '@/styles/themes'

const ui = useUiStore()
const expanded = ref<string>(ui.themeId)

const predefineColors = [
  '#7c3aed', '#8b5cf6', '#c4b5fd', '#5b21b6', '#4c1d95',
  '#6366f1', '#a855f7', '#9333ea', '#1565c0', '#00796b',
  '#b71c1c', '#455a64', '#e65100'
]

const anyCustom = computed(() =>
  ui.availableThemes.some((t) => hasCustom(t.id))
)

function hasCustom(themeId: string): boolean {
  const o = ui.themeOverrides[themeId]
  return !!o && Object.keys(o).length > 0
}

function swatchStyle(themeId: string) {
  const merged = ui.getMergedTheme(findTheme(themeId))
  return {
    background: `linear-gradient(135deg, ${merged.preview} 0%, ${merged.previewAccent} 100%)`
  }
}

function onPick(themeId: string, key: ThemeColorKey, value: string | null) {
  if (!value) return
  ui.setThemeColor(themeId, key, value)
  if (themeId === ui.themeId) {
    ElMessage.success('已应用当前主题配色')
  }
}

function resetOne(themeId: string) {
  ui.clearThemeOverrides(themeId)
  ElMessage.info('已恢复该主题默认配色')
}

function resetAll() {
  ui.clearAllThemeOverrides()
  ElMessage.info('已恢复全部主题默认配色')
}
</script>

<style scoped>
.theme-customizer {
  margin-top: 8px;
}
.tc-hint {
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--mg-text-dim, rgba(255, 255, 255, 0.55));
  line-height: 1.5;
}
.tc-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.tc-swatch {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.tc-name {
  font-weight: 600;
  color: var(--mg-text-light, #fff);
}
.tc-panel {
  padding: 4px 8px 12px;
}
.tc-picker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tc-hex {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  color: var(--mg-text-muted, rgba(255, 255, 255, 0.75));
}
.tc-field-hint {
  font-size: 11px;
  color: var(--mg-text-dim, rgba(255, 255, 255, 0.45));
}
.tc-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-left: 100px;
}
.tc-footer {
  margin-top: 16px;
}
</style>
