<script setup lang="ts">
import { KsStatusTag } from '../../../shared/ui/components'

defineProps<{
  algorithmStatus: string
  orderCapability: string
  modelMutationBoundary: string
}>()
</script>

<template>
  <div class="boundary-panel">
    <h3 class="panel-title">🛡️ 모델 운영 및 자동화 통제 경계</h3>
    <div class="boundary-grid">
      <div class="boundary-item">
        <span class="label">알고리즘 상태</span>
        <KsStatusTag :value="algorithmStatus" severity="info" />
      </div>
      <div class="boundary-item">
        <span class="label">자동주문 제출 Capability</span>
        <KsStatusTag :value="orderCapability" severity="danger" />
      </div>
      <div class="boundary-item">
        <span class="label">모델 변이 (Mutation) 경계</span>
        <KsStatusTag :value="modelMutationBoundary" severity="warning" />
      </div>
    </div>
    <div class="boundary-notice">
      ℹ️ <strong>통제 지침:</strong> 스케줄러는 평가 증거 및 개선 제안만 생성합니다. 모델 승격·롤백·임계값 변경은 독립 검증과 Maker-Checker 승인을 거쳐야 합니다.
    </div>
  </div>
</template>

<style scoped>
.boundary-panel {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-3);
  padding: var(--ks-space-3);
  background: var(--ks-color-surface);
  border: 1px solid var(--ks-color-border);
  border-radius: var(--ks-radius-sm);
}

.panel-title {
  margin: 0;
  font-size: var(--ks-font-section);
  font-weight: 700;
  color: var(--ks-color-neutral-800);
}

.boundary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--ks-space-3);
}

.boundary-item {
  display: flex;
  flex-direction: column;
  gap: var(--ks-space-1);
  padding: var(--ks-space-2) var(--ks-space-3);
  background: var(--ks-color-canvas);
  border: 1px solid var(--ks-color-neutral-200);
  border-radius: var(--ks-radius-sm);
}

.boundary-item .label {
  font-size: var(--ks-font-caption);
  color: var(--ks-color-neutral-600);
  font-weight: 600;
}

.boundary-notice {
  font-size: var(--ks-font-caption);
  color: #1e3a8a;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  padding: var(--ks-space-2) var(--ks-space-3);
  border-radius: var(--ks-radius-sm);
}
</style>
