'use client';

import Button from '@/components/button/PrimaryButton';
import { ef } from '@/lib/helpers/utfNumbers';
import { CardTick, CloseCircle } from 'iconsax-react';
import { useParams, useRouter } from 'next/navigation';
import React, { useEffect, useState } from 'react'
import { useVerify } from '../hooks/useVerifyData';
import { toast } from '@/components/Toast';
import { VerifyData } from '../types/Types';

type Props = object

const formatDate = (dateString: string): string => {
    const date = new Date(dateString);
    return date.toLocaleDateString('fa-IR', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit'
    });
};

const formatTime = (dateString: string): string => {
    const date = new Date(dateString);
    return date.toLocaleTimeString('fa-IR', {
        hour: '2-digit',
        minute: '2-digit'
    });
};

const formatPrice = (value: number): string => {
    return value.toLocaleString('fa-IR');
};

export default function VerifyIndex({ }: Props) {
    const router = useRouter();
    const params = useParams();
    const name = params.name as string;

    const urlparams = new URLSearchParams(window.location.search);
    const authority = urlparams.get('Authority');
    const id = params.id

    const [verifyData, setVerifyData] = useState<VerifyData | null>(null);
    const [isError, setIsError] = useState(false);

    const { mutate: verify } = useVerify();

    useEffect(() => {
        if (authority && id) {
            verify({ authority: authority as string, orderId: id as string }, {
                onSuccess: (data) => {
                    toast('پرداخت موفقیت آمیز بود', 'success');
                    setVerifyData(data.data);
                    setIsError(false);
                },
                onError: () => {
                    toast('پرداخت ناموفق بوده', 'error');
                    setIsError(true);
                }
            });
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [authority, id]);

    const amount = verifyData?.amount || verifyData?.order?.total || 0;
    const paidAt = verifyData?.paidAt || '';
    const cardPan = verifyData?.verifyResponse?.data?.card_pan || '';
    const gateway = verifyData?.order?.paymentMethod?.description || verifyData?.gateway || '';
    const referenceId = verifyData?.referenceId || '';

    const formattedCardPan = cardPan || '';

    return (
        <div className='h-full bg-inherit relative flex flex-col lg:gap-4'>
            <div className='flex-1 flex flex-col items-center justify-center'>
                <div className='bg-container py-5 px-2 rounded-container shadow-lg w-full'>
                    <div className={`items-center gap-2 rounded-2xl h-35 flex flex-col justify-center ${isError ? 'bg-red-50' : 'bg-gray-50'}`}>
                        {isError ? (
                            <CloseCircle className='size-10 stroke-red-500' variant='TwoTone' />
                        ) : (
                            <CardTick className='size-10 stroke-primary' variant='TwoTone' />
                        )}
                        <h5 className={`font-bold text-sm ${isError ? 'text-red-600' : ''}`}>
                            {isError ? 'پرداخت ناموفق' : 'پرداخت موفق'}
                        </h5>
                        {!isError && verifyData && (
                            <p className='text-sm mt-1 leading-5 text-disabled-text'>
                                {ef(`مبلغ: ${formatPrice(amount)} تومان`)}
                            </p>
                        )}
                    </div>

                    {!isError && (
                        <div className='mt-5 w-full text-sm2'>
                            {paidAt && (
                                <>
                                    <div className='flex justify-between items-center'>
                                        <div className='font-medium text-disabled-text'>تاریخ:</div>
                                        <div className='font-medium'>{ef(formatDate(paidAt))}</div>
                                    </div>
                                    <hr className='border border-border my-3' />
                                </>
                            )}

                            {paidAt && (
                                <>
                                    <div className='flex justify-between items-center'>
                                        <div className='text-disabled-text'>ساعت:</div>
                                        <div className=''>{ef(formatTime(paidAt))}</div>
                                    </div>
                                    <hr className='border border-border my-3' />
                                </>
                            )}

                            {cardPan && (
                                <>
                                    <div className='flex justify-between items-center'>
                                        <div className='text-disabled-text'>از کارت:</div>
                                        <div className=''>{ef(formattedCardPan)}</div>
                                    </div>
                                    <hr className='border border-border my-3' />
                                </>
                            )}

                            {gateway && (
                                <>
                                    <div className='flex justify-between items-center'>
                                        <div className='text-disabled-text'>درگاه پرداخت:</div>
                                        <div className=''>{gateway}</div>
                                    </div>
                                    <hr className='border border-border my-3' />
                                </>
                            )}

                            {referenceId && (
                                <>
                                    <div className='flex justify-between items-center'>
                                        <div className='text-disabled-text'>شماره پیگیری:</div>
                                        <div className=''>{ef(referenceId)}</div>
                                    </div>
                                    <hr className='border border-border my-3' />
                                </>
                            )}
                        </div>
                    )}

                    <Button
                        className='mt-12'
                        onClick={() => router.push(`/${name}`)}
                    >
                        بازگشت
                    </Button>
                </div>
            </div>
        </div>
    )
}