<script setup lang="ts">
import type { UiGridColumn } from '../ui/adapter/contracts'
import type { StandardScreenState } from '../ui/contracts/screenContract'
import PageLayout from '../ui/layouts/PageLayout.vue'
import StandardScreenBoundary from '../ui/screen-types/v2/StandardScreenBoundary.vue'
import KsDataGrid from '../ui/components/KsDataGrid.vue'
import KsPaginator from '../ui/components/KsPaginator.vue'

withDefaults(defineProps<{
  title: string
  subtitle?: string
  state?: StandardScreenState
  rows: unknown[]
  columns: UiGridColumn[]
  page: number
  pageSize: number
  total: number
  asOf?: string
  version?: string
  warning?: string
}>(), { state: 'READY', rows: () => [] })
const emit = defineEmits<{ retry: []; rowSelected: [row: unknown]; pageChange: [value: { page: number; pageSize: number }] }>()
</script>
<template>
  <PageLayout :title="title" :subtitle="subtitle" :status="state" :as-of="asOf" :version="version">
    <template #actions><slot name="actions" /></template>
    <template #summary><slot name="summary" /></template>
    <template #filters><slot name="filters" /></template>
    <StandardScreenBoundary :state="state" :warning="warning" :stale-at="asOf" @retry="emit('retry')">
      <KsDataGrid :rows="rows" :columns="columns" @row-selected="emit('rowSelected', $event)" />
      <KsPaginator :page="page" :page-size="pageSize" :total="total" @page-change="emit('pageChange', $event)" />
    </StandardScreenBoundary>
    <template v-if="$slots.detail" #aside><slot name="detail" /></template>
    <template v-if="$slots.footer" #footer><slot name="footer" /></template>
  </PageLayout>
</template>
