import { ReactNode } from 'react';
import { useCountUp } from '../../lib/motion';
import Sparkline from './Sparkline';
import './StatTile.css';

export type Status = 'good' | 'warning' | 'serious' | 'critical';

/* Status is carried by an icon plus a label, never by colour alone — the
   light-surface status steps sit below 3:1 by design. */
const STATUS_ICON: Record<Status, string> = {
  good: '●',
  warning: '▲',
  serious: '▲',
  critical: '■',
};

interface StatTileProps {
  label: string;
  value: number | string | null | undefined;
  unit?: string;
  /** Secondary line: a goal, a range, a comparison. */
  detail?: ReactNode;
  status?: Status;
  statusLabel?: string;
  /** 0–1; draws a goal meter under the value. */
  progress?: number | null;
  /** Recent history for an inline trend. */
  trend?: Array<number | null | undefined>;
  decimals?: number;
}

function StatTile({
  label, value, unit, detail, status, statusLabel, progress, trend, decimals = 0,
}: StatTileProps) {
  const numeric = typeof value === 'number' ? value : null;
  const animated = useCountUp(numeric);

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

  return (
    <div className="tile">
      <div className="tile-head">
        <span className="tile-label">{label}</span>
        {trend && trend.some((v) => v != null) && (
          <Sparkline values={trend} label={`${label}近期走势`} />
        )}
      </div>

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

      {progress != null && (
        <div
          className="tile-meter"
          role="meter"
          aria-valuenow={Math.round(progress * 100)}
          aria-valuemin={0}
          aria-valuemax={100}
          aria-label={`${label}完成度`}
        >
          <div
            className="tile-meter-fill"
            style={{ width: `${Math.min(100, Math.max(0, progress * 100))}%` }}
          />
        </div>
      )}

      {(detail || status) && (
        <div className="tile-detail">
          {status && (
            <span className={`tile-status status-${status}`}>
              <span aria-hidden="true">{STATUS_ICON[status]}</span> {statusLabel}
            </span>
          )}
          {detail}
        </div>
      )}
    </div>
  );
}

export default StatTile;