import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { useCurrency } from '@/hooks/use-currency';
import { useApiSWR } from '@/hooks/useSWR';
import { TTopHolder } from '@/types/market.types';
import { router } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';

interface MarketTopHoldersProps {
  slug: string;
}

export default function MarketTopHolders({ slug }: MarketTopHoldersProps) {
  const { t } = useTranslation();
  const { format } = useCurrency();

  const { data, isLoading } = useApiSWR<TTopHolder[]>(
    slug ? `/markets/${slug}/top-holders` : null,
  );

  if (isLoading) {
    return (
      <div className="space-y-3">
        {[1, 2, 3].map((i) => (
          <div key={i} className="flex items-center gap-2">
            <Skeleton className="size-7 shrink-0 rounded-full" />
            <div className="flex-1 space-y-1">
              <Skeleton className="h-3 w-1/2 rounded" />
              <Skeleton className="h-3 w-1/3 rounded" />
            </div>
            <Skeleton className="h-3 w-12 rounded" />
          </div>
        ))}
      </div>
    );
  }

  if (!data || data.length === 0) {
    return (
      <p className="py-4 text-center text-xs text-black/40 dark:text-white/40">
        {t('No positions yet.')}
      </p>
    );
  }

  return (
    <div className="space-y-3">
      {data.map((holder, i) => {
        const initials =
          `${holder.user.first_name[0] ?? ''}${holder.user.last_name[0] ?? ''}`.toUpperCase();
        const outcomeColor = holder.outcome.color ?? '#6366f1';

        return (
          <div key={i} className="flex items-center gap-2.5">
            <Avatar className="size-7 shrink-0">
              <AvatarFallback className="text-[10px] font-semibold">
                {initials}
              </AvatarFallback>
            </Avatar>

            <div className="min-w-0 flex-1">
              <button
                className="cursor-pointer truncate text-xs font-medium hover:underline"
                onClick={() => router.visit(`/users/${holder.user.id}`)}
              >
                {holder.user.name}
              </button>
              <div className="flex items-center gap-1">
                <span
                  className="size-1.5 shrink-0 rounded-full"
                  style={{ backgroundColor: outcomeColor }}
                />
                <span className="truncate text-[11px] text-black/50 dark:text-white/50">
                  {holder.outcome.title}
                </span>
              </div>
            </div>

            <div className="shrink-0 text-right">
              <p className="text-xs font-semibold">
                {format(holder.current_value)}
              </p>
              <p className="text-[11px] text-black/40 dark:text-white/40">
                {holder.shares.toFixed(2)} {t('shares')}
              </p>
            </div>
          </div>
        );
      })}
    </div>
  );
}