'use client';

import { product_api } from '@/shared/config/api/product/api';
import { useRouter } from '@/shared/config/i18n/navigation';
import { Button } from '@/shared/ui/button';
import { Card } from '@/shared/ui/card';
import { Skeleton } from '@/shared/ui/skeleton';
import { ProductCard } from '@/widgets/categories/ui/product-card';
import { useQuery } from '@tanstack/react-query';
import { AxiosError } from 'axios';
import { Heart } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { useEffect } from 'react';

export default function Favourite() {
  const router = useRouter();
  const t = useTranslations();
  const {
    data: favourite,
    isLoading,
    error,
  } = useQuery({
    queryKey: ['favourite_product'],
    queryFn: () => product_api.favouuriteProduct(),
    select(data) {
      return data.data;
    },
  });

  useEffect(() => {
    if ((error as AxiosError)?.status === 403) {
      router.replace('/auth');
    } else if ((error as AxiosError)?.status === 401) {
      router.replace('/auth');
    }
  }, [error]);

  if (favourite && favourite.results.length === 0) {
    return (
      <div className="min-h-screen py-12">
        <div className="container mx-auto px-4">
          <div className="flex flex-col items-center justify-center py-20">
            <div className="w-32 h-32 bg-slate-100 rounded-full flex items-center justify-center mb-6">
              <Heart className="w-16 h-16 text-slate-300" />
            </div>
            <h2 className="text-2xl font-bold text-slate-800 mb-2">
              {t("Sevimlilar bo'sh")}
            </h2>
            <p className="text-slate-500 text-center max-w-md mb-8">
              {t(`Hali hech qanday mahsulotni sevimlilarga qo'shmadingiz`)}
            </p>
            <Button
              className="bg-blue-600 text-white px-8 py-3 rounded-xl hover:bg-blue-700"
              onClick={() => router.push('/')}
            >
              {t('Xarid qilishni boshlash')}
            </Button>
          </div>
        </div>
      </div>
    );
  }

  if (isLoading) {
    return (
      <div className="custom-container">
        <div className="mb-8">
          <Skeleton className="h-8 w-64 mb-2" />
          <Skeleton className="h-4 w-32" />
        </div>

        {/* Grid */}
        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
          {Array.from({ length: 10 }).map((_, i) => (
            <div key={i} className="rounded-xl border p-3 space-y-3">
              <Skeleton className="h-40 w-full rounded-lg" />
              <Skeleton className="h-4 w-[80%]" />
              <Skeleton className="h-4 w-[60%]" />
            </div>
          ))}
        </div>
      </div>
    );
  }

  return (
    <div className="custom-container">
      <>
        <div className="mb-8">
          <div>
            <h1 className="text-3xl font-bold text-slate-800 mb-2">
              {t('Sevimli mahsulotlar')}
            </h1>
            <p className="text-slate-500">
              {favourite && favourite.total} {t('ta mahsulot')}
            </p>
          </div>
        </div>

        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4 mb-30">
          {isLoading &&
            Array.from({ length: 6 }).map((_, index) => (
              <Card className="p-3 space-y-3 rounded-xl" key={index}>
                <Skeleton className="h-40 sm:h-48 md:h-56 w-full rounded-lg" />
                <Skeleton className="h-4 w-3/4" />
                <Skeleton className="h-4 w-1/2" />
                <Skeleton className="h-10 w-full rounded-lg" />
              </Card>
            ))}
          {favourite &&
            !isLoading &&
            favourite?.results
              .filter((product) => product.is_active)
              .map((product) => (
                <ProductCard key={product.id} product={product} />
              ))}
        </div>
      </>
    </div>
  );
}