<script setup lang="ts">
import { onMounted, watch } from 'vue'
import TitleBar from './components/TitleBar.vue'
import NavRail from './components/NavRail.vue'
import ToastNotification from './components/ToastNotification.vue'
import { useSettingsStore } from './stores/settings'
import { useTimerStore } from './stores/timer'

const settingsStore = useSettingsStore()

async function registerShortcuts() {
  try {
    const { unregisterAll, register } = await import('@tauri-apps/plugin-global-shortcut')
    await unregisterAll()
    const toggleKey = settingsStore.settings.shortcut_toggle_timer || 'CmdOrCtrl+Shift+T'
    const showKey = settingsStore.settings.shortcut_show_app || 'CmdOrCtrl+Shift+Z'

    await register(toggleKey, () => {
      const timerStore = useTimerStore()
      if (timerStore.isStopped) {
        if (timerStore.selectedProjectId) timerStore.start()
      } else {
        timerStore.stop()
      }
    })

    await register(showKey, async () => {
      const { getCurrentWindow } = await import('@tauri-apps/api/window')
      const win = getCurrentWindow()
      await win.show()
      await win.setFocus()
    })
  } catch (e) {
    console.error('Failed to register shortcuts:', e)
  }
}

function applyTheme() {
  const el = document.documentElement
  const mode = settingsStore.settings.theme_mode || 'dark'
  const accent = settingsStore.settings.accent_color || 'amber'

  if (mode === 'system') {
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
    el.setAttribute('data-theme', prefersDark ? 'dark' : 'light')
  } else {
    el.setAttribute('data-theme', mode)
  }
  el.setAttribute('data-accent', accent)
}

onMounted(async () => {
  await settingsStore.fetchSettings()
  const zoom = parseInt(settingsStore.settings.ui_zoom) || 100
  const app = document.getElementById('app')
  if (app) {
    (app.style as any).zoom = `${zoom}%`
  }
  applyTheme()
  registerShortcuts()

  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
    if (settingsStore.settings.theme_mode === 'system') applyTheme()
  })
})

watch(() => [settingsStore.settings.theme_mode, settingsStore.settings.accent_color], () => {
  applyTheme()
})

watch(() => [settingsStore.settings.shortcut_toggle_timer, settingsStore.settings.shortcut_show_app], () => {
  registerShortcuts()
})
</script>

<template>
  <div class="h-full w-full flex flex-col bg-bg-base">
    <TitleBar />
    <div class="flex-1 flex overflow-hidden">
      <NavRail />
      <main class="flex-1 overflow-auto">
        <router-view />
      </main>
    </div>
  </div>
  <ToastNotification />
</template>
