import { useApi } from '../hooks/useApi'
import { guardiaApi } from '../api/clients'
import { DataTable } from '../components/common/DataTable'

interface Inst { id: number; inst_code: string; inst_name: string; org_type: string; region: string; sla_hours: number; is_active: boolean }

export default function Institutions() {
  const { data, loading } = useApi<{ items: Inst[]; total: number }>(guardiaApi, '/api/institutions?limit=100')
  const items = data?.items ?? []

  return (
    <DataTable<Inst>
      cols={[
        { key: 'inst_code', header: '코드',   width: 100 },
        { key: 'inst_name', header: '기관명' },
        { key: 'org_type',  header: '유형' },
        { key: 'region',    header: '지역' },
        { key: 'sla_hours', header: 'SLA (시간)', width: 100 },
        { key: 'is_active', header: '상태', render: r => (
          <span style={{ fontSize: 11, background: r.is_active ? '#dcfce7' : '#fee2e2',
            color: r.is_active ? '#16a34a' : '#dc2626',
            padding: '2px 8px', borderRadius: 10 }}>
            {r.is_active ? '활성' : '비활성'}
          </span>
        )},
      ]}
      rows={items}
      loading={loading}
      empty="등록된 기관이 없습니다."
      toolbar={<span style={{ fontSize: 12, color: '#64748b' }}>총 {data?.total ?? 0}개 기관</span>}
    />
  )
}
