<template>
  <div class="my-themes">
    <div class="page-header">
      <h2>🎨 我的主题</h2>
      <p class="sub">管理商城配色方案，点击卡片即可应用</p>
    </div>

    <!-- 预设主题 -->
    <div class="section">
      <div class="section-title">📦 预设主题</div>
      <div class="theme-grid">
        <div v-for="t in presets" :key="t.id" class="theme-card" :class="{ active: t.isActive }" @click="applyTheme(t)">
          <div class="card-preview">
            <div class="preview-header" :style="{ background: t.colors.headerBg }"></div>
            <div class="preview-body" :style="{ background: t.colors.pageBg }">
              <div class="preview-card" :style="{ background: t.colors.cardBg, borderColor: t.colors.borderColor }">
                <div class="preview-btn" :style="{ background: t.colors.buttonPrimary }"></div>
                <div class="preview-price" :style="{ color: t.colors.priceColor }">¥29.9</div>
              </div>
            </div>
            <div class="preview-tabbar" :style="{ background: t.colors.tabbarBg }">
              <div class="tab-dot" :style="{ background: t.colors.tabbarActive }"></div>
              <div class="tab-dot" :style="{ background: t.colors.tabbarInactive }"></div>
              <div class="tab-dot" :style="{ background: t.colors.tabbarInactive }"></div>
            </div>
          </div>
          <div class="card-info">
            <span class="theme-name">{{ t.name }}</span>
            <span class="theme-desc">{{ t.desc }}</span>
          </div>
          <div v-if="t.isActive" class="active-badge">✓ 使用中</div>
        </div>
      </div>
    </div>

    <!-- 自定义主题 -->
    <div class="section">
      <div class="section-title">
        ✏️ 自定义主题
        <el-button type="primary" size="small" @click="goCustomEditor">+ 新建自定义</el-button>
      </div>
      <div class="theme-grid" v-if="customs.length">
        <div v-for="t in customs" :key="t.id" class="theme-card" :class="{ active: t.isActive }" @click="applyTheme(t)">
          <div class="card-preview">
            <div class="preview-header" :style="{ background: t.colors.headerBg || `linear-gradient(135deg, ${t.colors.primary}, ${t.colors.primaryLight})` }"></div>
            <div class="preview-body" :style="{ background: t.colors.pageBg }">
              <div class="preview-card" :style="{ background: t.colors.cardBg, borderColor: t.colors.borderColor }">
                <div class="preview-btn" :style="{ background: t.colors.buttonPrimary }"></div>
                <div class="preview-price" :style="{ color: t.colors.priceColor }">¥29.9</div>
              </div>
            </div>
            <div class="preview-tabbar" :style="{ background: t.colors.tabbarBg }">
              <div class="tab-dot" :style="{ background: t.colors.tabbarActive }"></div>
              <div class="tab-dot" :style="{ background: t.colors.tabbarInactive }"></div>
              <div class="tab-dot" :style="{ background: t.colors.tabbarInactive }"></div>
            </div>
          </div>
          <div class="card-info">
            <span class="theme-name">{{ t.name }}</span>
            <span class="theme-desc">自定义</span>
          </div>
          <div v-if="t.isActive" class="active-badge">✓ 使用中</div>
          <div class="delete-btn" @click.stop="deleteTheme(t)">🗑️</div>
        </div>
      </div>
      <div v-else class="empty-custom">
        <p>还没有自定义主题</p>
        <el-button type="primary" size="small" @click="goCustomEditor">去创建</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
import axios from 'axios'

const router = useRouter()
const themeAPI = axios.create({ baseURL: '/api' })
themeAPI.interceptors.request.use(c => { c.headers.Authorization = 'Bearer ' + localStorage.getItem('admin_token'); return c })

const presets = ref([])
const customs = ref([])

async function fetchThemes() {
  try {
    const r = await themeAPI.get('/theme/my-themes')
    if (r.data.code === 0 || r.data.code === 200) {
      presets.value = r.data.data.presets || []
      customs.value = r.data.data.customs || []
    }
  } catch (e) {
    console.error('获取主题列表失败', e)
  }
}

async function applyTheme(theme) {
  if (theme.isActive) return
  try {
    const r = await themeAPI.put('/theme/apply', { themeId: theme.id })
    if (r.data.code === 0 || r.data.code === 200) {
      ElMessage.success(`已切换到「${theme.name}」主题`)
      fetchThemes()
    } else {
      ElMessage.error(r.data.message || '切换失败')
    }
  } catch (e) {
    ElMessage.error('切换失败')
  }
}

async function deleteTheme(theme) {
  try {
    await ElMessageBox.confirm(`确定要删除「${theme.name}」吗？`, '删除确认', { type: 'warning' })
    const r = await themeAPI.delete('/theme/custom/' + theme.dbId)
    if (r.data.code === 0 || r.data.code === 200) {
      ElMessage.success('已删除')
      fetchThemes()
    } else {
      ElMessage.error(r.data.message || '删除失败')
    }
  } catch (e) {
    if (e !== 'cancel') ElMessage.error('删除失败')
  }
}

function goCustomEditor() {
  router.push('/theme-visual')
}

onMounted(fetchThemes)
</script>

<style scoped>
.my-themes {
  padding: 20px;
}
.page-header {
  margin-bottom: 24px;
}
.page-header h2 {
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 600;
}
.sub {
  color: #999;
  font-size: 13px;
  margin: 0;
}
.section {
  margin-bottom: 32px;
}
.section-title {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.theme-card {
  position: relative;
  border: 2px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}
.theme-card:hover {
  border-color: #7C5BF7;
  box-shadow: 0 4px 12px rgba(124,91,247,0.15);
  transform: translateY(-2px);
}
.theme-card.active {
  border-color: #7C5BF7;
  box-shadow: 0 0 0 3px rgba(124,91,247,0.2);
}
.card-preview {
  height: 140px;
  display: flex;
  flex-direction: column;
}
.preview-header {
  height: 28px;
}
.preview-body {
  flex: 1;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-card {
  width: 80%;
  height: 50px;
  border-radius: 6px;
  border: 1px solid;
  padding: 8px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.preview-btn {
  width: 30px;
  height: 14px;
  border-radius: 3px;
}
.preview-price {
  font-size: 12px;
  font-weight: 700;
}
.preview-tabbar {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0 20px;
}
.tab-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.card-info {
  padding: 10px 12px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.theme-name {
  font-size: 14px;
  font-weight: 600;
}
.theme-desc {
  font-size: 12px;
  color: #999;
}
.active-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: #7C5BF7;
  color: #fff;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
}
.delete-btn {
  position: absolute;
  top: 8px;
  left: 8px;
  background: rgba(255,255,255,0.9);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
}
.theme-card:hover .delete-btn {
  opacity: 1;
}
.empty-custom {
  text-align: center;
  padding: 32px;
  color: #999;
  background: #fafafa;
  border-radius: 12px;
  border: 2px dashed #eee;
}
.empty-custom p {
  margin: 0 0 12px;
}
</style>
