import React, { useState, useEffect, useCallback } from 'react';
import {
  Users, Wifi, Shield, RefreshCw, Loader2, AlertCircle,
  UserX, Ban, Clock, CheckCircle, MoreVertical,
  ChevronRight,
  ShieldAlert,
  Search,
} from 'lucide-react';
import { useVault } from '../contexts/VaultContext';
import { Button } from './ui/button';
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from './ui/card';
import { Badge } from './ui/badge';
import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs';
import { Input } from './ui/input';
import { PlayerContextMenu } from './PlayerContextMenu';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
  DropdownMenuSeparator,
  DropdownMenuLabel,
} from "./ui/dropdown-menu";
import { cn, base64ToUint8Array, uint8ArrayToBase64 } from '../lib/utils';

const apiHeaders = () => ({
  'Content-Type': 'application/json',
  'Authorization': `Bearer ${localStorage.getItem('auth_token') ?? ''}`,
});

interface Player {
  id: string;
  nameHash: string;
  data: string;
  joinedAt: string;
  warningCount: number;
}

interface DecryptedPlayer {
  id: string;
  name: string;
  ip: string;
  joinedAt: string;
  nameHash: string;
  warningCount: number;
}

const DURATION_OPTIONS = [
  { label: '30 minutes', minutes: 30 },
  { label: '1 hour', minutes: 60 },
  { label: '6 hours', minutes: 360 },
  { label: '24 hours', minutes: 1440 },
  { label: '7 days', minutes: 10080 },
  { label: 'Permanent', minutes: 0 },
];

function timeAgo(iso: string) {
  const diff = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
  if (diff < 60) return `${diff}s ago`;
  if (diff < 3600) return `${Math.floor(diff / 60)}m ago`;
  return `${Math.floor(diff / 3600)}h ago`;
}

function formatExpiry(iso: string | null) {
  if (!iso) return 'Permanent';
  const d = new Date(iso);
  const diff = Math.floor((d.getTime() - Date.now()) / 1000 / 60);
  if (diff <= 0) return 'Expired';
  if (diff < 60) return `${diff}m left`;
  if (diff < 1440) return `${Math.floor(diff / 60)}h left`;
  return `${Math.floor(diff / 1440)}d left`;
}

// ─── Kick inline form ────────────────────────────────────────────────────────

