import React from 'react';
import {
  CircleHelp,
  Truck,
  KeyRound,
  Store,
  Warehouse,
  BusFront,
  CircleOff,
  FileWarning,
  ShieldAlert,
} from 'lucide-react';
import type { KpiKey } from '../types';
import { KPI_CARDS } from '../utils/vehicle';

const ICONS: Record<KpiKey, React.ReactNode> = {
  all: <Truck size={18} aria-hidden />,
  lease: <KeyRound size={18} aria-hidden />,
  self: <Store size={18} aria-hidden />,
  stock: <Warehouse size={18} aria-hidden />,
  nonOperating: <BusFront size={18} aria-hidden />,
  exit: <CircleOff size={18} aria-hidden />,
  licenseAbnormal: <FileWarning size={18} aria-hidden />,
  insuranceAbnormal: <ShieldAlert size={18} aria-hidden />,
};

interface KpiCardsProps {
  counts: Record<KpiKey, number>;
  active: KpiKey;
  onChange: (key: KpiKey) => 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' : ''}`}
          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>
  );
}
