"use client";

import { Users, Trophy } from "lucide-react";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";
import type { TopUser } from "./types";

interface TopUsersTableProps {
  topUsers: TopUser[];
  isLoading: boolean;
}

export function TopUsersTable({ topUsers, isLoading }: TopUsersTableProps) {
  if (isLoading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Trophy className="h-5 w-5" />
            Top Utilisateurs
          </CardTitle>
          <CardDescription>Chargement...</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            {[1, 2, 3].map((i) => (
              <div key={i} className="h-10 animate-pulse rounded bg-muted" />
            ))}
          </div>
        </CardContent>
      </Card>
    );
  }

  if (!topUsers || topUsers.length === 0) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Trophy className="h-5 w-5" />
            Top Utilisateurs
          </CardTitle>
          <CardDescription>Aucune donnée disponible</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
            <Users className="h-12 w-12 mb-2 opacity-50" />
            <p className="text-sm">Aucune traduction enregistrée</p>
          </div>
        </CardContent>
      </Card>
    );
  }

  const getRankBadge = (rank: number) => {
    if (rank === 1) {
      return (
        <Badge className="bg-yellow-500/10 text-yellow-600 hover:bg-yellow-500/20">
          1er
        </Badge>
      );
    }
    if (rank === 2) {
      return (
        <Badge className="bg-gray-400/10 text-gray-500 hover:bg-gray-400/20">
          2e
        </Badge>
      );
    }
    if (rank === 3) {
      return (
        <Badge className="bg-orange-500/10 text-orange-600 hover:bg-orange-500/20">
          3e
        </Badge>
      );
    }
    return (
      <Badge variant="outline" className="text-muted-foreground">
        {rank}e
      </Badge>
    );
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle className="flex items-center gap-2">
          <Trophy className="h-5 w-5" />
          Top Utilisateurs
        </CardTitle>
        <CardDescription>
          Les 10 utilisateurs les plus actifs par volume de traduction
        </CardDescription>
      </CardHeader>
      <CardContent>
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead className="w-16">Rang</TableHead>
              <TableHead>Email</TableHead>
              <TableHead className="text-end">Traductions</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            {topUsers.slice(0, 10).map((user, index) => (
              <TableRow key={user.user_id}>
                <TableCell>{getRankBadge(index + 1)}</TableCell>
                <TableCell className="font-medium">{user.email}</TableCell>
                <TableCell className="text-end">
                  <Badge variant="secondary">{user.translation_count}</Badge>
                </TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </CardContent>
    </Card>
  );
}
