<template>
  <div class="min-h-screen bg-surface font-mono text-text-primary">
    <nav class="border-b border-surface-border px-6 py-3 flex items-center gap-6">
      <div class="flex items-center gap-2">
        <span class="text-accent font-semibold tracking-wide">TURNSTONE</span>
        <span class="text-text-dim text-xs">diagnostic intelligence</span>
      </div>
      <div class="flex gap-1 ml-4">
        <RouterLink
          v-for="link in navLinks"
          :key="link.to"
          :to="link.to"
          class="px-3 py-1 rounded text-sm text-text-muted hover:text-text-primary hover:bg-surface-raised transition-colors"
          active-class="text-accent bg-accent-muted"
        >
          {{ link.label }}
        </RouterLink>
      </div>
      <div class="ml-auto flex items-center gap-3">
        <button
          @click="toggleTheme"
          :title="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
          class="text-text-dim hover:text-text-primary transition-colors text-base leading-none px-1"
          aria-label="Toggle theme"
        >{{ isDark ? '☀' : '☾' }}</button>
        <StatusDot />
      </div>
    </nav>
    <RouterView />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink, RouterView } from 'vue-router'
import StatusDot from '@/components/StatusDot.vue'

const navLinks = [
  { to: '/dashboard', label: 'Dashboard' },
  { to: '/search',    label: 'Search' },
  { to: '/diagnose',  label: 'Diagnose' },
  { to: '/incidents', label: 'Incidents' },
  { to: '/sources',   label: 'Sources' },
]

const isDark = ref(document.documentElement.classList.contains('dark'))

function toggleTheme() {
  isDark.value = !isDark.value
  document.documentElement.classList.toggle('dark', isDark.value)
  localStorage.setItem('ts-theme', isDark.value ? 'dark' : 'light')
}
</script>
