import { memo } from 'react'
import type { LucideIcon } from 'lucide-react'
import { Card, CardContent } from '@/components/ui/card'
import { cn } from '@/lib/utils'

export interface ResourceField {
  label: string
  value: React.ReactNode
  /** 值提示(截断时 title) */
  title?: string
}

interface ResourceCardProps {
  /** 头部图标 */
  icon: LucideIcon
  /** 图标配色(text-info/success/warning 等语义 token 类) */
  iconClassName?: string
  title: string
  /** 标题旁附加(如 ready 状态点、uuid) */
  titleExtra?: React.ReactNode
  /** 右上角徽章(状态/保留天数等) */
  badges?: React.ReactNode
  /** 副标题/描述(单行截断) */
  description?: string
  /** 信息字段(两列网格;奇数个最后一项占整行) */
  fields: ResourceField[]
  /** 底部状态消息(如错误信息,浅底块) */
  message?: string
  /** 底部操作区(border-top 分隔) */
  actions: React.ReactNode
}

/**
 * 资源卡片 — 五大资源页(集群/主机/存储/部署/采集)统一样式:
 * 图标+标题+徽章 → 描述 → 两列信息网格(label 上 value 下) → 分隔线操作区。
 * 统一 p-4 内边距、hover 阴影、等高布局(网格内自动对齐)。
 */
export const ResourceCard = memo(function ResourceCard({
  icon: Icon,
  iconClassName = 'text-muted-foreground',
  title,
  titleExtra,
  badges,
  description,
  fields,
  message,
  actions,
}: ResourceCardProps) {
  return (
    <Card className="border-border hover:shadow-md transition-shadow h-full">
      <CardContent className="p-4 flex flex-col gap-3 h-full">
        {/* 头部:图标 + 标题 + 徽章 */}
        <div className="flex items-start gap-3">
          <div className="w-9 h-9 rounded-lg bg-muted/70 flex items-center justify-center shrink-0">
            <Icon className={cn('size-4', iconClassName)} />
          </div>
          <div className="min-w-0 flex-1">
            <div className="flex items-center gap-2 flex-wrap">
              <h3 className="font-medium text-sm text-foreground truncate" title={title}>
                {title}
              </h3>
              {titleExtra}
              {badges && <span className="ml-auto flex items-center gap-1.5 shrink-0">{badges}</span>}
            </div>
            {description && (
              <p className="text-xs text-muted-foreground truncate mt-0.5" title={description}>
                {description}
              </p>
            )}
          </div>
        </div>

        {/* 信息:两列网格(label 灰小字在上,value 在下) */}
        <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
          {fields.map((f) => (
            <div key={f.label} className="min-w-0">
              <p className="text-muted-foreground leading-4">{f.label}</p>
              <p className="font-medium text-foreground truncate leading-5" title={f.title}>
                {f.value}
              </p>
            </div>
          ))}
        </div>

        {/* 状态消息(错误/提示) */}
        {message && (
          <p className="rounded-md bg-muted/60 px-2.5 py-1.5 text-xs text-muted-foreground" title={message}>
            {message}
          </p>
        )}

        {/* 操作区:贴底 */}
        {/* flex-wrap：按钮多时自动换行，避免在窄卡片里被 flex-1 压扁/溢出 */}
        <div className="flex flex-wrap items-center gap-2 pt-3 border-t border-border mt-auto">{actions}</div>
      </CardContent>
    </Card>
  )
})