'use client';

import { useI18n } from '@/lib/i18n/context';

interface OrdersStatsProps {
  totalOrders: number;
  completedOrders: number;
  pendingOrders: number;
  totalRevenue: number;
}

export default function OrdersStats({
  totalOrders,
  completedOrders,
  pendingOrders,
  totalRevenue,
}: OrdersStatsProps) {
  const { t, locale } = useI18n();
  const numberLocale = locale === 'ar' ? 'ar-SA' : 'en-US';

  const safeNumber = (value: unknown, fallback = 0): number =>
    typeof value === 'number' && !isNaN(value) ? value : fallback;

  const stats = [
    {
      label: t('ordersStats.totalOrders'),
      value: safeNumber(totalOrders).toString(),
      icon: 'ri-file-list-3-line',
      color: 'blue',
      bgColor: 'bg-blue-50',
      textColor: 'text-blue-600',
      borderColor: 'border-blue-100',
    },
    {
      label: t('ordersStats.completedOrders'),
      value: safeNumber(completedOrders).toString(),
      icon: 'ri-checkbox-circle-line',
      color: 'green',
      bgColor: 'bg-green-50',
      textColor: 'text-green-600',
      borderColor: 'border-green-100',
    },
    {
      label: t('ordersStats.pendingOrders'),
      value: safeNumber(pendingOrders).toString(),
      icon: 'ri-time-line',
      color: 'amber',
      bgColor: 'bg-amber-50',
      textColor: 'text-amber-600',
      borderColor: 'border-amber-100',
    },
    {
      label: t('ordersStats.totalRevenue'),
      value: `${safeNumber(totalRevenue).toLocaleString(numberLocale)} ${t('common.sar')}`,
      icon: 'ri-money-dollar-circle-line',
      color: 'purple',
      bgColor: 'bg-purple-50',
      textColor: 'text-purple-600',
      borderColor: 'border-purple-100',
    },
  ];

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 mb-8">
      {stats.map((stat, index) => (
        <div
          key={index}
          className={`bg-white rounded-xl shadow-sm border ${stat.borderColor} p-5 flex items-center gap-4 hover:shadow-md transition-shadow`}
        >
          <div className={`w-12 h-12 flex items-center justify-center ${stat.bgColor} rounded-xl`}>
            <i className={`${stat.icon} text-2xl ${stat.textColor}`}></i>
          </div>
          <div>
            <p className="text-sm text-gray-500 mb-1">{stat.label}</p>
            <p className="text-xl font-bold text-gray-900">{stat.value}</p>
          </div>
        </div>
      ))}
    </div>
  );
}