const KickForm: React.FC<{ player: DecryptedPlayer; onDone: () => void; onCancel: () => void }> = ({
  player, onDone, onCancel,
}) => {
  const [reason, setReason] = useState('');
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState<string | null>(null);

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setErr(null);
    try {
      const res = await fetch('/api/players/kick', {
        method: 'POST',
        headers: apiHeaders(),
        body: JSON.stringify({ playerNameHash: player.nameHash, reason }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? 'Kick failed');
      onDone();
    } catch (e) {
      setErr((e as Error).message);
      setLoading(false);
    }
  };

  return (
    <form onSubmit={submit} className="flex items-center gap-3 mt-4 p-3 bg-amber-500/5 rounded-xl border border-amber-500/20 animate-in slide-in-from-top-2 duration-300">
      <Input
        autoFocus
        value={reason}
        onChange={e => setReason(e.target.value)}
        placeholder="Reason (optional)"
        className="h-9 bg-background/50 border-amber-500/30 focus-visible:ring-amber-500"
        disabled={loading}
      />
      <Button
        type="submit"
        disabled={loading}
        variant="outline"
        className="h-9 bg-amber-500/10 hover:bg-amber-500/20 text-amber-500 border-amber-500/30 font-bold"
      >
        {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <UserX className="w-4 h-4 mr-2" />}
        Kick Player
      </Button>
      <Button type="button" variant="ghost" size="sm" onClick={onCancel} className="h-9 text-muted-foreground">
        Cancel
      </Button>
      {err && <span className="text-xs text-destructive">{err}</span>}
    </form>
  );
};

// ─── Ban inline form ─────────────────────────────────────────────────────────

const BanForm: React.FC<{ player: DecryptedPlayer; onDone: () => void; onCancel: () => void }> = ({
  player, onDone, onCancel,
}) => {
  const [reason, setReason] = useState('');
  const [duration, setDuration] = useState(0); // 0 = permanent
  const [loading, setLoading] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const { encrypt, username } = useVault();

  const submit = async (e: React.FormEvent) => {
    e.preventDefault();
    setLoading(true);
    setErr(null);
    try {
      // Encrypt ban details
      const banData = JSON.stringify({
        playerName: player.name,
        reason: reason || 'Banned by admin',
        bannedBy: username || 'Admin',
      });
      const encrypted = await encrypt(banData);
      const dataBase64 = uint8ArrayToBase64(encrypted);

      const res = await fetch('/api/players/ban', {
        method: 'POST',
        headers: apiHeaders(),
        body: JSON.stringify({
          playerNameHash: player.nameHash,
          data: dataBase64,
          durationMinutes: duration
        }),
      });
      const data = await res.json();
      if (!res.ok) throw new Error(data.error ?? 'Ban failed');
      onDone();
    } catch (e) {
      setErr((e as Error).message);
      setLoading(false);
    }
  };

  return (
    <form onSubmit={submit} className="mt-4 p-5 bg-destructive/5 border border-destructive/20 rounded-2xl space-y-4 animate-in slide-in-from-top-2 duration-300">
      <div className="flex items-center gap-2">
         <ShieldAlert className="w-4 h-4 text-destructive" />
         <span className="text-xs font-black uppercase text-destructive tracking-widest">Ban: {player.name}</span>
      </div>
      <div className="flex gap-3">
        <Input
          autoFocus
          value={reason}
          onChange={e => setReason(e.target.value)}
          placeholder="Reason for ban (optional)"
          className="bg-background/50 border-destructive/30 focus-visible:ring-destructive"
          disabled={loading}
        />
        <select
          value={duration}
          onChange={e => setDuration(Number(e.target.value))}
          className="h-9 px-3 bg-background/50 border border-destructive/30 rounded-md text-sm text-foreground focus:outline-none focus:ring-1 focus:ring-destructive"
          disabled={loading}
        >
          {DURATION_OPTIONS.map(opt => (
            <option key={opt.minutes} value={opt.minutes}>{opt.label}</option>
          ))}
        </select>
      </div>
      {err && (
        <div className="flex items-center gap-2 text-xs text-destructive">
          <AlertCircle className="w-3.5 h-3.5" /> {err}
        </div>
      )}
      <div className="flex gap-2">
        <Button
          type="submit"
          disabled={loading}
          variant="destructive"
          className="font-bold shadow-lg shadow-destructive/20"
        >
          {loading ? <Loader2 className="w-4 h-4 animate-spin" /> : <Ban className="w-4 h-4 mr-2" />}
          Ban Player
        </Button>
        <Button type="button" variant="ghost" onClick={onCancel} className="text-muted-foreground">
          Cancel
        </Button>
      </div>
    </form>
  );
};

// ─── Main component ───────────────────────────────────────────────────────────

interface PlayersProps {
  onOpenInsights?: (player: { name: string; nameHash: string }) => void;
}

export const Players: React.FC<PlayersProps> = ({ onOpenInsights }) => {
  const [tab, setTab] = useState<'online' | 'history' | 'bans'>('online');
  const [players, setPlayers] = useState<DecryptedPlayer[]>([]);
  const [history, setHistory] = useState<DecryptedPlayer[]>([]);
  const [bans, setBans] = useState<DecryptedBan[]>([]);
  const [loading, setLoading] = useState(false);
  const [actionPlayerId, setActionPlayerId] = useState<{ id: string; type: 'kick' | 'ban' } | null>(null);
  const { decrypt, isLocked } = useVault();

  const fetchPlayers = useCallback(async () => {
    if (isLocked) return;
    try {
      const res = await fetch('/api/players', { headers: apiHeaders() });
      const data = await res.json();
      const rawPlayers = (data.players ?? []) as Player[];

      const decrypted = await Promise.all(rawPlayers.map(async p => {
        try {
          const decryptedData = await decrypt(base64ToUint8Array(p.data));
          const parsed = JSON.parse(decryptedData);
          return {
            id: p.id,
            name: parsed.name,
            ip: parsed.ip,
            joinedAt: p.joinedAt,
            nameHash: p.nameHash
          };
        } catch (e) {
          return {
            id: p.id,
            name: 'Decryption Error',
            ip: '?.?.?.?',
            joinedAt: p.joinedAt,
            nameHash: p.nameHash
          };
        }
      }));

      setPlayers(decrypted);
    } catch {}
  }, [decrypt, isLocked]);

  const fetchHistory = useCallback(async () => {
    if (isLocked) return;
    try {
      const res = await fetch('/api/players/search?q=', { headers: apiHeaders() });
      const data = await res.json();
      const rawPlayers = (data.results ?? []) as Player[];

      const decrypted = await Promise.all(rawPlayers.map(async p => {
        try {
          const decryptedData = await decrypt(base64ToUint8Array(p.data));
          const parsed = JSON.parse(decryptedData);
          return {
            id: p.id,
            name: parsed.name,
            ip: parsed.ip,
            joinedAt: p.joinedAt,
            nameHash: p.nameHash
          };
        } catch (e) {
          return {
            id: p.id,
            name: 'Decryption Error',
            ip: '?.?.?.?',
            joinedAt: p.joinedAt,
            nameHash: p.nameHash
          };
        }
      }));

      setHistory(decrypted);
    } catch {}
  }, [decrypt, isLocked]);

  const fetchBans = useCallback(async () => {
    if (isLocked) return;
    try {
      const res = await fetch('/api/bans', { headers: apiHeaders() });
      const data = await res.json();
      const rawBans = (data.bans ?? []) as BanEntry[];

      const decrypted = await Promise.all(rawBans.map(async b => {
        try {
          const decryptedData = await decrypt(base64ToUint8Array(b.data));
          const parsed = JSON.parse(decryptedData);
          return {
            id: b.id,
            playerName: parsed.playerName,
            reason: parsed.reason,
            bannedBy: parsed.bannedBy,
            bannedAt: b.bannedAt,
            expiresAt: b.expiresAt,
            playerNameHash: b.playerNameHash
          };
        } catch (e) {
          return {
            id: b.id,
            playerName: 'Decryption Error',
            reason: 'N/A',
            bannedBy: 'N/A',
            bannedAt: b.bannedAt,
            expiresAt: b.expiresAt,
            playerNameHash: b.playerNameHash
          };
        }
      }));

      setBans(decrypted);
    } catch {}
  }, [decrypt, isLocked]);

  const refresh = useCallback(async () => {
    setLoading(true);
    await Promise.all([fetchPlayers(), fetchHistory(), fetchBans()]);
    setLoading(false);
  }, [fetchPlayers, fetchHistory, fetchBans]);

  useEffect(() => {
    refresh();
    const t = setInterval(fetchPlayers, 5000);
    return () => clearInterval(t);
  }, [refresh, fetchPlayers]);

  const handleKickDone = () => {
    setActionPlayerId(null);
    refresh();
  };

  const handleBanDone = () => {
    setActionPlayerId(null);
    refresh();
  };

  const handleUnban = async (banId: string) => {
    try {
      await fetch(`/api/bans?id=${banId}`, { method: 'DELETE', headers: apiHeaders() });
      fetchBans();
    } catch {}
  };

  return (
    <div className="space-y-8 animate-in fade-in slide-in-from-bottom-2 duration-500">
      {/* Header */}
      <div className="flex items-center justify-between">
        <div>
          <h2 className="text-3xl font-black tracking-tight text-foreground">Players</h2>
          <p className="text-sm text-muted-foreground mt-1">See who's online, browse history, and manage bans.</p>
        </div>
        <Button
          variant="outline"
          onClick={refresh}
          disabled={loading}
          className="rounded-full px-6 border-primary/20 hover:bg-primary/5 transition-all"
        >
          <RefreshCw className={cn("w-4 h-4 mr-2", loading && "animate-spin")} />
          Refresh
        </Button>
      </div>

      <Tabs defaultValue="online" onValueChange={(v) => setTab(v as any)} className="w-full">
        <TabsList className="bg-muted/30 p-1 h-12 rounded-xl mb-6">
          <TabsTrigger value="online" className="rounded-lg px-6 font-black uppercase tracking-widest text-[10px]">
            <Wifi className="w-3.5 h-3.5 mr-2" />
            Online ({players.length})
          </TabsTrigger>
          <TabsTrigger value="history" className="rounded-lg px-6 font-black uppercase tracking-widest text-[10px]">
            <Clock className="w-3.5 h-3.5 mr-2" />
            History ({history.length})
          </TabsTrigger>
          <TabsTrigger value="bans" className="rounded-lg px-6 font-black uppercase tracking-widest text-[10px]">
            <Shield className="w-3.5 h-3.5 mr-2" />
            Bans ({bans.length})
          </TabsTrigger>
        </TabsList>

        <TabsContent value="online" className="space-y-4">
          {players.length === 0 ? (
            <Card className="border-dashed border-2 py-24 bg-muted/10">
               <div className="flex flex-col items-center justify-center text-center space-y-4">
                  <div className="w-16 h-16 bg-muted rounded-2xl flex items-center justify-center">
                    <Users className="w-8 h-8 text-muted-foreground/30" />
                  </div>
                  <div className="space-y-1">
                    <h3 className="text-lg font-bold">No players online</h3>
                    <p className="text-muted-foreground text-sm max-w-sm mx-auto">
                      No players are currently connected to your servers.
                    </p>
                  </div>
               </div>
            </Card>
          ) : (
            <div className="grid grid-cols-1 gap-4">
              {players.map(player => {
                const isActioning = actionPlayerId?.id === player.id;
                return (
                  <PlayerContextMenu 
                    key={player.id} 
                    player={player} 
                    onViewInsights={onOpenInsights ?? (() => {})}
                    onKick={(p) => setActionPlayerId({ id: p.id, type: 'kick' })}
                    onBan={(p) => setActionPlayerId({ id: p.id, type: 'ban' })}
                  >
                    <Card className={cn(
                      "group border-border/50 bg-card/40 backdrop-blur-sm transition-all duration-300 hover:border-primary/40",
                      isActioning && "ring-2 ring-primary/20"
                    )}>
                      <CardContent className="p-5">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-5">
                            <div className="relative">
                              <div className="w-14 h-14 rounded-2xl bg-primary/10 border border-primary/20 flex items-center justify-center text-primary font-black text-xl shadow-inner group-hover:scale-110 transition-transform">
                                {player.name.slice(0, 1).toUpperCase()}
                              </div>
                              <div className="absolute -bottom-1 -right-1 w-4 h-4 bg-emerald-500 border-4 border-background rounded-full shadow-lg" />
                            </div>

                            <div className="space-y-1">
                              <div className="flex items-center gap-3">
                                <h3 className="font-black text-lg tracking-tight group-hover:text-primary transition-colors">{player.name}</h3>
                                {player.warningCount > 0 && (
                                  <Badge variant="destructive" className="bg-destructive/10 text-destructive border-destructive/20 text-[9px] font-black uppercase flex items-center gap-1">
                                    <AlertCircle className="w-2.5 h-2.5" />
                                    {player.warningCount} Warnings
                                  </Badge>
                                )}
                                <Badge variant="outline" className="text-[9px] font-black uppercase bg-emerald-500/10 text-emerald-500 border-emerald-500/20">Active_Link</Badge>
                              </div>
                              <div className="flex items-center gap-4 text-muted-foreground">
                                <span className="text-[11px] font-mono bg-muted/50 px-2 py-0.5 rounded border border-border/50">{player.ip}</span>
                                <div className="flex items-center gap-1.5 text-[11px] font-bold uppercase tracking-wider">
                                  <Clock className="w-3 h-3" />
                                  Joined {timeAgo(player.joinedAt)}
                                </div>
                              </div>
                            </div>
                          </div>

                          <div className="flex items-center gap-3">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="icon" className="rounded-full hover:bg-primary/10 hover:text-primary transition-all">
                                  <MoreVertical className="w-5 h-5" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end" className="w-56 bg-card/95 backdrop-blur-xl border-border/50">
                                <DropdownMenuLabel className="text-[10px] uppercase font-black tracking-widest text-muted-foreground/60">Actions</DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem onClick={() => onOpenInsights?.(player)} className="font-bold">
                                   <Clock className="w-4 h-4 mr-2" /> View History
                                </DropdownMenuItem>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem onClick={() => setActionPlayerId({ id: player.id, type: 'kick' })} className="text-amber-500 focus:text-amber-500 font-black">
                                   <UserX className="w-4 h-4 mr-2" /> Kick
                                </DropdownMenuItem>
                                <DropdownMenuItem onClick={() => setActionPlayerId({ id: player.id, type: 'ban' })} className="text-destructive focus:text-destructive font-black">
                                   <Ban className="w-4 h-4 mr-2" /> Ban
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                            <Button variant="ghost" size="icon" onClick={() => onOpenInsights?.(player)} className="rounded-full text-muted-foreground hover:text-primary transition-all">
                               <ChevronRight className="w-5 h-5" />
                            </Button>
                          </div>
                        </div>

                        {isActioning && actionPlayerId?.type === 'kick' && (
                          <KickForm
                            player={player}
                            onDone={handleKickDone}
                            onCancel={() => setActionPlayerId(null)}
                          />
                        )}

                        {isActioning && actionPlayerId?.type === 'ban' && (
                          <BanForm
                            player={player}
                            onDone={handleBanDone}
                            onCancel={() => setActionPlayerId(null)}
                          />
                        )}
                      </CardContent>
                    </Card>
                  </PlayerContextMenu>
                );
              })}
            </div>
          )}
        </TabsContent>

        <TabsContent value="history" className="space-y-4">
          {history.length === 0 ? (
            <Card className="border-dashed border-2 py-24 bg-muted/10">
               <div className="flex flex-col items-center justify-center text-center space-y-4">
                  <div className="w-16 h-16 bg-muted rounded-2xl flex items-center justify-center">
                    <Clock className="w-8 h-8 text-muted-foreground/30" />
                  </div>
                  <h3 className="text-lg font-bold text-muted-foreground">No history yet</h3>
               </div>
            </Card>
          ) : (
            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
              {history.map(player => {
                const isActioning = actionPlayerId?.id === player.id;
                return (
                  <PlayerContextMenu 
                    key={player.id} 
                    player={player} 
                    onViewInsights={onOpenInsights ?? (() => {})}
                    onBan={(p) => setActionPlayerId({ id: p.id, type: 'ban' })}
                  >
                    <Card className="bg-card/40 backdrop-blur-sm border-border/50 group hover:border-primary/30 transition-all">
                      <CardContent className="p-5">
                        <div className="flex items-center justify-between">
                          <div className="flex items-center gap-4">
                            <div className="w-12 h-12 rounded-xl bg-muted border border-border/50 flex items-center justify-center text-muted-foreground font-black group-hover:bg-primary/5 transition-colors">
                              {player.name.slice(0, 1).toUpperCase()}
                            </div>
                            <div>
                              <div className="flex items-center gap-2">
                                <h4 className="font-bold text-foreground tracking-tight">{player.name}</h4>
                                {player.warningCount > 0 && (
                                  <Badge variant="destructive" className="bg-destructive/10 text-destructive border-destructive/20 text-[8px] font-black uppercase h-4 px-1.5">
                                    {player.warningCount}W
                                  </Badge>
                                )}
                              </div>
                              <p className="text-[10px] text-muted-foreground font-mono mt-0.5">ID: {player.nameHash.slice(0, 12)}</p>
                            </div>
                          </div>
                          <div className="flex items-center gap-3">
                            <DropdownMenu>
                              <DropdownMenuTrigger asChild>
                                <Button variant="ghost" size="icon" className="rounded-full hover:bg-primary/10 hover:text-primary transition-all">
                                  <MoreVertical className="w-5 h-5" />
                                </Button>
                              </DropdownMenuTrigger>
                              <DropdownMenuContent align="end" className="w-56 bg-card/95 backdrop-blur-xl border-border/50">
                                <DropdownMenuLabel className="text-[10px] uppercase font-black tracking-widest text-muted-foreground/60">Actions</DropdownMenuLabel>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem onClick={() => onOpenInsights?.(player)} className="font-bold">
                                   <Clock className="w-4 h-4 mr-2" /> View History
                                </DropdownMenuItem>
                                <DropdownMenuSeparator />
                                <DropdownMenuItem onClick={() => setActionPlayerId({ id: player.id, type: 'ban' })} className="text-destructive focus:text-destructive font-black">
                                   <Ban className="w-4 h-4 mr-2" /> Ban
                                </DropdownMenuItem>
                              </DropdownMenuContent>
                            </DropdownMenu>
                            <Badge variant="ghost" className="text-[9px] font-black uppercase text-muted-foreground/60">
                               Archived {new Date(player.joinedAt).toLocaleDateString()}
                            </Badge>
                          </div>
                        </div>
                        
                        {isActioning && actionPlayerId?.type === 'ban' && (
                          <BanForm
                            player={player}
                            onDone={handleBanDone}
                            onCancel={() => setActionPlayerId(null)}
                          />
                        )}
                      </CardContent>
                    </Card>
                  </PlayerContextMenu>
                );
              })}
            </div>
          )}
        </TabsContent>

        <TabsContent value="bans" className="space-y-4">
          {bans.length === 0 ? (
             <Card className="border-dashed border-2 py-24 bg-muted/10">
                <div className="flex flex-col items-center justify-center text-center space-y-4">
                   <div className="w-16 h-16 bg-muted rounded-2xl flex items-center justify-center">
                     <Shield className="w-8 h-8 text-muted-foreground/30" />
                   </div>
                   <h3 className="text-lg font-bold text-muted-foreground">No active bans</h3>
                </div>
             </Card>
          ) : (
            <div className="grid grid-cols-1 gap-4">
              {bans.map(ban => (
                <Card key={ban.id} className="bg-destructive/5 border-destructive/20 relative overflow-hidden group">
                  <div className="absolute top-0 left-0 w-1 h-full bg-destructive/40" />
                  <CardContent className="p-5 flex items-center justify-between gap-6">
                    <div className="flex items-center gap-5 min-w-0">
                      <div className="w-12 h-12 rounded-xl bg-destructive/10 border border-destructive/20 flex items-center justify-center flex-shrink-0">
                        <Ban className="w-5 h-5 text-destructive" />
                      </div>
                      <div className="min-w-0">
                        <div className="flex items-center gap-3">
                          <span className="font-black text-lg tracking-tight">{ban.playerName}</span>
                          <Badge variant="outline" className={cn(
                            "text-[10px] font-black px-3 py-0.5 rounded-full border",
                            ban.expiresAt ? "bg-amber-500/10 border-amber-500/20 text-amber-500" : "bg-destructive/10 border-destructive/20 text-destructive"
                          )}>
                            {formatExpiry(ban.expiresAt)}
                          </Badge>
                        </div>
                        <p className="text-xs text-muted-foreground mt-1 flex items-center gap-2">
                          <span className="bg-destructive/10 text-destructive px-1.5 py-0.5 rounded font-bold uppercase text-[9px]">Reason</span>
                          <span className="truncate italic">"{ban.reason}"</span>
                        </p>
                      </div>
                    </div>
                    
                    <div className="flex items-center gap-4 flex-shrink-0">
                       <div className="text-right hidden sm:block">
                          <p className="text-[10px] font-black uppercase text-muted-foreground/60 tracking-widest">Banned by</p>
                          <p className="text-xs font-bold">{ban.bannedBy}</p>
                       </div>
                       <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handleUnban(ban.id)}
                          className="font-black uppercase tracking-widest text-[10px] h-9 border-emerald-500/20 text-emerald-500 hover:bg-emerald-500/10"
                        >
                          <CheckCircle className="w-3.5 h-3.5 mr-2" />
                          Unban
                        </Button>
                    </div>
                  </CardContent>
                </Card>
              ))}
            </div>
          )}
        </TabsContent>
      </Tabs>
    </div>
  );
};