<script setup lang="ts">
import { KbxNotificationCenter, KbxOperationCenter, KbxRuntimeBanner } from '@kbx/ui'
import { ref } from 'vue'
import { useKbxRuntime } from './useKbxRuntime'

const { notice, operations, notifications, unreadCount, refresh, markRead } = useKbxRuntime()
const panel = ref<'notifications' | 'operations' | null>(null)
</script>

<template>
  <div class="kbx-runtime-shell">
    <KbxRuntimeBanner :notice="notice" @retry="refresh" />
    <header class="tools">
      <button type="button" @click="panel = panel === 'operations' ? null : 'operations'">작업 {{ operations.filter(x => x.status === 'running' || x.status === 'queued').length }}</button>
      <button type="button" @click="panel = panel === 'notifications' ? null : 'notifications'">알림 {{ unreadCount }}</button>
    </header>
    <aside v-if="panel" class="panel">
      <KbxOperationCenter v-if="panel === 'operations'" :operations="operations" />
      <KbxNotificationCenter v-else :notifications="notifications" @read="markRead" />
    </aside>
    <slot />
  </div>
</template>

<style scoped>
.kbx-runtime-shell { position:relative; min-height:100%; }
.tools { display:flex; justify-content:flex-end; gap:4px; min-height:32px; align-items:center; }
.tools button { min-height:30px; border:1px solid var(--kbx-color-border); border-radius:var(--kbx-radius-sm); background:var(--kbx-color-surface); }
.panel { position:absolute; z-index:50; right:8px; top:76px; width:min(420px, calc(100vw - 24px)); max-height:70vh; overflow:auto; padding:8px; border:1px solid var(--kbx-color-border); border-radius:var(--kbx-radius-md); background:var(--kbx-color-surface); box-shadow:0 10px 30px rgba(16,24,40,.16); }
</style>
