'use client';

import { useParams, useRouter } from 'next/navigation';
import React from 'react';
import Button from '@/components/button/PrimaryButton';
import { Skeleton } from '@/components/ui/skeleton';
import { HandPlatter, Package } from 'lucide-react';
import AnimatedBar from '@/components/utils/AnimatedBar';
import { Clock } from 'iconsax-react';
import clsx from 'clsx';
import useToggle from '@/hooks/helpers/useToggle';
import Prompt from '@/components/utils/Prompt';
import { useCancelOrder, useGetOrderDetail } from '../../checkout/hooks/useOrderData';
import ordersTranslations from '@/locales/fa/orders.json';
import { toast } from '@/components/Toast';
import { extractErrorMessage } from '@/lib/func';
import { useQueryClient } from '@tanstack/react-query';

const getDeliveryMethodTitle = (method: string) => {
    switch (method) {
        case 'deliveryCourier':
            return 'ارسال توسط پیک رستوران';
        case 'deliveryCar':
            return 'ارسال توسط خودرو';
        case 'pickup':
            return 'تحویل حضوری';
        case 'dineIn':
            return 'سرو در محل';
        default:
            return 'روش ارسال';
    }
};

const getStatusPercentage = (status: string) => {
    switch (status) {
        case 'new':
        case 'pendingPayment':
            return 0;
        case 'paid':
        case 'confirmed':
            return 20;
        case 'preparing':
            return 40;
        case 'ready':
            return 60;
        case 'shipped':
        case 'delivering':
            return 80;
        case 'completed':
        case 'delivered':
            return 100;
        default:
            return 0;
    }
};

const getStatusText = (status: string): string => {
    const statusKey = status as keyof typeof ordersTranslations.status;
    return ordersTranslations.status[statusKey] || 'نامشخص';
};

function OrderTrackingPage() {
    const { id } = useParams();
    const router = useRouter();
    const queryClient = useQueryClient();
    const { state: cancelModal, toggle: toggleCancelModal } = useToggle();
    const { data: orderDetail, isLoading } = useGetOrderDetail(id as string);
    const { mutate: cancelOrder } = useCancelOrder();

    const onCancelOrder = (e: React.MouseEvent | null) => {
        if (!e || !id) return;

        cancelOrder(id as string, {
            onSuccess: () => {
                toggleCancelModal();
                queryClient.invalidateQueries({ queryKey: ['order-detail', id] });
                toast('سفارش با موفقیت لغو شد', 'success');
            },
            onError: (error) => {
                toast(extractErrorMessage(error), 'error');
            }
        });
    };

    return (
        <div className="fixed inset-0 bg-container flex flex-col">
            <div className='flex-1 overflow-y-auto px-4 py-6'>
                <div className='max-w-2xl mx-auto flex flex-col gap-6'>
                    {isLoading ? (
                        <>
                            <Skeleton className='h-6 w-48 mx-auto' />
                            <div className='flex flex-col gap-4'>
                                <Skeleton className='h-5 w-full' />
                                <Skeleton className='h-5 w-full' />
                                <Skeleton className='h-20 w-full' />
                                <Skeleton className='h-5 w-full' />
                            </div>
                        </>
                    ) : orderDetail?.data ? (
                        <>
                            <h1 className='text-lg font-semibold text-center'>
                                {getDeliveryMethodTitle(orderDetail.data.deliveryMethod.method)}
                            </h1>

                            <div className='flex flex-col gap-4'>
                                <div className='flex justify-between items-center py-3 border-b border-border'>
                                    <span className='text-sm text-muted-foreground'>شماره سفارش</span>
                                    <span className='text-base font-semibold'>#{orderDetail.data.orderNumber}</span>
                                </div>

                                {orderDetail.data.tableNumber && (
                                    <div className='flex justify-between items-center py-3 border-b border-border'>
                                        <span className='text-sm text-muted-foreground'>شماره میز</span>
                                        <span className='text-base font-semibold'>{orderDetail.data.tableNumber}</span>
                                    </div>
                                )}

                                {orderDetail.data.userAddress && (
                                    <div className='py-3 border-b border-border'>
                                        <div className='text-sm text-muted-foreground mb-1'>آدرس تحویل</div>
                                        <div className='text-sm'>{orderDetail.data.userAddress.address}</div>
                                    </div>
                                )}

                                <div className='py-4 bg-card rounded-lg flex flex-col gap-4'>
                                    <div className='px-4'>
                                        <div className='text-xs text-muted-foreground mb-1'>وضعیت سفارش</div>
                                        <div className='text-base font-semibold text-primary'>
                                            {getStatusText(orderDetail.data.status)}
                                        </div>
                                    </div>

                                    <div className='px-4 flex gap-2 items-center'>
                                        <HandPlatter className='text-muted-foreground' size={24} />
                                        <div className='flex-1'>
                                            <AnimatedBar percentage={getStatusPercentage(orderDetail.data.status)} />
                                        </div>
                                        <Package className='text-muted-foreground' size={24} />
                                    </div>

                                    <div className='px-4 flex gap-2 items-center text-muted-foreground'>
                                        <Clock className='stroke-current' size={20} />
                                        <span className='text-sm'>
                                            {new Date(orderDetail.data.createdAt).toLocaleDateString('fa-IR', {
                                                year: 'numeric',
                                                month: 'long',
                                                day: 'numeric',
                                                hour: '2-digit',
                                                minute: '2-digit'
                                            })}
                                        </span>
                                    </div>
                                </div>

                                <div className='flex justify-between items-center py-4 border-t border-border'>
                                    <span className='text-base font-medium'>مجموع سفارش</span>
                                    <span className='text-lg font-bold text-primary'>
                                        {orderDetail.data.total.toLocaleString('fa-IR')} تومان
                                    </span>
                                </div>
                            </div>
                        </>
                    ) : (
                        <div className='text-center text-muted-foreground py-12'>
                            اطلاعات سفارش یافت نشد
                        </div>
                    )}
                </div>
            </div>

            <div className='p-4 border-t border-border bg-container'>
                <div className='max-w-2xl mx-auto grid grid-cols-2 gap-4'>
                    <Button
                        onClick={() => router.back()}
                        type='button'>
                        بازگشت به منو
                    </Button>
                    <Button
                        type='submit'
                        onClick={toggleCancelModal}
                        className='bg-disabled! text-foreground!'
                        disabled={
                            orderDetail?.data?.status === 'cancelled' ||
                            orderDetail?.data?.status === 'delivered' ||
                            orderDetail?.data?.status === 'delivering'
                        }
                    >
                        لغو سفارش
                    </Button>
                </div>
            </div>

            <div className={clsx(
                'fixed inset-0 z-1001',
                !cancelModal && 'pointer-events-none'
            )}>
                <Prompt
                    title={'لغو سفارش'}
                    description={'آیا از درخواست خود اطمینان دارید؟'}
                    textConfirm={'بله'}
                    textCancel={'منصرف شدم'}
                    onConfirm={onCancelOrder}
                    visible={cancelModal}
                    onClick={toggleCancelModal}
                    onCancel={toggleCancelModal}
                />
            </div>
        </div>
    );
}

export default OrderTrackingPage;