import React from 'react';
import { CircleHelp } from 'lucide-react';
import type { SelfOperatedKpiSummary } from '../types';
import { formatMoney } from '../utils/ledger';

const CARDS: Array<{ key: keyof SelfOperatedKpiSummary; title: string; desc: string; money?: boolean }> = [
  { key: 'count', title: '台账条数', desc: '当前筛选条件下的全部台账记录条数' },
  { key: 'amount', title: '金额合计', desc: '每条台账「金额」字段逐项相加', money: true },
  { key: 'totalCost', title: '总成本合计', desc: '每条台账「总成本」字段逐项相加', money: true },
  { key: 'hydrogenFee', title: '氢费总计', desc: '每条台账「氢费」字段逐项相加', money: true },
  { key: 'etcFee', title: 'ETC费用总计', desc: '每条台账「ETC费用」字段逐项相加', money: true },
  { key: 'profitLoss', title: '盈亏合计', desc: '每条台账「盈亏」字段逐项相加', money: true },
];

interface LedgerKpiRowProps {
  summary: SelfOperatedKpiSummary;
}

export function LedgerKpiRow({ summary }: LedgerKpiRowProps) {
  return (
    <div className="ldb-kpi-row" data-annotation-id="sob-kpi">
      {CARDS.map((card) => {
        const raw = summary[card.key];
        const value = card.money ? formatMoney(raw) : String(raw);
        const profitClass = card.key === 'profitLoss'
          ? (summary.profitLoss >= 0 ? 'ldb-kpi-val--profit' : 'ldb-kpi-val--loss')
          : '';
        return (
          <div key={card.key} className="ldb-kpi-card">
            <span className="ldb-kpi-tip" tabIndex={0} aria-label={`${card.title}说明`}>
              <CircleHelp size={14} aria-hidden />
              <span className="ldb-kpi-tooltip" role="tooltip">{card.desc}</span>
            </span>
            <span className="ldb-kpi-label">{card.title}</span>
            <span className={`ldb-kpi-val tabular-nums ${profitClass}`}>{value}</span>
          </div>
        );
      })}
    </div>
  );
}
