"use client";

import { useMetrics } from "@/hooks/useMetrics";
import { MetricCard } from "@/components/ui/metric-card";
import { Users, UserCheck, Shield, Coins, MessageSquare, FileText, Euro } from "lucide-react";
import { convertCreditsToEuros } from "@/lib/utils/currency";

export function OverviewMetrics() {
  const { metrics, loading, error } = useMetrics();

  if (loading) {
    return (
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        {Array.from({ length: 6 }).map((_, i) => (
          <div key={i} className="h-32 bg-muted animate-pulse rounded-lg" />
        ))}
      </div>
    );
  }

  if (error || !metrics) {
    return (
      <div className="text-center py-8 text-muted-foreground">
        Erreur lors du chargement des métriques
      </div>
    );
  }

  // Conversion des crédits en euros
  const creditsInEuros = convertCreditsToEuros(metrics.totalCredits);

  return (
    <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      <MetricCard
        title="Utilisateurs totaux"
        value={metrics.totalUsers}
        icon={Users}
      />
      <MetricCard
        title="Utilisateurs actifs"
        value={metrics.activeUsers}
        icon={UserCheck}
      />
      <MetricCard
        title="Administrateurs"
        value={metrics.totalAdmins}
        icon={Shield}
      />
      <div className="bg-white rounded-lg border p-6">
        <div className="flex items-center justify-between mb-2">
          <h3 className="text-sm font-medium text-gray-600">Crédits totaux</h3>
          <div className="flex items-center gap-1">
            <Coins className="h-4 w-4 text-gray-400" />
            <Euro className="h-4 w-4 text-green-600" />
          </div>
        </div>
        <div className="text-2xl font-bold mb-1">
          {metrics.totalCredits.toLocaleString()}
        </div>
        <div className="text-sm text-gray-500 mb-2">crédits disponibles</div>
        <div className="p-2 bg-green-50 rounded border border-green-200">
          <div className="text-sm font-semibold text-green-800">
            {creditsInEuros.formatted.eur}
          </div>
          <div className="text-xs text-green-600">
            {creditsInEuros.formatted.usd} USD
          </div>
        </div>
      </div>
      <MetricCard
        title="Conversations actives"
        value={metrics.activeConversations}
        icon={MessageSquare}
      />
      <MetricCard
        title="Messages totaux"
        value={metrics.totalMessages}
        icon={FileText}
      />
    </div>
  );
}