import { ReactNode } from 'react';
import { classify, formatTarget } from '../../lib/ranges';
import { useCountUp } from '../../lib/motion';
import BandBar from './BandBar';
import Sparkline from './Sparkline';
import './MetricCard.css';

/* Status is icon + word + colour, never colour alone — the light-surface
   status steps sit below 3:1 by design. */
const TONE_ICON: Record<string, string> = {
  good: '✓',
  warning: '!',
  serious: '↓',
  critical: '!',
};

interface MetricCardProps {
  /** Key into RANGES; when absent the card shows no verdict. */
  metric?: string;
  label: string;
  value: number | null | undefined;
  unit?: string;
  decimals?: number;
  /** Recent history, drawn as an inline sparkline when supplied. */
  trend?: Array<number | null | undefined>;
  /** Extra line under the value. */
  detail?: ReactNode;
  onClick?: () => void;
}

function MetricCard({
  metric, label, value, unit, decimals = 0, trend, detail, onClick,
}: MetricCardProps) {
  const numeric = typeof value === 'number' ? value : null;
  const animated = useCountUp(numeric);
  const verdict = metric ? classify(metric, numeric) : null;

  const display =
    numeric == null
      ? '—'
      : (animated ?? numeric).toLocaleString(undefined, {
          minimumFractionDigits: 0,
          maximumFractionDigits: decimals,
        });

  const Tag = onClick ? 'button' : 'div';

  return (
    <Tag
      className={`mcard ${onClick ? 'clickable' : ''}`}
      onClick={onClick}
      type={onClick ? 'button' : undefined}
    >
      <div className="mcard-head">
        <span className="mcard-label">{label}</span>
        {trend && trend.some((v) => v != null) ? (
          <Sparkline values={trend} label={`${label}近期走势`} width={54} height={18} />
        ) : (
          onClick && <span className="mcard-chevron" aria-hidden="true">›</span>
        )}
      </div>

      <div className="mcard-value">
        {display}
        {unit && numeric != null && <span className="mcard-unit">{unit}</span>}
      </div>

      {verdict && numeric != null ? (
        <>
          <div className="mcard-verdict">
            <span className={`mcard-tone tone-${verdict.band.tone}`}>
              <span aria-hidden="true">{TONE_ICON[verdict.band.tone]}</span>
              {verdict.band.label}
            </span>
            <span className="mcard-target">参考 {formatTarget(verdict.range)}</span>
          </div>
          <BandBar range={verdict.range} value={numeric} />
        </>
      ) : (
        detail && <div className="mcard-detail">{detail}</div>
      )}
    </Tag>
  );
}

export default MetricCard;