import React from 'react';
import {
  CircleHelp,
  CircleDollarSign,
  Coins,
  MinusCircle,
  TrendingUp,
  Wallet,
  type LucideIcon,
} from 'lucide-react';
import type { LeaseDetailKpiSummary } from '../types';
import { formatMoney } from '../utils/detail';

type KpiTone =
  | 'neutral'
  | 'receivable'
  | 'received'
  | 'outstanding'
  | 'deduction'
  | 'profit';

const CARDS: Array<{
  key: keyof LeaseDetailKpiSummary;
  title: string;
  desc: string;
  tone: KpiTone;
  icon: LucideIcon;
}> = [
  {
    key: 'receivableTotal',
    title: '应收总计',
    desc: '当前筛选范围内应收合计之和',
    tone: 'receivable',
    icon: CircleDollarSign,
  },
  {
    key: 'deposit',
    title: '押金总计',
    desc: '当前筛选范围内押金合计（数值型）',
    tone: 'neutral',
    icon: Coins,
  },
  {
    key: 'receivedAmount',
    title: '实收总计',
    desc: '当前筛选范围内实收金额之和',
    tone: 'received',
    icon: Wallet,
  },
  {
    key: 'mileageDeduction',
    title: '里程减免总计',
    desc: '当前筛选范围内里程减免金额合计',
    tone: 'deduction',
    icon: MinusCircle,
  },
  {
    key: 'otherDeduction',
    title: '其他减免总计',
    desc: '当前筛选范围内其他减免金额合计',
    tone: 'deduction',
    icon: MinusCircle,
  },
  {
    key: 'outstanding',
    title: '未收总计',
    desc: '当前筛选范围内未收金额合计',
    tone: 'outstanding',
    icon: CircleDollarSign,
  },
  {
    key: 'profitLoss',
    title: '盈亏总计',
    desc: '当前筛选范围内盈亏合计',
    tone: 'profit',
    icon: TrendingUp,
  },
];

interface DetailKpiRowProps {
  summary: LeaseDetailKpiSummary;
}

function valueClassName(key: keyof LeaseDetailKpiSummary, summary: LeaseDetailKpiSummary): string {
  if (key === 'profitLoss') {
    if (summary.profitLoss > 0) return 'lbd-kpi-val--profit';
    if (summary.profitLoss < 0) return 'lbd-kpi-val--loss';
  }
  if (key === 'outstanding' && summary.outstanding > 0) return 'lbd-kpi-val--warn';
  return '';
}

export function DetailKpiRow({ summary }: DetailKpiRowProps) {
  return (
    <div className="lbd-kpi-row" data-annotation-id="lbd-kpi" aria-label="关键指标汇总">
      {CARDS.map((card) => {
        const raw = summary[card.key];
        const value = formatMoney(raw);
        const Icon = card.icon;
        const isOutstandingWarn = card.key === 'outstanding' && summary.outstanding > 0;

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