import { CrudPage } from '../components/Crud'
import { Badge, TENANTS } from '../components/ui'
import { getStoreGroups, createStoreGroup, updateStoreGroup, deleteStoreGroup } from '../api/client'

// 매장 그룹 — 템플릿/펌웨어 일괄배포 대상 묶음.
export default function StoreGroupList() {
  return (
    <CrudPage
      title="매장 그룹"
      subtitle="일괄배포 대상 매장 묶음 관리"
      addLabel="그룹 추가"
      queryKey={['store-groups']}
      fetcher={() => getStoreGroups()}
      onCreate={createStoreGroup} onUpdate={updateStoreGroup} onDelete={deleteStoreGroup}
      defaults={{ tenantCode: 'ZIOINFO', active: true }}
      columns={[
        { key: 'tenantCode', header: '테넌트', render: r => <span className="text-brand text-xs">{r.tenantCode}</span> },
        { key: 'groupCode', header: '그룹코드', render: r => <span className="font-mono text-xs">{r.groupCode}</span> },
        { key: 'groupName', header: '그룹명', render: r => <span className="text-white">{r.groupName}</span> },
        { key: 'description', header: '설명' },
        { key: 'active', header: '상태', render: r => <Badge tone={r.active ? 'green' : 'gray'}>{r.active ? '사용' : '중지'}</Badge> },
      ]}
      form={[
        { key: 'tenantCode', label: '테넌트', type: 'select', opts: TENANTS },
        { key: 'groupCode', label: '그룹코드' },
        { key: 'groupName', label: '그룹명' },
        { key: 'description', label: '설명' },
        { key: 'active', label: '사용 여부', type: 'checkbox' },
      ]}
    />
  )
}
