'use client';

import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';

type ColorKey =
  | 'blue' | 'indigo' | 'green' | 'emerald' | 'orange'
  | 'amber' | 'red' | 'rose' | 'purple' | 'violet' | 'teal' | 'cyan' | 'slate';

interface StatsCardProps {
  title: string;
  value: number;
  icon: string;
  color: ColorKey;
  change?: number;
  suffix?: string;
  prefix?: string;
  delay?: number;
  onClick?: () => void;
}

// Command-center design: soft-tinted circular icon chip on the right
const COLORS: Record<ColorKey, string> = {
  blue:    'bg-blue-500/10 text-blue-500',
  indigo:  'bg-indigo-500/10 text-indigo-500',
  green:   'bg-green-500/10 text-green-600',
  emerald: 'bg-emerald-500/10 text-emerald-600',
  orange:  'bg-orange-500/10 text-orange-500',
  amber:   'bg-amber-500/10 text-amber-500',
  red:     'bg-red-500/10 text-red-500',
  rose:    'bg-rose-500/10 text-rose-500',
  purple:  'bg-purple-500/10 text-purple-500',
  violet:  'bg-violet-500/10 text-violet-500',
  teal:    'bg-teal-500/10 text-teal-600',
  cyan:    'bg-cyan-500/10 text-cyan-600',
  slate:   'bg-slate-500/10 text-slate-500',
};

export default function StatsCard({
  title, value, icon, color, change, suffix = '', prefix = '', delay = 0, onClick,
}: StatsCardProps) {
  const [count, setCount] = useState(0);
  const iconTint = COLORS[color] ?? COLORS.indigo;

  useEffect(() => {
    let startTime: number;
    const duration = 1000;
    const timer = setTimeout(() => {
      const step = (ts: number) => {
        if (!startTime) startTime = ts;
        const progress = Math.min((ts - startTime) / duration, 1);
        const eased = 1 - (1 - progress) ** 3;
        setCount(Math.round(eased * value));
        if (progress < 1) requestAnimationFrame(step);
      };
      requestAnimationFrame(step);
    }, delay * 80);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return (
    <motion.div
      initial={{ opacity: 0, y: 16 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.35, delay: delay * 0.07 }}
      onClick={onClick}
      className={`h-full bg-white dark:bg-slate-900 border border-vz-border dark:border-slate-800 rounded-none p-3.5 xl:p-4 min-[1500px]:p-5 shadow-sm flex items-start justify-between gap-2 xl:gap-3 transition duration-200 ${
        onClick ? 'cursor-pointer hover:translate-y-[-2px] hover:border-[#405189]' : 'hover:shadow-md'
      }`}
    >
      <div className="min-w-0 flex-1">
        <p className="text-[9.5px] xl:text-[10.5px] min-[1500px]:text-[11px] uppercase tracking-wider text-vz-muted font-bold leading-snug whitespace-normal break-normal hyphens-none">
          {title.split(' ').map((word, index, arr) => (
            <span key={index}>
              <span className="inline-block whitespace-nowrap">{word}</span>
              {index < arr.length - 1 ? ' ' : ''}
            </span>
          ))}
        </p>
        <p className="text-2xl font-bold text-[#495057] dark:text-white mt-1.5">
          {prefix}{count.toLocaleString()}{suffix}
        </p>
        {change !== undefined && (
          <span
            className={`inline-flex items-center gap-1 mt-1 text-[10px] font-bold px-1.5 py-0.5 rounded-full ${
              change >= 0
                ? 'bg-emerald-50 text-emerald-700 dark:bg-emerald-950/40 dark:text-emerald-300'
                : 'bg-rose-50 text-rose-700 dark:bg-rose-950/40 dark:text-rose-300'
            }`}
          >
            <i className={`fa-solid ${change >= 0 ? 'fa-arrow-up' : 'fa-arrow-down'} text-[8px]`} />
            {Math.abs(change)}%
          </span>
        )}
      </div>
      <span className={`w-9 h-9 xl:w-10 h-10 min-[1500px]:w-11 h-11 rounded-full flex items-center justify-center text-xs xl:text-sm min-[1500px]:text-base shrink-0 mt-0.5 ${iconTint}`}>
        <i className={icon} aria-hidden="true" />
      </span>
    </motion.div>
  );
}