import React from 'react';
import { 
  CreditCard, CheckCircle2, Wallet, Send, Check, Clock, 
  XCircle, Bell, TrendingUp, Calendar 
} from 'lucide-react';
import KpiCard from '@/components/KpiCard';

const SignatureKPIs = ({ stats }) => {
  if (!stats) return null;

  const { credits, signatures } = stats;

  const kpis = [
    {
      title: "Crédits Achetés",
      value: credits.total,
      icon: CreditCard,
      tooltip: { content: "Nombre total de crédits achetés depuis le début" }
    },
    {
      title: "Crédits Consommés",
      value: credits.consumed,
      icon: CheckCircle2,
      trend: 'up',
      change: `${Math.round((credits.consumed / credits.total) * 100)}%`,
      tooltip: { content: "Crédits utilisés pour les signatures validées" }
    },
    {
      title: "Crédits Restants",
      value: credits.remaining,
      icon: Wallet,
      trend: credits.remaining < 10 ? 'down' : 'neutral',
      tooltip: { content: "Crédits disponibles pour nouvelles signatures" }
    },
    {
      title: "Projection (Jours)",
      value: credits.projectionDays,
      icon: Calendar,
      trend: credits.projectionDays < 30 ? 'down' : 'neutral',
      tooltip: { content: "Estimation durée du stock au rythme actuel" }
    },
    {
      title: "Demandes Envoyées",
      value: signatures.total,
      icon: Send,
      tooltip: { content: "Nombre total de demandes de signature" }
    },
    {
      title: "Signées",
      value: signatures.signed,
      icon: Check,
      change: "+2 cette semaine",
      trend: "up",
      tooltip: { content: "Documents signés avec succès" }
    },
    {
      title: "En Attente",
      value: signatures.pending,
      icon: Clock,
      tooltip: { content: "En attente de signature par le client" }
    },
    {
      title: "Relançables",
      value: signatures.remindable,
      icon: Bell,
      tooltip: { content: "Signatures pouvant être relancées" }
    },
    {
      title: "Refusés / Expirés",
      value: signatures.refused,
      icon: XCircle,
      trend: "down",
      tooltip: { content: "Documents refusés ou délai dépassé" }
    },
    {
      title: "Taux Conversion",
      value: `${signatures.conversionRate}%`,
      icon: TrendingUp,
      trend: signatures.conversionRate > 70 ? "up" : "down",
      tooltip: { content: "Pourcentage de demandes aboutissant à une signature" }
    }
  ];

  return (
    <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-4 mb-6">
      {kpis.map((kpi, index) => (
        <KpiCard key={index} {...kpi} />
      ))}
    </div>
  );
};

export default SignatureKPIs;