import { useAuth } from '@/hooks/useAuth';
import { useCats } from '@/hooks/useCats';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Link } from 'react-router-dom';
import { Trophy, Cat } from 'lucide-react';

export default function FeedSidebar() {
  const { user } = useAuth();
  const { data } = useCats(1);

  const usersMap = new Map<number, { username: string; points: number }>();
  if (data?.cats) {
    for (const cat of data.cats) {
      if (!usersMap.has(cat.user_id)) {
        usersMap.set(cat.user_id, { username: cat.username, points: cat.user_points });
      }
    }
  }

  const topUsers = Array.from(usersMap.entries())
    .sort((a, b) => b[1].points - a[1].points)
    .slice(0, 5);

  return (
    <div className="space-y-6">
      {user && (
        <Link to="/profile" className="flex items-center gap-3 group">
          <Avatar className="h-12 w-12 ring-2 ring-offset-1 ring-orange-200">
            <AvatarFallback className="bg-gradient-to-br from-orange-400 to-rose-500 text-white text-sm font-medium">
              {user.username.charAt(0).toUpperCase()}
            </AvatarFallback>
          </Avatar>
          <div>
            <p className="text-sm font-semibold group-hover:text-primary transition-colors">{user.username}</p>
            <p className="text-xs text-muted-foreground">🏆 {user.points} баллов</p>
          </div>
        </Link>
      )}

      <div>
        <div className="flex items-center gap-2 mb-4">
          <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-50">
            <Trophy className="h-3.5 w-3.5 text-amber-600" />
          </div>
          <h3 className="text-sm font-semibold">Таблица лидеров</h3>
        </div>

        {topUsers.length === 0 ? (
          <p className="text-sm text-muted-foreground">Пока нет пользователей</p>
        ) : (
          <div className="space-y-3">
            {topUsers.map(([id, u], i) => (
              <Link key={id} to={`/profile/${id}`} className="flex items-center gap-3 group">
                <span className={`w-5 text-center text-xs font-bold ${
                  i === 0 ? 'text-amber-500' : i === 1 ? 'text-stone-400' : i === 2 ? 'text-orange-400' : 'text-muted-foreground'
                }`}>{i + 1}</span>
                <Avatar className="h-8 w-8">
                  <AvatarFallback className="text-[10px] bg-gradient-to-br from-orange-400 to-rose-500 text-white">
                    {u.username.charAt(0).toUpperCase()}
                  </AvatarFallback>
                </Avatar>
                <span className="text-sm flex-1 truncate font-medium group-hover:text-primary transition-colors">{u.username}</span>
                <span className="text-xs font-semibold text-muted-foreground">{u.points}</span>
              </Link>
            ))}
          </div>
        )}
      </div>

      <div className="pt-4 text-xs text-muted-foreground/60 space-y-1">
        <p>Catstagram · Делись фото котов</p>
        <p>© 2026</p>
      </div>
    </div>
  );
}