import { CrudPage } from '../components/Crud'
import { Badge, TENANTS } from '../components/ui'
import { getStores, createStore, updateStore, deleteStore } from '../api/client'

// 매장 관리 — 매장코드가 간판정보/사용자계정/백업 중앙배포의 키.
export default function StoreList() {
  return (
    <CrudPage
      title="매장 관리"
      subtitle="매장코드는 간판정보·사용자계정·백업 중앙배포의 기준 키입니다."
      addLabel="매장 추가"
      queryKey={['stores']}
      fetcher={() => getStores()}
      onCreate={createStore} onUpdate={updateStore} onDelete={deleteStore}
      defaults={{ tenantCode: 'ZIOINFO', active: true }}
      columns={[
        { key: 'tenantCode', header: '테넌트', render: r => <span className="text-brand text-xs">{r.tenantCode}</span> },
        { key: 'storeCode', header: '매장코드', render: r => <span className="font-mono text-xs">{r.storeCode}</span> },
        { key: 'storeName', header: '매장명', render: r => <span className="text-white">{r.storeName}</span> },
        { key: 'address', header: '주소', render: r => <span className="text-xs text-gray-400 truncate block max-w-[220px]">{r.address}</span> },
        { key: 'managerName', header: '담당자' },
        { key: 'active', header: '상태', render: r => <Badge tone={r.active ? 'green' : 'gray'}>{r.active ? '운영' : '중지'}</Badge> },
      ]}
      form={[
        { key: 'tenantCode', label: '테넌트', type: 'select', opts: TENANTS },
        { key: 'storeCode', label: '매장코드', placeholder: '예: STORE001' },
        { key: 'storeName', label: '매장명' },
        { key: 'address', label: '주소' },
        { key: 'phone', label: '전화' },
        { key: 'managerName', label: '담당자' },
        { key: 'active', label: '운영 여부', type: 'checkbox' },
      ]}
    />
  )
}
