<script setup lang="ts">
import { Menu, Search, CircleDot, Sparkles } from '@lucide/vue'
import { RouterLink } from 'vue-router'
import { nextTick, ref, watch } from 'vue'

const props = withDefaults(defineProps<{
  connected: boolean
  commandOpen?: boolean
  irisOpen?: boolean
  canOpenIris?: boolean
}>(), {
  commandOpen: false,
  irisOpen: false,
  canOpenIris: false,
})

defineEmits<{
  toggleMobileNav: []
  openCommand: []
  openIris: []
}>()

const commandButton = ref<HTMLButtonElement | null>(null)
const irisButton = ref<HTMLButtonElement | null>(null)

watch(
  () => props.commandOpen,
  async (isOpen, wasOpen) => {
    if (!isOpen && wasOpen) {
      await nextTick()
      if (!document.activeElement || document.activeElement === document.body) {
        commandButton.value?.focus()
      }
    }
  },
)

watch(
  () => props.irisOpen,
  async (isOpen, wasOpen) => {
    if (!isOpen && wasOpen) {
      await nextTick()
      if (!document.activeElement || document.activeElement === document.body) {
        irisButton.value?.focus()
      }
    }
  },
)
</script>

<template>
  <header class="topbar">
    <button
      type="button"
      class="mobile-menu"
      aria-label="Toggle navigation"
      @click="$emit('toggleMobileNav')"
    >
      <Menu :size="19" />
    </button>
    <button
      ref="commandButton"
      type="button"
      class="search"
      aria-label="Mission Control durchsuchen"
      aria-haspopup="dialog"
      aria-controls="mission-command-dialog"
      :aria-expanded="commandOpen"
      @click="$emit('openCommand')"
    >
      <Search :size="16" />
      <span>Search operations</span>
      <kbd>Ctrl K</kbd>
    </button>
    <div class="spacer" aria-hidden="true"></div>
    <div class="top-actions">
      <RouterLink
        to="/runs"
        :class="['connection', connected ? 'live' : 'preview']"
        :aria-label="connected ? 'OpenClaw connected, open Run Control' : 'OpenClaw disconnected, open Run Control'"
      >
        <CircleDot :size="13" />
        {{ connected ? 'OpenClaw live' : 'OpenClaw offline' }}
      </RouterLink>
      <button
        ref="irisButton"
        class="ask"
        type="button"
        :disabled="!canOpenIris"
        :aria-label="canOpenIris ? 'Open Iris chat' : 'Iris chat is available to owners only'"
        :aria-haspopup="canOpenIris ? 'dialog' : undefined"
        :aria-controls="canOpenIris ? 'iris-chat-dialog' : undefined"
        :aria-expanded="canOpenIris ? irisOpen : false"
        :title="canOpenIris ? undefined : 'Owner access required'"
        @click="$emit('openIris')"
      ><Sparkles :size="15" /> <span class="ask-label">Ask Iris</span></button>
    </div>
  </header>
</template>

<style scoped>
.topbar {
  height: var(--topbar-h);
  flex: 0 0 var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--space-1) 50%, transparent);
  backdrop-filter: blur(14px);
}
.mobile-menu { display: none; }
.search {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  max-width: 560px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: color-mix(in srgb, var(--a-mid) 6%, transparent);
  color: var(--tx-3);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.search kbd {
  margin-left: auto;
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: color-mix(in srgb, var(--space-3) 64%, transparent);
  color: var(--tx-3);
  font-family: var(--font-mono-v2);
  font-size: 11px;
}
.search:hover {
  border-color: var(--line-2);
  background: color-mix(in srgb, var(--a-mid) 10%, transparent);
}
.search:focus-visible,
.ask:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}
.top-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.spacer {
  flex: 1;
}
.connection {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: color-mix(in srgb, var(--a-mid) 7%, transparent);
  color: var(--tx-2);
  font-size: 11.5px;
  font-weight: 650;
  text-decoration: none;
}
.connection.live { color: var(--st-work); }
.connection.preview { color: var(--st-queue); }
.ask {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 14px;
  border: none;
  border-radius: var(--r-sm);
  background: var(--grad);
  color: var(--tx-on-accent);
  box-shadow: var(--glow-purple);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: filter .16s ease;
}
.ask:hover:not(:disabled) {
  filter: brightness(1.08);
}
.ask:disabled {
  box-shadow: none;
}

@media (max-width: 900px) {
  .topbar {
    padding: 0 14px;
  }
  .mobile-menu {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 9px;
    background: transparent;
    color: var(--tx-2);
    cursor: pointer;
  }
  .search {
    max-width: none;
  }
  .search kbd,
  .connection {
    display: none;
  }
  .spacer {
    display: none;
  }
  .ask {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
  }
  .ask :deep(svg) {
    margin: 0;
  }
  .ask {
    gap: 0;
  }
  .ask-label {
    display: none;
  }
}
</style>
