import './console-guard'

import { createApp } from 'vue'

import type { DesktopObservedRequest } from '../shared/network-debug'
import App from './App.vue'
import { router } from './routes'

import 'ant-design-vue/dist/reset.css'
import '../../../../packages/ui-shared/src/tokens/index.css'

const applyTheme = (prefersDark: boolean) => {
  document.documentElement.dataset.theme = prefersDark ? 'dark' : 'light'
}

const themeQuery = window.matchMedia('(prefers-color-scheme: dark)')
applyTheme(themeQuery.matches)
themeQuery.addEventListener('change', (event) => applyTheme(event.matches))

if (import.meta.env.DEV) {
  window.desktopBridge.app.onNetworkObserved((event) => {
    logObservedRequest(event)
  })
}

createApp(App).use(router).mount('#app')

function logObservedRequest(event: DesktopObservedRequest): void {
  const summary = `${event.method} ${event.url}`
  const detail = {
    kind: event.kind,
    source: event.source,
    label: event.label,
    partition: event.partition,
    resourceType: event.resourceType,
    status: event.status,
    durationMs: event.durationMs,
    error: event.error,
    at: event.at,
  }

  if (event.phase === 'error') {
    console.warn('[electron-request:error]', summary, detail)
    return
  }

  if (event.phase === 'close') {
    console.info('[electron-request:close]', summary, detail)
    return
  }

  if (event.phase === 'response') {
    console.info('[electron-request:response]', summary, detail)
    return
  }

  console.log('[electron-request:start]', summary, detail)
}