<script setup lang="ts">
import { NConfigProvider, NDialogProvider, NGlobalStyle, NMessageProvider, NNotificationProvider, type GlobalThemeOverrides } from 'naive-ui'
import AppHeader from '@/components/layout/AppHeader.vue'
import { Analytics } from "@vercel/analytics/vue"

const themeOverrides: GlobalThemeOverrides = {
  common: {
    primaryColor: '#0f766e',
    primaryColorHover: '#115e59',
    primaryColorPressed: '#134e4a',
    primaryColorSuppl: '#0f766e',
    infoColor: '#0369a1',
    successColor: '#0f766e',
    warningColor: '#d97706',
    errorColor: '#dc2626',
    borderRadius: '0px',
    borderRadiusSmall: '0px',
    fontFamily: '"IBM Plex Sans", "Noto Sans SC", "PingFang SC", sans-serif',
    fontFamilyMono: '"IBM Plex Mono", "SFMono-Regular", monospace',
    bodyColor: '#f3f7fb',
    cardColor: '#ffffff',
    modalColor: '#ffffff',
    popoverColor: '#ffffff',
    tableColor: '#ffffff',
    textColorBase: '#0f172a',
    textColor1: '#0f172a',
    textColor2: '#334155',
    textColor3: '#64748b',
    textColorDisabled: '#94a3b8',
    dividerColor: '#d9e3ee',
    borderColor: '#d9e3ee',
    inputColor: '#ffffff',
  },
  Button: {
    borderRadiusTiny: '0px',
    borderRadiusSmall: '0px',
    borderRadiusMedium: '0px',
    borderRadiusLarge: '0px',
    textColorPrimary: '#0f172a',
    textColorHoverPrimary: '#0f172a',
  },
  Card: {
    borderRadius: '0px',
    borderRadiusEmbedded: '0px',
    paddingMedium: '24px',
  },
  Input: {
    borderRadius: '0px',
  },
  Select: {
    peers: {
      InternalSelection: {
        borderRadius: '0px',
      },
    },
  },
  Tabs: {
    tabBorderRadius: '0px',
  },
  Tag: {
    borderRadius: '0px',
  },
  Alert: {
    borderRadius: '0px',
  },
  Modal: {
    borderRadius: '0px',
  },
}
</script>

<template>
  <NConfigProvider :theme-overrides="themeOverrides">
    <NGlobalStyle />
    <NDialogProvider>
      <NNotificationProvider>
        <NMessageProvider>
          <div class="min-h-screen flex flex-col bg-[radial-gradient(circle_at_top_left,_rgba(12,148,136,0.12),_transparent_28%),linear-gradient(180deg,#f8fbfd_0%,#eef4f8_100%)]">
            <AppHeader />
            <main class="relative flex-1">
              <div class="pointer-events-none absolute inset-0 bg-[linear-gradient(rgba(15,23,42,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(15,23,42,0.03)_1px,transparent_1px)] bg-[size:32px_32px] opacity-35"></div>
              <div class="relative">
                <RouterView />
              </div>
            </main>
          </div>
        </NMessageProvider>
      </NNotificationProvider>
    </NDialogProvider>
  </NConfigProvider>
  <Analytics />
</template>
