// src/components/dashboard/StatsCards.tsx
'use client';

import { useEffect, useState } from 'react';
import { ShoppingCart, DollarSign, Link2, Clock } from 'lucide-react';

interface StatsCardsProps {
  stats: {
    total_orders: number;
    total_spent: number;
    live_links: number;
    pending_orders: number;
  };
}

export default function StatsCards({ stats }: StatsCardsProps) {
  const [animatedValues, setAnimatedValues] = useState({
    total_orders: 0,
    total_spent: 0,
    live_links: 0,
    pending_orders: 0,
  });
  
  useEffect(() => {
    const duration = 1000;
    const steps = 60;
    const interval = duration / steps;
    
    const targets = {
      total_orders: stats.total_orders || 0,
      total_spent: stats.total_spent || 0,
      live_links: stats.live_links || 0,
      pending_orders: stats.pending_orders || 0,
    };
    
    let currentStep = 0;
    
    const timer = setInterval(() => {
      currentStep++;
      const progress = currentStep / steps;
      
      setAnimatedValues({
        total_orders: Math.floor(targets.total_orders * progress),
        total_spent: targets.total_spent * progress,
        live_links: Math.floor(targets.live_links * progress),
        pending_orders: Math.floor(targets.pending_orders * progress),
      });
      
      if (currentStep >= steps) {
        clearInterval(timer);
      }
    }, interval);
    
    return () => clearInterval(timer);
  }, [stats]);
  
  const cards = [
    {
      title: 'Total Orders',
      value: animatedValues.total_orders,
      icon: ShoppingCart,
      color: 'blue',
      change: '+12%',
    },
    {
      title: 'Total Spent',
      value: `$${animatedValues.total_spent.toLocaleString()}`,
      icon: DollarSign,
      color: 'green',
      change: '+8%',
    },
    {
      title: 'Live Links',
      value: animatedValues.live_links,
      icon: Link2,
      color: 'purple',
      change: '+5',
    },
    {
      title: 'Pending Orders',
      value: animatedValues.pending_orders,
      icon: Clock,
      color: 'orange',
      change: '-2',
    },
  ];
  
  const colorClasses = {
    blue: 'bg-blue-50 text-blue-600',
    green: 'bg-green-50 text-green-600',
    purple: 'bg-purple-50 text-purple-600',
    orange: 'bg-orange-50 text-orange-600',
  };
  
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
      {cards.map((card) => (
        <div
          key={card.title}
          className="bg-white rounded-2xl p-6 border border-gray-200 hover:shadow-lg transition-all hover:-translate-y-1"
        >
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm text-gray-600">{card.title}</p>
              <p className="text-2xl font-bold text-gray-900 mt-1">{card.value}</p>
              <p className={`text-sm mt-2 ${
                card.change.startsWith('+') ? 'text-green-600' : 'text-red-600'
              }`}>
                {card.change} from last month
              </p>
            </div>
            <div className={`p-3 rounded-xl ${colorClasses[card.color as keyof typeof colorClasses]}`}>
              <card.icon className="h-6 w-6" />
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}