"use client";

import { useState, useEffect, useCallback } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Users } from "lucide-react";
import Link from "next/link";
import { useCollection } from "@/hooks/useCollection";
import {
  LibreChatUser,
  LibreChatConversation,
  LibreChatTransaction,
  LibreChatBalance,
} from "@/lib/types";

interface DashboardUser {
  userId: string;
  userName: string;
  conversations: number;
  tokens: number;
  credits: number;
}

// Fonction utilitaire pour valider et convertir les dates
const isValidDate = (value: unknown): value is string | number | Date => {
  if (!value) return false;
  if (value instanceof Date) return !isNaN(value.getTime());
  if (typeof value === 'string' || typeof value === 'number') {
    const date = new Date(value);
    return !isNaN(date.getTime());
  }
  return false;
};

export function DashboardUsersList() {
  const [topUsers, setTopUsers] = useState<DashboardUser[]>([]);
  const [isLoading, setIsLoading] = useState(true);

  const { data: users, loading: usersLoading } = useCollection<LibreChatUser>('users');
  const { data: conversations, loading: conversationsLoading } = useCollection<LibreChatConversation>('conversations');
  const { data: transactions, loading: transactionsLoading } = useCollection<LibreChatTransaction>('transactions');
  const { data: balances, loading: balancesLoading } = useCollection<LibreChatBalance>('balances');

  const processUsers = useCallback(() => {
    if (!users?.length || !conversations?.length || !transactions?.length || !balances?.length) {
      return;
    }

    console.log("🔄 Processing users data...");
    console.log("Users:", users.length);
    console.log("Conversations:", conversations.length);
    console.log("Transactions:", transactions.length);
    console.log("Balances:", balances.length);

    const processedUsers: DashboardUser[] = [];

    users.forEach((user: LibreChatUser) => {
      // Obtenir les conversations de l'utilisateur
      const userConversations = conversations.filter(
        (conv: LibreChatConversation) => conv.user === user._id
      );

      // Obtenir les transactions de l'utilisateur
      const userTransactions = transactions.filter(
        (trans: LibreChatTransaction) => trans.user === user._id
      );

      // Calculer les tokens consommés
      const totalTokens = userTransactions.reduce(
        (sum: number, trans: LibreChatTransaction) => sum + (trans.rawAmount || 0),
        0
      );

      // Obtenir les balances de l'utilisateur
      const userBalances = balances.filter(
        (balance: LibreChatBalance) => balance.user === user._id
      );

      // Trier par date de mise à jour (plus récent en premier)
      const sortedBalances = userBalances.sort((a, b) => {
        const dateA = a.updatedAt || a.createdAt;
        const dateB = b.updatedAt || b.createdAt;
        
        // Vérifier que les dates sont valides avant de les comparer
        if (isValidDate(dateA) && isValidDate(dateB)) {
          return new Date(dateB as string | number | Date).getTime() - new Date(dateA as string | number | Date).getTime();
        }
        
        // Si seulement une date existe et est valide, la privilégier
        if (isValidDate(dateA) && !isValidDate(dateB)) return -1;
        if (!isValidDate(dateA) && isValidDate(dateB)) return 1;
        
        // Si aucune date n'existe ou n'est valide, garder l'ordre actuel
        return 0;
      });

      // Prendre la balance la plus récente
      const latestBalance = sortedBalances[0];
      const credits = latestBalance ? latestBalance.tokenCredits || 0 : 0;

      // Ajouter l'utilisateur seulement s'il a des données significatives
      if (userConversations.length > 0 || totalTokens > 0 || credits > 0) {
        processedUsers.push({
          userId: user._id,
          userName: user.name || user.username || user.email || 'Utilisateur inconnu',
          conversations: userConversations.length,
          tokens: totalTokens,
          credits: credits,
        });
      }
    });

    // Trier par tokens consommés (décroissant) et prendre les 5 premiers
    const sortedUsers = processedUsers
      .sort((a, b) => b.tokens - a.tokens)
      .slice(0, 5);

    console.log("✅ Top 5 users processed:", sortedUsers);
    setTopUsers(sortedUsers);
    setIsLoading(false);
  }, [users, conversations, transactions, balances]);

  useEffect(() => {
    const allDataLoaded = !usersLoading && !conversationsLoading && !transactionsLoading && !balancesLoading;
    
    if (allDataLoaded) {
      processUsers();
    } else {
      setIsLoading(true);
    }
  }, [usersLoading, conversationsLoading, transactionsLoading, balancesLoading, processUsers]);

  if (isLoading) {
    return (
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="flex items-center gap-2">
            <Users className="h-5 w-5" />
            Top 5 utilisateurs
          </CardTitle>
          <Button variant="outline" size="sm" disabled>
            Chargement...
          </Button>
        </CardHeader>
        <CardContent>
          <div className="space-y-3">
            {[...Array(5)].map((_, i) => (
              <div key={i} className="flex items-center justify-between p-3 border rounded-lg">
                <div className="flex items-center space-x-3">
                  <div className="w-8 h-8 bg-gray-200 rounded-full animate-pulse"></div>
                  <div>
                    <div className="h-4 bg-gray-200 rounded w-24 animate-pulse"></div>
                    <div className="h-3 bg-gray-200 rounded w-16 mt-1 animate-pulse"></div>
                  </div>
                </div>
                <div className="text-right">
                  <div className="h-4 bg-gray-200 rounded w-16 animate-pulse"></div>
                  <div className="h-3 bg-gray-200 rounded w-12 mt-1 animate-pulse"></div>
                </div>
              </div>
            ))}
          </div>
        </CardContent>
      </Card>
    );
  }

  if (topUsers.length === 0) {
    return (
      <Card>
        <CardHeader className="flex flex-row items-center justify-between">
          <CardTitle className="flex items-center gap-2">
            <Users className="h-5 w-5" />
            Top 5 utilisateurs
          </CardTitle>
            <Link href="/users">
            <Button variant="outline" size="sm">
              Voir tous
            </Button>
          </Link>
        </CardHeader>
        <CardContent>
          <div className="text-center py-8 text-muted-foreground">
            Aucun utilisateur trouvé
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card>
      <CardHeader className="flex flex-row items-center justify-between">
        <CardTitle className="flex items-center gap-2">
          <Users className="h-5 w-5" />
          Top 5 utilisateurs
        </CardTitle>
        <Link href="/users">
          <Button variant="outline" size="sm">
            Voir tous
          </Button>
        </Link>
      </CardHeader>
      <CardContent>
        <div className="space-y-3">
          {topUsers.map((user, index) => (
            <div
              key={user.userId}
              className="flex items-center justify-between p-3 border rounded-lg hover:bg-gray-50 transition-colors"
            >
              <div className="flex items-center space-x-3">
                <Badge variant="secondary" className="w-6 h-6 rounded-full p-0 flex items-center justify-center text-xs">
                  {index + 1}
                </Badge>
                <div>
                  <p className="font-medium text-sm">{user.userName}</p>
                  <p className="text-xs text-muted-foreground">
                    {user.conversations} conversation{user.conversations !== 1 ? 's' : ''}
                  </p>
                </div>
              </div>
              <div className="text-right">
                <p className="font-medium text-sm">
                  {user.tokens.toLocaleString()} tokens
                </p>
                <p className="text-xs text-muted-foreground">
                  {user.credits.toLocaleString()} crédits
                </p>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
}