import { useState, useEffect, useCallback, useRef, type ReactNode } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import {
  ArrowLeft,
  AlertTriangle,
  Camera,
  Clock,
  Copy,
  Cpu,
  HardDrive,
  Key,
  Maximize2,
  MemoryStick,
  Minimize2,
  Monitor,
  Network,
  Pencil,
  Play,
  Plus,
  RefreshCw,
  Save,
  Settings,
  Square,
  TerminalSquare,
  Trash2,
  UserPlus,
  X,
} from 'lucide-react'
import {
  default as api,
  addPortMapping,
  assignIPv6,
  APIResponse,
  Container,
  ContainerUsage,
  createSubUser,
  createContainerSnapshot,
  deleteContainer,
  deleteContainerSnapshot,
  deletePortMapping,
  getContainer,
  getContainerSnapshots,
  getContainerUsage,
  getHostInfo,
  getTrafficInfo,
  HostInfo,
  TrafficInfo,
  getEnabledImages,
  getFirewall,
  PortMapping,
  FirewallRule,
  reinstallContainer,
  resetSSHPassword,
  restartContainer,
  startContainer,
  stopContainer,
  Snapshot,
  SnapshotSchedule,
  Template,
  updateContainerExpiry,
  updateFirewall,
  updateSnapshotQuota,
  updateSnapshotSchedule,
  restoreContainerSnapshot,
  resetTraffic,
  updateTrafficLimit,
  updateResourceLimit,
  updatePortMapping,
  SubUser,
} from '../services/api'
import { useDialog } from '../components/Dialog'
import { useAuth } from '../contexts/AuthContext'
import WebSSHViewer from '../components/WebSSHViewer'
import WebVNCViewer from '../components/WebVNCViewer'
import { RingStat } from '../components/RingStats'
import { copyToClipboard } from '../utils/clipboard'
import ResourceStatsPanel, {
  ChartPoint,
  ResourceChartConfig,
  StatsRangeKey,
  statsRanges,
} from '../components/ResourceStatsPanel'
import { generateSSHPassword, sshPasswordError, sshPublicKeyError, type ReinstallSSHAuthMode } from '../utils/sshAuth'

const PUBLIC_HOST = window.location.hostname
const inputClass = 'w-full px-3 py-2 border border-gray-300 rounded-md text-sm text-black bg-white focus:outline-none focus:ring-2 focus:ring-black focus:border-black'

type MetricPoint = {
  ts: number
  cpu: number
  memory: number
  network: number
  diskIO: number
}
type MappingDraft = {
  index: number | null
  description: string
  host_port: string
  host_ip: string
  container_port: string
  protocol: string
}

const emptyDraft: MappingDraft = {
  index: null,
  description: '',
  host_port: '',
  host_ip: '',
  container_port: '',
  protocol: 'all',
}

