aiops/frontend/src/pages/monitor/middleware-monitor/InstanceCard.tsx

// 中间件实例卡片 — 紧凑列表项，详情见右侧可观测面板 // Logan.Li
import { Button } from '@/components/ui/button';
import { useTranslation } from 'react-i18next';
import { AlertTriangle, Loader2, Pencil, Trash2, Zap } from 'lucide-react';
import type { MwTarget } from './helpers';
import {
  evalMwHealth, fmtLastSeen, fmtVal,
  healthLevelColor, redisModeLabel, worstHealthLevel,
} from './helpers';

interface Props {
  target: MwTarget;
  selected?: boolean;
  onSelect: () => void;
  onEdit: () => void;
  onDelete: () => void;
  onTest: () => void;
  testing: boolean;
}

export function InstanceCard({ target, selected, onSelect, onEdit, onDelete, onTest, testing }: Props) {
  const { t } = useTranslation();
  const m = target.latest_metrics || {};
  const isRedis = target.description === 'redis';
  const issues = evalMwHealth(target);
  const health = worstHealthLevel(issues);
  const healthColor = healthLevelColor(health);

  return (
    <button
      type="button"
      onClick={onSelect}
      className={`w-full text-left rounded-lg px-2.5 py-2 border transition-colors ${
        selected
          ? 'border-cyan-500/50 bg-[var(--dg-bg-tertiary)] ring-1 ring-cyan-500/20'
          : 'border-[var(--dg-border)] bg-[var(--dg-bg-tertiary)] hover:border-[var(--dg-border)]/80'
      }`}
    >
      <div className="flex items-center gap-1.5 min-w-0 mb-1">
        <span className="text-sm font-medium truncate">{target.name}</span>
        {health !== 'ok' && (
          <AlertTriangle className="h-3 w-3 shrink-0" style={{ color: healthColor }} />
        )}
      </div>
      <p className="text-[11px] text-[var(--dg-text-muted)] mb-1.5 truncate">
        {target.ip}:{target.port}
        {isRedis && ` · ${redisModeLabel(target.config_public?.redis_mode)}`}
        {' · '}{fmtLastSeen(target.last_seen_at)}
      </p>

      <div className="flex flex-wrap gap-1 mb-1.5">
        {isRedis ? (
          <>
            <MetricPill label="QPS" value={fmtVal(m.redis_qps, 1)} />
            <MetricPill label="Key" value={fmtVal(m.redis_db_size)} />
          </>
        ) : (
          <>
            <MetricPill label="QPS" value={fmtVal(m.mysql_qps, 1)} />
            <MetricPill label={t('monitor.mwInstance.threads')} value={fmtVal(m.mysql_threads_running)} />
          </>
        )}
      </div>

      <div className="flex items-center gap-0.5" onClick={(e) => e.stopPropagation()}>
        <Button variant="ghost" size="sm" className="h-6 px-1.5 text-[10px]" onClick={onTest} disabled={testing}>
          {testing ? <Loader2 className="h-3 w-3 animate-spin" /> : <Zap className="h-3 w-3" />}{t('monitor.mwInstance.test')}
        </Button>
        <Button variant="ghost" size="sm" className="h-6 px-1.5 text-[10px]" onClick={onEdit}>
          <Pencil className="h-3 w-3" />{t('common.edit')}
        </Button>
        <Button variant="ghost" size="sm" className="h-6 px-1.5 text-[10px] dg-text-red" onClick={onDelete}>
          <Trash2 className="h-3 w-3" />{t('common.delete')}
        </Button>
      </div>
    </button>
  );
}

function MetricPill({ label, value }: { label: string; value: string }) {
  return (
    <span className="inline-flex items-center gap-1 text-[10px] bg-[var(--dg-bg-primary)] rounded px-1.5 py-0.5">
      <span className="text-[var(--dg-text-muted)]">{label}</span>
      <span className="font-mono font-medium">{value}</span>
    </span>
  );
}