<script setup lang="ts">
import type { ModelOperationItem } from '../schema'
import { KsDataGrid } from '../../../shared/ui/components'
import type { UiGridColumn } from '../../../shared/ui/adapter/contracts'

const props = defineProps<{ operations: ModelOperationItem[] }>()

const columns: UiGridColumn[] = [
  { field: 'operationCode', header: 'Job ID', width: 110 },
  { field: 'name', header: '작업명', flex: 1, minWidth: 160 },
  { field: 'cadence', header: '주기', width: 90 },
  { field: 'automationMode', header: '자동화 모드', width: 140 },
  { field: 'queue', header: 'Queue', width: 140 },
  { field: 'gate', header: 'Gate', width: 140 },
  {
    field: 'primaryOwner',
    header: '담당자 (Primary / Secondary)',
    flex: 1,
    formatter: (_, row) => {
      const r = row as ModelOperationItem
      return `${r.primaryOwner} / ${r.secondaryOwner}`
    },
  },
  { field: 'output', header: '필수 증거 및 산출물', flex: 1, minWidth: 180 },
]
</script>

<template>
  <div class="operation-plan-panel">
    <h3 class="panel-title">📋 지속 평가·개선 작업 계획</h3>
    <div class="grid-wrapper">
      <KsDataGrid
        :rows="props.operations"
        :columns="columns"
        height="100%"
        :show-row-number="true"
      />
    </div>
  </div>
</template>

<style scoped>
.operation-plan-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  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);
  margin-top: var(--ks-space-2);
}

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

.grid-wrapper {
  width: 100%;
  flex: 1;
  height: 100%;
  min-height: 0;
  border: 1px solid var(--ks-color-border);
  border-radius: var(--ks-radius-sm);
  overflow: hidden;
}
</style>
