dmenu-plus-front/src/app/[name]/(Main)/[id]/page.tsx

'use client'

import MinusIcon from '@/components/icons/MinusIcon'
import PlusIcon from '@/components/icons/PlusIcon'
import { ef } from '@/lib/helpers/utfNumbers'
import { useCart } from '@/app/[name]/(Dialogs)/cart/hook/useCart'
import { motion } from 'framer-motion'
import { ArrowLeft, Clock, Cup, Heart, TruckTick } from 'iconsax-react'
import Image from 'next/image'
import { useParams, useRouter } from 'next/navigation'
import React, { useMemo } from 'react'
import { useGetFood } from './hooks/useFoodData'
import { useGetAbout } from '../about/hooks/useAboutData'

type Props = object

function FoodPage({ }: Props) {

    const { id } = useParams();
    const router = useRouter();
    const { data: food, isLoading } = useGetFood(id as string);
    const { data: about } = useGetAbout();
    const { items, addToCart, removeFromCart } = useCart();

    const foodId = food?.data?.id || id as string;
    const quantity = useMemo(() => {
        const item = items?.[foodId];
        if (item && typeof item === 'object' && 'quantity' in item) {
            return item.quantity || 0;
        }
        return 0;
    }, [items, foodId]);

    const handleAddToCart = () => {
        if (foodId) {
            addToCart(foodId);
        }
    };

    const handleRemoveFromCart = () => {
        if (foodId) {
            removeFromCart(foodId);
        }
    };

    if (isLoading) {
        return (
            <div className='flex items-center justify-center min-h-[400px]'>
                <p className='text-disabled-text'>در حال بارگذاری...</p>
            </div>
        );
    }

    if (!food?.data) {
        return (
            <div className='flex items-center justify-center min-h-[400px]'>
                <p className='text-disabled-text'>غذا یافت نشد</p>
            </div>
        );
    }

    const foodData = food.data;
    const foodName = foodData.title || foodData.name || foodData.foodName || '';
    const foodImage = typeof foodData.image === 'string'
        ? foodData.image
        : Array.isArray(foodData.images) && foodData.images.length > 0
            ? typeof foodData.images[0] === 'string'
                ? foodData.images[0]
                : foodData.images[0]?.url
            : '/assets/images/food-preview-hq.png';
    const categoryName = foodData.category?.title;
    const prepareTime = foodData.prepareTime || 0;
    const price = foodData.price || 0;
    const content = Array.isArray(foodData.content)
        ? foodData.content.join('، ')
        : foodData.content || foodData.desc || '';

    return (
        <div className='lg:absolute lg:top-1/2 not-lg:max-w-lg not-lg:place-self-center lg:-translate-y-1/2 xl:right-[285px] lg:left-5 lg:right-4 lg:bottom-4 not-lg:w-full not-md:-translate-y-2 pt-6 flex flex-col lg:grid grid-cols-2'>
            <div className="relative w-full h-full not-lg:bg-container rounded-2xl overflow-hidden lg:rounded-r-none lg:order-1">
                <Image
                    className='w-full object-cover h-full'
                    src={foodImage}
                    alt={foodName}
                    height={100}
                    width={100}
                    unoptimized
                    priority
                />
                <div className="absolute top-4 left-0 pe-5.5 ps-7 w-full inline-flex justify-between items-center">
                    <div className="bg-container whitespace-nowrap rounded-[34px] py-1.5 px-4 w-min text-xs text-disabled2 dark:text-disabled-text font-bold">
                        {categoryName || '-'}
                    </div>
                    <button onClick={() => router.back()} className='p-2 rounded-full bg-container/40'>
                        <ArrowLeft size={18} className='stroke-primary dark:stroke-foreground' />
                    </button>
                </div>
            </div>

            <div className="relative px-6 pt-6 pb-7.5 lg:flex lg:flex-col lg:justify-center bg-container w-full rounded-3xl overflow-hidden not-lg:-translate-y-6 lg:rounded-l-none">
                <div className="w-full inline-flex justify-between items-center">
                    <h5 className="text-base font-bold">
                        {foodName}
                    </h5>
                    <button className='p-2 bg-[#EAECF0] dark:bg-neutral-600 rounded-lg'>
                        <Heart variant='Bold' size={24} className='fill-primary dark:fill-foreground' />
                    </button>
                </div>

                <div className="mt-4 text-xs">
                    <div className='flex items-center gap-1'>
                        <Clock size={14} className='stroke-disabled-text' />
                        <span className='text-disabled-text'>
                            زمان پخت و آماده سازی: {prepareTime > 0 ? `${ef(String(prepareTime))} دقیقه` : '-'}
                        </span>
                    </div>
                    <div className='flex items-center gap-2 mt-2'>
                        <Cup size={14} className='stroke-disabled-text' />
                        <span className='text-disabled-text flex gap-1'>
                            {about?.data?.score?.purchaseScore && about?.data?.score?.purchaseAmount ? (
                                <>
                                    <div>
                                        {ef(
                                            Math.round(
                                                foodData?.price *
                                                (Number(about.data.score.purchaseScore) / Number(about.data.score.purchaseAmount))
                                            ).toLocaleString('en-US')
                                        )}
                                    </div>
                                    <span>امتیاز برای هر بار خرید</span>
                                </>
                            ) : (
                                <span>-</span>
                            )}
                        </span>
                    </div>
                    <div className='flex items-center gap-2 mt-2'>
                        <TruckTick size={14} className='stroke-disabled-text' />
                        <span className='text-disabled-text'>
                            {foodData.pickupServe ? 'ارسال با پیک' : '-'}
                        </span>
                    </div>
                </div>

                <div className="mt-4 text-xs">
                    <p>محتویات:</p>
                    <p>{content || '-'}</p>
                </div>

                <div className='mt-12 flex justify-between items-center'>
                    <span dir='ltr'>{ef(price.toLocaleString('en-US'))} T</span>
                    <motion.div
                        whileTap={{ scale: 1.05 }}
                        className="bg-background active:drop-shadow-xs max-w-[115px] rounded-md w-full h-8 inline-flex p-1 justify-between items-center gap-2 relative overflow-hidden"
                    >
                        {quantity <= 0 ? (
                            <button
                                onClick={handleAddToCart}
                                className="inline-flex w-full justify-center items-center gap-2"
                            >
                                <PlusIcon />
                                <div className="text-sm2 pt-0.5 font-normal text-foreground">
                                    افزودن
                                </div>
                            </button>
                        ) : (
                            <>
                                <button
                                    onClick={handleAddToCart}
                                    className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
                                >
                                    <PlusIcon className="text-foreground" />
                                </button>
                                <motion.div
                                    key={quantity}
                                    initial={{ scale: 1 }}
                                    animate={{ scale: [1.2, 0.95, 1] }}
                                    transition={{ duration: 0.3 }}
                                    className="text-sm2 pt-0.5 font-semibold"
                                >
                                    {quantity}
                                </motion.div>
                                <button
                                    onClick={handleRemoveFromCart}
                                    className="bg-container hover:bg-container/60 active:bg-container/30 rounded-sm p-2 transition-colors"
                                >
                                    <MinusIcon className="text-foreground" />
                                </button>
                            </>
                        )}
                    </motion.div>
                </div>
            </div>
        </div>
    )
}

export default FoodPage