import { useEffect, useState } from 'react'
import { Button, Badge } from '@/components/atoms'
import { DataTable, type DataColumn } from '@/components/common/DataTable'
import { getFirewallRules, type FirewallRule } from '@/lib/api'

const KIND_LABELS: Record<number, string> = { 0: '端口转发', 1: 'DMZ', 2: '自定义' }

export function FirewallPage() {
  const [rules, setRules] = useState<FirewallRule[]>([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    getFirewallRules().then(setRules).catch(() => {}).finally(() => setLoading(false))
  }, [])

  const columns: DataColumn<FirewallRule>[] = [
    {
      key: 'kind', label: '类型', sortable: true,
      render: (r) => <Badge variant="primary">{KIND_LABELS[r.kind] || `规则${r.kind}`}</Badge>,
    },
    { key: 'protocol', label: '协议', sortable: true },
    { key: 'extPort', label: '外部端口' },
    { key: 'intIP', label: '内网 IP', render: (r) => `${r.intIP}:${r.intPort}` },
    {
      key: 'enable', label: '状态', sortable: true,
      render: (r) => <Badge variant={r.enable ? 'success' : 'default'}>{r.enable ? '启用' : '禁用'}</Badge>,
    },
  ]

  return (
    <div className="p-6">
      <div className="flex items-center justify-between mb-4">
        <h1 className="text-lg font-bold text-[var(--color-text-primary)]">防火墙规则</h1>
        <Button variant="soft" size="sm" onClick={() => getFirewallRules().then(setRules)}>刷新</Button>
      </div>
      <DataTable
        data={rules}
        columns={columns}
        rowKey={(r) => r.id}
        searchFields={['protocol', 'intIP']}
        searchPlaceholder="搜索协议 / IP…"
        loading={loading}
        emptyText="暂无规则（需在 Debian 环境运行）"
      />
    </div>
  )
}