import React from 'react';
import {
  Building2,
  CircleHelp,
  Scale,
  Tags,
  TrendingDown,
  Briefcase,
} from 'lucide-react';
import type { CustomerRiskKpiKey } from '../types';
import { RISK_KPI_CARDS } from '../utils/riskKpi';

const ICONS: Record<CustomerRiskKpiKey, React.ReactNode> = {
  all: <Building2 size={18} aria-hidden />,
  withRisk: <Tags size={18} aria-hidden />,
  finance: <TrendingDown size={18} aria-hidden />,
  legal: <Scale size={18} aria-hidden />,
  business: <Briefcase size={18} aria-hidden />,
};

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

export function RiskKpiCards({ counts, active, onChange }: RiskKpiCardsProps) {
  return (
    <div className="vm-kpi-row cm-risk-kpi-row" data-annotation-id="cm-risk-kpi-cards">
      {RISK_KPI_CARDS.map((card) => (
        <button
          key={card.key}
          type="button"
          className={`vm-kpi-card ${active === card.key ? 'active' : ''}`}
          data-annotation-id={`cm-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>
  );
}
