<script setup lang="ts">
import { computed, ref } from 'vue'
import { useQuery } from '@tanstack/vue-query'
import { KbxListPage, KbxDataGrid } from '@kbx/ui'
import type { KbxExternalDataStatusRow, KbxGridColumn } from '@kbx/contracts'
import { externalDataScreen } from './external-data.definition'
import { externalDataApi } from './externalDataApi'
import { kbxStatusCatalog } from '../../../registry/statusCatalog'
const selected=ref<KbxExternalDataStatusRow[]>([])
const query=useQuery({queryKey:['kbx','external-data','status'],queryFn:externalDataApi.status})
const rows=computed(()=>query.data.value?.items??[])
const columns:KbxGridColumn<KbxExternalDataStatusRow>[]=[
 {field:'sourceLabel',header:'출처',width:110,pinned:'left'},
 {field:'datasetId',header:'데이터셋',width:320},
 {field:'state',header:'신선도',type:'status',width:130,statusMap:{definitions:kbxStatusCatalog.externalData}},
 {field:'cacheEntries',header:'캐시',type:'integer',width:90},
 {field:'staleEntries',header:'Stale',type:'integer',width:90},
 {field:'unavailableEntries',header:'사용불가',type:'integer',width:100},
 {field:'lastReceivedAt',header:'최근 수신',type:'datetime',width:170},
 {field:'oldestFreshUntil',header:'최초 만료',type:'datetime',width:170},
]
async function command(id:string){if(id==='search')await query.refetch();if(id==='refresh'){const row=selected.value[0];if(!row)return;await externalDataApi.refresh(row.datasetId);selected.value=[];await query.refetch()}}
</script>
<template><KbxListPage :screen="externalDataScreen" :selection-count="selected.length" @command="command">
  <template #quick-filter><div class="notice"><strong>외부 데이터는 업무 원장이 아닙니다.</strong> 화면에는 정규화된 Projection과 출처·신선도를 함께 표시하고, 만료된 데이터를 최신값처럼 사용하지 않습니다.</div></template>
  <template #content><KbxDataGrid :rows="rows" :columns="columns" row-key="datasetId" selection="single" :loading="query.isFetching.value" @selection-changed="value=>selected=value" /></template>
  <template #summary>KRX의 승인 서비스별 TTL은 별도 정책 없이는 재수집할 수 없습니다. OPENDART/KIS의 캐시 시간은 KBX 운영정책이며 공급자 공식 호출한도와 구분합니다.</template>
</KbxListPage></template>
<style scoped>.notice{padding:var(--kbx-space-2);border:1px solid var(--kbx-color-border);background:var(--kbx-color-surface-muted)}</style>
