<script setup lang="ts">
// Default operator chrome: persistent sidebar + topbar wrapping a scrollable
// content slot. Pages that should render WITHOUT chrome (the login screen)
// set `definePageMeta({ layout: 'blank' })`.

const route = useRoute()
const { toggle } = useSidebar()
const { toggle: togglePalette } = useCommandPalette()
// Touch useTweaks so the persisted theme/density hydrate on first paint.
useTweaks()

// Derive the active nav row from the route. Matches OpSidebar's `id` keys.
const currentNav = computed(() => {
  const p = route.path
  if (p === '/') return 'overview'
  if (p.startsWith('/tenants')) return 'tenants'
  if (p.startsWith('/partners')) return 'partners'
  if (p.startsWith('/users')) return 'users'
  if (p.startsWith('/support')) return 'support'
  if (p.startsWith('/billing')) return 'billing'
  if (p.startsWith('/reports')) return 'reports'
  if (p.startsWith('/infrastructure')) return 'infra'
  if (p.startsWith('/flags')) return 'flags'
  if (p.startsWith('/audit')) return 'audit'
  if (p.startsWith('/operator-team')) return 'team'
  if (p.startsWith('/settings')) return 'settings'
  return ''
})

// Keyboard shortcuts: ⌘[ toggles sidebar, ⌘K opens the command palette.
onMounted(() => {
  const onKey = (e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === '[') {
      e.preventDefault()
      toggle()
    }
    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
      e.preventDefault()
      togglePalette()
    }
  }
  document.addEventListener('keydown', onKey)
  onBeforeUnmount(() => document.removeEventListener('keydown', onKey))
})
</script>

<template>
  <div class="shell">
    <ImpersonationBanner />
    <div class="cols">
      <OpSidebar :current="currentNav" />
      <main>
        <OpTopbar />
        <div class="content">
          <slot />
        </div>
      </main>
    </div>
    <CommandPalette />
    <ImpersonationModal />
    <IncidentModal />
    <TweaksPanel />
  </div>
</template>

<style scoped>
.shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}
.cols { display: flex; flex: 1; min-height: 0; }

main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.content { flex: 1; min-width: 0; overflow-y: auto; }
</style>
