"use client";

import { useMetrics } from "@/hooks/useMetrics";
import { MetricCard } from "@/components/ui/metric-card";
import {
  Users,
  UserCheck,
  Coins,
  MessageSquare,
  FileText,
  Euro,
  Activity,
} 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-4">
        {Array.from({ length: 7 }).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="space-y-4">
      {/* Ligne 1: Utilisateurs actifs, Conversations actives, Tokens consommés */}
      <div className="grid gap-4 md:grid-cols-3">
        <MetricCard
          title="Utilisateurs actifs"
          value={metrics.activeUsers}
          icon={UserCheck}
        />
        <MetricCard
          title="Conversations actives"
          value={metrics.activeConversations}
          icon={MessageSquare}
        />
        <MetricCard
          title="Tokens consommés"
          value={metrics.totalTokensConsumed?.toLocaleString() || "0"}
          icon={Activity}
          description={`${Math.round(
            (metrics.totalTokensConsumed || 0) / (metrics.totalUsers || 1)
          )} par utilisateur`}
        />
      </div>

      {/* Ligne 2: Utilisateurs totaux, Messages totaux, Crédits totaux */}
      <div className="grid gap-4 md:grid-cols-3">
        <MetricCard
          title="Utilisateurs totaux"
          value={metrics.totalUsers}
          icon={Users}
        />
        <MetricCard
          title="Messages totaux"
          value={metrics.totalMessages}
          icon={FileText}
        />
        <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>
      </div>
    </div>
  );
}