export default function ContainerDetail() {
  const { id: paramId } = useParams<{ id: string }>()
  const containerIdentifier = paramId || ''
  const navigate = useNavigate()
  const dialog = useDialog()
  const { isSubUser } = useAuth()
  const [container, setContainer] = useState<Container | null>(null)
  const [hostInfo, setHostInfo] = useState<HostInfo | null>(null)
  const [usage, setUsage] = useState<ContainerUsage | null>(null)
  const [history, setHistory] = useState<MetricPoint[]>(() => readHistory(containerIdentifier))
  const [range, setRange] = useState<StatsRangeKey>('30m')
  const [loading, setLoading] = useState(true)
  const [actionLoading, setActionLoading] = useState<string | null>(null)
  const [taskStatus, setTaskStatus] = useState('') // current task type for this container
  const [showSSH, setShowSSH] = useState(false)
  const [showVNC, setShowVNC] = useState(false)
  const vncFullscreenRef = useRef<HTMLDivElement>(null)
  const [vncFullscreen, setVncFullscreen] = useState(false)
  const [showNat, setShowNat] = useState(false)
  const [showMappingEditor, setShowMappingEditor] = useState(false)
  const [showExpiryEdit, setShowExpiryEdit] = useState(false)
  const [editExpiry, setEditExpiry] = useState('')
  const [savingExpiry, setSavingExpiry] = useState(false)
  const [draft, setDraft] = useState<MappingDraft>(emptyDraft)
  const [savingMapping, setSavingMapping] = useState(false)
  const [showReinstall, setShowReinstall] = useState(false)
  const [templates, setTemplates] = useState<Template[]>([])
  const [selectedTemplate, setSelectedTemplate] = useState('')
  const [reinstallAuthMode, setReinstallAuthMode] = useState<ReinstallSSHAuthMode>('keep')
  const [reinstallPasswordDraft, setReinstallPasswordDraft] = useState('')
  const [reinstallPublicKeyDraft, setReinstallPublicKeyDraft] = useState('')
  const [reinstalling, setReinstalling] = useState(false)
  const [traffic, setTraffic] = useState<TrafficInfo | null>(null)
  const [subUser, setSubUser] = useState<SubUser | null>(null)
  const [showSubUser, setShowSubUser] = useState(false)
  const [showTrafficEdit, setShowTrafficEdit] = useState(false)
  const [trafficEdit, setTrafficEdit] = useState({ mode: 'total', monthly: 0, inGB: 0, outGB: 0 })
  const [savingTraffic, setSavingTraffic] = useState(false)
  const [showResourceEdit, setShowResourceEdit] = useState(false)
  const [resourceEdit, setResourceEdit] = useState({ vcpu: 1, ramMb: 512, networkDownMbps: 0, networkUpMbps: 0, ioReadMbps: 0, ioWriteMbps: 0 })
  const [savingResource, setSavingResource] = useState(false)
  const [showPassword, setShowPassword] = useState(false)
  const [showResetPassword, setShowResetPassword] = useState(false)
  const [resetPasswordDraft, setResetPasswordDraft] = useState('')
  const [resetPasswordResult, setResetPasswordResult] = useState('')
  const [resetPasswordSaving, setResetPasswordSaving] = useState(false)
  const [showSnapshots, setShowSnapshots] = useState(false)
  const [snapshots, setSnapshots] = useState<Snapshot[]>([])
  const [snapshotQuota, setSnapshotQuota] = useState(3)
  const [snapshotQuotaDraft, setSnapshotQuotaDraft] = useState(3)
  const [editingSnapshotQuota, setEditingSnapshotQuota] = useState(false)
  const [snapshotSchedule, setSnapshotSchedule] = useState<SnapshotSchedule | null>(null)
  const [snapshotBusy, setSnapshotBusy] = useState('')
  const [showSnapshotSchedule, setShowSnapshotSchedule] = useState(false)
  const [snapshotScheduleDraft, setSnapshotScheduleDraft] = useState({ intervalHours: 24, time: '03:00' })
  const [showFirewall, setShowFirewall] = useState(false)
  const [firewallEnabled, setFirewallEnabled] = useState(false)
  const [firewallDefaultAction, setFirewallDefaultAction] = useState<'ACCEPT' | 'DROP'>('DROP')
  const [firewallRules, setFirewallRules] = useState<FirewallRule[]>([])
  const [firewallSaving, setFirewallSaving] = useState(false)
  const [firewallMessage, setFirewallMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
  const [editingFirewallRule, setEditingFirewallRule] = useState<FirewallRule | null>(null)
  const [showFirewallEditor, setShowFirewallEditor] = useState(false)

  const fetchContainer = useCallback(async () => {
    if (!containerIdentifier) return
    try {
      const [res, hostRes] = await Promise.all([
        getContainer(containerIdentifier),
        isSubUser ? Promise.resolve(null) : getHostInfo().catch(() => null),
      ])
      if (res.data.data) setContainer(res.data.data)
      if (hostRes?.data.data) setHostInfo(hostRes.data.data)
    } catch (err) {
      console.error('Failed to fetch container:', err)
    } finally {
      setLoading(false)
    }
  }, [containerIdentifier, isSubUser])

  const fetchSnapshots = useCallback(async () => {
    if (!containerIdentifier) return
    try {
      const res = await getContainerSnapshots(containerIdentifier)
      const data = res.data.data
      const quota = data?.quota || container?.snapshot_limit || 3
      setSnapshots(data?.snapshots || [])
      setSnapshotQuota(quota)
      setSnapshotQuotaDraft(quota)
      setSnapshotSchedule(data?.schedule || null)
    } catch (err) {
      console.error('Failed to fetch snapshots:', err)
    }
  }, [containerIdentifier, container?.snapshot_limit])

  const appendUsagePoint = useCallback((nextUsage: ContainerUsage, currentContainer: Container | null) => {
    if (!containerIdentifier || !currentContainer) return

    const memoryTotalBytes = nextUsage.memory_total_bytes && nextUsage.memory_total_bytes > 0
      ? nextUsage.memory_total_bytes
      : currentContainer.ram_mb * 1024 * 1024
    const memoryPct = memoryTotalBytes > 0
      ? (nextUsage.memory_usage_bytes / memoryTotalBytes) * 100
      : 0
    const networkBps = (nextUsage.network_rx_bps || 0) + (nextUsage.network_tx_bps || 0)
    const diskIOBps = (nextUsage.disk_read_bps || 0) + (nextUsage.disk_write_bps || 0)

    const point: MetricPoint = {
      ts: Date.now(),
      cpu: clamp((nextUsage.cpu_usage_pct || 0) / (currentContainer.vcpu || 1)),
      memory: clamp(memoryPct),
      network: networkBps,
      diskIO: diskIOBps,
    }

    setHistory((prev) => {
      const cutoff = Date.now() - statsRanges['1w']
      const next = [...prev.filter((item) => item.ts >= cutoff), point]
      localStorage.setItem(historyKey(currentContainer.uuid || containerIdentifier), JSON.stringify(next))
      return next
    })
  }, [containerIdentifier])

  const fetchUsage = useCallback(async () => {
    if (!containerIdentifier) return
    try {
      const res = await getContainerUsage(containerIdentifier)
      if (res.data.data) {
        setUsage(res.data.data)
        appendUsagePoint(res.data.data, container)
      }
    } catch (err) {
      console.error('Failed to fetch usage:', err)
    }
  }, [containerIdentifier, container, appendUsagePoint])

  useEffect(() => {
    if (!containerIdentifier) return
    setHistory(readHistory(container?.uuid || containerIdentifier))
  }, [containerIdentifier, container?.uuid])

  useEffect(() => {
    fetchContainer()
    // Auto-refresh container status every 5s (silent, no spinner)
    const timer = window.setInterval(fetchContainer, 5000)
    return () => window.clearInterval(timer)
  }, [fetchContainer])

  useEffect(() => {
    const handleFullscreenChange = () => {
      setVncFullscreen(document.fullscreenElement === vncFullscreenRef.current)
    }
    document.addEventListener('fullscreenchange', handleFullscreenChange)
    return () => document.removeEventListener('fullscreenchange', handleFullscreenChange)
  }, [])

  const toggleVNCFullscreen = async () => {
    const target = vncFullscreenRef.current
    if (!target) return
    try {
      if (document.fullscreenElement === target) {
        await document.exitFullscreen()
      } else {
        await target.requestFullscreen()
      }
    } catch {
      setVncFullscreen((value) => !value)
    }
  }

  useEffect(() => {
    fetchUsage()
    const timer = window.setInterval(fetchUsage, 5000)
    return () => window.clearInterval(timer)
  }, [fetchUsage])

  useEffect(() => {
    if (showSnapshots) fetchSnapshots()
  }, [showSnapshots, fetchSnapshots])

  // Poll task status for this container
  useEffect(() => {
    if (!containerIdentifier) return
    const check = async () => {
      try {
        const { getTasks } = await import('../services/api')
        const res = await getTasks()
        if (res.data.data) {
          for (const t of res.data.data) {
            const matchesContainer = container
              ? t.container_id === container.id || t.container_name === container.name
              : false
            if (matchesContainer && (t.status === 'pending' || t.status === 'running')) {
              setTaskStatus(t.type)
              return
            }
          }
        }
        setTaskStatus('')
      } catch { /* ignore */ }
    }
    check()
    const t = setInterval(check, 2000)
    return () => clearInterval(t)
  }, [containerIdentifier, container?.id])

  const taskActionLabels: Record<string, string> = {
    start: '开机中...', stop: '关机中...', restart: '重启中...', delete: '删除中...', reinstall: '重装中...',
  }

  const ensureSubUserCanOperate = async () => {
    if (isSubUser && container?.policy_blocked) {
      await dialog.alert('策略临时封禁', container.policy_blocked_reason || '虚拟机被策略临时封禁，暂不能执行操作。')
      return false
    }
    return true
  }

  const handleAction = async (action: string) => {
    if (!containerIdentifier) return
    if (!(await ensureSubUserCanOperate())) return
    setActionLoading(action)
    try {
      switch (action) {
        case 'start':
          await startContainer(containerIdentifier)
          break
        case 'stop':
          await stopContainer(containerIdentifier)
          setShowSSH(false)
          setShowVNC(false)
          break
        case 'restart':
          await restartContainer(containerIdentifier)
          break
        case 'delete':
          if (!(await dialog.confirm('删除容器', `确定要删除容器 ${container?.name} 吗？此操作不可撤销。`))) return
          await deleteContainer(containerIdentifier)
          navigate('/containers')
          return
      }
      await fetchContainer()
    } catch (err) {
      console.error('Action failed:', err)
      dialog.alert('操作失败', (err as Error).message || '请稍后重试')
    } finally {
      setActionLoading(null)
    }
  }

  const openTrafficEdit = () => {
    if (!container) return
    setTrafficEdit({
      mode: container.traffic_mode || 'total',
      monthly: container.monthly_traffic_gb || 0,
      inGB: container.traffic_in_gb || 0,
      outGB: container.traffic_out_gb || 0,
    })
    setShowTrafficEdit(true)
  }

  const saveTrafficLimit = async () => {
    if (!container) return
    setSavingTraffic(true)
    try {
      await updateTrafficLimit(container.id, {
        traffic_mode: trafficEdit.mode,
        monthly_traffic_gb: trafficEdit.monthly,
        traffic_in_gb: trafficEdit.inGB,
        traffic_out_gb: trafficEdit.outGB,
      })
      setShowTrafficEdit(false)
      fetchContainer()
    } catch (err) {
      dialog.alert('错误', '保存失败')
    } finally {
      setSavingTraffic(false)
    }
  }

  const openResourceEdit = () => {
    if (!container) return
    setResourceEdit({
      vcpu: container.vcpu,
      ramMb: container.ram_mb,
      networkDownMbps: resourceLimitValue(container.network_down_mbps, container.network_bw_mbps),
      networkUpMbps: resourceLimitValue(container.network_up_mbps, container.network_bw_mbps),
      ioReadMbps: resourceLimitValue(container.io_read_mbps, container.io_speed_mbps),
      ioWriteMbps: resourceLimitValue(container.io_write_mbps, container.io_speed_mbps),
    })
    setShowResourceEdit(true)
  }

  const saveResourceLimit = async () => {
    if (!container) return
    setSavingResource(true)
    try {
      await updateResourceLimit(container.id, {
        vcpu: resourceEdit.vcpu,
        ram_mb: resourceEdit.ramMb,
        network_down_mbps: resourceEdit.networkDownMbps,
        network_up_mbps: resourceEdit.networkUpMbps,
        network_bw_mbps: symmetricLimit(resourceEdit.networkDownMbps, resourceEdit.networkUpMbps),
        io_read_mbps: resourceEdit.ioReadMbps,
        io_write_mbps: resourceEdit.ioWriteMbps,
        io_speed_mbps: symmetricLimit(resourceEdit.ioReadMbps, resourceEdit.ioWriteMbps),
      })
      setShowResourceEdit(false)
      fetchContainer()
    } catch (err) {
      dialog.alert('错误', '保存失败')
    } finally {
      setSavingResource(false)
    }
  }

  const syncFirewallState = (enabled: boolean, defaultAction: 'ACCEPT' | 'DROP', rules: FirewallRule[]) => {
    const nextRules = rules.map(r => ({ ...r }))
    setFirewallEnabled(enabled)
    setFirewallDefaultAction(defaultAction)
    setFirewallRules(nextRules)
    setContainer(prev => prev ? {
      ...prev,
      firewall_enabled: enabled,
      firewall_default_action: defaultAction,
      firewall_rules: nextRules.map(r => ({ ...r })),
    } : prev)
  }

  const openFirewall = async () => {
    if (!container) return
    syncFirewallState(container.firewall_enabled || false, container.firewall_default_action || 'DROP', container.firewall_rules || [])
    setFirewallMessage(null)
    setShowFirewall(true)
    try {
      const res = await getFirewall(container.id)
      const data = res.data.data
      if (data) syncFirewallState(data.enabled, data.default_action || 'DROP', data.rules || [])
    } catch (err) {
      console.error('Failed to load firewall:', err)
    }
  }

  const saveFirewall = async () => {
    if (!container) return
    setFirewallSaving(true)
    try {
      const res = await updateFirewall(container.id, { enabled: firewallEnabled, default_action: firewallDefaultAction, rules: firewallRules })
      const data = res.data.data
      if (data) {
        syncFirewallState(data.enabled, data.default_action || 'DROP', data.rules || [])
      }
      setFirewallMessage({ type: 'success', text: '防火墙设置已保存并应用' })
      fetchContainer()
    } catch (err: any) {
      const message = err?.response?.data?.message || '保存防火墙设置失败'
      setFirewallMessage({ type: 'error', text: message })
      dialog.alert('错误', message)
    } finally {
      setFirewallSaving(false)
    }
  }

  const addFirewallRule = () => {
    const hasIPv4Firewall = (container?.public_ipv4s?.length || 0) > 0 || Math.max(container?.port_mapping_limit || 0, container?.port_mappings?.length || 0) > 0
    const hasIPv6Firewall = !!container?.ipv6 || (container?.ipv6_addresses?.length || 0) > 0
    setEditingFirewallRule({
      id: '',
      network: hasIPv4Firewall ? 'ipv4' : hasIPv6Firewall ? 'ipv6' : 'ipv4',
      direction: 'in',
      protocol: 'tcp',
      port: '',
      source_ip: '',
      action: 'DROP',
      description: '',
      enabled: true,
    })
    setShowFirewallEditor(true)
  }

  const saveFirewallRule = (rule: FirewallRule) => {
    if (rule.id) {
      // Update existing
      setFirewallRules(firewallRules.map(r => r.id === rule.id ? rule : r))
    } else {
      // Add new with temporary ID
      const newRule = { ...rule, id: `tmp-${Date.now()}` }
      setFirewallRules([...firewallRules, newRule])
    }
    setShowFirewallEditor(false)
    setEditingFirewallRule(null)
  }

  const deleteFirewallRule = (ruleId: string) => {
    setFirewallRules(firewallRules.filter(r => r.id !== ruleId))
  }

  const toggleFirewallRule = (ruleId: string) => {
    setFirewallRules(firewallRules.map(r => r.id === ruleId ? { ...r, enabled: !r.enabled } : r))
  }

  const openReinstall = async () => {
    try {
      const res = await getEnabledImages(container?.virtualization || 'lxc')
      if (res.data.data) {
        setTemplates(res.data.data)
        setSelectedTemplate(res.data.data[0]?.id || '')
      }
      setReinstallAuthMode('keep')
      setReinstallPasswordDraft('')
      setReinstallPublicKeyDraft('')
      setShowReinstall(true)
    } catch (err) {
      console.error(err)
    }
  }

  const handleCreateSubUser = async () => {
    if (!container?.uuid) return
    try {
      const res = await createSubUser(container.uuid)
      if (res.data.success && res.data.data) {
        setSubUser(res.data.data)
        setShowSubUser(true)
      }
    } catch (err) {
      console.error(err)
    }
  }

  const handleReinstall = async () => {
    if (!containerIdentifier || !selectedTemplate) return
    const linuxTemplate = !isWindowsTemplate(selectedTemplate)
    if (linuxTemplate && reinstallAuthMode === 'password') {
      const validationError = sshPasswordError(reinstallPasswordDraft.trim())
      if (validationError) {
        await dialog.alert('密码格式不正确', validationError)
        return
      }
    }
    if (linuxTemplate && reinstallAuthMode === 'key') {
      const validationError = sshPublicKeyError(reinstallPublicKeyDraft)
      if (validationError) {
        await dialog.alert('SSH Key 格式不正确', validationError)
        return
      }
    }
    setReinstalling(true)
    try {
      await reinstallContainer(containerIdentifier, selectedTemplate, linuxTemplate ? {
        ssh_auth_mode: reinstallAuthMode,
        ssh_password: reinstallAuthMode === 'password' ? reinstallPasswordDraft.trim() : '',
        ssh_public_key: reinstallAuthMode === 'key' ? reinstallPublicKeyDraft.trim() : '',
      } : undefined)
      setShowReinstall(false)
      setShowSSH(false)
      setShowVNC(false)
      await fetchContainer()
    } catch (err) {
      console.error('Reinstall failed:', err)
      dialog.alert('重装失败', '请稍后重试')
    } finally {
      setReinstalling(false)
    }
  }

  const generateResetPassword = () => {
    setResetPasswordDraft(generateSSHPassword())
    setResetPasswordResult('')
  }

  const resetPasswordError = (password: string) => {
    return sshPasswordError(password)
  }

  const handleResetPassword = async () => {
    if (!containerIdentifier) return
    const password = resetPasswordDraft.trim()
    const validationError = resetPasswordError(password)
    if (validationError) {
      await dialog.alert('密码格式不正确', validationError)
      return
    }
    setResetPasswordSaving(true)
    try {
      const res = await resetSSHPassword(containerIdentifier, password)
      if (res.data.success) {
        const nextPassword = (res.data.data as { password: string })?.password || password
        setResetPasswordResult(nextPassword)
        setResetPasswordDraft(nextPassword)
        await fetchContainer()
      }
    } catch (err: unknown) {
      console.error(err)
      const error = err as { response?: { data?: { message?: string } } }
      dialog.alert('密码重置失败', error.response?.data?.message || '请稍后重试')
    } finally {
      setResetPasswordSaving(false)
    }
  }

  const openResetPassword = () => {
    setResetPasswordDraft('')
    setResetPasswordResult('')
    setShowResetPassword(true)
  }

  const handleAssignIPv6 = async () => {
    if (!containerIdentifier) return
    setActionLoading('ipv6')
    try {
      await assignIPv6(containerIdentifier)
      await fetchContainer()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } }
      dialog.alert('IPv6 allocation failed', error.response?.data?.message || 'Please try again later')
    } finally {
      setActionLoading(null)
    }
  }

  const openAddMapping = () => {
    if (isSubUser && container?.policy_blocked) return
    setDraft(emptyDraft)
    setShowNat(true)
    setShowMappingEditor(true)
  }

  const openEditMapping = (pm: PortMapping, index: number) => {
    if (isSubUser && container?.policy_blocked) return
    setDraft({
      index,
      description: pm.description,
      host_port: String(pm.host_port),
      host_ip: pm.host_ip || '',
      container_port: String(pm.container_port),
      protocol: pm.protocol || 'all',
    })
    setShowNat(true)
    setShowMappingEditor(true)
  }

  const submitMapping = async (): Promise<boolean> => {
    if (!containerIdentifier) return false
    if (!(await ensureSubUserCanOperate())) return false
    if (draft.index === null && container) {
      const currentCount = container.port_mappings?.length || 0
      const limit = Math.max(container.port_mapping_limit || 0, currentCount)
      if (limit <= 0) {
        dialog.alert('未分配 IPv4 NAT', '该容器未分配 IPv4 NAT 端口配额。')
        return false
      }
      if (currentCount >= limit) {
        dialog.alert('端口配额已满', '已达到管理员分配的 NAT 端口配额。')
        return false
      }
    }
    const containerPort = parseInt(draft.container_port, 10)
    const hostPort = isSubUser ? 0 : (draft.host_port.trim() ? parseInt(draft.host_port, 10) : 0)
    if (!containerPort || containerPort < 1 || containerPort > 65535) {
      dialog.alert('输入错误', '请输入有效的内部端口')
      return false
    }

    // For sub-users editing existing mappings: use original host_port and protocol
    let hostPortVal = hostPort
    let protocolVal = draft.protocol
    if (isSubUser && draft.index !== null && container?.port_mappings?.[draft.index]) {
      const orig = container.port_mappings[draft.index]
      hostPortVal = orig.host_port
      protocolVal = orig.protocol || 'all'
    }

    const payload: PortMapping = {
      container_port: containerPort,
      host_port: hostPortVal,
      host_ip: isSubUser ? undefined : (draft.host_ip || undefined),
      protocol: protocolVal,
      description: draft.description.trim() || `Port-${containerPort}`,
    }

    setSavingMapping(true)
    try {
      if (draft.index === null) {
        await addPortMapping(containerIdentifier, payload)
      } else {
        await updatePortMapping(containerIdentifier, draft.index, payload)
      }
      setDraft(emptyDraft)
      await fetchContainer()
      return true
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } }
      dialog.alert('操作失败', error.response?.data?.message || '保存端口映射失败')
      return false
    } finally {
      setSavingMapping(false)
    }
  }

  const removeMapping = async (index: number) => {
    if (!containerIdentifier || !(await dialog.confirm('删除映射', '确定要删除这条映射规则吗？'))) return
    if (!(await ensureSubUserCanOperate())) return
    try {
      await deletePortMapping(containerIdentifier, index)
      await fetchContainer()
      if (draft.index === index) setDraft(emptyDraft)
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } }
      dialog.alert('操作失败', error.response?.data?.message || '删除端口映射失败')
    }
  }

  const handleCreateSnapshot = async () => {
    if (!containerIdentifier) return
    if (!(await ensureSubUserCanOperate())) return
    if (isSubUser && snapshots.length >= snapshotQuota) {
      await dialog.alert('快照配额已满', '已达到管理员设置的快照配额，请先删除旧快照。')
      return
    }
    if (container?.status === 'running') {
      const confirmed = await dialog.confirm(
        '拍摄快照',
        `拍摄快照需要先关机，完成后会自动重启容器 ${container.name}。是否继续？`
      )
      if (!confirmed) return
    }
    setSnapshotBusy('create')
    try {
      await createContainerSnapshot(containerIdentifier)
      await Promise.all([fetchSnapshots(), fetchContainer()])
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } }
      await dialog.alert('创建快照失败', error.response?.data?.message || '请稍后重试。')
    } finally {
      setSnapshotBusy('')
    }
  }

  const openSnapshotSchedule = () => {
    if (isSubUser && container?.policy_blocked) return
    setSnapshotScheduleDraft({
      intervalHours: Math.max(snapshotSchedule?.interval_hours || 24, 24),
      time: snapshotSchedule?.time || '03:00',
    })
    setShowSnapshotSchedule(true)
  }

  const saveSnapshotSchedule = async (enabled: boolean) => {
    if (!containerIdentifier) return
    if (!(await ensureSubUserCanOperate())) return
    const intervalHours = snapshotScheduleDraft.intervalHours
    const scheduleTime = snapshotScheduleDraft.time || '03:00'
    if (enabled && intervalHours < 24) {
      await dialog.alert('参数错误', '自动快照周期最低是 1 天一次。')
      return
    }
    setSnapshotBusy('schedule')
    try {
      await updateSnapshotSchedule(containerIdentifier, enabled, intervalHours, scheduleTime)
      await Promise.all([fetchSnapshots(), fetchContainer()])
      setShowSnapshotSchedule(false)
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } }
      await dialog.alert('定时快照失败', error.response?.data?.message || '请稍后重试。')
    } finally {
      setSnapshotBusy('')
    }
  }

  const saveSnapshotQuota = async () => {
    if (!containerIdentifier || isSubUser) return
    const nextQuota = Math.max(1, Math.round(snapshotQuotaDraft || 1))
    setSnapshotBusy('quota')
    try {
      await updateSnapshotQuota(containerIdentifier, nextQuota)
      setSnapshotQuota(nextQuota)
      setSnapshotQuotaDraft(nextQuota)
      setEditingSnapshotQuota(false)
      await Promise.all([fetchSnapshots(), fetchContainer()])
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } }
      await dialog.alert('保存快照配额失败', error.response?.data?.message || '请稍后重试。')
    } finally {
      setSnapshotBusy('')
    }
  }

  const handleDeleteSnapshot = async (snapshot: Snapshot) => {
    if (!containerIdentifier) return
    if (!(await ensureSubUserCanOperate())) return
    if (!(await dialog.confirm('删除快照', `确定删除 ${snapshot.created_at} 的快照吗？`))) return
    setSnapshotBusy(snapshot.id)
    try {
      await deleteContainerSnapshot(containerIdentifier, snapshot.id)
      await fetchSnapshots()
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } }
      await dialog.alert('删除快照失败', error.response?.data?.message || '请稍后重试。')
    } finally {
      setSnapshotBusy('')
    }
  }

  const handleRestoreSnapshot = async (snapshot: Snapshot) => {
    if (!containerIdentifier) return
    if (!(await ensureSubUserCanOperate())) return
    if (!(await dialog.confirm('恢复快照', `确定恢复到 ${snapshot.created_at} 的快照吗？当前容器数据会被覆盖。`))) return
    setSnapshotBusy(snapshot.id)
    try {
      await restoreContainerSnapshot(containerIdentifier, snapshot.id)
      await Promise.all([fetchSnapshots(), fetchContainer()])
    } catch (err: unknown) {
      const error = err as { response?: { data?: { message?: string } } }
      await dialog.alert('恢复快照失败', error.response?.data?.message || '请稍后重试。')
    } finally {
      setSnapshotBusy('')
    }
  }

  const copyText = async (text: string) => {
    await copyToClipboard(text)
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center py-20">
        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-black"></div>
      </div>
    )
  }

  if (!container) {
    return (
      <div className="text-center py-20">
        <p className="text-gray-500">容器不存在</p>
        <button onClick={() => navigate('/containers')} className="mt-4 text-sm text-black underline">
          返回列表
        </button>
      </div>
    )
  }

  const isRunning = container.status === 'running'
  const isInitializing = container.status === 'initializing'
  const isKVM = (container.virtualization || 'lxc') === 'kvm'
  const isWindows = container.template?.includes('windows')
  const reinstallLinuxTemplate = !isWindowsTemplate(selectedTemplate)
  const canOpenVNC = isKVM && isRunning
  const isExpired = container.expires_at ? new Date(container.expires_at) < new Date() : false
  const isPolicyBlocked = !!container.policy_blocked
  const isSubUserPolicyBlocked = isSubUser && isPolicyBlocked
  const policyBlockedText = container.policy_blocked_reason || '虚拟机被策略临时封禁'
  const publicIPv4s = container.public_ipv4s || []
  const assignedIPv4List = publicIPv4s.map((item) => item.address).filter(Boolean)
  const publicHost = assignedIPv4List[0] || hostInfo?.network.public_ipv4 || PUBLIC_HOST
  const ipv6List = (container.ipv6_addresses || [])
    .map((item) => item.address)
    .filter(Boolean)
  if (ipv6List.length === 0 && container.ipv6) ipv6List.push(container.ipv6)
  const maxVCPU = hostInfo?.cpu.cores || 64
  const maxRAMMB = hostInfo?.ram.total_mb ? Number(hostInfo.ram.total_mb) : undefined
  const hasIndependentIPv4 = assignedIPv4List.length > 0
  const hasIndependentIPv6 = ipv6List.length > 0
  const defaultConnPort = isWindows ? 3389 : 22

  let publicEndpoint = '-'
  let sshCommand = ''

  if (hasIndependentIPv4) {
    // Direct connection via independent IPv4 — all ports forwarded
    publicEndpoint = `${assignedIPv4List[0]}:${defaultConnPort}`
    if (!isWindows) {
      sshCommand = `ssh root@${assignedIPv4List[0]}`
    }
  } else if (hasIndependentIPv6) {
    publicEndpoint = `[${ipv6List[0]}]:${defaultConnPort}`
    if (!isWindows) {
      sshCommand = `ssh root@[${ipv6List[0]}]`
    }
  } else if (container.ssh_port > 0) {
    // NAT port mapping mode
    publicEndpoint = `${publicHost}:${container.ssh_port}`
    sshCommand = `ssh -p ${container.ssh_port} root@${publicHost}`
  }
  const editingSSH = draft.index !== null && !!container.port_mappings?.[draft.index] && (
    container.port_mappings[draft.index].description === 'SSH' || container.port_mappings[draft.index].container_port === 22 ||
    container.port_mappings[draft.index].description === 'RDP' || container.port_mappings[draft.index].container_port === 3389
  )
  const filtered = filterHistory(history, range)
  const cpuPct = clamp(((usage?.cpu_usage_pct || 0) / (container.vcpu || 1)))
  const ramTotalBytes = usage?.memory_total_bytes && usage.memory_total_bytes > 0
    ? usage.memory_total_bytes
    : container.ram_mb * 1024 * 1024
  const ramPct = ramTotalBytes > 0 ? clamp(((usage?.memory_usage_bytes || 0) / ramTotalBytes) * 100) : 0
  const loadPct = container.vcpu > 0 ? ((usage?.load1 || 0) / container.vcpu) * 100 : 0
  const diskPct = container.disk_gb > 0 ? clamp(((usage?.disk_usage_bytes || 0) / (container.disk_gb * 1024 * 1024 * 1024)) * 100) : 0
  const networkBps = (usage?.network_rx_bps || 0) + (usage?.network_tx_bps || 0)
  const rx = usage?.network_rx_bps || 0
  const networkDownLimit = resourceLimitValue(container.network_down_mbps, container.network_bw_mbps)
  const networkUpLimit = resourceLimitValue(container.network_up_mbps, container.network_bw_mbps)
  const netPct = Math.max(
    directionUsagePercent(usage?.network_rx_bps || 0, networkDownLimit, 125000, 125000000),
    directionUsagePercent(usage?.network_tx_bps || 0, networkUpLimit, 125000, 125000000),
  )
  const diskIOBps = (usage?.disk_read_bps || 0) + (usage?.disk_write_bps || 0)
  const ioReadLimit = resourceLimitValue(container.io_read_mbps, container.io_speed_mbps)
  const ioWriteLimit = resourceLimitValue(container.io_write_mbps, container.io_speed_mbps)
  const diskIOPct = Math.max(
    directionUsagePercent(usage?.disk_read_bps || 0, ioReadLimit, 1024 * 1024, 1024 * 1024 * 1024),
    directionUsagePercent(usage?.disk_write_bps || 0, ioWriteLimit, 1024 * 1024, 1024 * 1024 * 1024),
  )
  const mappingCount = container.port_mappings?.length || 0
  const mappingLimit = Math.max(container.port_mapping_limit || 0, mappingCount)
  const hasNATQuota = mappingLimit > 0
  const canAddMapping = hasNATQuota && mappingCount < mappingLimit && !isSubUserPolicyBlocked
  const hasFirewallIPv4 = hasIndependentIPv4 || hasNATQuota
  const firewallNetworkOptions: Array<{ value: NonNullable<FirewallRule['network']>; label: string }> = []
  if (hasFirewallIPv4) {
    firewallNetworkOptions.push({
      value: 'ipv4',
      label: hasIndependentIPv4 ? 'IPv4（公网 IPv4）' : 'IPv4（NAT）',
    })
  }
  if (hasIndependentIPv6) {
    firewallNetworkOptions.push({ value: 'ipv6', label: 'IPv6' })
  }
  if (hasFirewallIPv4 && hasIndependentIPv6) {
    firewallNetworkOptions.push({ value: 'all', label: '全部网络' })
  }
  const managementUrl = subUser?.access_code
    ? `${window.location.origin}/login?code=${encodeURIComponent(subUser.access_code)}`
    : ''
  const charts: ResourceChartConfig[] = [
    {
      title: 'CPU 使用率',
      icon: <Cpu className="w-5 h-5" />,
      current: clamp(((usage?.cpu_usage_pct || 0) / (container.vcpu || 1))),
      points: toChartPoints(filtered, 'cpu'),
      max: 100,
      formatValue: formatPercent,
      detail: `${container.vcpu} 核`,
    },
    {
      title: '内存使用',
      icon: <MemoryStick className="w-5 h-5" />,
      current: ramPct,
      points: toChartPoints(filtered, 'memory'),
      max: 100,
      formatValue: formatPercent,
      detail: `${formatBytes(usage?.memory_usage_bytes || 0)} / ${formatBytes(ramTotalBytes)}`,
    },
    {
      title: '网络流量',
      icon: <Network className="w-5 h-5" />,
      current: networkBps,
      points: toChartPoints(filtered, 'network'),
      formatValue: formatRate,
      detail: `入 ${formatRate(usage?.network_rx_bps || 0)} / 出 ${formatRate(usage?.network_tx_bps || 0)}，限速占用 ${netPct.toFixed(1)}%，累计 ${formatBytes((usage?.network_rx_bytes || 0) + (usage?.network_tx_bytes || 0))}`,
    },
    {
      title: '磁盘IO',
      icon: <HardDrive className="w-5 h-5" />,
      current: diskIOBps,
      points: toChartPoints(filtered, 'diskIO'),
      formatValue: formatRate,
      detail: `读 ${formatRate(usage?.disk_read_bps || 0)} / 写 ${formatRate(usage?.disk_write_bps || 0)}，限速占用 ${diskIOPct.toFixed(1)}%，累计 ${formatBytes((usage?.disk_read_bytes || 0) + (usage?.disk_write_bytes || 0))}，容量 ${diskPct.toFixed(1)}%`,
    },
  ]

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <button
          onClick={() => navigate('/containers')}
          className="flex items-center gap-1.5 text-sm text-gray-600 hover:text-black transition-colors"
        >
          <ArrowLeft className="w-4 h-4" />
          返回列表
        </button>
        <div />
      </div>

      <div className="bg-white border border-gray-200 rounded-lg p-5">
        <div className="flex items-start justify-between gap-4">
          <div className="flex items-start gap-4">
            <div className="w-14 h-14 flex items-center justify-center">
              {getTemplateIcon(container.template || '') || <Cpu className="w-7 h-7 text-slate-700" />}
            </div>
            <div>
              <div className="flex items-center gap-2 flex-wrap">
                <h1 className="text-xl font-bold text-black">{container.name}</h1>
                <StatusBadge running={isRunning} initializing={isInitializing} />
              </div>
              <div className="flex items-center gap-2 flex-wrap mt-2">
                <InfoTag color="blue">系统 {container.template}</InfoTag>
                <InfoTag color="slate">类型 {(container.virtualization || 'lxc').toUpperCase()}</InfoTag>
                <InfoTag color="emerald">内网 {container.ip || '-'}</InfoTag>
                {hasIndependentIPv4 ? (
                  <InfoTag color="amber">独立 IPv4 {assignedIPv4List[0]}</InfoTag>
                ) : (
                  <InfoTag color="amber">IPv4 NAT {hasNATQuota ? `${mappingCount} 条` : '未分配'}</InfoTag>
                )}
                <InfoTag color="violet">{isWindows ? 'RDP' : 'SSH'} {publicEndpoint}</InfoTag>
                {isPolicyBlocked && <InfoTag color="red">策略封禁</InfoTag>}
              </div>
            </div>
          </div>

          <div className="flex items-center gap-1.5 flex-wrap justify-end">
            {!isRunning ? (
              <ActionButton dark disabled={!!taskStatus || isExpired || isSubUserPolicyBlocked} onClick={() => handleAction('start')}>
                <Play className="w-3.5 h-3.5" />
                {isSubUserPolicyBlocked ? '已封禁' : isExpired ? '已到期' : taskStatus === 'start' ? taskActionLabels['start'] : '开机'}
              </ActionButton>
            ) : (
              <>
                <ActionButton disabled={!!taskStatus || isExpired || isSubUserPolicyBlocked} onClick={() => handleAction('stop')}>
                  <Square className="w-3.5 h-3.5" />
                  {isSubUserPolicyBlocked ? '已封禁' : isExpired ? '已到期' : taskStatus === 'stop' ? taskActionLabels['stop'] : '关机'}
                </ActionButton>
                <ActionButton disabled={!!taskStatus || isExpired || isSubUserPolicyBlocked} onClick={() => handleAction('restart')}>
                  <RefreshCw className="w-3.5 h-3.5" />
                  {isSubUserPolicyBlocked ? '已封禁' : isExpired ? '已到期' : taskStatus === 'restart' ? taskActionLabels['restart'] : '重启'}
                </ActionButton>
                {!isWindows && (
                  <ActionButton dark disabled={isSubUserPolicyBlocked} onClick={() => setShowSSH(true)}>
                    <TerminalSquare className="w-3.5 h-3.5" />
                    WebSSH
                  </ActionButton>
                )}
                {isKVM && (
                  <ActionButton dark disabled={!canOpenVNC || isSubUserPolicyBlocked} onClick={() => setShowVNC(true)}>
                    <Monitor className="w-3.5 h-3.5" />
                    WebVNC
                  </ActionButton>
                )}
              </>
            )}
            {!isSubUser && (
              <ActionButton onClick={handleCreateSubUser} disabled={!!taskStatus || isExpired}>
                <UserPlus className="w-3.5 h-3.5" />
                管理链接
              </ActionButton>
            )}
            {!hasIndependentIPv4 && hasNATQuota && (
              <ActionButton disabled={isSubUserPolicyBlocked} onClick={() => setShowNat(true)}>
                <Settings className="w-3.5 h-3.5" />
                IPv4 NAT 管理
              </ActionButton>
            )}
            <ActionButton onClick={openFirewall} disabled={isSubUserPolicyBlocked}>
              <FirewallIcon className="w-3.5 h-3.5" />
              防火墙
            </ActionButton>
            <ActionButton onClick={() => setShowSnapshots(true)} disabled={!!taskStatus || !!snapshotBusy || isSubUserPolicyBlocked}>
              <Camera className="w-3.5 h-3.5" />
              快照
            </ActionButton>
            <ActionButton onClick={openReinstall} disabled={!!taskStatus || isExpired || isSubUserPolicyBlocked}>
              <RefreshCw className="w-3.5 h-3.5" />
              {isExpired ? '已到期' : taskStatus === 'reinstall' ? taskActionLabels['reinstall'] : '重装'}
            </ActionButton>
            {!isSubUser && (
              <ActionButton disabled={!!taskStatus} onClick={() => handleAction('delete')}>
                <Trash2 className="w-3.5 h-3.5" />
                {taskStatus === 'delete' ? taskActionLabels['delete'] : '删除'}
              </ActionButton>
            )}
          </div>
        </div>
      </div>

      {isSubUserPolicyBlocked && (
        <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
          <AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
          <div>
            <div className="font-medium">虚拟机被策略临时封禁</div>
            <div className="mt-1 text-xs text-red-600">{policyBlockedText}</div>
          </div>
        </div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-3 gap-5">
        <Panel
          title="连接信息"
          extra={!isWindows && !isSubUserPolicyBlocked ? (
            <button
              onClick={openResetPassword}
              className="inline-flex items-center gap-1.5 rounded-md px-2.5 py-1.5 text-xs text-gray-600 hover:bg-gray-100 hover:text-black"
            >
              <Key className="w-3.5 h-3.5" />
              重置 SSH 密码
            </button>
          ) : undefined}
        >
          {isSubUserPolicyBlocked ? (
            <div className="rounded-md border border-red-100 bg-red-50 px-3 py-2 text-sm text-red-700">
              虚拟机被策略临时封禁，连接信息暂不可用。
            </div>
          ) : isWindows ? (
            <>
              <PlainRow label="RDP 地址" value={publicEndpoint} mono />
              <PlainRow label="用户名" value="Administrator" mono />
              <div className="flex items-center justify-between gap-3">
                <span className="text-gray-500">管理员密码</span>
                <div className="flex items-center gap-1 min-w-0">
                  <span
                    className={`font-mono text-xs cursor-pointer select-none ${showPassword ? 'text-black' : 'text-gray-400 tracking-[0.25em]'}`}
                    onClick={() => setShowPassword(!showPassword)}
                    title={showPassword ? '点击隐藏' : '点击显示'}
                  >
                    {container.ssh_password ? (showPassword ? container.ssh_password : '••••••••') : '-'}
                  </span>
                  {container.ssh_password && (
                    <button onClick={() => copyText(container.ssh_password)} className="p-0.5 text-gray-400 hover:text-black rounded" title="复制">
                      <Copy className="w-3 h-3" />
                    </button>
                  )}
                </div>
              </div>
              {container.vnc_port > 0 && (
                <PlainRow label="VNC 端口" value={`127.0.0.1:${container.vnc_port}`} mono />
              )}
            </>
          ) : (
            <>
              <PlainRow label="SSH 地址" value={publicEndpoint} mono copyValue={sshCommand} onCopy={copyText} />
              <PlainRow label="用户名" value="root" mono />
              <div className="flex items-center justify-between gap-3">
                <span className="text-gray-500">SSH 密码</span>
                <div className="flex items-center gap-1 min-w-0">
                  <span
                    className={`font-mono text-xs cursor-pointer select-none ${showPassword ? 'text-black' : 'text-gray-400 tracking-[0.25em]'}`}
                    onClick={() => setShowPassword(!showPassword)}
                    title={showPassword ? '点击隐藏' : '点击显示'}
                  >
                    {container.ssh_password ? (showPassword ? container.ssh_password : '••••••••') : '-'}
                  </span>
                  {container.ssh_password && (
                    <button onClick={() => copyText(container.ssh_password)} className="p-0.5 text-gray-400 hover:text-black rounded" title="复制">
                      <Copy className="w-3 h-3" />
                    </button>
                  )}
                </div>
              </div>
            </>
          )}
        </Panel>

        <Panel title="资源配置" extra={!isSubUser ? (
          <button onClick={openResourceEdit} className="text-gray-400 hover:text-black transition-colors" title="编辑资源限制">
            <svg className="w-3.5 h-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
            </svg>
          </button>
        ) : undefined}>
          <PlainRow label="vCPU" value={`${container.vcpu} 核`} />
          <PlainRow label="内存" value={`${container.ram_mb} MB`} />
          <PlainRow label="磁盘" value={`${container.disk_gb} GB`} />
          <PlainRow label="网络速率" value={formatDirectionalLimit('下行', networkDownLimit, '上行', networkUpLimit, 'Mbps')} />
          <PlainRow label="IO 速度" value={formatDirectionalLimit('读取', ioReadLimit, '写入', ioWriteLimit, 'MB/s')} />
        </Panel>

        <Panel title="实时状态">
          <PlainRow label="识别码" value={container.uuid || '-'} mono copyValue={container.uuid} onCopy={copyText} />
          <PlainRow label="状态" value={isRunning ? '运行中' : '已停止'} />
          <PlainRow label="内网 IP" value={container.ip || '-'} mono />
          <PlainRow label="Public IPv4" value={assignedIPv4List.length ? assignedIPv4List.join(', ') : '-'} mono copyValue={assignedIPv4List[0]} onCopy={copyText} />
          <PlainRow label="IPv6" value={ipv6List.length ? ipv6List.join(', ') : '-'} mono copyValue={ipv6List[0]} onCopy={copyText}>
            {!isSubUser && ipv6List.length === 0 && (
              <button onClick={handleAssignIPv6} disabled={actionLoading === 'ipv6'} className="ml-1 px-1.5 py-0.5 text-[10px] text-gray-600 border border-gray-200 rounded hover:bg-gray-50 disabled:opacity-50">
                Assign
              </button>
            )}
          </PlainRow>
          <PlainRow label="CPU 累计时间" value={formatCPU(usage?.cpu_usage_usec || 0)} />
          <PlainRow label="创建时间" value={container.created_at} />
          <PlainRow label="到期时间" value={formatExpiration(container.expires_at)}>
            {!isSubUser && (
              <button onClick={() => { setEditExpiry(container.expires_at ? container.expires_at.slice(0, 10) : ''); setShowExpiryEdit(true) }} className="ml-1 p-0.5 text-gray-400 hover:text-black rounded" title="修改到期时间">
                <Pencil className="w-3 h-3" />
              </button>
            )}
          </PlainRow>
        </Panel>
      </div>

      {/* Container resource ring stats (matching host dashboard style) */}
      {container && (
        <div className="bg-white border border-gray-200 rounded-lg p-5">
          <h2 className="text-sm font-semibold text-black mb-4">状态</h2>
          <div className="grid grid-cols-4 gap-4">
            <RingStat
              value={cpuPct}
              label="CPU"
              subLabel={`(${(cpuPct * container.vcpu / 100).toFixed(1)} / ${container.vcpu} 核)`}
            />
            <RingStat
              value={ramPct}
              label="内存"
              subLabel={`${formatMB(usage?.memory_usage_bytes || 0)} / ${formatMB(ramTotalBytes)}`}
            />
            <RingStat
              value={loadPct}
              max={Infinity}
              label="负载"
            />
            <RingStat
              value={diskPct}
              label="磁盘"
              subLabel={`${formatGB(usage?.disk_usage_bytes || 0)} / ${container.disk_gb} GB`}
            />
          </div>
        </div>
      )}

      {/* Traffic usage bar */}
      {container && (
        <div className="bg-white border border-gray-200 rounded-lg p-5">
          <div className="flex items-center justify-between mb-3">
            <h2 className="text-sm font-semibold text-black">月流量</h2>
            {!isSubUser && (
              <button
                onClick={openTrafficEdit}
                className="text-gray-400 hover:text-black transition-colors"
                title="编辑流量限制"
              >
                <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
                  <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" />
                </svg>
              </button>
            )}
          </div>
          <TrafficBar container={container} />
        </div>
      )}
      {/* Traffic limit edit modal */}
      {showTrafficEdit && (
        <Modal title="编辑月流量限制" onClose={() => setShowTrafficEdit(false)}>
          <div className="space-y-3">
            <div>
              <label className="block text-xs text-gray-500 mb-1">流量统计模式</label>
              <select
                value={trafficEdit.mode}
                onChange={(e) => setTrafficEdit({ ...trafficEdit, mode: e.target.value })}
                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
              >
                <option value="total">双向合并统计</option>
                <option value="in_out">入站/出站分开统计</option>
              </select>
            </div>
            {trafficEdit.mode === 'total' ? (
              <div>
                <label className="block text-xs text-gray-500 mb-1">月流量上限 (GB，0=不限制)</label>
                <input
                  type="number"
                  min="0"
                  value={trafficEdit.monthly}
                  onChange={(e) => setTrafficEdit({ ...trafficEdit, monthly: Math.max(0, Number(e.target.value)) })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
                />
              </div>
            ) : (
              <>
                <div>
                  <label className="block text-xs text-gray-500 mb-1">入站上限 (GB，0=不限制)</label>
                  <input
                    type="number"
                    min="0"
                    value={trafficEdit.inGB}
                    onChange={(e) => setTrafficEdit({ ...trafficEdit, inGB: Math.max(0, Number(e.target.value)) })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
                  />
                </div>
                <div>
                  <label className="block text-xs text-gray-500 mb-1">出站上限 (GB，0=不限制)</label>
                  <input
                    type="number"
                    min="0"
                    value={trafficEdit.outGB}
                    onChange={(e) => setTrafficEdit({ ...trafficEdit, outGB: Math.max(0, Number(e.target.value)) })}
                    className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm"
                  />
                </div>
              </>
            )}
            <div className="flex justify-end gap-2 pt-2">
              <button onClick={() => setShowTrafficEdit(false)} className="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-md hover:bg-gray-50">取消</button>
              <button onClick={saveTrafficLimit} disabled={savingTraffic} className="px-4 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800 disabled:opacity-50">{savingTraffic ? '保存中...' : '保存'}</button>
            </div>
          </div>
        </Modal>
      )}

      <ResourceStatsPanel range={range} onRangeChange={setRange} onRefresh={() => { fetchContainer(); fetchUsage() }} charts={charts} />

      {showResetPassword && (
        <Modal title="重置 SSH 密码" onClose={() => setShowResetPassword(false)}>
          <div className="space-y-4">
            <div>
              <label className="block text-xs text-gray-500 mb-1">新 SSH 密码</label>
              <div className="flex gap-2">
                <input
                  type="text"
                  value={resetPasswordDraft}
                  onChange={(e) => { setResetPasswordDraft(e.target.value); setResetPasswordResult('') }}
                  placeholder="请输入 8-64 位，至少包含字母和数字"
                  className={inputClass}
                />
                <button
                  type="button"
                  onClick={generateResetPassword}
                  className="px-3 py-2 border border-gray-300 rounded-md text-gray-600 hover:bg-gray-50 hover:text-black"
                  title="生成随机密码"
                >
                  <RefreshCw className="w-4 h-4" />
                </button>
              </div>
              {resetPasswordDraft && resetPasswordError(resetPasswordDraft) && (
                <p className="mt-1 text-xs text-red-600">{resetPasswordError(resetPasswordDraft)}</p>
              )}
            </div>
            {resetPasswordResult && (
              <div className="p-3 bg-green-50 border border-green-200 rounded-md">
                <div className="text-xs text-green-700 mb-1">密码已修改成功</div>
                <div className="flex items-center justify-between gap-2">
                  <span className="font-mono text-sm text-green-900 break-all">{resetPasswordResult}</span>
                  <button onClick={() => copyText(resetPasswordResult)} className="p-1 text-green-700 hover:text-green-900 rounded" title="复制">
                    <Copy className="w-4 h-4" />
                  </button>
                </div>
              </div>
            )}
            <p className="text-xs text-gray-500 leading-relaxed">
              Linux LXC/KVM 修改 root SSH 密码通常无需重启；KVM 需要虚拟机运行且 guest agent 或 SSH 可用。
            </p>
            <div className="flex justify-end gap-2 pt-2">
              <button onClick={() => setShowResetPassword(false)} className="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-md hover:bg-gray-50">取消</button>
              <button
                onClick={handleResetPassword}
                disabled={resetPasswordSaving || !resetPasswordDraft || !!resetPasswordError(resetPasswordDraft)}
                className="px-4 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800 disabled:opacity-50"
              >
                {resetPasswordSaving ? '修改中...' : '确认修改'}
              </button>
            </div>
          </div>
        </Modal>
      )}

      {showSSH && (
        <Modal title={`WebSSH - ${container.name}`} onClose={() => setShowSSH(false)} wide>
          <div className="h-[70vh] min-h-[520px]">
            {isRunning ? (
              <WebSSHViewer containerName={container.name} onClose={() => setShowSSH(false)} />
            ) : (
              <div className="h-full flex items-center justify-center bg-gray-950 text-gray-400 rounded-md">容器未运行，请先开机</div>
            )}
          </div>
        </Modal>
      )}

      {showVNC && (
        <Modal
          title={`WebVNC - ${container.name}`}
          onClose={() => setShowVNC(false)}
          wide
          flush
          extra={
            <button
              onClick={toggleVNCFullscreen}
              className="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs text-gray-600 hover:text-black hover:bg-gray-100 rounded"
              title={vncFullscreen ? '退出全屏' : '全屏显示'}
            >
              {vncFullscreen ? <Minimize2 className="w-3.5 h-3.5" /> : <Maximize2 className="w-3.5 h-3.5" />}
              {vncFullscreen ? '退出全屏' : '全屏'}
            </button>
          }
        >
          <div
            ref={vncFullscreenRef}
            className={`bg-white ${vncFullscreen ? 'fixed inset-0 z-[70] p-3' : 'h-[calc(92vh-112px)] min-h-[420px] p-5'}`}
          >
            <div className="h-full">
            {canOpenVNC ? (
              <WebVNCViewer containerName={container.name} onClose={() => setShowVNC(false)} />
            ) : (
              <div className="h-full flex items-center justify-center bg-gray-950 text-gray-400 rounded-md">VNC 控制台暂不可用，请确认 KVM 虚拟机已开机并刷新页面</div>
            )}
            </div>
          </div>
        </Modal>
      )}

      {showSnapshots && (
        <Modal
          title="快照"
          onClose={() => {
            setShowSnapshots(false)
            setEditingSnapshotQuota(false)
          }}
          wide
          extra={
            <div className="flex items-center gap-2">
              <button
                onClick={openSnapshotSchedule}
                disabled={!!snapshotBusy}
                className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-xs ${
                  snapshotSchedule?.enabled
                    ? 'border border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100'
                    : 'border border-gray-300 text-gray-700 hover:bg-gray-50'
                } disabled:opacity-50`}
              >
                <Clock className="w-3.5 h-3.5" />
                {snapshotBusy === 'schedule' ? '处理中...' : snapshotSchedule?.enabled ? '定时设置' : '定时快照'}
              </button>
              <button
                onClick={handleCreateSnapshot}
                disabled={!!snapshotBusy || (isSubUser && snapshots.length >= snapshotQuota)}
                className="inline-flex items-center gap-1.5 rounded-md bg-black px-3 py-1.5 text-xs text-white hover:bg-gray-800 disabled:opacity-50"
              >
                <Camera className="w-3.5 h-3.5" />
                {snapshotBusy === 'create' ? '创建中...' : '新建快照'}
              </button>
            </div>
          }
        >
          <div className="space-y-4">
            <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-gray-200 bg-gray-50 px-4 py-3 text-xs text-gray-600">
              <div>
                快照数量：
                <span className="font-mono text-gray-900">
                  {snapshots.length}
                </span>
              </div>
              <div className="flex items-center gap-2">
                <span>子用户配额：</span>
                <span className="font-mono text-gray-900">{snapshotQuota}</span>
                {!isSubUser && (
                  <button
                    onClick={() => {
                      setSnapshotQuotaDraft(snapshotQuota)
                      setEditingSnapshotQuota((value) => !value)
                    }}
                    className="inline-flex items-center gap-1 rounded border border-gray-300 bg-white px-2 py-1 text-[11px] text-gray-700 hover:bg-gray-50"
                    disabled={snapshotBusy === 'quota'}
                  >
                    <Pencil className="w-3 h-3" />
                    修改
                  </button>
                )}
              </div>
              <div>
                定时状态：
                <span className="text-gray-900">
                  {snapshotSchedule?.enabled ? `已开启，每 ${formatScheduleInterval(snapshotSchedule.interval_hours || 24)}，${snapshotSchedule.time || '03:00'} 执行` : '未开启'}
                </span>
              </div>
              {snapshotSchedule?.next_run && (
                <div>下次执行：<span className="font-mono text-gray-900">{formatDateTime(snapshotSchedule.next_run)}</span></div>
              )}
            </div>

            {editingSnapshotQuota && !isSubUser && (
              <div className="flex flex-wrap items-end gap-3 rounded-lg border border-gray-200 bg-white px-4 py-3">
                <Field label="子用户每台容器快照上限">
                  <input
                    type="number"
                    min={1}
                    max={999}
                    value={snapshotQuotaDraft}
                    onChange={(event) => setSnapshotQuotaDraft(Math.max(1, Math.round(Number(event.target.value) || 1)))}
                    className="w-44 px-3 py-2 border border-gray-300 rounded-md text-sm text-black bg-white focus:outline-none focus:ring-2 focus:ring-black focus:border-black"
                  />
                </Field>
                <div className="flex gap-2 pb-0.5">
                  <button
                    onClick={() => {
                      setEditingSnapshotQuota(false)
                      setSnapshotQuotaDraft(snapshotQuota)
                    }}
                    className="px-3 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md"
                    disabled={snapshotBusy === 'quota'}
                  >
                    取消
                  </button>
                  <button
                    onClick={saveSnapshotQuota}
                    disabled={snapshotBusy === 'quota'}
                    className="inline-flex items-center gap-1.5 px-3 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800 disabled:opacity-50"
                  >
                    <Save className="w-4 h-4" />
                    {snapshotBusy === 'quota' ? '保存中...' : '保存'}
                  </button>
                </div>
              </div>
            )}

            <SnapshotTable
              snapshots={snapshots}
              busy={snapshotBusy}
              onRestore={handleRestoreSnapshot}
              onDelete={handleDeleteSnapshot}
            />
          </div>
        </Modal>
      )}

      {showSnapshotSchedule && (
        <Modal title="定时快照" onClose={() => setShowSnapshotSchedule(false)}>
          <div className="space-y-4">
            <Field label="自动快照周期">
              <select
                value={snapshotScheduleDraft.intervalHours}
                onChange={(e) => setSnapshotScheduleDraft({ ...snapshotScheduleDraft, intervalHours: Number(e.target.value) })}
                className={inputClass}
              >
                <option value={24}>1 天</option>
                <option value={72}>3 天</option>
                <option value={168}>7 天</option>
                <option value={336}>14 天</option>
              </select>
            </Field>
            <Field label="执行时间">
              <input
                type="time"
                value={snapshotScheduleDraft.time}
                onChange={(e) => setSnapshotScheduleDraft({ ...snapshotScheduleDraft, time: e.target.value || '03:00' })}
                className={inputClass}
              />
            </Field>
            <div className="rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-500">
              {`每 ${formatScheduleInterval(snapshotScheduleDraft.intervalHours)} 在 ${snapshotScheduleDraft.time || '03:00'} 执行。`}
            </div>
            <div className="flex justify-between gap-3 pt-2">
              {snapshotSchedule?.enabled ? (
                <button
                  onClick={() => saveSnapshotSchedule(false)}
                  disabled={snapshotBusy === 'schedule'}
                  className="px-4 py-2 text-sm text-red-600 border border-red-200 rounded-md hover:bg-red-50 disabled:opacity-50"
                >
                  关闭定时
                </button>
              ) : <div />}
              <div className="flex gap-2">
                <button onClick={() => setShowSnapshotSchedule(false)} className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md">取消</button>
                <button
                  onClick={() => saveSnapshotSchedule(true)}
                  disabled={snapshotBusy === 'schedule'}
                  className="px-4 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800 disabled:opacity-50"
                >
                  {snapshotBusy === 'schedule' ? '保存中...' : '保存'}
                </button>
              </div>
            </div>
          </div>
        </Modal>
      )}

      {showFirewall && (
        <Modal title="防火墙设置" onClose={() => { setShowFirewall(false); setShowFirewallEditor(false); setEditingFirewallRule(null) }} wide extra={
          !isSubUser && (
            <button
              onClick={addFirewallRule}
              disabled={firewallNetworkOptions.length === 0}
              title={firewallNetworkOptions.length === 0 ? '当前容器没有可配置的 NAT、公网 IPv4 或 IPv6' : undefined}
              className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-black text-white rounded-md text-xs hover:bg-gray-800 disabled:cursor-not-allowed disabled:opacity-50"
            >
              <Plus className="w-3.5 h-3.5" />添加规则
            </button>
          )
        }>
          <div className="space-y-5">
            {/* Global toggle */}
            <div className="flex items-center justify-between gap-4">
              <div>
                <div className="text-sm font-medium text-gray-800">防火墙</div>
                <div className="text-xs text-gray-500">
                  {firewallEnabled
                    ? (firewallDefaultAction === 'DROP' ? '已启用，未匹配规则的流量将被拒绝' : '已启用，未匹配规则的流量将被放行')
                    : '未启用时不接管该容器流量'}
                </div>
              </div>
              <button
                onClick={() => setFirewallEnabled(!firewallEnabled)}
                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${firewallEnabled ? 'bg-emerald-500' : 'bg-gray-300'}`}
              >
                <span className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${firewallEnabled ? 'translate-x-6' : 'translate-x-1'}`} />
              </button>
            </div>

            <div className="flex items-center justify-between gap-4 rounded-md border border-gray-200 px-3 py-2">
              <div>
                <div className="text-sm font-medium text-gray-800">默认动作</div>
                <div className="text-xs text-gray-500">没有命中下方规则时如何处理</div>
              </div>
              <select
                value={firewallDefaultAction}
                onChange={(e) => setFirewallDefaultAction(e.target.value as 'ACCEPT' | 'DROP')}
                disabled={isSubUser}
                className="rounded-md border border-gray-300 bg-white px-2.5 py-1.5 text-xs text-gray-800 focus:border-black focus:outline-none focus:ring-2 focus:ring-black disabled:opacity-60"
              >
                <option value="DROP">未匹配拒绝</option>
                <option value="ACCEPT">未匹配放行</option>
              </select>
            </div>

            <div className="rounded-md border border-blue-100 bg-blue-50 px-3 py-2 text-xs text-blue-800">
              <div className="font-medium text-blue-900">网络范围</div>
              <div className="mt-1">
                {firewallNetworkOptions.length > 0
                  ? `可配置：${firewallNetworkOptions.filter((option) => option.value !== 'all').map((option) => option.label).join('、')}。`
                  : '当前容器未分配 IPv4 NAT、独立公网 IPv4 或 IPv6，暂无可配置网络。'}
                {hasFirewallIPv4 ? ` IPv4 规则覆盖${hasIndependentIPv4 ? '独立公网 IPv4' : 'IPv4 NAT 端口映射'}。` : ''}
                {hasNATQuota && !hasIndependentIPv4 ? ' NAT 入站端口按容器内部端口匹配，不是宿主机公网端口。' : ''}
                {hasIndependentIPv6 ? ' IPv6 规则覆盖该容器已分配的 IPv6 地址。' : ''}
              </div>
            </div>

            {firewallMessage && (
              <div className={`rounded-md px-3 py-2 text-xs ${firewallMessage.type === 'success' ? 'border border-emerald-100 bg-emerald-50 text-emerald-700' : 'border border-red-100 bg-red-50 text-red-700'}`}>
                {firewallMessage.text}
              </div>
            )}

            {/* Rules table */}
            <div className="overflow-x-auto">
              <table className="w-full text-sm">
                <thead className="border-b border-gray-200 bg-gray-50 text-xs text-gray-500">
                  <tr>
                    <th className="px-3 py-2 text-left font-medium">状态</th>
                    <th className="px-3 py-2 text-left font-medium">网络</th>
                    <th className="px-3 py-2 text-left font-medium">方向</th>
                    <th className="px-3 py-2 text-left font-medium">协议</th>
                    <th className="px-3 py-2 text-left font-medium">端口</th>
                    <th className="px-3 py-2 text-left font-medium">来源/目标 IP</th>
                    <th className="px-3 py-2 text-left font-medium">动作</th>
                    <th className="px-3 py-2 text-left font-medium">描述</th>
                    {!isSubUser && <th className="px-3 py-2 text-right font-medium">操作</th>}
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100">
                  {firewallRules.map((rule) => (
                    <tr key={rule.id} className={!rule.enabled ? 'opacity-50' : ''}>
                      <td className="px-3 py-2">
                        <button onClick={() => toggleFirewallRule(rule.id)} className={`inline-flex h-4 w-7 items-center rounded-full transition-colors ${rule.enabled ? 'bg-emerald-500' : 'bg-gray-300'}`}>
                          <span className={`inline-block h-3 w-3 transform rounded-full bg-white transition-transform ${rule.enabled ? 'translate-x-3.5' : 'translate-x-0.5'}`} />
                        </button>
                      </td>
                      <td className="px-3 py-2">
                        <span className="inline-flex rounded bg-gray-100 px-1.5 py-0.5 text-xs font-medium text-gray-700">
                          {(rule.network || 'ipv4') === 'ipv6' ? 'IPv6' : (rule.network || 'ipv4') === 'all' ? '全部' : 'IPv4'}
                        </span>
                      </td>
                      <td className="px-3 py-2">
                        <span className={`inline-flex px-1.5 py-0.5 rounded text-xs font-medium ${rule.direction === 'in' ? 'bg-blue-50 text-blue-700' : 'bg-orange-50 text-orange-700'}`}>
                          {rule.direction === 'in' ? '入站' : '出站'}
                        </span>
                      </td>
                      <td className="px-3 py-2 font-mono text-xs">{rule.protocol.toUpperCase()}</td>
                      <td className="px-3 py-2 font-mono text-xs">{rule.port || '全部'}</td>
                      <td className="px-3 py-2 font-mono text-xs">{rule.source_ip || '任意'}</td>
                      <td className="px-3 py-2">
                        <span className={`inline-flex px-1.5 py-0.5 rounded text-xs font-medium ${rule.action === 'ACCEPT' ? 'bg-emerald-50 text-emerald-700' : 'bg-red-50 text-red-700'}`}>
                          {rule.action === 'ACCEPT' ? '放行' : '拒绝'}
                        </span>
                      </td>
                      <td className="px-3 py-2 text-xs text-gray-600 max-w-32 truncate">{rule.description || '-'}</td>
                      {!isSubUser && (
                        <td className="px-3 py-2 text-right">
                          <div className="inline-flex items-center gap-1">
                            <button onClick={() => {
                              const currentNetwork = (rule.network || 'ipv4') as NonNullable<FirewallRule['network']>
                              const network = firewallNetworkOptions.some((option) => option.value === currentNetwork)
                                ? currentNetwork
                                : (firewallNetworkOptions[0]?.value || currentNetwork)
                              setEditingFirewallRule({ ...rule, network })
                              setShowFirewallEditor(true)
                            }} className="p-1.5 text-gray-400 hover:text-gray-700 rounded hover:bg-gray-100">
                              <Pencil className="h-3.5 w-3.5" />
                            </button>
                            <button onClick={() => deleteFirewallRule(rule.id)} className="p-1.5 text-gray-400 hover:text-red-600 rounded hover:bg-red-50">
                              <Trash2 className="h-3.5 w-3.5" />
                            </button>
                          </div>
                        </td>
                      )}
                    </tr>
                  ))}
                  {firewallRules.length === 0 && (
                    <tr><td colSpan={isSubUser ? 8 : 9} className="px-3 py-6 text-center text-xs text-gray-400">暂无防火墙规则</td></tr>
                  )}
                </tbody>
              </table>
            </div>

            {/* Save button */}
            {!isSubUser && (
              <div className="flex justify-end">
                <button onClick={saveFirewall} disabled={firewallSaving} className="inline-flex items-center gap-1.5 px-4 py-2 bg-black text-white rounded-md text-sm hover:bg-gray-800 disabled:opacity-50">
                  <Save className="w-3.5 h-3.5" />
                  {firewallSaving ? '保存中...' : '保存'}
                </button>
              </div>
            )}
          </div>
        </Modal>
      )}

      {showFirewallEditor && editingFirewallRule && (
        <Modal title={editingFirewallRule.id ? '编辑规则' : '添加规则'} onClose={() => { setShowFirewallEditor(false); setEditingFirewallRule(null) }}>
          <div className="space-y-4">
            <Field label="网络">
              {firewallNetworkOptions.length > 0 ? (
                <select value={editingFirewallRule.network || firewallNetworkOptions[0].value} onChange={(e) => setEditingFirewallRule({ ...editingFirewallRule, network: e.target.value as FirewallRule['network'] })} className={inputClass}>
                  {firewallNetworkOptions.map((option) => (
                    <option key={option.value} value={option.value}>{option.label}</option>
                  ))}
                </select>
              ) : (
                <input value="当前容器没有可配置网络" disabled className={`${inputClass} bg-gray-100 text-gray-400`} />
              )}
            </Field>
            <Field label="方向">
              <select value={editingFirewallRule.direction} onChange={(e) => setEditingFirewallRule({ ...editingFirewallRule, direction: e.target.value as 'in' | 'out' })} className={inputClass}>
                <option value="in">入站 (Inbound)</option>
                <option value="out">出站 (Outbound)</option>
              </select>
            </Field>
            <Field label="协议">
              <select
                value={editingFirewallRule.protocol}
                onChange={(e) => {
                  const protocol = e.target.value as FirewallRule['protocol']
                  setEditingFirewallRule({
                    ...editingFirewallRule,
                    protocol,
                    port: protocol === 'tcp' || protocol === 'udp' ? editingFirewallRule.port : '',
                  })
                }}
                className={inputClass}
              >
                <option value="tcp">TCP</option>
                <option value="udp">UDP</option>
                <option value="icmp">ICMP</option>
                <option value="all">全部</option>
              </select>
            </Field>
            <Field
              label="端口"
              hint={editingFirewallRule.protocol === 'tcp' || editingFirewallRule.protocol === 'udp'
                ? (editingFirewallRule.direction === 'in'
                  ? ((editingFirewallRule.network || 'ipv4') === 'ipv4' && hasNATQuota && !hasIndependentIPv4
                    ? 'NAT 入站填容器内部端口，例如公网 22023 -> 容器 22，这里填 22'
                    : '入站填容器服务端口；留空为全部端口，支持: 22 | 80,443 | 8000-9000')
                  : '出站填远端目标端口；留空为全部端口，支持: 22 | 80,443 | 8000-9000')
                : '端口仅适用于 TCP/UDP'}
            >
              <input
                value={editingFirewallRule.port}
                onChange={(e) => setEditingFirewallRule({ ...editingFirewallRule, port: e.target.value })}
                placeholder={editingFirewallRule.protocol === 'tcp' || editingFirewallRule.protocol === 'udp' ? '如: 22 或 80,443 或 8000-9000' : '当前协议不使用端口'}
                disabled={editingFirewallRule.protocol !== 'tcp' && editingFirewallRule.protocol !== 'udp'}
                className={`${inputClass} disabled:bg-gray-100 disabled:text-gray-400`}
              />
            </Field>
            <Field
              label={editingFirewallRule.direction === 'in' ? '来源 IP' : '目标 IP'}
              hint={(editingFirewallRule.network || 'ipv4') === 'ipv6' ? '留空为任意 IPv6，支持 CIDR: 2001:db8::/64' : (editingFirewallRule.network || 'ipv4') === 'all' ? '留空为任意 IP，支持 IPv4/IPv6 CIDR' : '留空为任意 IPv4，支持 CIDR: 192.168.1.0/24'}
            >
              <input
                value={editingFirewallRule.source_ip}
                onChange={(e) => setEditingFirewallRule({ ...editingFirewallRule, source_ip: e.target.value })}
                placeholder={(editingFirewallRule.network || 'ipv4') === 'ipv6' ? '如: 2001:db8::/64' : (editingFirewallRule.network || 'ipv4') === 'all' ? '如: 192.168.1.0/24 或 2001:db8::/64' : '如: 192.168.1.0/24'}
                className={inputClass}
              />
            </Field>
            <Field label="动作">
              <select value={editingFirewallRule.action} onChange={(e) => setEditingFirewallRule({ ...editingFirewallRule, action: e.target.value as 'ACCEPT' | 'DROP' })} className={inputClass}>
                <option value="ACCEPT">放行 (ACCEPT)</option>
                <option value="DROP">拒绝 (DROP)</option>
              </select>
            </Field>
            <Field label="描述">
              <input value={editingFirewallRule.description} onChange={(e) => setEditingFirewallRule({ ...editingFirewallRule, description: e.target.value })} placeholder="规则描述" className={inputClass} />
            </Field>
            <div className="flex justify-end gap-2 pt-2">
              <button onClick={() => { setShowFirewallEditor(false); setEditingFirewallRule(null) }} className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md">取消</button>
              <button onClick={() => saveFirewallRule(editingFirewallRule)} className="px-4 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800">确定</button>
            </div>
          </div>
        </Modal>
      )}

      {showNat && !hasIndependentIPv4 && (
        <Modal title="IPv4 NAT 端口管理" onClose={() => { setShowNat(false); setDraft(emptyDraft); setShowMappingEditor(false) }} wide extra={
          !isSubUser && canAddMapping && (
            <button onClick={openAddMapping} className="inline-flex items-center gap-1.5 px-3 py-1.5 bg-black text-white rounded-md text-xs hover:bg-gray-800">
              <Plus className="w-3.5 h-3.5" />添加映射
            </button>
          )
        }>
          <div className="space-y-5">
            <div className="flex items-center justify-between gap-4">
              <div className="text-xs text-gray-500">
                {hasNATQuota ? (
                  <>端口配额：<span className="font-mono text-gray-800">{mappingCount}/{mappingLimit}</span></>
                ) : (
                  <span>未分配 IPv4 NAT 端口配额</span>
                )}
              </div>
              {!isSubUser && hasNATQuota && !canAddMapping && (
                <div className="text-xs text-amber-600">已达到管理员分配的 IPv4 NAT 端口配额</div>
              )}
            </div>
            <MappingTable mappings={container.port_mappings || []} publicHost={publicHost} onEdit={openEditMapping} onDelete={isSubUser ? () => {} : removeMapping} isSubUser={isSubUser} />
          </div>
        </Modal>
      )}

      {showMappingEditor && (
        <Modal
          title={draft.index === null ? '添加端口映射' : '修改端口映射'}
          onClose={() => { setShowMappingEditor(false); setDraft(emptyDraft) }}
        >
          <MappingEditor
            draft={draft}
            setDraft={setDraft}
            isSubUser={isSubUser}
            canAddMapping={canAddMapping}
            saving={savingMapping}
            containerIdentifier={containerIdentifier}
            publicIPv4s={publicIPv4s}
            onCancel={() => { setShowMappingEditor(false); setDraft(emptyDraft) }}
            onSubmit={async () => {
              if (await submitMapping()) {
                setShowMappingEditor(false)
                setDraft(emptyDraft)
              }
            }}
          />
        </Modal>
      )}

      {showSubUser && subUser && (
        <Modal title="管理链接" onClose={() => setShowSubUser(false)}>
          <div className="bg-gray-50 dark:bg-gray-800 rounded-lg p-4 text-sm space-y-3">
            <div className="flex items-start justify-between gap-3">
              <span className="shrink-0 text-gray-500 dark:text-gray-400">地址</span>
              <div className="flex min-w-0 items-center gap-1">
                <span className="font-mono text-xs text-black dark:text-white break-all">{managementUrl}</span>
                <button onClick={() => copyText(managementUrl)} className="shrink-0 p-0.5 text-gray-400 hover:text-black dark:hover:text-white rounded"><Copy className="w-3 h-3" /></button>
              </div>
            </div>
            <div className="flex items-start justify-between gap-3">
              <span className="shrink-0 text-gray-500 dark:text-gray-400">密码</span>
              <div className="flex min-w-0 items-center gap-1">
                <span className="font-mono text-xs text-black dark:text-white">{subUser.password || ''}</span>
                <button onClick={() => copyText(subUser.password || '')} className="shrink-0 p-0.5 text-gray-400 hover:text-black dark:hover:text-white rounded"><Copy className="w-3 h-3" /></button>
              </div>
            </div>
          </div>
        </Modal>
      )}

      {showReinstall && (
        <Modal title="重装系统" onClose={() => setShowReinstall(false)}>
          <div className="space-y-4">
            <p className="text-sm text-gray-600">重装系统会删除容器内所有数据，请谨慎操作。</p>
            <Field label="选择新系统模板">
              <select value={selectedTemplate} onChange={(e) => setSelectedTemplate(e.target.value)} className={inputClass}>
                {templates.map((template) => (
                  <option key={template.id} value={template.id}>{template.name}</option>
                ))}
              </select>
            </Field>
            {reinstallLinuxTemplate && (
              <div className="rounded-md border border-gray-200 bg-white px-3 py-3 text-sm">
                <div className="mb-2 font-medium text-gray-800">登录方式</div>
                <div className="grid grid-cols-2 gap-2 sm:grid-cols-4">
                  {([
                    ['keep', '保留当前密码'],
                    ['auto_password', '生成新密码'],
                    ['password', '自定义密码'],
                    ['key', 'SSH Key'],
                  ] as Array<[ReinstallSSHAuthMode, string]>).map(([mode, label]) => (
                    <button
                      key={mode}
                      type="button"
                      onClick={() => setReinstallAuthMode(mode)}
                      className={`rounded-md border px-3 py-2 text-xs font-medium transition-colors ${reinstallAuthMode === mode ? 'border-black bg-black text-white' : 'border-gray-300 text-gray-700 hover:bg-gray-50'}`}
                    >
                      {label}
                    </button>
                  ))}
                </div>
                {reinstallAuthMode === 'password' && (
                  <div className="mt-3 flex gap-2">
                    <input
                      type="text"
                      value={reinstallPasswordDraft}
                      onChange={(event) => setReinstallPasswordDraft(event.target.value)}
                      className={inputClass}
                      placeholder="RootPass123"
                    />
                    <button
                      type="button"
                      onClick={() => setReinstallPasswordDraft(generateSSHPassword())}
                      className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-gray-300 text-gray-600 hover:bg-gray-50"
                      title="生成密码"
                    >
                      <RefreshCw className="h-4 w-4" />
                    </button>
                  </div>
                )}
                {reinstallAuthMode === 'key' && (
                  <textarea
                    value={reinstallPublicKeyDraft}
                    onChange={(event) => setReinstallPublicKeyDraft(event.target.value)}
                    className={`${inputClass} mt-3 min-h-20 resize-y font-mono text-xs`}
                    placeholder="ssh-ed25519 AAAA..."
                  />
                )}
              </div>
            )}
            <div className="flex justify-end gap-3">
              <button onClick={() => setShowReinstall(false)} className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md">取消</button>
              <button onClick={handleReinstall} disabled={reinstalling} className="px-4 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800 disabled:opacity-50">
                {reinstalling ? '重装中...' : '确认重装'}
              </button>
            </div>
          </div>
        </Modal>
      )}

      {showExpiryEdit && (
        <Modal title="修改到期时间" onClose={() => setShowExpiryEdit(false)}>
          <div className="space-y-4">
            <p className="text-sm text-gray-500">当前：{formatExpiration(container.expires_at)}</p>
            <div>
              <label className="block text-xs text-gray-500 mb-1">新到期日期（留空为长期有效）</label>
              <input
                type="date"
                value={editExpiry}
                onChange={(e) => setEditExpiry(e.target.value)}
                min={new Date().toISOString().slice(0, 10)}
                className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm text-black bg-white"
              />
            </div>
            <div className="flex justify-end gap-3">
              <button onClick={() => setShowExpiryEdit(false)} className="px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 rounded-md">取消</button>
              <button onClick={async () => {
                setSavingExpiry(true)
                try {
                  const expVal = editExpiry ? editExpiry + ' 23:59:59' : ''
                  await updateContainerExpiry(container.id, expVal)
                  setShowExpiryEdit(false)
                  fetchContainer()
                } catch { /* ignore */ }
                finally { setSavingExpiry(false) }
              }} disabled={savingExpiry} className="px-4 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800 disabled:opacity-50">
                {savingExpiry ? '保存中...' : '保存'}
              </button>
            </div>
          </div>
        </Modal>
      )}

      {/* Resource limit edit modal */}
      {showResourceEdit && (
        <Modal title="编辑资源限制" onClose={() => setShowResourceEdit(false)}>
          <div className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div>
                <label className="block text-xs text-gray-500 mb-1">vCPU 核数</label>
                <input type="number" min={0.25} max={maxVCPU} step={0.25} value={resourceEdit.vcpu}
                  onChange={(e) => setResourceEdit({ ...resourceEdit, vcpu: clampVCPU(Number(e.target.value), maxVCPU) })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm" />
              </div>
              <div>
                <label className="block text-xs text-gray-500 mb-1">内存 (MB)</label>
                <input type="number" min={128} max={maxRAMMB} step={128} value={resourceEdit.ramMb}
                  onChange={(e) => setResourceEdit({ ...resourceEdit, ramMb: clampResourceInt(Number(e.target.value), 128, maxRAMMB, 128) })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm" />
              </div>
              <div>
                <label className="block text-xs text-gray-500 mb-1">下行带宽 (Mbps，0=不限制)</label>
                <input type="number" min={0} value={resourceEdit.networkDownMbps}
                  onChange={(e) => setResourceEdit({ ...resourceEdit, networkDownMbps: Math.max(0, Number(e.target.value) || 0) })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm" />
              </div>
              <div>
                <label className="block text-xs text-gray-500 mb-1">上行带宽 (Mbps，0=不限制)</label>
                <input type="number" min={0} value={resourceEdit.networkUpMbps}
                  onChange={(e) => setResourceEdit({ ...resourceEdit, networkUpMbps: Math.max(0, Number(e.target.value) || 0) })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm" />
              </div>
              <div>
                <label className="block text-xs text-gray-500 mb-1">读取 IO (MB/s，0=不限制)</label>
                <input type="number" min={0} value={resourceEdit.ioReadMbps}
                  onChange={(e) => setResourceEdit({ ...resourceEdit, ioReadMbps: Math.max(0, Number(e.target.value) || 0) })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm" />
              </div>
              <div>
                <label className="block text-xs text-gray-500 mb-1">写入 IO (MB/s，0=不限制)</label>
                <input type="number" min={0} value={resourceEdit.ioWriteMbps}
                  onChange={(e) => setResourceEdit({ ...resourceEdit, ioWriteMbps: Math.max(0, Number(e.target.value) || 0) })}
                  className="w-full px-3 py-2 border border-gray-300 rounded-md text-sm" />
              </div>
            </div>
            <p className="text-[11px] text-gray-400">磁盘容量不支持动态修改。修改后运行中的容器会立即应用新的 cgroup 限制。</p>
            <div className="flex justify-end gap-2 pt-2">
              <button onClick={() => setShowResourceEdit(false)} className="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-md hover:bg-gray-50">取消</button>
              <button onClick={saveResourceLimit} disabled={savingResource} className="px-4 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800 disabled:opacity-50">
                {savingResource ? '保存中...' : '保存'}
              </button>
            </div>
          </div>
        </Modal>
      )}
    </div>
  )
}

function RangeSwitch({ value, onChange }: { value: StatsRangeKey; onChange: (value: StatsRangeKey) => void }) {
  return (
    <div className="inline-flex border border-gray-200 rounded-md overflow-hidden bg-white">
      {(['30m', '1h', '1d', '1w'] as StatsRangeKey[]).map((item) => (
        <button
          key={item}
          onClick={() => onChange(item)}
          className={`px-3 py-1.5 text-xs ${value === item ? 'bg-black text-white' : 'text-gray-600 hover:bg-gray-50'}`}
        >
          {item === '30m' ? '30分钟' : item === '1h' ? '1小时' : item === '1d' ? '1天' : '1周'}
        </button>
      ))}
    </div>
  )
}

function FirewallIcon({ className }: { className?: string }) {
  return (
    <svg className={className} viewBox="0 0 1024 1024" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
      <path d="M979.989543 469.308394H757.450516c4.519899-21.887511 7.247838-45.094992 7.247838-69.798441 0-137.428929-116.773391-270.417958-121.72528-276.001833a21.415521 21.415521 0 0 0-21.887511-6.319858 21.287524 21.287524 0 0 0-15.103663 16.98362l-12.583719 75.438315C571.854663 148.115571 533.535519 69.229333 467.241 5.910748A21.46352 21.46352 0 0 0 441.585573 2.982813a21.295524 21.295524 0 0 0-9.727782 23.935466c15.703649 58.366696-2.815937 152.996581-22.911488 226.978928-5.591875-35.7912-15.615651-66.214521-32.935264-76.414293a21.351523 21.351523 0 0 0-32.167282 18.399589c0 31.359299-15.999643 60.278653-34.519228 93.813904-24.703448 44.759-52.734822 95.525866-52.734822 167.972247 0 4.055909 0.599987 7.727827 0.767983 11.64774H41.346516A21.343523 21.343523 0 0 0 20.010993 490.651917v511.98856a21.343523 21.343523 0 0 0 21.335523 21.335524H979.989543a21.343523 21.343523 0 0 0 21.335524-21.335524v-511.98856A21.343523 21.343523 0 0 0 979.989543 469.308394z m-149.332663 42.663047v127.99714H660.380685c33.879243-29.183348 65.878528-72.702376 85.334093-127.99714h84.942102zM346.699693 310.255948c7.559831-13.599696 14.895667-26.919399 21.167527-40.399098 3.495922 28.543362 5.503877 64.510559 5.071887 100.26176a21.311524 21.311524 0 0 0 17.367612 21.199526 21.255525 21.255525 0 0 0 23.935465-13.351701c3.071931-8.191817 63.918572-169.980202 65.958527-293.241448 78.462247 104.493665 96.429845 228.906885 96.63784 230.354853a21.279525 21.279525 0 0 0 20.823535 18.431588c9.85578-0.255994 19.631561-7.383835 21.335523-17.791602L640.077138 189.29865c32.895265 46.422963 81.958169 129.277111 81.958169 210.219303 0 157.772475-113.837456 240.458627-153.212577 240.458628H455.241268c-19.023575-5.247883-155.940516-47.742933-155.940516-182.347926 0-61.486626 24.111461-105.133651 47.398941-147.372707zM659.996693 682.647627v127.99714H361.339366v-127.99714H659.996693zM190.67118 511.971441h72.750374c15.311658 60.974638 54.910773 101.717727 93.693907 127.99714H190.67118v-127.99714z m-127.99714 0H148.008133v127.99714H62.67404v-127.99714z m0 170.668186h255.99428v127.99714h-255.99428v-127.99714zM148.008133 981.296954H62.67404v-127.99714H148.008133v127.99714z m341.328373 0H190.67118v-127.99714h298.665326v127.99714z m341.320374 0H531.999553v-127.99714h298.657327v127.99714z m127.99714 0h-85.326093v-127.99714h85.326093v127.99714z m0-170.660187h-255.99428v-127.99714h255.99428v127.99714z m0-170.668186h-85.326093v-127.99714h85.326093v127.99714z" />
    </svg>
  )
}

function StatusBadge({ running, initializing }: { running: boolean; initializing?: boolean }) {
  if (initializing) {
    return (
      <span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium whitespace-nowrap bg-amber-50 text-amber-700">
        <span className="w-1.5 h-1.5 rounded-full flex-shrink-0 bg-amber-500 animate-pulse"></span>
        正在初始化
      </span>
    )
  }
  return (
    <span className={`inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-[11px] font-medium whitespace-nowrap ${running ? 'bg-emerald-100 text-emerald-700' : 'bg-rose-100 text-rose-700'}`}>
      <span className={`w-1.5 h-1.5 rounded-full flex-shrink-0 ${running ? 'bg-emerald-500' : 'bg-rose-500'}`}></span>
      {running ? '运行中' : '已停止'}
    </span>
  )
}

function InfoTag({ color, children }: { color: 'blue' | 'emerald' | 'amber' | 'violet' | 'slate' | 'red'; children: ReactNode }) {
  const classes = {
    blue: 'bg-blue-50 text-blue-700 border-blue-100',
    emerald: 'bg-emerald-50 text-emerald-700 border-emerald-100',
    amber: 'bg-amber-50 text-amber-700 border-amber-100',
    violet: 'bg-violet-50 text-violet-700 border-violet-100',
    slate: 'bg-slate-50 text-slate-700 border-slate-100',
    red: 'bg-red-50 text-red-700 border-red-100',
  }
  return <span className={`px-1.5 py-0.5 border rounded text-[11px] whitespace-nowrap ${classes[color]}`}>{children}</span>
}

function ActionButton({ children, onClick, disabled, dark = false }: { children: ReactNode; onClick: () => void; disabled?: boolean; dark?: boolean }) {
  return (
    <button
      onClick={onClick}
      disabled={disabled}
      className={`inline-flex items-center gap-1 px-2.5 py-1.5 rounded-md text-xs transition-colors disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap ${dark ? 'bg-black text-white hover:bg-gray-800' : 'border border-gray-300 text-gray-700 hover:bg-gray-50'}`}
    >
      {children}
    </button>
  )
}

function MetricChart({ icon, title, value, detail, points, percent, color }: { icon: ReactNode; title: string; value: string; detail: string; points: number[]; percent: number; color: 'blue' | 'emerald' | 'amber' | 'violet' }) {
  const colors = {
    blue: { text: 'text-blue-700', bg: 'bg-blue-50', bar: 'bg-blue-500', stroke: '#3b82f6', fill: '#dbeafe' },
    emerald: { text: 'text-emerald-700', bg: 'bg-emerald-50', bar: 'bg-emerald-500', stroke: '#10b981', fill: '#d1fae5' },
    amber: { text: 'text-amber-700', bg: 'bg-amber-50', bar: 'bg-amber-500', stroke: '#f59e0b', fill: '#fef3c7' },
    violet: { text: 'text-violet-700', bg: 'bg-violet-50', bar: 'bg-violet-500', stroke: '#8b5cf6', fill: '#ede9fe' },
  }
  const palette = colors[color]
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-4">
      <div className="flex items-center justify-between">
        <div className={`w-9 h-9 rounded-md ${palette.bg} ${palette.text} flex items-center justify-center`}>{icon}</div>
        <Cpu className="w-4 h-4 text-gray-300" />
      </div>
      <div className="mt-3">
        <div className="text-xs text-gray-500">{title}</div>
        <div className="text-lg font-semibold text-black mt-0.5">{value}</div>
        <div className="text-xs text-gray-400 mt-0.5">{detail}</div>
      </div>
      <MiniChart points={points} stroke={palette.stroke} fill={palette.fill} />
      <div className="mt-3 h-2 bg-gray-100 rounded-full overflow-hidden">
        <div className={`h-full ${palette.bar}`} style={{ width: `${Math.max(3, Math.min(percent, 100))}%` }} />
      </div>
    </div>
  )
}

function MiniChart({ points, stroke, fill }: { points: number[]; stroke: string; fill: string }) {
  const width = 320
  const height = 76
  const values = points.length > 1 ? points : [0, ...points]
  const polyline = values.map((value, index) => {
    const x = values.length === 1 ? 0 : (index / (values.length - 1)) * width
    const y = height - (clamp(value) / 100) * height
    return `${x},${y}`
  }).join(' ')
  const area = `0,${height} ${polyline} ${width},${height}`

  return (
    <svg viewBox={`0 0 ${width} ${height}`} className="w-full h-20 mt-3" preserveAspectRatio="none">
      <polygon points={area} fill={fill} opacity="0.75" />
      <polyline points={polyline} fill="none" stroke={stroke} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  )
}

function Panel({ title, children, extra }: { title: string; children: ReactNode; extra?: ReactNode }) {
  return (
    <div className="bg-white border border-gray-200 rounded-lg p-5">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-sm font-semibold text-black">{title}</h2>
        {extra}
      </div>
      <div className="space-y-3 text-sm">{children}</div>
    </div>
  )
}

function PlainRow({ label, value, mono = false, copyValue, onCopy, children }: { label: string; value: string; mono?: boolean; copyValue?: string; onCopy?: (value: string) => void; children?: ReactNode }) {
  return (
    <div className="flex items-center justify-between gap-3">
      <span className="text-gray-500">{label}</span>
      <div className="flex items-center gap-1 min-w-0">
        <span className={`text-black truncate ${mono ? 'font-mono text-xs' : ''}`}>{value}</span>
        {children}
        {copyValue && onCopy && (
          <button onClick={() => onCopy(copyValue)} className="p-0.5 text-gray-400 hover:text-black rounded" title="复制">
            <Copy className="w-3 h-3" />
          </button>
        )}
      </div>
    </div>
  )
}

function SnapshotTable({ snapshots, busy, onRestore, onDelete }: {
  snapshots: Snapshot[]
  busy: string
  onRestore: (snapshot: Snapshot) => void
  onDelete: (snapshot: Snapshot) => void
}) {
  if (snapshots.length === 0) {
    return <p className="rounded-lg border border-dashed border-gray-200 px-4 py-8 text-center text-sm text-gray-400">暂无快照</p>
  }

  return (
    <div className="overflow-x-auto rounded-lg border border-gray-200">
      <table className="w-full min-w-[760px] text-sm">
        <thead className="border-b border-gray-200 bg-gray-50 text-xs text-gray-500">
          <tr>
            <TableHead>快照时间</TableHead>
            <TableHead>类型</TableHead>
            <TableHead>创建者</TableHead>
            <TableHead>大小</TableHead>
            <th className="px-3 py-2 text-right text-xs font-medium text-gray-500">操作</th>
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-100">
          {snapshots.map((snapshot) => (
            <tr key={snapshot.id}>
              <td className="px-3 py-2 font-mono text-xs text-gray-800">{snapshot.created_at}</td>
              <td className="px-3 py-2">
                <span className={`rounded px-2 py-1 text-xs ${snapshot.scheduled ? 'bg-blue-50 text-blue-700' : 'bg-gray-100 text-gray-700'}`}>
                  {snapshot.scheduled ? '定时' : '手动'}
                </span>
              </td>
              <td className="px-3 py-2 text-xs text-gray-600">{snapshot.created_by || '-'}</td>
              <td className="px-3 py-2 font-mono text-xs text-gray-600">{formatBytes(snapshot.size_bytes || 0)}</td>
              <td className="px-3 py-2">
                <div className="flex justify-end gap-1.5">
                  <button
                    onClick={() => onRestore(snapshot)}
                    disabled={!!busy}
                    className="rounded border border-gray-300 px-2.5 py-1 text-xs text-gray-700 hover:bg-gray-50 disabled:opacity-50"
                  >
                    {busy === snapshot.id ? '处理中...' : '恢复'}
                  </button>
                  <button
                    onClick={() => onDelete(snapshot)}
                    disabled={!!busy}
                    className="rounded border border-red-200 px-2.5 py-1 text-xs text-red-600 hover:bg-red-50 disabled:opacity-50"
                  >
                    删除
                  </button>
                </div>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  )
}

function MappingEditor({
  draft,
  setDraft,
  isSubUser,
  canAddMapping,
  saving,
  containerIdentifier,
  publicIPv4s,
  onCancel,
  onSubmit,
}: {
  draft: MappingDraft
  setDraft: (draft: MappingDraft) => void
  isSubUser: boolean
  canAddMapping: boolean
  saving: boolean
  containerIdentifier: string
  publicIPv4s: { address: string; interface?: string }[]
  onCancel: () => void
  onSubmit: () => void
}) {
  const isEditing = draft.index !== null
  const updateDraft = (patch: Partial<MappingDraft>) => setDraft({ ...draft, ...patch })
  const disabledInputClass = 'w-full px-3 py-2 border border-gray-200 rounded-md text-sm text-gray-400 bg-gray-50'

  const fillRandomPort = async () => {
    try {
      const params = draft.host_ip ? { host_ip: draft.host_ip } : undefined
      const res = await api.get<APIResponse<{ port: number }>>(`/containers/${containerIdentifier}/random-port`, { params })
      const port = res.data.data?.port || 0
      if (port > 0) updateDraft({ host_port: String(port) })
    } catch {
      // keep manual input available if random port lookup fails
    }
  }

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <Field label="名称">
          <input
            value={draft.description}
            disabled={isSubUser}
            onChange={(e) => updateDraft({ description: e.target.value })}
            className={isSubUser ? disabledInputClass : inputClass}
            placeholder="Web / API"
          />
        </Field>

        <Field label="协议">
          {isSubUser ? (
            <input value={draft.protocol.toUpperCase()} disabled className={disabledInputClass} />
          ) : (
            <select value={draft.protocol} onChange={(e) => updateDraft({ protocol: e.target.value })} className={inputClass}>
              <option value="all">全部 (ALL)</option>
              <option value="tcp">TCP</option>
              <option value="udp">UDP</option>
              <option value="tcp+udp">TCP+UDP</option>
              <option value="icmp">ICMP</option>
            </select>
          )}
        </Field>

        <Field label="外部端口">
          {isSubUser ? (
            <input value={draft.host_port} disabled className={disabledInputClass} />
          ) : (
            <div className="flex gap-1">
              <input
                value={draft.host_port}
                onChange={(e) => updateDraft({ host_port: e.target.value })}
                className={`${inputClass} flex-1`}
                placeholder="默认同内部"
              />
              <button
                type="button"
                onClick={fillRandomPort}
                className="rounded-md border border-gray-300 px-2 py-2 text-xs text-gray-500 hover:bg-gray-50"
                title="随机空闲端口"
              >
                随机
              </button>
            </div>
          )}
        </Field>

        <Field label="Host IPv4">
          {isSubUser ? (
            <input value={draft.host_ip || 'All IPv4'} disabled className={disabledInputClass} />
          ) : (
            <select value={draft.host_ip} onChange={(e) => updateDraft({ host_ip: e.target.value })} className={inputClass}>
              <option value="">All assigned IPv4</option>
              {publicIPv4s.map((ip) => (
                <option key={`${ip.interface}-${ip.address}`} value={ip.address}>
                  {ip.address}{ip.interface ? ` (${ip.interface})` : ''}
                </option>
              ))}
            </select>
          )}
        </Field>

        <Field label="内部端口">
          <input
            value={draft.container_port}
            onChange={(e) => updateDraft({ container_port: e.target.value })}
            className={inputClass}
            placeholder="例如 80"
          />
        </Field>
      </div>

      <div className="flex justify-end gap-2 border-t border-gray-100 pt-4">
        <button onClick={onCancel} className="px-4 py-2 text-sm text-gray-600 border border-gray-200 rounded-md hover:bg-gray-50">
          取消
        </button>
        <button
          onClick={onSubmit}
          disabled={saving || (!isEditing && !canAddMapping)}
          className="inline-flex items-center justify-center gap-1.5 px-4 py-2 text-sm bg-black text-white rounded-md hover:bg-gray-800 disabled:opacity-50"
        >
          <Save className="w-4 h-4" />
          {saving ? '保存中...' : '保存'}
        </button>
      </div>
    </div>
  )
}

function MappingTable({ mappings, publicHost, onEdit, onDelete, compact = false, isSubUser = false }: { mappings: PortMapping[]; publicHost: string; onEdit: (pm: PortMapping, index: number) => void; onDelete: (index: number) => void; compact?: boolean; isSubUser?: boolean }) {
  if (mappings.length === 0) {
    return <p className="text-sm text-gray-400">暂无端口映射</p>
  }

  return (
    <div className="overflow-x-auto border border-gray-200 rounded-lg">
      <table className="w-full min-w-[680px]">
        <thead className="bg-gray-50 border-b border-gray-200">
          <tr>
            <TableHead>名称</TableHead>
            <TableHead>协议</TableHead>
            <TableHead>Host IPv4</TableHead>
            <TableHead>外部端口</TableHead>
            <TableHead>内部端口</TableHead>
            {!compact && <th className="text-right px-3 py-2 text-xs font-medium text-gray-500">操作</th>}
          </tr>
        </thead>
        <tbody className="divide-y divide-gray-100">
          {mappings.map((pm, index) => {
            const isSSH = pm.description === 'SSH' || pm.container_port === 22 || pm.description === 'RDP' || pm.container_port === 3389
            return (
              <tr key={`${pm.host_port}-${pm.container_port}-${index}`}>
                <td className="px-3 py-2 text-sm">
                  <span className="font-medium text-gray-800">{pm.description}</span>
                  {isSSH && <span className="ml-2 px-1.5 py-0.5 rounded bg-emerald-50 text-emerald-700 text-xs">默认</span>}
                </td>
                <td className="px-3 py-2 text-xs text-gray-500">{pm.protocol.toUpperCase()}</td>
                <td className="px-3 py-2 font-mono text-xs text-gray-800">{pm.host_ip || publicHost || 'All IPv4'}</td>
                <td className="px-3 py-2 font-mono text-xs text-gray-800">{pm.host_port}</td>
                <td className="px-3 py-2 font-mono text-xs text-gray-800">{pm.container_port}</td>
                {!compact && (
                  <td className="px-3 py-2">
                    <div className="flex justify-end gap-1">
                      <button onClick={() => onEdit(pm, index)} className="p-1.5 text-gray-500 hover:text-black hover:bg-gray-100 rounded" title="修改">
                        <Pencil className="w-3.5 h-3.5" />
                      </button>
                      {!isSubUser && (
                        <button disabled={isSSH} onClick={() => onDelete(index)} className="p-1.5 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded disabled:opacity-30 disabled:cursor-not-allowed" title={isSSH ? '默认 SSH 映射不能删除' : '删除'}>
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      )}
                    </div>
                  </td>
                )}
              </tr>
            )
          })}
        </tbody>
      </table>
    </div>
  )
}

function TableHead({ children }: { children: ReactNode }) {
  return <th className="text-left px-3 py-2 text-xs font-medium text-gray-500">{children}</th>
}

function Field({ label, children, hint }: { label: string; children: ReactNode; hint?: string }) {
  return (
    <label className="block">
      <span className="block text-xs font-medium text-gray-600 mb-1.5">{label}</span>
      {children}
      {hint && <span className="block text-[11px] text-gray-400 mt-1">{hint}</span>}
    </label>
  )
}

function Modal({ title, children, onClose, wide = false, extra, flush = false }: { title: string; children: ReactNode; onClose: () => void; wide?: boolean; extra?: ReactNode; flush?: boolean }) {
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4">
      <div className={`bg-white rounded-lg shadow-xl border border-gray-200 w-full ${wide ? 'max-w-5xl' : 'max-w-md'} max-h-[92vh] overflow-hidden flex flex-col`}>
        <div className="flex items-center justify-between px-5 py-3 border-b border-gray-200">
          <h2 className="text-sm font-semibold text-black">{title}</h2>
          <div className="flex items-center gap-2">
            {extra}
            <button onClick={onClose} className="p-1.5 text-gray-500 hover:text-black hover:bg-gray-100 rounded" title="关闭">
              <X className="w-4 h-4" />
            </button>
          </div>
        </div>
        <div className={flush ? "overflow-hidden" : "p-5 overflow-y-auto"}>{children}</div>
      </div>
    </div>
  )
}

function filterHistory(history: MetricPoint[], range: StatsRangeKey) {
  const cutoff = Date.now() - statsRanges[range]
  return history.filter((point) => point.ts >= cutoff)
}

function readHistory(containerName: string): MetricPoint[] {
  if (!containerName) return []
  try {
    const raw = localStorage.getItem(historyKey(containerName))
    if (!raw) return []
    const parsed = JSON.parse(raw) as MetricPoint[]
    const cutoff = Date.now() - statsRanges['1w']
    return parsed.filter((point) => point.ts >= cutoff)
  } catch {
    return []
  }
}

function historyKey(containerName: string) {
  return `clicd_container_metric_history:${containerName}`
}

function clamp(value: number) {
  if (!Number.isFinite(value)) return 0
  return Math.max(0, Math.min(value, 100))
}

function clampVCPU(value: number, max: number) {
  const rounded = Math.round((Number.isFinite(value) ? value : 1) * 4) / 4
  return Number(Math.min(Math.max(rounded, 0.25), max).toFixed(2))
}

function clampResourceInt(value: number, min: number, max?: number, fallback = min) {
  const next = Math.round(Number.isFinite(value) ? value : fallback)
  return Math.min(Math.max(next, min), max ?? next)
}

function resourceLimitValue(value?: number, fallback?: number) {
  return Math.max(0, Number(value || fallback || 0))
}

function symmetricLimit(a: number, b: number) {
  const left = resourceLimitValue(a)
  const right = resourceLimitValue(b)
  if (left === right) return left
  if (left === 0) return right
  if (right === 0) return left
  return Math.min(left, right)
}

function directionUsagePercent(bytesPerSecond: number, limit: number, bytesPerLimitUnit: number, fallbackBytesPerSecond: number) {
  const denominator = limit > 0 ? limit * bytesPerLimitUnit : fallbackBytesPerSecond
  return denominator > 0 ? clamp((bytesPerSecond / denominator) * 100) : 0
}

function formatLimit(value: number, unit: string) {
  return value > 0 ? `${value} ${unit}` : '不限制'
}

function formatDirectionalLimit(firstLabel: string, firstValue: number, secondLabel: string, secondValue: number, unit: string) {
  return `${firstLabel} ${formatLimit(firstValue, unit)} / ${secondLabel} ${formatLimit(secondValue, unit)}`
}

function toChartPoints<T extends keyof Omit<MetricPoint, 'ts'>>(history: MetricPoint[], key: T): ChartPoint[] {
  return history.map((point) => ({ ts: point.ts, value: Number(point[key]) || 0 }))
}

function formatPercent(value: number): string {
  return `${value.toFixed(1)}%`
}

function formatMB(bytes: number): string {
  if (bytes === 0) return '0 B'
  const mb = bytes / (1024 * 1024)
  if (mb >= 1024) return `${(mb / 1024).toFixed(2)} GB`
  return `${Math.round(mb)} MB`
}

function formatGB(bytes: number): string {
  if (bytes === 0) return '0 B'
  const gb = bytes / (1024 * 1024 * 1024)
  if (gb >= 1024) return `${(gb / 1024).toFixed(2)} TB`
  return `${gb.toFixed(2)} GB`
}

function formatBytes(bytes: number): string {
  if (bytes === 0) return '0 B'
  if (bytes < 1024) return `${bytes.toFixed(1)} B`
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
}

function formatCPU(usec: number): string {
  return `${(usec / 1000000).toFixed(2)}s`
}

function formatExpiration(value?: string): string {
  if (!value) return '长期有效'
  return value.length >= 10 ? value.slice(0, 10) : value
}

function formatDateTime(value?: string): string {
  if (!value) return '-'
  const parsed = new Date(value)
  if (Number.isNaN(parsed.getTime())) return value
  return parsed.toLocaleString()
}

function formatScheduleInterval(hours: number): string {
  if (hours === 24) return '1 天'
  if (hours % 24 === 0) return `${hours / 24} 天`
  return `${hours} 小时`
}

function formatRate(bytesPerSecond: number): string {
  if (bytesPerSecond < 1024) return `${bytesPerSecond.toFixed(0)} B/s`
  if (bytesPerSecond < 1024 * 1024) return `${(bytesPerSecond / 1024).toFixed(1)} KB/s`
  return `${(bytesPerSecond / (1024 * 1024)).toFixed(1)} MB/s`
}

function TrafficBar({ container }: { container: Container }) {
  const rx = container.traffic_used_rx || 0
  const tx = container.traffic_used_tx || 0
  const total = rx + tx
  const mode = container.traffic_mode || 'total'

  const totalLimit = mode === 'in_out'
    ? (container.traffic_in_gb || 0) + (container.traffic_out_gb || 0)
    : container.monthly_traffic_gb || 0

  const rxLimit = mode === 'in_out' ? (container.traffic_in_gb || 0) * 1073741824 : 0
  const txLimit = mode === 'in_out' ? (container.traffic_out_gb || 0) * 1073741824 : 0

  const totalPct = totalLimit > 0 ? Math.min((total / (totalLimit * 1073741824)) * 100, 100) : 0
  const rxPct = rxLimit > 0 ? Math.min((rx / rxLimit) * 100, 100) : 0
  const txPct = txLimit > 0 ? Math.min((tx / txLimit) * 100, 100) : 0

  if (totalLimit === 0 && rxLimit === 0 && txLimit === 0) {
    return <div className="text-sm text-gray-400">未设置流量限制</div>
  }

  if (mode === 'in_out') {
    return (
      <div className="space-y-3">
        <div>
          <div className="flex justify-between text-xs text-gray-500 mb-1">
            <span>入站 (RX)</span>
            <span>{formatBytes(rx)} {rxLimit > 0 ? `/ ${formatBytes(rxLimit)}` : '(不限制)'}</span>
          </div>
          {rxLimit > 0 && (
            <div className="w-full bg-gray-200 rounded-full h-2.5">
              <div className="bg-black h-2.5 rounded-full transition-all" style={{ width: `${Math.min(rxPct, 100)}%` }} />
            </div>
          )}
        </div>
        <div>
          <div className="flex justify-between text-xs text-gray-500 mb-1">
            <span>出站 (TX)</span>
            <span>{formatBytes(tx)} {txLimit > 0 ? `/ ${formatBytes(txLimit)}` : '(不限制)'}</span>
          </div>
          {txLimit > 0 && (
            <div className="w-full bg-gray-200 rounded-full h-2.5">
              <div className="bg-black h-2.5 rounded-full transition-all" style={{ width: `${Math.min(txPct, 100)}%` }} />
            </div>
          )}
        </div>
      </div>
    )
  }

  return (
    <div>
      <div className="flex justify-between text-xs text-gray-500 mb-1">
        <span>已用</span>
        <div className="flex items-center gap-2">
          <span>{formatBytes(total)} / {totalLimit} GB</span>
          {(container.traffic_used_rx > 0 || container.traffic_used_tx > 0) && (
            <button onClick={async () => {
              try {
                await resetTraffic(container.id)
              } catch { /* ignore */ }
            }} className="text-xs text-gray-400 hover:text-black underline">重置</button>
          )}
        </div>
      </div>
      <div className="w-full bg-gray-200 rounded-full h-2.5">
        <div className="bg-black h-2.5 rounded-full transition-all" style={{ width: `${Math.min(totalPct, 100)}%` }} />
      </div>
    </div>
  )
}

function isWindowsTemplate(templateID: string) {
  return templateID.toLowerCase().includes('windows')
}

function getTemplateIcon(id: string): ReactNode {
  const size = 'w-6 h-6'
  id = id.startsWith('kvm-') ? id.slice(4) : id
  if (id.startsWith('debian')) return <svg className={size} viewBox="0 0 1024 1024"><path d="M935.473 375.359a558.602 558.602 0 0 0-22.351-114.655l13.308 4.436c-35.66-81.385-90.086-163.623-153.556-199.282-8.701-5.118-35.147 4.948-26.616-12.113s-37.536-8.19-56.816-4.778c-26.275 4.266-30.028-29.175-75.071-35.83-25.593-3.582-32.247 18.427-44.702 13.309-23.545-9.384-20.816-27.64-57.669-9.384-18.427 9.042 11.602-26.105-49.138-4.607L457.744 0C349.23 41.63 318.69 76.266 288.15 79.337c-6.996 0-34.124 32.759-53.574 53.062-17.062 17.062-26.275 36.512-49.138 39.583l-17.062 70.636A136.494 136.494 0 0 0 119.41 339.7a66.711 66.711 0 0 1 4.436-52.892c-17.062 6.825-45.896 17.062-29.687 96.91 12.796 63.13-5.29 135.13 10.066 204.742 4.777 20.986 0 40.095 6.142 51.185 107.66 235.794 208.836 392.08 472.44 384.06l4.436-8.872c-28.152-6.825-55.11-17.062-111.584-30.711-18.597-4.436-23.033-34.124-40.265-44.19-9.384-5.46-28.323-4.095-37.195-9.896s4.266-21.668-19.962-14.332c-8.531 2.56-13.82-10.92-20.133-17.061s0-23.716-23.375-24.74-18.426-29.687-19.791-44.702c-12.114 1.536-1.195-1.535-13.308 4.436a63.64 63.64 0 0 1-23.887-31.735c-10.237-48.967-10.578-21.497-15.014-32.417a322.297 322.297 0 0 0-19.28-42.142l26.787 8.872h4.436l4.436-13.309-26.616-8.701h31.223c-7.678 13.99 2.047 5.29-13.479 8.872v13.308l22.35-8.872v-13.308c-20.644-10.237-28.663-13.308-49.137-22.01l9.043 8.872v4.436h-49.138c-22.01-14.843-13.99-31.734-17.915-53.062 17.062 0 9.213 6.655 17.062-13.137l-17.062 8.872 13.308-33.953-13.308 13.138c-29.176-38.73-16.209-97.764-11.943-152.02A180.684 180.684 0 0 1 211.2 372.97c8.872-10.067 5.119-25.251 5.46-37.195l31.223-26.445H265.8c7.678 17.061 4.777 5.46 0 22.01l8.872 4.435c7.166-8.701 6.142-5.971 8.872-22.01-10.066-10.578-6.995-9.895-26.616-13.308A119.432 119.432 0 0 1 368.51 243.13l4.436-13.308-17.915 9.043-4.436-13.138a109.536 109.536 0 0 1 76.095-27.128c6.313 0 6.996-17.062 12.797-19.45 161.574-60.57 309.33 9.383 371.093 147.413a324.173 324.173 0 0 1 8.19 34.123c17.061 56.987-7.167 121.48 9.725 155.604-7.849 36-36.683 13.82-40.266 30.881-8.531 41.29-14.844 59.717-40.778 78.826a196.38 196.38 0 0 1-30.711 22.35 84.285 84.285 0 0 0 22.35-39.753c-106.294 111.584-262.58 63.981-290.049-105.954a101.176 101.176 0 0 1 35.147-93.157c92.987-87.527 150.144-52.38 205.765-20.474l-8.872-30.711c-32.93-24.398-17.062-19.792-9.043-57.328v-4.436l-17.915-13.137c2.56 10.066 1.024 5.289 9.043 17.061-4.436 16.039 0 9.043-8.872 17.062-15.014 9.725-23.716 7.337-44.702 4.436l4.436-13.308-13.308-13.308c0 11.773-4.095 2.73 0 17.062-126.086 9.896-218.05 80.02-178.636 260.191a220.608 220.608 0 0 0 8.872 44.19l-8.872 8.702-4.436-26.446h-13.48l-4.435 13.308c-12.626-25.763-0.853 10.75 40.265 52.892a149.29 149.29 0 0 0 12.797 12.625c47.773 34.124 113.29 81.385 201.328 49.138h9.043v-4.436l-102.37-13.308-4.436-8.701c106.806 24.74 176.93-8.531 236.646-48.456 13.138-17.062 11.431-24.057 22.18-9.043 19.28-17.061 3.925-26.786 13.48-44.019 6.483-11.772 32.587-17.062 44.7-35.318l40.096-136.494h-17.062c3.071-14.332 22.522-34.123-4.436-48.455-2.559-1.536 9.043-1.365 8.872-4.266a145.537 145.537 0 0 0-22.18-66.37c33.1 21.669 36.342 68.247 53.574 105.783v8.872h4.436V375.36zM453.308 595.455l-9.555-26.446 62.446 57.328zM146.196 211.736l-23.204-4.436v39.754c16.72-10.578 18.939-10.407 22.35-35.318z m574.981 176.419a57.498 57.498 0 0 0-17.062 44.19l13.48 8.701a37.877 37.877 0 0 0 4.435-52.891zM868.42 555.872c26.275-11.602 54.598-58.01 35.83-97.081l-35.83 96.91z m-174.03-79.508c-15.697 11.773-19.791 13.308-22.35 39.754l13.307 8.872 17.915-8.872a60.228 60.228 0 0 0 4.436-48.455c-8.36 13.478-2.559 20.644-13.308 8.701z m-67.053 79.508c15.868-10.92 11.944-14.844 17.915-22.18v-4.778a292.097 292.097 0 0 1-62.446 0c-13.137-13.99-13.308-29.346-31.223-39.583 17.062 35.147 3.242 38.218 31.223 61.764a158.162 158.162 0 0 0 40.095 4.436c1.536 0-6.824-1.024 4.436 0zM207.79 520.554H194.31l-8.872 8.702c9.555 10.237 5.46 7.166 13.308-4.436L212.225 547l4.436-17.062-8.872-8.701z m17.062 57.328l4.436-8.873c-10.067-8.701 0-3.583-13.308 0l-13.309-17.061 4.436 17.061v8.873h17.062z" fill="#CE0C48"/></svg>
  if (id.startsWith('ubuntu')) return <svg className={size} viewBox="0 0 1024 1024"><circle cx="512" cy="512" r="511" fill="#DD4814"/><path d="M164.532 442.532c-37.676 0-68.2 30.524-68.2 68.2 0 37.656 30.524 68.184 68.2 68.184 37.66 0 68.184-30.528 68.184-68.184 0-37.676-30.524-68.2-68.184-68.2z m486.86 309.912c-32.612 18.84-43.8 60.52-24.96 93.116 18.82 32.616 60.5 43.796 93.116 24.96 32.612-18.82 43.796-60.5 24.96-93.12-18.82-32.592-60.524-43.772-93.116-24.956z m-338.744-241.712c0-67.384 33.472-126.92 84.684-162.968L347.48 264.268c-59.656 39.88-104.048 100.816-122.496 172.188 21.528 17.56 35.304 44.3 35.304 74.272 0 29.956-13.776 56.696-35.304 74.26C243.408 656.376 287.8 717.32 347.48 757.2l49.852-83.52c-51.212-36.028-84.684-95.56-84.684-162.948z m199.168-199.188c104.052 0 189.42 79.776 198.38 181.52l97.16-1.432c-4.776-75.112-37.592-142.544-88.008-192.128-25.928 9.796-55.88 8.296-81.76-6.624-25.932-14.964-42.192-40.208-46.636-67.608a297.04 297.04 0 0 0-79.14-10.76 295.148 295.148 0 0 0-131.276 30.652l47.38 84.908a198.384 198.384 0 0 1 83.9-18.528z m0 398.36a198.404 198.404 0 0 1-83.896-18.528l-47.38 84.9a294.848 294.848 0 0 0 131.28 30.684 296.16 296.16 0 0 0 79.136-10.788c4.444-27.4 20.708-52.62 46.632-67.608 25.904-14.948 55.836-16.42 81.76-6.624 50.42-49.584 83.232-117.016 88.016-192.128l-97.188-1.432c-8.94 101.772-94.304 181.52-198.36 181.52z m139.552-440.924c32.616 18.832 74.3 7.68 93.116-24.936 18.84-32.616 7.68-74.3-24.936-93.14-32.616-18.816-74.296-7.64-93.14 24.976-18.812 32.6-7.632 74.28 24.96 93.1z" fill="#FFF"/></svg>
  if (id.startsWith('alpine')) return <svg className={size} viewBox="0 0 1024 1024"><path d="M255.914667 68.565333L0 512l255.914667 443.434667h512.170666L1024 512 768.085333 68.565333H255.914667zM425.173333 303.786667L540.16 422.4l68.181333 68.053333 0.085334-0.085333 102.826666 100.821333c-8.533333 5.973333-16.469333 10.752-24.021333 14.677334a160.256 160.256 0 0 1-21.162667 9.258666 115.285333 115.285333 0 0 1-18.133333 4.736c-5.589333 0.981333-10.666667 1.450667-15.274667 1.450667-5.546667 0-10.325333-0.597333-14.421333-1.450667a56.192 56.192 0 0 1-10.24-3.072 40.533333 40.533333 0 0 1-8.533333-4.821333l-45.312-46.592-129.664-129.749333-46.933334 44.928-130.986666 131.072a41.557333 41.557333 0 0 1-8.533334 4.736 54.357333 54.357333 0 0 1-10.112 3.114666 70.826667 70.826667 0 0 1-14.421333 1.408c-4.608 0-9.685333-0.384-15.274667-1.322666a115.2 115.2 0 0 1-18.133333-4.864 159.914667 159.914667 0 0 1-21.162667-9.258667 223.061333 223.061333 0 0 1-24.021333-14.634667L425.173333 303.786667z m201.386667 33.493333l195.370667 196.181333 58.965333 57.728a223.573333 223.573333 0 0 1-24.064 14.677334 159.146667 159.146667 0 0 1-21.077333 9.258666 115.072 115.072 0 0 1-18.176 4.736c-5.546667 0.981333-10.709333 1.450667-15.36 1.450667-5.504 0-10.282667-0.597333-14.378667-1.450667a54.826667 54.826667 0 0 1-16.426667-6.229333 10.197333 10.197333 0 0 1-2.261333-1.706667l-52.565333-51.968-90.069334-90.069333-14.250666 14.250667L545.706667 418.133333l80.896-80.938666z m-254.549333 175.786667v107.904a90.794667 90.794667 0 0 1-15.189334-1.493334 117.973333 117.973333 0 0 1-18.005333-4.949333 158.208 158.208 0 0 1-20.821333-9.130667 222.592 222.592 0 0 1-23.68-14.506666l77.653333-77.866667z" fill="#0D597F"/></svg>
  if (id.startsWith('centos')) return <svg className={size} viewBox="0 0 1024 1024"><path d="M153.650377 358.349623v112.005247h-3.694326v-108.310921l3.694326-3.694326z" fill="#932279"/><path d="M453.058708 512l-29.554608 29.554608H137.86553v108.310922L0 512l137.86553-137.86553v108.310922h285.63857l29.554608 29.554608zM738.529354 226.529354L553.64513 411.413578V149.956051h108.310921l3.694326 3.694326 72.878977 72.878977z" fill="#932279"/><path d="M649.86553 137.86553h-108.310922v285.63857l-29.554608 29.554608-29.554608-29.554608V137.86553h-108.310922L512 0l137.86553 137.86553zM874.043949 553.64513v108.310921l-3.694326 3.694326-72.878977 72.878977-184.884224-184.884224h261.457527z" fill="#EFA724"/><path d="M886.13447 361.036405v13.098065l-6.04526-6.04526-6.045261-6.045261v108.310921h-3.694326v-125.103312l3.694326 3.694326 6.045261 6.045261 6.04526 6.04526z" fill="#262577"/><path d="M886.13447 649.86553v-108.310922H600.4959L570.941292 512l29.554608-29.554608h285.63857v-108.310922l137.86553 137.86553-137.86553 137.86553z" fill="#262577"/><path d="M411.413578 470.35487H149.956051v-108.310921l3.694326-3.694326L226.529354 285.470646 411.413578 470.35487zM470.35487 149.956051V411.413578L285.470646 226.529354l72.878977-72.878977 3.694326-3.694326h108.310921z" fill="#9CCD2A"/><path d="M738.529354 797.470646L553.64513 612.586422v261.457527h108.310921l3.694326-3.694326 72.878977-72.878977z" fill="#EFA724"/><path d="M649.86553 886.13447h-108.310922V600.4959L512 570.941292l-29.554608 29.554608v285.63857h-108.310922l137.86553 137.86553 137.86553-137.86553z" fill="#9CCD2A"/><path d="M470.35487 874.043949V612.586422L285.470646 797.470646l72.878977 72.878977 3.694326 3.694326h108.310921z" fill="#262577"/><path d="M470.35487 428.541817v41.813053h-41.813053L226.529354 268.342407l-76.573303 76.573303V149.956051h194.959659l-76.573303 76.573303 202.012463 202.012463z" fill="#9CCD2A"/><path d="M880.08921 143.91079v224.17842l-6.045261-6.045261v108.310921H612.586422L797.470646 285.470646l72.878977 72.878977v-13.098065l3.694326 3.694326v-4.030174l-76.573303-76.573303-202.012463 202.012463h-41.813053v-41.813053L755.657593 226.529354l-82.618564-82.618564h207.050181z" fill="#932279"/><path d="M666.993768 137.86553l12.090522 12.090521h194.959659v212.087898l6.045261 6.045261 6.04526 6.04526V137.86553z" fill="#FFF"/><path d="M874.043949 679.08429v194.959659H679.08429L755.657593 797.470646 553.64513 595.458183v-41.813053h41.813053L797.470646 755.657593l76.573303-76.573303z" fill="#EFA724"/><path d="M411.413578 553.64513L226.529354 738.529354l-72.878977-72.878977-3.694326-3.694326v-108.310921H411.413578z" fill="#262577"/><path d="M470.35487 595.458183L268.342407 797.470646l76.573303 76.573303H149.956051V679.08429L226.529354 755.657593l202.012463-202.012463h41.813053v41.813053z" fill="#262577"/><path d="M874.043949 344.91571v4.030174l-3.694326-3.694326v13.098065l3.694326 3.694326 6.045261 6.045261 6.04526 6.04526v-16.792391z" fill="#FFF"/></svg>
  if (id.startsWith('archlinux')) return <svg className={size} viewBox="0 0 1024 1024"><path d="M504.149333 7.850667c-44.373333 108.544-70.997333 179.2-120.149333 284.330666 30.037333 32.085333 67.242667 69.290667 127.317333 111.274667-64.512-26.624-108.544-53.248-141.653333-80.896-63.146667 131.413333-161.792 318.464-361.813333 678.229333 157.696-90.794667 279.552-146.773333 393.216-168.277333-4.778667-21.162667-7.509333-43.690667-7.509334-67.584l0.341334-5.12c2.389333-100.693333 54.954667-178.517333 117.077333-173.056s110.592 91.477333 107.861333 192.170667c-0.341333 18.090667-2.389333 36.522667-6.485333 54.272 112.64 21.845333 233.130667 77.824 388.437333 167.594666l-83.968-155.648c-40.96-31.744-83.968-73.386667-171.349333-118.101333 60.074667 15.701333 103.082667 33.792 136.533333 53.930667-265.557333-493.909333-287.061333-559.786667-377.856-773.12z" fill="#1793D1"/></svg>
  if (id.startsWith('fedora')) return <svg className={size} viewBox="0 0 1024 1024"><path d="M512 0C229.344 0 0.224 229.024 0 511.648V907.84a116.384 116.384 0 0 0 116.384 116.128h395.808c282.656-0.128 511.776-229.28 511.776-512 0-282.752-229.248-512-512-512z m196.064 237.952c-16.16 0-22.016-3.104-45.728-3.104a126.848 126.848 0 0 0-126.848 126.624v110.208c0 9.888 8.032 17.92 17.92 17.92h83.328c31.072 0 56.16 24.736 56.16 55.904 0 31.328-25.344 55.968-56.736 55.968h-100.608v127.36a240.32 240.32 0 0 1-240.288 240.288h-1.248a190.944 190.944 0 0 1-53.216-7.52l1.344 0.32c-27.168-7.072-49.376-29.408-49.376-55.296 0-31.328 22.752-54.112 56.736-54.112 16.128 0 22.016 3.072 45.696 3.072a126.848 126.848 0 0 0 126.848-126.624v-110.208a17.92 17.92 0 0 0-17.92-17.888h-83.328a55.808 55.808 0 0 1-56.096-55.904c0-31.328 25.344-55.968 56.736-55.968h100.576v-127.36a240.32 240.32 0 0 1 240.288-240.288c20.128 0 34.432 2.272 53.088 7.136 27.168 7.136 49.408 29.44 49.408 55.296 0 31.36-22.752 54.144-56.736 54.144z" fill="#294172"/></svg>
  if (id.startsWith('nixos')) return <svg className={size} viewBox="0 0 60 60"><g fillRule="evenodd"><path d="M23.58 20.214L8.964 45.528 5.55 39.743l3.94-6.78-7.823-.02L0 30.052l1.703-2.956 11.135.035 4.002-6.9zM24.7 40.45h29.23l-3.302 5.85-7.84-.022 3.894 6.785-1.67 2.9-3.412.004-5.537-9.66-7.976-.016zm17.014-11.092L27.1 4.043l6.716-.063 3.902 6.8 3.93-6.765 3.337.002 1.7 2.953-5.598 9.626 3.974 6.916z" fill="#7ebae4"/><path d="M35.28 19.486l-29.23-.002 3.303-5.848 7.84.022L13.3 6.873l1.67-2.9 3.412-.004 5.537 9.66 7.976.016zm1.14 20.294l14.616-25.313 3.413 5.785-3.94 6.78 7.823.02 1.668 2.9-1.703 2.956-11.135-.035-4.002 6.9z" fill="#5277c3"/></g><defs><path id="B" d="M18.305 30.642L32.92 55.956l-6.716.063-3.902-6.8-3.93 6.765-3.337-.002-1.71-2.953 5.598-9.626-3.974-6.916z"/></defs></svg>
  if (id.startsWith('kali')) return <svg className={size} viewBox="0 0 1024 1024"><path d="M545.194667 253.568s-84.053333-5.546667-227.285334 39.253333c-145.92 45.653333-228.693333 110.378667-228.693333 110.378667s217.514667-121.472 463.018667-128.341333z m313.642666 132.053333l10.965334-0.725333s-62.634667-75.946667-182.528-112.981333c67.413333 27.392 126.037333 63.701333 171.562666 113.706666z m17.92 31.573334c1.664-2.901333 7.082667 9.258667 11.221334 14.378666 0.170667 1.024 0.426667 1.664-1.92 1.152-0.213333-1.066667-0.554667-1.365333-0.554667-1.365333s-5.76-3.413333-7.552-5.845333c-1.749333-2.432-2.090667-6.698667-1.194667-8.32z m147.114667 361.770666s13.312-152.661333-226.56-187.861333a779.818667 779.818667 0 0 0-107.690667-7.978667c-192.256 2.56-199.253333-221.738667-54.4-233.045333 60.032-4.949333 131.712 27.434667 201.813334 60.074667-0.298667 8.704 0.085333 16.426667 5.802666 23.552 5.717333 7.168 27.648 14.933333 34.688 18.986666 6.997333 4.010667 29.482667 18.346667 43.264 36.266667 2.986667-5.589333 27.904-21.845333 27.904-21.845333s-5.973333 0.128-19.84-5.077334c-13.909333-5.205333-30.421333-20.906667-30.805333-21.802666-0.426667-0.938667-0.64-2.346667 2.56-2.986667 2.517333-2.090667-3.072-8.832-5.546667-11.306667-2.474667-2.474667-18.986667-30.549333-19.370666-31.146666-0.384-0.682667-0.512-1.322667-1.706667-2.133334-3.626667-1.152-19.626667 1.706667-19.626667 1.706667s-24.533333-12.074667-33.024-38.101333c0.128 4.565333-4.224 9.557333 0 20.010666-12.8-5.418667-23.808-14.677333-32.512-37.546666-5.12 13.013333 0 21.290667 0 21.290666s-30.165333-8.448-34.986666-36.266666c-5.290667 12.501333 0 20.010667 0 20.010666s-49.194667-25.685333-130.944-26.026666c-54.741333-5.034667-66.133333-101.290667-61.013334-117.504 0 0-78.933333-41.6-234.368-59.989334-155.392-18.346667-282.794667-2.773333-282.794666-2.773333s275.2-13.226667 495.658666 76.074667c7.509333 33.493333 30.037333 89.344 42.197334 116.181333-34.773333 24.021333-73.941333 46.592-80.042667 126.72-6.101333 80.128 62.805333 150.613333 148.224 152.746667 81.066667 4.352 137.130667 4.949333 205.056 40.192 64.853333 35.84 118.016 145.066667 123.306667 243.328 5.632-72.917333-21.717333-229.674667-149.333334-277.248 178.389333 31.232 194.090667 163.498667 194.090667 163.498666zM541.013333 241.621333l-6.4-20.693333s-105.984-18.816-248.405333-8.704C143.786667 222.336 0 272.213333 0 272.213333s294.229333-74.026667 541.013333-30.592z" fill="#557C94"/></svg>
  if (id.startsWith('rockylinux')) return <svg className={size} viewBox="0 0 1024 1024"><path d="M995.498667 680.362667c18.474667-52.778667 28.501333-109.568 28.501333-168.704C1024 229.077333 794.752 0 512 0S0 229.077333 0 511.658667c0 139.818667 56.106667 266.496 147.114667 358.826666L666.453333 351.530667l128.213334 128.170666 200.832 200.704z m-93.525334 162.816l-235.52-235.349334-368.896 368.597334A510.506667 510.506667 0 0 0 512 1023.274667c156.16 0 296.106667-69.888 389.973333-180.053334h0.042667z" fill="#10B981"/></svg>
  if (id.startsWith('windows')) return <svg className={size} viewBox="0 0 1024 1024"><path d="M56.888889 227.555556l398.222222-70.542223V512H56.888889V227.555556z m0 625.777777l398.222222 70.542223V568.888889H56.888889v284.444444zM512 147.342222L1024 56.888889v455.111111H512V147.342222z m0 786.204445L1024 1024v-455.111111H512v364.657778z" fill="#16C6FE"/></svg>
  return null
}