<script setup lang="ts">
const props = withDefaults(defineProps<{
  productName?: string
  activeModule?: string
  modules?: string[]
  menuSearchLabel?: string
  operationCount?: number
  notificationCount?: number
  operationsOpen?: boolean
  notificationsOpen?: boolean
  homeActive?: boolean
  themeMode?: 'light' | 'dark'
}>(), { productName:'KBX', activeModule:'', modules:()=>[], menuSearchLabel:'메뉴 검색', operationCount:0, notificationCount:0, operationsOpen:false, notificationsOpen:false, homeActive:false, themeMode:'light' })
const emit = defineEmits<{ home:[]; moduleSelect:[module:string]; menuSearch:[]; operations:[]; notifications:[]; themeToggle:[]; profile:[] }>()
const label=(module:string)=>module==='COMMON'?'공통':module
</script>

<template>
  <header class="kbx-global-header">
    <div class="brand" aria-label="제품 및 모듈">
      <button type="button" class="brand__home" :aria-current="homeActive?'page':undefined" @click="emit('home')"><strong>{{ props.productName }}</strong><span class="brand__home-label">홈</span></button>
      <label v-if="props.modules.length" class="module-select"><span class="sr-only">업무 모듈</span><select :value="props.activeModule" @change="emit('moduleSelect',($event.target as HTMLSelectElement).value)"><option value="" disabled>모듈</option><option v-for="module in props.modules" :key="module" :value="module">{{label(module)}}</option></select></label>
    </div>
    <button class="menu-search" type="button" aria-keyshortcuts="Control+K" @click="emit('menuSearch')"><span>{{ props.menuSearchLabel }}</span><kbd>Ctrl K</kbd></button>
    <div class="actions"><button id="kbx-runtime-operations-trigger" type="button" aria-controls="kbx-runtime-panel" :aria-expanded="props.operationsOpen" @click="emit('operations')">작업 <b v-if="props.operationCount">{{ props.operationCount }}</b></button><button id="kbx-runtime-notifications-trigger" type="button" aria-controls="kbx-runtime-panel" :aria-expanded="props.notificationsOpen" @click="emit('notifications')">알림 <b v-if="props.notificationCount">{{ props.notificationCount }}</b></button><button type="button" class="theme-toggle" :aria-label="props.themeMode==='dark'?'밝은 테마로 변경':'어두운 테마로 변경'" :title="props.themeMode==='dark'?'KBX Business Dark · 밝게 전환':'KBX Business Light · 어둡게 전환'" @click="emit('themeToggle')"><span aria-hidden="true">{{props.themeMode==='dark'?'☾':'☀'}}</span><span class="theme-toggle__label">{{props.themeMode==='dark'?'Dark':'Light'}}</span></button><button type="button" @click="emit('profile')">사용자</button></div>
  </header>
</template>

<style scoped>
.kbx-global-header{height:var(--kbx-side-nav-collapsed-width);display:grid;grid-template-columns:var(--kbx-side-nav-width) minmax(var(--kbx-master-list-min-width),var(--kbx-access-max-width)) 1fr;align-items:center;gap:var(--kbx-space-4);padding:0 var(--kbx-space-3);border-bottom:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-shell-chrome);box-shadow:var(--kbx-shadow-shell);z-index:20}.brand{display:flex;align-items:center;gap:var(--kbx-space-2);min-width:0}.brand__home{height:var(--kbx-control-height);display:flex;align-items:center;gap:var(--kbx-space-2);border:0;border-radius:var(--kbx-radius-sm);background:transparent;padding:0 var(--kbx-space-2);color:var(--kbx-color-text)}.brand__home:hover,.brand__home[aria-current="page"]{background:var(--kbx-color-surface-hover)}.brand__home strong{font-size:var(--kbx-font-lg);color:var(--kbx-color-module-accent);letter-spacing:-.01em}.brand__home-label{font-size:var(--kbx-font-xs);color:var(--kbx-color-text-muted)}.module-select{padding-left:var(--kbx-space-2);border-left:var(--kbx-border-width) solid var(--kbx-color-border)}.module-select select{width:var(--kbx-global-header-module-selector-width);height:var(--kbx-control-sm);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-surface);color:var(--kbx-color-text);font-size:var(--kbx-font-sm);padding:0 var(--kbx-space-2)}.menu-search{height:var(--kbx-control-height);display:flex;align-items:center;justify-content:space-between;padding:0 var(--kbx-space-3);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-sm);background:var(--kbx-color-surface-muted);color:var(--kbx-color-text-muted);text-align:left}.menu-search:hover{border-color:var(--kbx-color-module-accent);background:var(--kbx-color-module-accent-surface)}.menu-search kbd{font-size:var(--kbx-font-xs);border:var(--kbx-border-width) solid var(--kbx-color-border);border-radius:var(--kbx-radius-sm);padding:var(--kbx-space-1);background:var(--kbx-color-surface)}.actions{display:flex;justify-content:flex-end;gap:var(--kbx-space-1)}.actions button{height:var(--kbx-control-sm);border:0;background:transparent;border-radius:var(--kbx-radius-sm);padding:0 var(--kbx-space-2)}.actions button:hover{background:var(--kbx-color-surface-hover)}.actions b{min-width:var(--kbx-checkbox-track);display:inline-block;margin-left:var(--kbx-space-1);color:var(--kbx-color-module-accent)}.theme-toggle{display:inline-flex;align-items:center;gap:var(--kbx-space-1);border:var(--kbx-border-width) solid transparent!important}.theme-toggle:hover{border-color:var(--kbx-color-border)!important}.theme-toggle__label{font-size:var(--kbx-font-xs);color:var(--kbx-color-text-muted)}.sr-only{position:absolute;width:var(--kbx-visually-hidden-size);height:var(--kbx-visually-hidden-size);padding:0;margin:calc(var(--kbx-visually-hidden-size) * -1);overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:56rem){.kbx-global-header{grid-template-columns:auto minmax(0,1fr) auto;gap:var(--kbx-space-2);padding-inline:var(--kbx-space-2)}.brand__home-label,.menu-search kbd{display:none}.module-select{padding-left:var(--kbx-space-1)}.module-select select{width:var(--kbx-control-lg);padding:0}.menu-search{min-width:0;padding-inline:var(--kbx-space-2)}.menu-search span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.actions{min-width:0}.actions button{padding-inline:var(--kbx-space-1)}}@media(max-width:40rem){.kbx-global-header{grid-template-columns:auto minmax(0,1fr)}.actions{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);border-top:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface)}.kbx-global-header{height:auto;min-height:var(--kbx-side-nav-collapsed-width);align-content:center}.actions button{width:100%}}
</style>
