import { useEffect, useState } from 'react'
import { Badge } from '@/components/atoms'
import { getWanInterfaces, type WanInterface } from '@/lib/api'

export function WanPage() {
  const [wans, setWans] = useState<WanInterface[]>([])

  useEffect(() => {
    getWanInterfaces().then(setWans).catch(() => {})
  }, [])

  return (
    <div className="p-6">
      <h1 className="text-lg font-bold text-[var(--color-text-primary)] mb-4">多 WAN 管理</h1>
      {wans.length === 0 ? (
        <div className="text-center py-20 text-[var(--color-text-tertiary)]">
          暂无 WAN 口配置（需在 Debian 环境运行）
        </div>
      ) : (
        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
          {wans.map((w) => (
            <div key={w.id} className="glass-panel p-5">
              <div className="flex items-center justify-between mb-3">
                <h3 className="font-semibold text-[var(--color-text-primary)]">{w.name}</h3>
                <Badge variant={w.enable ? 'success' : 'default'}>
                  {w.enable ? '启用' : '禁用'}
                </Badge>
              </div>
              <div className="text-sm text-[var(--color-text-secondary)] space-y-1.5">
                <div>类型：{wanKindLabel(w.kind)}</div>
                <div>IP：{w.ip || '-'}</div>
                <div>网关：{w.gateway || '-'}</div>
                <div>权重：{w.weight}</div>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

function wanKindLabel(kind: number): string {
  const map: Record<number, string> = { 0: 'DHCP', 1: 'PPPoE', 2: '静态IP' }
  return map[kind] || `类型${kind}`
}