<script setup lang="ts">
import type { KbxTemplateContext } from '@kbx/contracts'

const props = withDefaults(defineProps<{
  context?: KbxTemplateContext | null
  ariaLabel?: string
}>(), { context:null, ariaLabel:'화면 작업 문맥' })

function display(value:string|number){ return typeof value === 'number' ? value.toLocaleString('ko-KR') : value }
function time(value?:string){
  if(!value) return ''
  const date=new Date(value)
  return Number.isNaN(date.getTime()) ? value : date.toLocaleString('ko-KR',{month:'numeric',day:'numeric',hour:'2-digit',minute:'2-digit'})
}
</script>

<template>
  <section v-if="props.context" class="kbx-template-context" :aria-label="props.ariaLabel">
    <div v-if="context?.label || context?.hint" class="kbx-template-context__identity">
      <strong v-if="context?.label">{{ context.label }}</strong>
      <span v-if="context?.hint">{{ context.hint }}</span>
    </div>
    <div v-if="context?.metrics?.length" class="kbx-template-context__metrics">
      <span v-for="metric in context.metrics" :key="metric.key" :data-tone="metric.tone ?? 'default'">
        <small>{{ metric.label }}</small>
        <strong :class="{ emphasis:metric.emphasis }">{{ display(metric.value) }}</strong>
      </span>
    </div>
    <time v-if="context?.updatedAt" :datetime="context.updatedAt">기준 {{ time(context.updatedAt) }}</time>
    <slot />
  </section>
</template>

<style scoped>
.kbx-template-context{min-height:var(--kbx-template-context-min-height);display:flex;align-items:center;gap:var(--kbx-space-4);padding:var(--kbx-space-1) var(--kbx-space-2);border:var(--kbx-border-width) solid var(--kbx-color-border);background:var(--kbx-color-surface-muted);font-size:var(--kbx-font-sm);overflow-x:auto}.kbx-template-context__identity{display:flex;align-items:center;gap:var(--kbx-space-2);min-width:0}.kbx-template-context__identity strong{white-space:nowrap}.kbx-template-context__identity span{color:var(--kbx-color-text-muted);white-space:nowrap}.kbx-template-context__metrics{display:flex;align-items:center;gap:var(--kbx-space-4);margin-left:auto}.kbx-template-context__metrics>span{display:flex;align-items:center;gap:var(--kbx-space-1);white-space:nowrap}.kbx-template-context__metrics small{color:var(--kbx-color-text-muted)}.kbx-template-context__metrics strong{font-weight:500}.kbx-template-context__metrics strong.emphasis{font-weight:700}.kbx-template-context__metrics span[data-tone="info"] strong{color:var(--kbx-color-primary)}.kbx-template-context__metrics span[data-tone="success"] strong{color:var(--kbx-color-success)}.kbx-template-context__metrics span[data-tone="warning"] strong{color:var(--kbx-color-warning-text)}.kbx-template-context__metrics span[data-tone="danger"] strong{color:var(--kbx-color-danger)}.kbx-template-context time{color:var(--kbx-color-text-muted);font-size:var(--kbx-font-xs);white-space:nowrap}
</style>
