<script setup lang="ts">
import { useColorMode } from '@vueuse/core';

// 使用 VueUse 的 useColorMode
const mode = useColorMode({
  attribute: 'data-theme',
  modes: {
    light: 'light',
    dark: 'dark',
  },
  storageKey: 'yi-theme',
  initialValue: 'light',
});

// 是否正在切换动画中
const isAnimating = ref(false);

// 切换主题（带动画）
async function toggleTheme(event: MouseEvent) {
  // 如果正在动画中，不执行
  if (isAnimating.value) return;

  const newTheme = mode.value === 'dark' ? 'light' : 'dark';

  // 检查浏览器是否支持 View Transitions API
  if (!document.startViewTransition) {
    mode.value = newTheme;
    return;
  }

  isAnimating.value = true;

  // 获取点击位置
  const x = event.clientX;
  const y = event.clientY;

  // 计算最大半径（从点击位置到最远角落的距离）
  const maxRadius = Math.hypot(
    Math.max(x, window.innerWidth - x),
    Math.max(y, window.innerHeight - y),
  );

  // 设置 CSS 变量用于动画
  document.documentElement.style.setProperty('--theme-transition-x', `${x}px`);
  document.documentElement.style.setProperty('--theme-transition-y', `${y}px`);
  document.documentElement.style.setProperty('--theme-transition-radius', `${maxRadius}px`);

  // 使用 View Transitions API
  const transition = document.startViewTransition(() => {
    mode.value = newTheme;
  });

  try {
    await transition.finished;
  } finally {
    isAnimating.value = false;
  }
}

// 主题图标
const themeIcon = computed(() => {
  return mode.value === 'dark' ? 'Sunny' : 'Moon';
});

// 主题标题
const themeTitle = computed(() => {
  return mode.value === 'dark' ? '切换到浅色模式' : '切换到深色模式';
});

// 是否为深色模式
const isDark = computed(() => mode.value === 'dark');
</script>

<template>
  <div class="theme-btn-container" data-tour="theme-btn">
    <div
      class="theme-btn"
      :class="{ 'is-dark': isDark }"
      :title="themeTitle"
      @click="toggleTheme"
    >
      <!-- 图标容器 -->
      <div class="icon-wrapper">
        <el-icon class="theme-icon sun-icon" :class="{ active: isDark }">
          <Sunny />
        </el-icon>
        <el-icon class="theme-icon moon-icon" :class="{ active: !isDark }">
          <Moon />
        </el-icon>
      </div>
      <span class="pc-text">{{ isDark ? '深色' : '浅色' }}</span>
    </div>
  </div>
</template>

<style scoped lang="scss">
.theme-btn-container {
  display: flex;
  align-items: center;

  .theme-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: var(--el-text-color-regular);
    background-color: transparent;

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

    &.is-dark {
      .icon-wrapper {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
      }
    }

    .icon-wrapper {
      position: relative;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      overflow: hidden;
    }

    .theme-icon {
      position: absolute;
      font-size: 16px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .sun-icon {
      color: #f59e0b;
      transform: translateY(30px) rotate(-90deg);
      opacity: 0;

      &.active {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
      }
    }

    .moon-icon {
      color: #6366f1;
      transform: translateY(0) rotate(0deg);
      opacity: 1;

      &.active {
        transform: translateY(-30px) rotate(90deg);
        opacity: 0;
      }
    }

    .pc-text {
      display: inline;
      font-size: 14px;
      font-weight: 500;
      transition: color 0.3s;
    }
  }
}

// 移动端隐藏文字
@media (max-width: 768px) {
  .theme-btn-container {
    .theme-btn {
      padding: 8px;

      .pc-text {
        display: none;
      }
    }
  }
}
</style>
