"use client";

import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useStats } from "@/hooks/useStats";
import { SimpleStatsChart } from "./charts/simple-stats-chart";
import { UserConnectionsChart } from "./charts/user-connections-chart";
import { ModelDistributionChart } from "./charts/model-distribution-chart";
import { AlertCircle } from "lucide-react";

export function RealTimeStats() {
  const { stats, loading, error } = useStats();
  
  console.log("RealTimeStats - stats:", stats);
  console.log("RealTimeStats - loading:", loading);
  console.log("RealTimeStats - error:", error);

  if (loading) {
    return (
      <div className="space-y-6">
        <div className="h-64 bg-muted animate-pulse rounded-lg" />
        <div className="h-64 bg-muted animate-pulse rounded-lg" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="space-y-6">
        <Card>
          <CardContent className="flex items-center justify-center h-64">
            <div className="text-center">
              <AlertCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
              <p className="text-sm text-muted-foreground">
                Erreur lors du chargement des données
              </p>
            </div>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="flex items-center justify-center h-64">
            <div className="text-center">
              <AlertCircle className="h-8 w-8 text-destructive mx-auto mb-2" />
              <p className="text-sm text-muted-foreground">
                Erreur lors du chargement des données
              </p>
            </div>
          </CardContent>
        </Card>
      </div>
    );
  }

  if (!stats) {
    return (
      <div className="space-y-6">
        <Card>
          <CardContent className="flex items-center justify-center h-64">
            <p className="text-sm text-muted-foreground">
              Aucune donnée disponible
            </p>
          </CardContent>
        </Card>
        <Card>
          <CardContent className="flex items-center justify-center h-64">
            <p className="text-sm text-muted-foreground">
              Aucune donnée disponible
            </p>
          </CardContent>
        </Card>
      </div>
    );
  }

  return (
    <Tabs defaultValue="connections" className="space-y-6">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="connections">Nombre de connexions par utilisateur/par jour</TabsTrigger>
        <TabsTrigger value="tokens">Tokens consommés par jour</TabsTrigger>
      </TabsList>
      
      <TabsContent value="connections" className="space-y-6">
        <UserConnectionsChart
          title="Nombre de connexions par utilisateur/par jour"
          data={stats.dailyConnections || []}
          color="hsl(var(--chart-2))"
        />
        <ModelDistributionChart
          title="Répartition par modèle"
          data={stats.modelDistribution}
        />
      </TabsContent>
      
      <TabsContent value="tokens" className="space-y-6">
        <SimpleStatsChart
          title="Tokens consommés par jour"
          data={stats.dailyTokens}
          color="hsl(var(--primary))"
        />
        <ModelDistributionChart
          title="Répartition par modèle"
          data={stats.modelDistribution}
        />
      </TabsContent>
    </Tabs>
  );
}