'use client'
import React, { useMemo } from 'react'
import { useRouter } from 'next/navigation'
import { ArrowLeft } from 'iconsax-react'
import Image from 'next/image'
import { useGetFavorites } from './hooks/useFavoriteData'
import MenuItem from '@/components/listview/MenuItem'
import MenuItemRenderer from '@/components/listview/MenuItemRenderer'
import VerticalScrollView from '@/components/listview/VerticalScrollView'
import type { Favorite } from './types/Types'
import type { Food } from '@/app/[name]/(Main)/types/Types'

function FavoritePage() {
    const router = useRouter()
    const { data: favoritesData, isLoading } = useGetFavorites()

    const favorites = useMemo(() => {
        return favoritesData?.data || []
    }, [favoritesData?.data])

    const foodItems = useMemo(() => {
        return favorites.map((favorite: Favorite) => {
            const favoriteFood = favorite.food
            // تبدیل FavoriteFood به Food برای استفاده در MenuItem
            const food: Food = {
                id: favoriteFood.id,
                category: favoriteFood.category,
                title: favoriteFood.title,
                desc: favoriteFood.desc,
                content: favoriteFood.content,
                price: favoriteFood.price,
                prepareTime: favoriteFood.prepareTime ?? 0,
                isActive: favoriteFood.isActive,
                images: favoriteFood.images,
                inPlaceServe: favoriteFood.inPlaceServe,
                pickupServe: favoriteFood.pickupServe,
                discount: favoriteFood.discount,
                isSpecialOffer: favoriteFood.isSpecialOffer,
            }
            return food
        })
    }, [favorites])

    return (
        <div className='overflow-y-auto h-full noscrollbar flex flex-col'>
            <div className='grid grid-cols-3 items-center'>
                <span></span>
                <h1 className='text-sm2 place-self-center font-medium'>علاقه‌مندی‌ها</h1>
                <ArrowLeft
                    className='cursor-pointer place-self-end'
                    size='24'
                    color='currentColor'
                    onClick={() => { router.back() }}
                />
            </div>

            <div className="mt-8 flex-1 h-full">
                {isLoading ? (
                    <div className='flex flex-col items-center justify-center gap-2 py-12 text-sm2 text-muted-foreground'>
                        <span className='h-4 w-4 animate-spin rounded-full border border-dashed border-foreground border-t-transparent'></span>
                        <p>در حال دریافت علاقه‌مندی‌ها...</p>
                    </div>
                ) : foodItems.length === 0 ? (
                    <div className='flex flex-col items-center justify-center gap-4 h-full'>
                        <Image
                            src='/assets/images/favorite.png'
                            alt='favorite'
                            width={120}
                            height={120}
                            className='object-contain'
                        />
                        <div className='flex flex-col items-center gap-2 text-sm2 text-muted-foreground'>
                            <p>شما هیچ مورد علاقه‌مندی ثبت نکرده‌اید</p>
                            <p className='text-xs'>
                                برای افزودن غذا به علاقه‌مندی‌ها، به صفحه جزئیات غذا بروید
                            </p>
                        </div>
                    </div>
                ) : (
                    <VerticalScrollView className="overflow-y-auto h-full">
                        {foodItems.map((food) => (
                            <MenuItemRenderer key={food.id}>
                                <MenuItem food={food} />
                            </MenuItemRenderer>
                        ))}
                    </VerticalScrollView>
                )}
            </div>
        </div>
    )
}

export default FavoritePage