<template>
  <router-view />
  <button class="theme-toggle" @click="toggleTheme" :title="isDark ? '切换亮色' : '切换暗色'">
    {{ isDark ? '☀️' : '🌙' }}
  </button>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const isDark = ref(false)

function toggleTheme() {
  isDark.value = !isDark.value
  document.documentElement.setAttribute('data-theme', isDark.value ? 'dark' : '')
  localStorage.setItem('theme', isDark.value ? 'dark' : 'light')
}

onMounted(() => {
  const saved = localStorage.getItem('theme')
  if (saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    isDark.value = true
    document.documentElement.setAttribute('data-theme', 'dark')
  }
})
</script>

<style>
/* =============================================
   CloudSearch Design System — Global Tokens
   ============================================= */
:root {
  /* ── Backgrounds ── */
  --bg: #f0f2f5;
  --bg-card: #ffffff;
  --bg-input: #f5f7fa;
  --bg-page: #f0f2f5;
  --bg-card-header: linear-gradient(135deg, #f8f9fc 0%, #eef1f8 100%);

  /* ── Text ── */
  --text: #1d2129;
  --text-secondary: #4e5969;
  --text-tertiary: #86909c;
  --text-placeholder: #c9cdd4;

  /* ── Borders ── */
  --border: #e5e6eb;
  --border-light: #f2f3f5;

  /* ── Primary ── */
  --primary: #409eff;
  --primary-hover: #66b1ff;
  --primary-light: rgba(64, 158, 255, 0.08);
  --primary-soft: #ecf5ff;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);

  /* ── Radius ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* ── Sizing ── */
  --sidebar-w: 240px;
}

[data-theme="dark"] {
  --bg: #141414;
  --bg-card: #1d1d1d;
  --bg-input: #2a2a2a;
  --bg-page: #0f0f0f;
  --bg-card-header: linear-gradient(135deg, #1d1d1d 0%, #1a1a1a 100%);

  --text: #e5e5e5;
  --text-secondary: #999999;
  --text-tertiary: #666666;
  --text-placeholder: #555555;

  --border: #333333;
  --border-light: #2a2a2a;

  --primary: #409eff;
  --primary-hover: #66b1ff;
  --primary-light: rgba(64, 158, 255, 0.15);
  --primary-soft: rgba(64, 158, 255, 0.1);

  --shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] body { background: var(--bg); color: var(--text); }
[data-theme="dark"] .el-card,
[data-theme="dark"] .el-dialog,
[data-theme="dark"] .el-menu,
[data-theme="dark"] .el-table,
[data-theme="dark"] .el-select-dropdown,
[data-theme="dark"] .el-popover {
  --el-bg-color: var(--bg-card) !important;
  --el-border-color: var(--border) !important;
  --el-text-color-primary: var(--text) !important;
}
[data-theme="dark"] .el-dialog__body,
[data-theme="dark"] .el-table__body td {
  background-color: var(--bg-card) !important;
}
[data-theme="dark"] .el-table__header th {
  background-color: #262626 !important;
}
[data-theme="dark"] .el-input__wrapper,
[data-theme="dark"] .el-select .el-input__wrapper {
  background-color: var(--bg-input) !important;
  border-color: var(--border) !important;
  box-shadow: 0 0 0 1px var(--border) inset !important;
}
[data-theme="dark"] .el-input__inner,
[data-theme="dark"] .el-textarea__inner {
  background-color: var(--bg-input) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .el-button--default {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text);
}

.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  transition: all 0.3s;
}
.theme-toggle:hover { transform: scale(1.1); border-color: var(--primary); }

#app { min-height: 100vh; background: var(--bg-page); color: var(--text); }

/* ── Global element-plus overrides ── */
.el-card {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.2s ease;
}
.el-card:hover {
  box-shadow: var(--shadow-md) !important;
}
.el-card__header {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--border-light) !important;
  font-weight: 600;
  font-size: 14px;
  background: var(--bg-card-header);
}
.el-card__body {
  padding: 20px !important;
}

/* ── Typography helpers ── */
.form-tip {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
}
.page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--text);
}
.section-divider {
  border-top: 1px solid var(--border-light);
  margin: 20px 0;
}

/* ── Fade transition ── */
.fade-enter-active, .fade-leave-active { transition: opacity 0.2s ease; }
.fade-enter-from, .fade-leave-to { opacity: 0; }
</style>
