import { CrudPage } from '../components/Crud'
import { Badge, TENANTS } from '../components/ui'
import { getTemplates, createTemplate, updateTemplate, deleteTemplate } from '../api/client'

// 템플릿 관리 — 간판 화면 레이아웃(JSON) 정의. PRICE/INFO/PROMO/CUSTOM.
const TYPES = ['PRICE', 'INFO', 'PROMO', 'CUSTOM']

export default function TemplateList() {
  return (
    <CrudPage
      title="템플릿 관리"
      subtitle="간판 화면 레이아웃 템플릿(폭·높이·레이아웃 JSON) 정의"
      addLabel="템플릿 추가"
      queryKey={['templates']}
      fetcher={() => getTemplates()}
      onCreate={createTemplate} onUpdate={updateTemplate} onDelete={deleteTemplate}
      defaults={{ tenantCode: 'ZIOINFO', templateType: 'PRICE', width: 400, height: 300, active: true }}
      columns={[
        { key: 'templateCode', header: '코드', render: r => <span className="font-mono text-xs text-white">{r.templateCode}</span> },
        { key: 'templateName', header: '이름' },
        { key: 'templateType', header: '유형', render: r => <Badge tone="blue">{r.templateType}</Badge> },
        { key: 'size', header: '크기', render: r => <span className="text-xs text-gray-400">{r.width}×{r.height}</span> },
        { key: 'active', header: '상태', render: r => <Badge tone={r.active ? 'green' : 'gray'}>{r.active ? '사용' : '중지'}</Badge> },
      ]}
      form={[
        { key: 'tenantCode', label: '테넌트', type: 'select', opts: TENANTS },
        { key: 'templateCode', label: '템플릿 코드' },
        { key: 'templateName', label: '템플릿 이름' },
        { key: 'templateType', label: '유형', type: 'select', opts: TYPES },
        { key: 'width', label: '폭(px)', type: 'number' },
        { key: 'height', label: '높이(px)', type: 'number' },
        { key: 'description', label: '설명' },
        { key: 'layoutJson', label: '레이아웃 JSON', type: 'textarea', placeholder: '{ "fields": [] }' },
        { key: 'active', label: '사용 여부', type: 'checkbox' },
      ]}
    />
  )
}
