import { useTranslation } from 'react-i18next';
import { Clock, Banknote, Receipt, Loader2 } from 'lucide-react';

interface ReportStatsProps {
  totalAmount: number;
  totalCount: number;
  byStatus?: Record<string, number>;
  isLoading?: boolean;
}

export default function ReportStats({
  totalAmount,
  totalCount,
  byStatus,
  isLoading,
}: ReportStatsProps) {
  const { t } = useTranslation();

  const deposited = byStatus?.deposited ?? 0;
  const pending = byStatus?.pending ?? 0;
  const total = totalCount || 1;
  const depositedPct = Math.round((deposited / total) * 100);

  const formattedAmount = totalAmount.toLocaleString('fr-CA', {
    style: 'currency',
    currency: 'CAD',
    minimumFractionDigits: 2,
  });

  return (
    <div className="flex flex-col gap-6 lg:col-span-1">
      {/* Volume Total */}
      <div className="bg-card rounded-xl border border-border p-6 shadow-[0_10px_15px_-3px_rgba(0,0,0,0.05),0_4px_6px_-2px_rgba(0,0,0,0.025)] flex flex-col justify-between h-full relative overflow-hidden group hover:shadow-lg transition-shadow duration-300">
        <div className="absolute -right-6 -top-6 p-4 bg-gradient-to-br from-blue-50 to-indigo-50 rounded-full size-32 flex items-center justify-center opacity-50 group-hover:scale-110 transition-transform">
          <Banknote className="h-12 w-12 text-primary/20" />
        </div>
        <div className="relative z-10">
          <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
            {t('reports.stats.totalVolume')}
          </p>
          {isLoading ? (
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
          ) : (
            <h3 className="text-4xl font-extrabold text-foreground tracking-tight">
              {formattedAmount}
            </h3>
          )}
          <div className="flex items-center mt-3 text-muted-foreground text-xs font-medium bg-slate-50 w-fit px-2 py-1 rounded-md border border-slate-100">
            <span>
              {t('status.deposited', 'Déposé')}: {deposited} | {t('status.pending', 'En attente')}: {pending}
            </span>
          </div>
        </div>
        <div className="mt-8 relative z-10">
          <div className="flex justify-between text-xs font-medium text-muted-foreground mb-1">
            <span>{t('status.deposited', 'Déposé')}</span>
            <span>{depositedPct}%</span>
          </div>
          <div className="w-full bg-primary/20 rounded-full h-2 overflow-hidden">
            <div
              className="bg-primary h-full rounded-full transition-all duration-500"
              style={{ width: `${depositedPct}%` }}
            />
          </div>
        </div>
      </div>

      {/* Transactions Traitées */}
      <div className="bg-card rounded-xl border border-border p-6 shadow-[0_10px_15px_-3px_rgba(0,0,0,0.05),0_4px_6px_-2px_rgba(0,0,0,0.025)] flex flex-col justify-between h-full relative overflow-hidden group hover:shadow-lg transition-shadow duration-300">
        <div className="absolute -right-6 -top-6 p-4 bg-gradient-to-br from-purple-50 to-fuchsia-50 rounded-full size-32 flex items-center justify-center opacity-50 group-hover:scale-110 transition-transform">
          <Receipt className="h-12 w-12 text-purple-500/20" />
        </div>
        <div className="relative z-10">
          <p className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-2">
            {t('reports.stats.transactionsProcessed')}
          </p>
          {isLoading ? (
            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
          ) : (
            <h3 className="text-4xl font-extrabold text-foreground tracking-tight">
              {totalCount.toLocaleString('fr-CA')}
            </h3>
          )}
          <div className="flex items-center mt-3 text-muted-foreground text-xs font-medium bg-slate-50 w-fit px-2 py-1 rounded-md border border-slate-100">
            <Clock className="h-3.5 w-3.5 mr-1" />
            <span>{t('reports.stats.lastUpdate')}: {new Date().toLocaleTimeString('fr-CA', { hour: '2-digit', minute: '2-digit' })}</span>
          </div>
        </div>
        <div className="mt-6 flex gap-3 relative z-10 text-xs text-muted-foreground">
          {byStatus && Object.entries(byStatus).map(([key, val]) => (
            <span key={key} className="bg-slate-50 px-2 py-1 rounded border border-slate-100 font-medium">
              {t(`status.${key}`, key)}: {val}
            </span>
          ))}
        </div>
      </div>
    </div>
  );
}