<script setup lang="ts">
import { Command, Search, CircleDot, Sparkles } from '@lucide/vue'

defineProps<{
  connected: boolean
}>()

defineEmits<{
  toggleMobileNav: []
}>()
</script>

<template>
  <header class="topbar">
    <button class="mobile-menu" @click="$emit('toggleMobileNav')">
      <Command :size="19" />
    </button>
    <div class="search">
      <Search :size="16" />
      <span>Search operations</span>
      <kbd>⌘ K</kbd>
    </div>
    <div class="top-actions">
      <span :class="['connection', connected ? 'live' : 'preview']">
        <CircleDot :size="13" />
        {{ connected ? 'Live' : 'Preview data' }}
      </span>
      <button class="ask"><Sparkles :size="15" /> Ask Iris</button>
    </div>
  </header>
</template>

<style scoped>
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--nx-line, #1f2330);
  background: var(--nx-panel, #11141b);
}
.mobile-menu { display: none; }
.search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 6px 12px;
  border: 1px solid var(--nx-line, #1f2330);
  border-radius: 7px;
  color: var(--nx-text-dim, #6f7889);
  font-size: 11px;
}
.search kbd {
  margin-left: auto;
  padding: 1px 4px;
  border: 1px solid #2a2f3d;
  border-radius: 4px;
  font-size: 8px;
  color: #4a5266;
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.connection {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9px;
  font-weight: 600;
  padding: 4px 9px;
  border-radius: 6px;
}
.connection.live { color: #27ae60; background: rgba(39,174,96,.1); }
.connection.preview { color: #e67e22; background: rgba(230,126,34,.1); }
.ask {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: none;
  border-radius: 6px;
  background: var(--nx-accent, #7b6ef2);
  color: #fff;
  font-size: 10px;
  cursor: pointer;
}

@media (max-width: 860px) {
  .mobile-menu { display: flex; align-items: center; justify-content: center; padding: 6px; border: 1px solid var(--nx-line, #1f2330); border-radius: 6px; background: transparent; color: var(--nx-accent, #7b6ef2); cursor: pointer; }
}
</style>
