import { TrendingUp, TrendingDown } from 'lucide-react';
import { Card } from '@/components/ui/Card';
import { useCountUp } from '@/hooks/useCountUp';
import { cn } from '@/lib/cn';
import { formatNumber } from '@/lib/constants';

interface MMRCardProps {
  mmr: number;
  delta?: number;
  sparkline?: number[];
}

export function MMRCard({ mmr, delta, sparkline }: MMRCardProps) {
  const animatedMmr = useCountUp(mmr);

  return (
    <Card>
      <p className="text-xs text-text-muted uppercase tracking-wider font-medium mb-1">MMR</p>
      <p className="text-3xl font-mono font-bold text-text-primary">
        {formatNumber(animatedMmr)}
      </p>
      {delta !== undefined && delta !== 0 && (
        <div className={cn(
          'flex items-center gap-1 mt-1',
          delta > 0 ? 'text-green-400' : 'text-red-400'
        )}>
          {delta > 0 ? <TrendingUp className="w-3.5 h-3.5" /> : <TrendingDown className="w-3.5 h-3.5" />}
          <span className="text-sm font-medium">{delta > 0 ? '+' : ''}{delta} today</span>
        </div>
      )}

      {sparkline && sparkline.length > 1 && (
        <div className="mt-3">
          <svg viewBox="0 0 200 40" className="w-full h-8">
            <defs>
              <linearGradient id="sparkline-grad" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="rgba(245,158,11,0.3)" />
                <stop offset="100%" stopColor="rgba(245,158,11,0)" />
              </linearGradient>
            </defs>
            {(() => {
              const min = Math.min(...sparkline);
              const max = Math.max(...sparkline);
              const range = max - min || 1;
              const points = sparkline.map((v, i) => ({
                x: (i / (sparkline.length - 1)) * 200,
                y: 40 - ((v - min) / range) * 36 - 2,
              }));
              const line = points.map((p) => `${p.x},${p.y}`).join(' ');
              const area = `0,40 ${line} 200,40`;
              return (
                <>
                  <polygon points={area} fill="url(#sparkline-grad)" />
                  <polyline
                    points={line}
                    fill="none"
                    stroke="#F59E0B"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                  />
                </>
              );
            })()}
          </svg>
        </div>
      )}
    </Card>
  );
}
