<template>
  <n-config-provider>
    <n-message-provider>
      <div class="app" :class="{ dark: isDark }">
        <router-view />

        <!-- Toast 通知 -->
        <Teleport to="body">
          <TransitionGroup name="toast" tag="div" class="toast-container">
            <div
              v-for="toast in toasts"
              :key="toast.id"
              class="toast"
              :class="toast.type"
            >
              <Check v-if="toast.type === 'success'" :size="18" />
              <AlertCircle v-else-if="toast.type === 'error'" :size="18" />
              <Info v-else :size="18" />
              <span>{{ toast.message }}</span>
            </div>
          </TransitionGroup>
        </Teleport>
      </div>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { storeToRefs } from "pinia";
import { useSettingsStore } from "@/stores/settings";
import { Check, AlertCircle, Info } from "@/components/icons";
import { NConfigProvider, NMessageProvider } from "naive-ui";

const settingsStore = useSettingsStore();
const { settings } = storeToRefs(settingsStore);

// 计算属性
const isDark = computed(() => {
  if (settings.value.theme === "system") {
    return window.matchMedia("(prefers-color-scheme: dark)").matches;
  }
  return settings.value.theme === "dark";
});

// Toast 通知系统
interface Toast {
  id: number;
  message: string;
  type: "success" | "error" | "info";
}

const toasts = ref<Toast[]>([]);
let toastId = 0;

function showToast(message: string, type: Toast["type"] = "info") {
  const id = ++toastId;
  toasts.value.push({ id, message, type });

  setTimeout(() => {
    const index = toasts.value.findIndex((t) => t.id === id);
    if (index !== -1) {
      toasts.value.splice(index, 1);
    }
  }, 3000);
}

// 暴露给全局使用
window.$toast = showToast;
</script>

<style lang="scss">
.app {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #f5f5f5;

  &.dark {
    background: #11111b;
    color: #e5e7eb;
  }
}

// Toast 样式
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 9999;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  pointer-events: auto;

  .dark & {
    background: #2d2d3d;
    color: #e5e7eb;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  }

  &.success {
    svg {
      color: #10b981;
    }
  }

  &.error {
    svg {
      color: #ef4444;
    }
  }

  &.info {
    svg {
      color: #3b82f6;
    }
  }
}

// Toast 动画
.toast-enter-active,
.toast-leave-active {
  transition: all 0.3s ease;
}

.toast-enter-from {
  opacity: 0;
  transform: translateX(100px);
}

.toast-leave-to {
  opacity: 0;
  transform: translateX(100px);
}

.toast-move {
  transition: transform 0.3s ease;
}
</style>
