import DataTable from '@/components/common/data-table';
import PageHeading from '@/components/common/page-heading';
import CrownIcon from '@/components/icons/crown-icon';
import { Card } from '@/components/ui/card';
import { Skeleton } from '@/components/ui/skeleton';
import PodiumCard from '@/components/user/default/podium-card';
import { useCurrency } from '@/hooks/use-currency';
import { useApiSWR } from '@/hooks/useSWR';
import { TTopInvestor } from '@/types/common/Investors-type';
import { maskName } from '@/utils/strHelpers';
import { useTranslation } from 'react-i18next';

interface LeaderboardData {
  topInvestors: TTopInvestor[];
}

export default function Leaderboard() {
  const { t } = useTranslation();
  const { data, isLoading } = useApiSWR<LeaderboardData>(
    '/builder/investors/top',
  );
  const { format } = useCurrency();

  const investors: TTopInvestor[] = data?.topInvestors ?? [];
  const first = investors[0];
  const second = investors[1];
  const third = investors[2];

  return (
    <div className="space-y-6">
      <PageHeading
        title={t('Leaderboard')}
        description={t('Top traders ranked by total trade volume')}
        variant="default"
      />

      <div className="mx-auto max-w-4xl">
        {/* Podium */}
        {isLoading ? (
          <div className="mb-6 flex h-72 items-end justify-center gap-3 px-2 lg:px-20">
            {[78, 100, 58].map((h, i) => (
              <Skeleton
                key={i}
                className="w-24 rounded-t-2xl lg:w-36"
                style={{ height: `${h}%` }}
              />
            ))}
          </div>
        ) : investors.length < 3 ? (
          <Card className="mb-6 flex h-72 items-center justify-center rounded-2xl text-sm text-black/40 dark:border-white/8 dark:text-white/40">
            {t('Not enough traders to display the leaderboard.')}
          </Card>
        ) : (
          <div className="mb-6 grid min-h-72 grid-cols-3 px-2 lg:px-20">
            <div className="relative flex items-center justify-center">
              <PodiumCard investor={second} rank={2} />
            </div>
            <div className="relative flex items-start justify-center">
              <div className="absolute z-20 -translate-y-[65%]">
                <CrownIcon />
              </div>
              <PodiumCard investor={first} rank={1} />
            </div>
            <div className="relative flex items-end justify-center">
              <PodiumCard investor={third} rank={3} />
            </div>
          </div>
        )}

        {/* Rankings table */}
        <Card className="gap-0 rounded-2xl p-0 dark:border-white/8">
          <DataTable
            data={investors}
            rounded
            shadow={false}
            isLoading={isLoading}
            structure={[
              {
                accessorKey: 'rank',
                header: '#',
                cell: ({ row }) => (
                  <span className="font-semibold text-black/50 dark:text-white/50">
                    #{row.index + 1}
                  </span>
                ),
              },
              {
                accessorKey: 'name',
                header: t('Trader'),
                cell: ({ row }) => (
                  <span className="font-semibold text-card-foreground">
                    {maskName(row.original.name)}
                  </span>
                ),
              },
              {
                accessorKey: 'investments_count',
                header: t('Trades'),
                cell: ({ row }) => (
                  <span className="text-card-foreground">
                    {row.original.investments_count}
                  </span>
                ),
              },
              {
                accessorKey: 'investments_sum_amount',
                header: t('Trade Volume'),
                cell: ({ row }) => (
                  <span className="font-semibold text-pm-yes">
                    {format(row.original.investments_sum_amount ?? 0)}
                  </span>
                ),
              },
            ]}
          />
        </Card>
      </div>
    </div>
  );
}