<template>
  <div class="min-h-screen bg-surface font-mono text-text-primary">
    <nav aria-label="Main navigation" 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 font-semibold"
        >{{ link.label }}</RouterLink>
      </div>
      <div class="ml-auto flex items-center gap-3">
        <RouterLink
          to="/settings"
          class="text-text-dim hover:text-text-primary transition-colors leading-none"
          title="Settings"
          aria-label="Settings"
        >⚙</RouterLink>
        <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="isDark ? 'Switch to light mode' : 'Switch to dark mode'"
        >{{ isDark ? '☀' : '☾' }}</button>
        <StatusDot />
      </div>
    </nav>

    <!-- Persistent quick-capture bar (topbar mode) -->
    <QuickCaptureBar v-if="entryPointStyle === 'topbar'" />

    <RouterView />

    <!-- FAB entry point (fab mode) -->
    <QuickCaptureFab v-if="entryPointStyle === 'fab'" />
  </div>
</template>

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

const BASE = import.meta.env.BASE_URL.replace(/\/$/, '')

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

const isDark          = ref(document.documentElement.classList.contains('dark'))
const entryPointStyle = ref<'topbar' | 'fab'>('topbar')

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

onMounted(async () => {
  try {
    const res = await fetch(`${BASE}/api/settings`)
    if (res.ok) {
      const data = await res.json()
      entryPointStyle.value = data.entry_point_style ?? 'topbar'
    }
  } catch { /* default to topbar */ }
})
</script>
