<script setup lang="ts">
import { ref, reactive } from 'vue'
import VersionGovernancePage from '../../../shared/ui/screen-types/v2/VersionGovernancePage.vue'
import AutomationBoundaryPanel from '../components/AutomationBoundaryPanel.vue'
import ModelOperationTable from '../components/ModelOperationTable.vue'
import { useModelOperationsPlanQuery } from '../queries'
import type { StandardScreenState } from '../../../shared/ui/contracts/screenContract'

const planQuery = useModelOperationsPlanQuery()

const screenState = ref<StandardScreenState>('READY')
const evidence = reactive({
  asOf: '2026-08-15T19:42:00Z',
  version: 'v60-T10-Contract',
})

const handleRetry = () => {
  planQuery.refetch()
}
</script>

<template>
  <VersionGovernancePage
    title="모델 버전 거버넌스 (Model Governance & Versioning)"
    subtitle="알고리즘 평가, Drift 지표, Champion/Challenger 버전 비교 및 승격 증거를 관리합니다."
    :state="planQuery.isLoading.value ? 'LOADING' : planQuery.error.value ? 'ERROR' : !planQuery.data.value ? 'EMPTY' : screenState"
    :evidence="evidence"
    @retry="handleRetry"
  >
    <!-- Default Slot: Content Panel -->
    <div v-if="planQuery.data.value" class="content">
      <AutomationBoundaryPanel
        :algorithm-status="planQuery.data.value.algorithmStatus"
        :order-capability="planQuery.data.value.orderCapability"
        :model-mutation-boundary="planQuery.data.value.modelMutationBoundary"
      />
      <ModelOperationTable :operations="planQuery.data.value.operations" />
    </div>
  </VersionGovernancePage>
</template>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  flex: 1;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
}
</style>
