import React from 'react';
import {
  CircleHelp,
  CircleDollarSign,
  ClipboardList,
  CreditCard,
  Fuel,
  TrendingUp,
  Wallet,
  type LucideIcon,
} from 'lucide-react';
import type { SelfOperatedKpiSummary } from '../types';
import { formatMoney, profitLossClassName } from '../utils/ledger';

type KpiTone =
  | 'neutral'
  | 'income'
  | 'cost'
  | 'deduction'
  | 'profit';

const CARDS: Array<{
  key: keyof SelfOperatedKpiSummary;
  title: string;
  desc: string;
  tone: KpiTone;
  icon: LucideIcon;
  money?: boolean;
}> = [
  {
    key: 'count',
    title: '明细条数',
    desc: '当前筛选条件下的全部物流业务明细记录条数',
    tone: 'neutral',
    icon: ClipboardList,
  },
  {
    key: 'amount',
    title: '金额合计',
    desc: '当前筛选范围内每条明细「金额」字段逐项相加',
    tone: 'income',
    icon: CircleDollarSign,
    money: true,
  },
  {
    key: 'totalCost',
    title: '总成本合计',
    desc: '当前筛选范围内每条明细「总成本」字段逐项相加',
    tone: 'cost',
    icon: Wallet,
    money: true,
  },
  {
    key: 'hydrogenFee',
    title: '氢费总计',
    desc: '当前筛选范围内每条明细「氢费」字段逐项相加',
    tone: 'deduction',
    icon: Fuel,
    money: true,
  },
  {
    key: 'etcFee',
    title: 'ETC费用总计',
    desc: '当前筛选范围内每条明细「ETC费用」字段逐项相加',
    tone: 'deduction',
    icon: CreditCard,
    money: true,
  },
  {
    key: 'profitLoss',
    title: '盈亏合计',
    desc: '当前筛选范围内每条明细「盈亏」字段逐项相加',
    tone: 'profit',
    icon: TrendingUp,
    money: true,
  },
];

interface LedgerKpiRowProps {
  summary: SelfOperatedKpiSummary;
}

function valueClassName(key: keyof SelfOperatedKpiSummary, summary: SelfOperatedKpiSummary): string {
  if (key === 'profitLoss') {
    return profitLossClassName(summary.profitLoss);
  }
  return '';
}

export function LedgerKpiRow({ summary }: LedgerKpiRowProps) {
  return (
    <div className="sob-kpi-row" data-annotation-id="sob-kpi" aria-label="关键指标汇总">
      {CARDS.map((card) => {
        const raw = summary[card.key];
        const value = card.money ? formatMoney(raw) : String(raw);
        const Icon = card.icon;

        return (
          <article
            key={card.key}
            className={['sob-kpi-card', `sob-kpi-card--${card.tone}`].join(' ')}
          >
            <div className="sob-kpi-card-accent" aria-hidden />
            <div className="sob-kpi-card-body">
              <div className="sob-kpi-card-head">
                <span className="sob-kpi-icon" aria-hidden>
                  <Icon size={15} strokeWidth={2.25} />
                </span>
                <span className="sob-kpi-label">{card.title}</span>
                <span className="sob-kpi-tip" tabIndex={0} aria-label={`${card.title}说明`}>
                  <CircleHelp size={12} aria-hidden />
                  <span className="sob-kpi-tooltip" role="tooltip">{card.desc}</span>
                </span>
              </div>
              <p className={['sob-kpi-val tabular-nums', valueClassName(card.key, summary)].filter(Boolean).join(' ')}>
                {value}
              </p>
            </div>
          </article>
        );
      })}
    </div>
  );
}
