<script setup lang="ts">
import type { KbxScreenDefinition, KbxAsyncState, KbxSummaryItem, KbxQuickFilterItem, KbxScreenContext } from '@shared/contracts/kbx-types'

withDefaults(defineProps<{
  screen: KbxScreenDefinition
  dataState?: KbxAsyncState
  loading?: boolean
  selectionCount?: number
  summaryItems?: KbxSummaryItem[]
  quickFilters?: KbxQuickFilterItem[]
  context?: KbxScreenContext | null
  allowActions?: boolean
}>(), { dataState: 'ready', loading: false, selectionCount: 0, summaryItems: () => [], quickFilters: () => [], context: null, allowActions: true })

const emit = defineEmits<{ command: [commandId: string]; quickFilter: [filterId: string]; refresh: [] }>()
</script>

<template>
  <div class="ks-list-page">
    <header class="ks-list-page__header">
      <div><h1>{{ screen.title }}</h1><p v-if="screen.description">{{ screen.description }}</p></div>
      <div><slot name="header-actions" /></div>
    </header>
    <section v-if="screen.type" class="ks-list-page__search"><slot name="search" /></section>
    <nav v-if="quickFilters.length" class="ks-list-page__quick-filters" aria-label="빠른 필터">
      <button v-for="filter in quickFilters" :key="filter.id" type="button" :aria-pressed="filter.active" @click="emit('quickFilter', filter.id)">{{ filter.label }}<span v-if="filter.badge"> {{ filter.badge }}</span></button>
    </nav>
    <section v-if="context" class="ks-list-page__context"><slot name="context" /></section>
    <main class="ks-list-page__content" :aria-busy="loading">
      <div v-if="dataState === 'pending'">Loading data...</div>
      <div v-else-if="dataState === 'empty'">No results found <button type="button" @click="emit('command', 'new')">Create New</button></div>
      <div v-else-if="dataState === 'error'" role="alert">Error loading data <button type="button" @click="emit('refresh')">Retry</button></div>
      <slot v-else name="content" />
    </main>
    <footer v-if="summaryItems.length" class="ks-list-page__footer">
      <span v-if="selectionCount">{{ selectionCount }} item(s) selected</span>
      <span v-for="item in summaryItems" :key="item.label"><strong>{{ item.label }}:</strong> {{ item.value }}</span>
    </footer>
  </div>
</template>

<style scoped>
.ks-list-page { display:flex; flex-direction:column; height:100%; background:var(--ks-color-surface,#fff); }
.ks-list-page__header,.ks-list-page__search,.ks-list-page__quick-filters,.ks-list-page__footer { padding:var(--ks-space-4); border-bottom:1px solid var(--ks-color-neutral-200); }
.ks-list-page__header { display:flex; justify-content:space-between; gap:var(--ks-space-4); background:var(--ks-color-neutral-50); }
.ks-list-page__header h1 { margin:0; }
.ks-list-page__header p { margin:.5rem 0 0; color:var(--ks-color-text-muted); }
.ks-list-page__quick-filters { display:flex; gap:var(--ks-space-2); overflow:auto; }
.ks-list-page__quick-filters button { padding:.5rem .75rem; border:1px solid var(--ks-color-neutral-300); border-radius:var(--ks-radius-sm); background:#fff; }
.ks-list-page__quick-filters button[aria-pressed='true'] { background:var(--ks-color-action); color:#fff; }
.ks-list-page__content { flex:1; overflow:auto; }
.ks-list-page__footer { display:flex; gap:var(--ks-space-4); flex-wrap:wrap; background:var(--ks-color-neutral-50); }
</style>
