import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Separator } from '@/components/ui/separator';
import { Skeleton } from '@/components/ui/skeleton';
import { useCurrency } from '@/hooks/use-currency';
import { useApiSWR } from '@/hooks/useSWR';
import { TMarketCategory } from '@/types/market.types';
import { router } from '@inertiajs/react';
import {
  ArrowUpRightIcon,
  CaretRightIcon,
  FireIcon,
} from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';

interface HotMarketsProps {
  title?: string;
}

export default function HotMarkets({ title }: HotMarketsProps = {}) {
  const { t } = useTranslation();
  const { format } = useCurrency();
  const { data, isLoading } = useApiSWR<TMarketCategory[]>(
    '/markets/hot?limit=5',
  );

  const hot = data ?? [];

  if (!isLoading && hot.length === 0) return null;

  if (isLoading) {
    return (
      <Card className="col-span-6 h-full gap-0 overflow-hidden rounded-2xl p-0 py-0 lg:col-span-2">
        <div className="p-4">
          <div className="mb-3 flex items-center justify-between">
            <div className="flex items-center gap-2">
              <Skeleton className="size-4 rounded" />
              <Skeleton className="h-4 w-24" />
            </div>
            <Skeleton className="h-4 w-12" />
          </div>
          <div className="flex flex-col gap-1">
            {[1, 2, 3, 4, 5].map((i) => (
              <div key={i} className="flex items-center gap-3 py-2">
                <Skeleton className="h-3 w-3 shrink-0" />
                <Skeleton className="h-3.5 flex-1" />
                <Skeleton className="h-3 w-10 shrink-0" />
              </div>
            ))}
          </div>
          <Skeleton className="mt-4 h-9 w-full rounded-full" />
        </div>
      </Card>
    );
  }

  return (
    <Card className="col-span-6 gap-0 overflow-hidden rounded-2xl border border-[#daeaf9] p-0 py-0 shadow-sm md:col-span-2 dark:border-transparent">
      <div className="p-4">
        <div className="mb-3 flex items-center justify-between">
          <h3 className="flex items-center gap-2 text-base font-bold text-card-foreground">
            <FireIcon weight="bold" className="size-4" />
            {title ?? t('Hot Markets')}
          </h3>
          <Button
            variant="link"
            size="sm"
            className="text-white"
            onClick={() => router.visit('/markets')}
          >
            {t('See all')}
            <CaretRightIcon weight="bold" className="size-3" />
          </Button>
        </div>
        <div className="flex flex-col">
          {hot.map((c, i) => (
            <div key={c.id}>
              {i > 0 && <Separator className="bg-black/6 dark:bg-white/6" />}
              <div
                className="flex cursor-pointer items-center gap-3 py-2.5"
                onClick={() => router.visit(`/markets?category_id=${c.id}`)}
              >
                <span className="w-3 shrink-0 text-xs font-semibold text-black/30 dark:text-white/30">
                  {i + 1}
                </span>
                <span className="flex-1 truncate text-sm font-semibold text-card-foreground">
                  {c.name}
                </span>
                <span className="shrink-0 text-xs text-black/40 dark:text-white/40">
                  {format(c.total_volume ?? 0)}
                </span>
                <FireIcon
                  weight="fill"
                  className="size-3.5 shrink-0 text-warning"
                />
              </div>
            </div>
          ))}
        </div>
        <Button
          onClick={() => router.visit('/markets')}
          variant="outline"
          className="mt-4 w-full justify-between rounded-full border-2 border-black/10 dark:border-white/10 dark:text-white/90 dark:hover:border-white/20"
        >
          {t('Explore all markets')}
          <ArrowUpRightIcon weight="bold" className="size-4" />
        </Button>
      </div>
    </Card>
  );
}