import { memo } from 'react'
import { Monitor, RefreshCw, Trash2, Eye, Terminal, Pencil } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { StatusBadge } from '@/components/StatusBadge'
import { ResourceCard } from '@/components/ResourceCard'
import type { Host } from '@/types'

interface HostCardProps {
  host: Host
  validating: number | null
  onViewInfo: (h: Host) => void
  onOpenTerminal: (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, onOpenTerminal, onValidate, onDelete, onEdit,
}: HostCardProps) {
  return (
    <ResourceCard
      icon={Monitor}
      iconClassName="text-purple-500"
      title={host.name}
      badges={<StatusBadge status={host.status} />}
      fields={[
        { label: '地址', value: `${host.hostIP}:${host.port}` },
        { label: '用户', value: host.user },
        { label: '认证', value: host.authType === 'key' ? 'SSH 密钥' : '密码' },
        { label: '系统', value: `${host.os || '未知'} / ${host.arch || '未知'}` },
      ]}
      actions={
        <>
          <Button variant="outline" size="sm" aria-label={'编辑主机 ' + host.name} onClick={() => onEdit(host)}>
            <Pencil className="size-3.5" />
          </Button>
          <Button variant="outline" size="sm" className="flex-1 text-xs" onClick={() => onViewInfo(host)}>
            <Eye className="size-3 mr-1" />详情
          </Button>
          <Button variant="outline" size="sm" className="flex-1 text-xs" onClick={() => onOpenTerminal(host)}>
            <Terminal className="size-3 mr-1" />终端
          </Button>
          <Button variant="outline" size="sm" aria-label={`验证主机 ${host.name}`} disabled={validating === host.id} onClick={() => onValidate(host.id)}>
            <RefreshCw className={`size-3 ${validating === host.id ? 'animate-spin' : ''}`} />
          </Button>
          <Button variant="outline" size="sm" aria-label={`删除主机 ${host.name}`} className="text-destructive hover:text-destructive hover:bg-destructive/10" onClick={() => onDelete(host)}>
            <Trash2 className="size-3.5" />
          </Button>
        </>
      }
    />
  )
})