<template>
  <n-config-provider :theme="naiveTheme" :locale="zhCN" :date-locale="dateZhCN">
    <n-global-style />
    <n-message-provider>
      <div id="app-container" :class="[themeClasses, platformClass]">
        <router-view />
      </div>
    </n-message-provider>
  </n-config-provider>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, computed } from "vue";
import { NConfigProvider, NGlobalStyle, NMessageProvider, zhCN, dateZhCN } from "naive-ui";
import { useTheme } from "@/composables/useTheme";

const { themeClasses, naiveTheme, initTheme } = useTheme();

const platform = ref('unknown');

const platformClass = computed(() => `platform-${platform.value}`);

const handleKeydown = (event: KeyboardEvent) => {
  if ((event.ctrlKey || event.metaKey) && event.key === ",") {
    event.preventDefault();
    window.__openSettings?.();
  }
};

onMounted(async () => {
  document.addEventListener("keydown", handleKeydown);
  await initTheme();
  
  const userAgent = navigator.userAgent.toLowerCase();
  if (userAgent.includes('win')) {
    platform.value = 'windows';
  } else if (userAgent.includes('mac')) {
    platform.value = 'macos';
  } else if (userAgent.includes('linux')) {
    platform.value = 'linux';
  } else if (userAgent.includes('android')) {
    platform.value = 'android';
  } else if (userAgent.includes('iphone') || userAgent.includes('ipad')) {
    platform.value = 'ios';
  }
  
  document.documentElement.dataset.platform = platform.value;
});

onUnmounted(() => {
  document.removeEventListener("keydown", handleKeydown);
});

declare global {
  interface Window {
    __openSettings?: () => void;
  }
}
</script>

<style>
@import "@/styles/global.css";
</style>
