<script setup lang="ts">
import { ref } from 'vue'
withDefaults(defineProps<{ productName?: string; environment?: string; automationStatus?: string }>(), {
  productName: 'K-ArtSell Aegis',
  environment: 'IMPLEMENTATION_TEMPLATE',
  automationStatus: '투자자문형 · 자동주문/KIS 제출 OFF · 자동 모델승격 OFF'
})
const emit = defineEmits<{ home: []; menuSearch: []; menuToggle: [] }>()
const menuButton = ref<HTMLButtonElement | null>(null)
defineExpose({ focusMenuButton: () => menuButton.value?.focus() })
</script>

<template>
  <header class="ks-global-header">
    <button ref="menuButton" type="button" class="ks-global-header__menu" aria-label="주요 메뉴 열기" @click="emit('menuToggle')">☰</button>
    <button type="button" class="ks-global-header__brand" @click="emit('home')">
      <strong>{{ productName }}</strong><small>{{ environment }}</small>
    </button>
    <button type="button" class="ks-global-header__search" aria-keyshortcuts="Control+K" @click="emit('menuSearch')">
      <span>메뉴명 · 화면코드 · 업무명 검색</span><kbd>Ctrl K</kbd>
    </button>
    <div class="ks-global-header__status" role="status">{{ automationStatus }}</div>
    <slot name="actions" />
  </header>
</template>

<style scoped>
.ks-global-header { height: var(--ks-shell-header-height); display: flex; align-items: center; gap: var(--ks-space-4); padding: 0 var(--ks-space-4); background: var(--ks-color-neutral-950); color: var(--ks-color-text-on-dark); }
.ks-global-header__brand { display: grid; gap: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.ks-global-header__brand small { color: #cbd5e1; font-size: var(--ks-font-caption); }
.ks-global-header__search { flex: 1; max-width: 28rem; height: 2rem; display: flex; align-items: center; justify-content: space-between; gap: var(--ks-space-2); padding: 0 var(--ks-space-3); border: 1px solid var(--ks-color-neutral-700); border-radius: var(--ks-radius-sm); background: var(--ks-color-neutral-800); color: var(--ks-color-neutral-300); }
.ks-global-header__search kbd { font-size: var(--ks-font-caption); border: 1px solid var(--ks-color-neutral-600); border-radius: var(--ks-radius-sm); padding: 0 var(--ks-space-1); }
.ks-global-header__status { margin-left: auto; padding: var(--ks-space-1) var(--ks-space-3); border: 1px solid #fbbf24; border-radius: var(--ks-radius-sm); color: #fef3c7; font-size: var(--ks-font-caption); white-space: nowrap; }
.ks-global-header__menu { display: none; border: 1px solid var(--ks-color-neutral-700); border-radius: var(--ks-radius-sm); background: transparent; color: inherit; padding: .25rem .5rem; }
@media (max-width: 900px) { .ks-global-header__menu { display: inline-flex; } }
</style>
