import React from 'react';
import { ArrowUpRight, ArrowDownRight, Minus } from 'lucide-react';

interface KpiTileProps {
  label: string;
  value: string | number;
  unit?: string;
  trend?: 'up' | 'down' | 'flat';
  trendValue?: string;
  sparkline?: number[];
  accent?: 'primary' | 'emerald' | 'amber' | 'rose' | 'blue';
  icon?: React.ReactNode;
}

// NFR6 fix (2026-07-29): accent text was -600 on -500/10 bg, which
// only reaches ~3.5:1 contrast — below WCAG AA's 4.5:1. Bumped each
// pair to -700/-500 for the small uppercase "trend" pill text so
// the contrast clears 4.5:1 on the light background.
const ACCENT_BG: Record<NonNullable<KpiTileProps['accent']>, string> = {
  primary: 'bg-primary/10 text-primary-dark',
  emerald: 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-300',
  amber: 'bg-amber-500/10 text-amber-700 dark:text-amber-300',
  rose: 'bg-rose-500/10 text-rose-700 dark:text-rose-300',
  blue: 'bg-blue-500/10 text-blue-700 dark:text-blue-300',
};

const TREND_COLOR: Record<NonNullable<KpiTileProps['trend']>, string> = {
  up: 'text-emerald-700 dark:text-emerald-300',
  down: 'text-rose-700 dark:text-rose-300',
  flat: 'text-text-muted',
};

/**
 * Tiny sparkline rendered as an inline SVG polyline. No external chart
 * library — keeps the bundle small for the 5-tile header row.
 */
function Sparkline({ points, color }: { points: number[]; color: string }) {
  if (!points || points.length < 2) return null;
  const width = 96;
  const height = 28;
  const min = Math.min(...points);
  const max = Math.max(...points);
  const range = max - min || 1;
  const step = width / (points.length - 1);
  const coords = points.map((v, i) => {
    const x = i * step;
    const y = height - ((v - min) / range) * height;
    return `${x.toFixed(1)},${y.toFixed(1)}`;
  });
  return (
    <svg width={width} height={height} className="overflow-visible">
      <polyline
        points={coords.join(' ')}
        fill="none"
        stroke={color}
        strokeWidth={1.75}
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}

export function KpiTile({
  label,
  value,
  unit,
  trend,
  trendValue,
  sparkline,
  accent = 'primary',
  icon,
}: KpiTileProps) {
  const sparkColor =
    accent === 'emerald' ? '#10b981' :
    accent === 'amber' ? '#f59e0b' :
    accent === 'rose' ? '#f43f5e' :
    accent === 'blue' ? '#3b82f6' :
    '#6366f1';

  const TrendIcon = trend === 'up' ? ArrowUpRight : trend === 'down' ? ArrowDownRight : Minus;

  return (
    <div className="bg-card border border-border rounded-[1.5rem] p-5 shadow-sm hover:shadow-md transition-shadow">
      <div className="flex items-start justify-between mb-3">
        <div className={`p-2 rounded-xl ${ACCENT_BG[accent]}`}>{icon}</div>
        {trend && (
          <div className={`flex items-center gap-1 text-[0.65rem] font-black uppercase tracking-wider ${TREND_COLOR[trend]}`}>
            <TrendIcon size={12} />
            {trendValue && <span>{trendValue}</span>}
          </div>
        )}
      </div>
      <div className="space-y-1">
        <p className="text-[0.65rem] font-black uppercase tracking-[2px] text-text-muted">{label}</p>
        <p className="text-2xl font-black text-text tracking-tight">
          {value}
          {unit && <span className="text-sm font-bold text-text-muted ml-1">{unit}</span>}
        </p>
      </div>
      {sparkline && sparkline.length >= 2 && (
        <div className="mt-3 -mb-1">
          <Sparkline points={sparkline} color={sparkColor} />
        </div>
      )}
    </div>
  );
}

export default KpiTile;