import PageHeading from '@/components/common/page-heading';
import { Card } from '@/components/ui/card';
import { Progress } from '@/components/ui/progress';
import { Separator } from '@/components/ui/separator';
import { Skeleton } from '@/components/ui/skeleton';
import { useCurrency } from '@/hooks/use-currency';
import { useApiSWR } from '@/hooks/useSWR';
import { Ranking, SharedData } from '@/types';
import { usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';

interface RanksData {
  ranks: Ranking[];
}

const Rankings = () => {
  const { t } = useTranslation();
  const { format } = useCurrency();
  const { auth } = usePage<SharedData>().props;
  const ranking = auth?.user?.profile?.ranking;
  const userPoints = auth?.user?.profile?.points || 0;

  const { data, isLoading } = useApiSWR<RanksData>('/ranks');

  return (
    <div className="space-y-6">
      <PageHeading
        title={t('Rankings')}
        description={t('Here you can see your rankings and rewards.')}
        variant="default"
      />

      {/* Current rank card */}
      <Card className="rounded-2xl p-6 sm:max-w-sm dark:border-white/8">
        <div className="flex flex-col items-center gap-2 text-center">
          {ranking?.badge ? (
            <img
              src={ranking.badge}
              alt={ranking?.name || t('Unranked')}
              className="size-28 object-contain"
            />
          ) : (
            <div className="flex size-28 items-center justify-center rounded-full bg-pm-surface-2 text-4xl">
              🏅
            </div>
          )}
          <p className="text-xs font-semibold tracking-[0.09em] text-black/40 uppercase dark:text-white/40">
            {t('Your Rank')}
          </p>
          <p className="text-2xl font-bold text-card-foreground">
            {ranking?.name || t('Unranked')}
          </p>
        </div>

        <div className="mt-4">
          <div className="mb-1.5 flex items-center justify-between text-xs text-black/50 dark:text-white/50">
            <span>{t('Points')}</span>
            <span>
              {userPoints.toLocaleString()} /{' '}
              {ranking?.requirement?.toLocaleString() ?? '-'}
            </span>
          </div>
          <Progress
            value={
              ranking && ranking?.requirement !== 0
                ? Math.min((userPoints / ranking.requirement) * 100, 100)
                : 100
            }
            variant="success"
            size="sm"
          />
        </div>

        <Separator className="my-5 bg-black/6 dark:bg-white/6" />

        <div>
          <p className="mb-1 text-xs font-semibold tracking-[0.09em] text-black/40 uppercase dark:text-white/40">
            {t('Bonus Earned')}
          </p>
          <p className="mb-2 text-2xl font-bold text-pm-yes">
            {format(ranking?.bonus || 0)}
          </p>
          {ranking?.description && (
            <p className="text-sm text-black/50 dark:text-white/50">
              {ranking.description}
            </p>
          )}
        </div>
      </Card>

      {/* All ranks */}
      <div>
        <h2 className="mb-4 text-base font-semibold text-black/40 dark:text-white/40">
          {t('All Ranks')}
        </h2>
        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
          {isLoading
            ? [1, 2, 3].map((i) => (
                <Card key={i} className="rounded-2xl p-5 dark:border-white/8">
                  <div className="mb-4 flex flex-col items-center gap-3">
                    <Skeleton className="size-24 rounded-full" />
                    <Skeleton className="h-5 w-24" />
                  </div>
                  <Skeleton className="mb-4 h-2 w-full rounded-full" />
                  <Separator className="my-4 bg-black/6 dark:bg-white/6" />
                  <div className="space-y-2">
                    <Skeleton className="h-4 w-2/3" />
                    <Skeleton className="h-6 w-24" />
                  </div>
                </Card>
              ))
            : data?.ranks?.map((rank: Ranking) => (
                <Card
                  key={rank?.id}
                  className="rounded-2xl p-5 dark:border-white/8"
                >
                  <div className="mb-4 flex flex-col items-center gap-2 text-center">
                    {rank?.badge ? (
                      <img
                        src={rank.badge}
                        alt={rank?.name || t('Unranked')}
                        className="size-24 object-contain"
                      />
                    ) : (
                      <div className="flex size-24 items-center justify-center rounded-full bg-pm-surface-2 text-3xl">
                        🏅
                      </div>
                    )}
                    <p className="text-lg font-bold text-card-foreground">
                      {rank?.name || t('Unranked')}
                    </p>
                  </div>

                  <div className="mb-4">
                    <div className="mb-1.5 flex items-center justify-between text-xs text-black/50 dark:text-white/50">
                      <span>{t('Points required')}</span>
                      <span>{rank?.requirement?.toLocaleString()}</span>
                    </div>
                    <Progress
                      value={
                        rank && rank?.requirement !== 0
                          ? Math.min((userPoints / rank.requirement) * 100, 100)
                          : 100
                      }
                      variant="success"
                      size="sm"
                    />
                  </div>

                  <Separator className="my-4 bg-black/6 dark:bg-white/6" />

                  <div>
                    <p className="mb-1 text-xs text-black/40 dark:text-white/40">
                      {t('Rank Bonus')}
                    </p>
                    <p className="text-xl font-bold text-pm-yes">
                      {format(rank?.bonus || 0)}
                    </p>
                    {rank?.description && (
                      <p className="mt-1 text-xs text-black/50 dark:text-white/50">
                        {rank.description}
                      </p>
                    )}
                  </div>
                </Card>
              ))}
        </div>
      </div>
    </div>
  );
};

Rankings.title = 'Rankings';

export default Rankings;