import { CrudPage } from '../components/Crud'
import { Badge, TENANTS } from '../components/ui'
import { getRegions, createRegion, updateRegion, deleteRegion } from '../api/client'

// 지역(Region) 관리 — 서울/대전/대구/부산 등 광역 배포 단위(DC 매핑).
export default function RegionList() {
  return (
    <CrudPage
      title="지역 관리"
      subtitle="전자간판 광역 배포 단위(지역/데이터센터). 예: 서울·대전·대구·부산"
      addLabel="지역 추가"
      queryKey={['regions']}
      fetcher={() => getRegions()}
      onCreate={createRegion} onUpdate={updateRegion} onDelete={deleteRegion}
      defaults={{ tenantCode: 'ZIOINFO', active: true }}
      columns={[
        { key: 'tenantCode', header: '테넌트', render: r => <span className="text-brand text-xs">{r.tenantCode}</span> },
        { key: 'regionCode', header: '지역코드', render: r => <span className="font-mono text-xs">{r.regionCode}</span> },
        { key: 'regionName', header: '지역명', render: r => <span className="text-white">{r.regionName}</span> },
        { key: 'dcName', header: 'DC명' },
        { key: 'active', header: '상태', render: r => <Badge tone={r.active ? 'green' : 'gray'}>{r.active ? '사용' : '중지'}</Badge> },
      ]}
      form={[
        { key: 'tenantCode', label: '테넌트', type: 'select', opts: TENANTS },
        { key: 'regionCode', label: '지역코드', placeholder: '예: SEOUL' },
        { key: 'regionName', label: '지역명', placeholder: '예: 서울' },
        { key: 'dcName', label: 'DC명', placeholder: '예: 서울 데이터센터' },
        { key: 'description', label: '설명' },
        { key: 'active', label: '사용 여부', type: 'checkbox' },
      ]}
    />
  )
}
