import { memo } from 'react'
import { Monitor, RefreshCw, Trash2, Eye, Pencil } from 'lucide-react'
import { useTranslation } from 'react-i18next'
import { StatusBadge } from '@/components/StatusBadge'
import { ResourceCard } from '@/components/ResourceCard'
import { CardActionButton } from '@/components/CardActionButton'
import type { Host } from '@/types'

interface HostCardProps {
  host: Host
  validating: number | null
  onViewInfo: (h: Host) => void
  onValidate: (id: number) => void
  onDelete: (h: Host) => void
  onEdit: (h: Host) => void
}

/** 主机卡片 — 统一 ResourceCard 样式 */
export const HostCard = memo(function HostCard({
  host, validating, onViewInfo, onValidate, onDelete, onEdit,
}: HostCardProps) {
  const { t } = useTranslation('hosts')
  return (
    <ResourceCard
      icon={Monitor}
      iconClassName="text-info"
      title={host.name}
      badges={<StatusBadge status={host.status} />}
      fields={[
        { label: t('fields.address'), value: `${host.hostIP}:${host.port}` },
        { label: t('fields.user'), value: host.user },
        { label: t('fields.auth'), value: host.authType === 'key' ? t('fields.authKey') : t('fields.authPassword') },
        { label: t('fields.os'), value: `${host.os || t('fields.unknown')} / ${host.arch || t('fields.unknown')}` },
      ]}
      actions={
        <>
          <CardActionButton icon={Pencil} ariaLabel={t('actions.editAria', { name: host.name })} onClick={() => onEdit(host)} />
          <CardActionButton icon={Eye} label={t('actions.detail')} onClick={() => onViewInfo(host)} />
          <CardActionButton
            icon={RefreshCw}
            ariaLabel={t('actions.validateAria', { name: host.name })}
            spinning={validating === host.id}
            disabled={validating === host.id}
            onClick={() => onValidate(host.id)}
          />
          <CardActionButton icon={Trash2} ariaLabel={t('actions.deleteAria', { name: host.name })} destructive onClick={() => onDelete(host)} />
        </>
      }
    />
  )
})