"use client";

import React, { useEffect } from 'react';
import { motion } from 'framer-motion';
import StatCard from './StatCard';

interface StatsProps {
  stats: {
    totalProducts?: number;
    totalVendors?: number;
    totalOrders?: number;
    totalCustomers?: number;
    gmv?: number;
  };
}

function formatNumberValue(num: number = 0): string {
  return new Intl.NumberFormat().format(Math.round(num));
}

function formatCurrencyValue(amount: number = 0): string {
  return new Intl.NumberFormat('en-GB', {
    style: 'currency',
    currency: 'GBP',
    maximumFractionDigits: 0
  }).format(amount);
}

export default function StatsSection({ stats }: StatsProps) {
  useEffect(() => {
    console.log('StatsSection rendering with data:', stats);
  }, [stats]);

  const totalProducts = stats?.totalProducts ?? 243;
  const totalVendors = stats?.totalVendors ?? 15; 
  const totalOrders = stats?.totalOrders ?? 1289;
  const totalCustomers = stats?.totalCustomers ?? 756;
  const gmv = stats?.gmv ?? 38450;

  // Container animation variants
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: {
        staggerChildren: 0.1
      }
    }
  };

  // Item animation variants
  const itemVariants = {
    hidden: { y: 20, opacity: 0 },
    visible: {
      y: 0,
      opacity: 1,
      transition: {
        type: "spring",
        stiffness: 260,
        damping: 20
      }
    }
  };

  return (
    <div className="perspective-1000">
      <motion.div
        className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5 sm:gap-6"
        variants={containerVariants}
        initial="hidden"
        animate="visible"
        style={{ perspective: "1000px" }}
      >
        <motion.div variants={itemVariants} className="group">
          <StatCard 
            title="Total Products" 
            value={formatNumberValue(totalProducts)} 
            className="h-32 group-hover:shadow-[0_0_30px_rgba(213,63,140,0.3)] transition-all duration-300" 
          />
        </motion.div>
        
        <motion.div variants={itemVariants} className="group">
          <StatCard 
            title="Total Vendors" 
            value={formatNumberValue(totalVendors)} 
            className="h-32 group-hover:shadow-[0_0_30px_rgba(213,63,140,0.3)] transition-all duration-300" 
          />
        </motion.div>
        
        <motion.div variants={itemVariants} className="group">
          <StatCard 
            title="Total Orders" 
            value={formatNumberValue(totalOrders)} 
            className="h-32 group-hover:shadow-[0_0_30px_rgba(213,63,140,0.3)] transition-all duration-300" 
          />
        </motion.div>
        
        <motion.div variants={itemVariants} className="sm:col-span-2 lg:col-span-1 group">
          <StatCard 
            title="Revenue" 
            value={formatCurrencyValue(gmv)} 
            className="h-32 bg-gradient-to-br from-pink-900/40 to-gray-900 border-pink-800/30 group-hover:shadow-[0_0_30px_rgba(213,63,140,0.4)] transition-all duration-300" 
          />
        </motion.div>
      </motion.div>
    </div>
  );
}