<script setup lang="ts">
import QueryStateBoundary from '../../../shared/ui/QueryStateBoundary.vue'
import AutomationBoundaryPanel from '../components/AutomationBoundaryPanel.vue'
import ModelOperationTable from '../components/ModelOperationTable.vue'
import { useModelOperationsPlanQuery } from '../queries'

const planQuery = useModelOperationsPlanQuery()
</script>

<template>
  <article>
    <header>
      <h1>모델 운영·지속 고도화</h1>
      <p>일·주·월·분기 평가, drift, champion/challenger, 개선 제안과 승격 증거를 관리합니다.</p>
    </header>

    <QueryStateBoundary
      :loading="planQuery.isLoading.value"
      :error="planQuery.error.value as Error | null"
      :empty="!planQuery.data.value"
    >
      <template v-if="planQuery.data.value">
        <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" />
      </template>
    </QueryStateBoundary>
  </article>
</template>
