import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Separator } from '@/components/ui/separator';
import { useInitials } from '@/hooks/use-initials';
import { useApiSWR } from '@/hooks/useSWR';
import { cn } from '@/lib/utils';
import { TMarketCategory } from '@/types/market.types';
import { getImageUrl } from '@/utils/getImageUrl';
import { router, usePage } from '@inertiajs/react';
import { CaretRightIcon, TagIcon, TrendUpIcon } from '@phosphor-icons/react';
import { useTranslation } from 'react-i18next';

export default function CategoryNav() {
  const { t } = useTranslation();
  const { url } = usePage();
  const { data: categories } = useApiSWR<TMarketCategory[]>(
    '/markets/categories',
  );

  const getInitials = useInitials();

  const urlParams = new URLSearchParams(url.split('?')[1] ?? '');
  const activeCategoryId = urlParams.get('category_id');
  const isTrendingActive = /^\/markets(\?|$)/.test(url) && !activeCategoryId;

  return (
    <div className="shrink-0 border-b border-[#daeaf9] bg-white transition-colors dark:border-white/5 dark:bg-background">
      <div className="container px-1.5">
        <div className="no-scrollbar flex h-11 items-center gap-0.5 overflow-x-auto scroll-smooth px-4 md:px-0">
          <Button
            variant="ghost"
            size="sm"
            onClick={() => router.visit('/markets')}
            className={`flex shrink-0 items-center gap-2 rounded-lg ${
              isTrendingActive
                ? 'font-semibold text-black opacity-100 hover:opacity-100 dark:text-white'
                : 'font-medium text-black/40 hover:text-black/70 hover:opacity-100 dark:text-white/40 dark:hover:text-white/70'
            }`}
          >
            <TrendUpIcon weight="bold" className="size-3.5 text-primary" />
            {t('Trending')}
          </Button>

          <Separator
            orientation="vertical"
            className="mx-2 h-4 bg-black/20 dark:bg-white/20"
          />

          {(categories ?? []).map((cat) => {
            const isActive = activeCategoryId === String(cat.id);
            return (
              <Button
                key={cat.id}
                variant="ghost"
                size="sm"
                onClick={() => router.visit(`/markets?category_id=${cat.id}`)}
                className={cn(
                  'group shrink-0 gap-1 rounded-lg whitespace-nowrap',
                  isActive
                    ? 'font-semibold text-black opacity-100 hover:opacity-100 dark:text-white'
                    : 'font-medium text-black/40 hover:text-black/70 hover:opacity-100 dark:text-white/40 dark:hover:text-white/70',
                )}
              >
                <span
                  className={cn(
                    'overflow-hidden transition-all duration-200',
                    isActive
                      ? 'max-w-4 opacity-100'
                      : 'max-w-0 opacity-0 group-hover:max-w-4 group-hover:opacity-100',
                  )}
                >
                  {cat.icon ? (
                    <Avatar className="size-4 overflow-hidden rounded-full">
                      <AvatarImage
                        src={getImageUrl(cat.icon ?? undefined)}
                        alt={cat.name}
                      />
                      <AvatarFallback className="text-sm font-semibold">
                        {getInitials(cat.name)}
                      </AvatarFallback>
                    </Avatar>
                  ) : (
                    <TagIcon weight="bold" className="size-3" />
                  )}
                </span>
                {cat.name}
              </Button>
            );
          })}

          <Button
            variant="ghost"
            size="sm"
            onClick={() => router.visit('/markets')}
            className="flex shrink-0 items-center gap-0.5 rounded-lg font-medium whitespace-nowrap text-black/40 hover:text-black/70 hover:opacity-100 dark:text-white/40 dark:hover:text-white/70"
          >
            {t('More')}
            <CaretRightIcon weight="bold" className="size-3 rotate-90" />
          </Button>
        </div>
      </div>
    </div>
  );
}