import React from 'react';
import {
  CircleHelp,
  Building2,
  Handshake,
  MessageSquare,
  Ban,
  Clock,
  Package,
  Shield,
  FileWarning,
} from 'lucide-react';
import type { SupplierKpiKey } from '../types';
import { KPI_CARDS } from '../utils/constants';

const ICONS: Record<SupplierKpiKey, React.ReactNode> = {
  all: <Building2 size={18} aria-hidden />,
  cooperated: <Handshake size={18} aria-hidden />,
  negotiating: <MessageSquare size={18} aria-hidden />,
  terminated: <Ban size={18} aria-hidden />,
  expired: <Clock size={18} aria-hidden />,
  parts: <Package size={18} aria-hidden />,
  insurance: <Shield size={18} aria-hidden />,
  licenseAbnormal: <FileWarning size={18} aria-hidden />,
};

interface KpiCardsProps {
  counts: Record<SupplierKpiKey, number>;
  active: SupplierKpiKey;
  onChange: (key: SupplierKpiKey) => void;
}

export function KpiCards({ counts, active, onChange }: KpiCardsProps) {
  return (
    <div className="vm-kpi-row">
      {KPI_CARDS.map((card) => (
        <button
          key={card.key}
          type="button"
          className={`vm-kpi-card ${active === card.key ? 'active' : ''}`}
          data-annotation-id={`sm-kpi-${card.key}`}
          onClick={() => onChange(card.key)}
          aria-pressed={active === card.key}
        >
          <span
            className="vm-kpi-tip"
            tabIndex={0}
            role="note"
            aria-label={`${card.title}说明`}
            onClick={(event) => event.stopPropagation()}
            onMouseDown={(event) => event.stopPropagation()}
          >
            <CircleHelp size={14} aria-hidden />
            <span className="vm-kpi-tooltip" role="tooltip">{card.desc}</span>
          </span>
          <span className="vm-kpi-icon" aria-hidden>{ICONS[card.key]}</span>
          <span className="vm-kpi-main">
            <span className="vm-kpi-eyebrow">{card.title}</span>
            <span className="vm-kpi-val">{counts[card.key]}</span>
          </span>
        </button>
      ))}
    </div>
  );
}
