"use client";
import axios from "axios";
import React from "react";
import { useParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";
import { useLanguage } from "@/store/language-context";
import { useTranslation } from "react-i18next";

import { RowDetails, SelectedPayment } from "@/types";

import { CalendarCheck2, Clock, CreditCard, HandCoins, Hourglass, MapPinIcon, NotebookIcon, Pin, Receipt, SaudiRiyal } from "lucide-react";

import { cn } from "@/lib/utils";
import Image from "@/ui/image";
import TrainingCourseImg from "@/assets/used-images/defaultImg.jpeg";

type PaymentCourseBoxProps = {
    selectedPayment: SelectedPayment,
    rowDetails: RowDetails,
    discountPercentage: string | number,
    discount: string | number,
    page: "offers" | "training-courses",
    className?: string,
    imageClassName?: string,
    dueDate?: string,
    monthlyPayment?: string | number,
    installmentId?: string | number,
    installmentCount?: string | number,
    currentInstallmentNumber?: string | number,
    fromProfile?: boolean,
    course: any
};

const PaymentCourseBox = React.memo(({
    course,
    selectedPayment, rowDetails,
    discountPercentage, discount, page, className, imageClassName,
    dueDate, monthlyPayment, installmentId, installmentCount, currentInstallmentNumber, fromProfile = false
}: PaymentCourseBoxProps) => {
    const { t } = useTranslation();
    return (
        <div className="rounded-xl h-full">
            <div className={cn("bg-gray-200 grid lg:grid-cols-2 place-items-start gap-2 p-2 rounded-xl h-fit", className)}>
                <div className="relative flex items-center justify-center w-full p-1">
                    <Image
                        alt={course?.title}
                        src={course?.category?.image || TrainingCourseImg}
                        className={cn('w-full h-72 object-cover relative z-50 rounded-md lg:w-full border-4 border-secondary-tw',
                            imageClassName
                        )}
                    />
                </div>
                <div className="space-y-1 px-1 w-full">
                    {/* title */}
                    <div>
                        <p className="text-primary-tw text-start text-lg md:max-w-96 ">
                            {course?.title}
                        </p>
                    </div>

                    {/* subject.category.title */}
                    {
                        course?.subject?.category?.title &&
                        <div className='flex items-center gap-2'>
                            <span className="w-5">
                                <Pin size={16} color='#7A7A7A' />
                            </span>
                            <p className=' text-semi-gray text-sm'>
                                {course?.subject?.category?.title}
                            </p>
                        </div>
                    }

                    {/* subject.title */}
                    {
                        course?.subject?.title &&
                        <div className='flex items-center gap-2'>
                            <span className="w-5">
                                <NotebookIcon size={16} color='#7A7A7A' />
                            </span>
                            <p className=' text-semi-gray text-sm'>
                                {course?.subject?.title}
                            </p>
                        </div>
                    }

                    {/* location */}
                    {
                        selectedPayment.location &&
                        <div className='flex items-center gap-2'>
                            <span className="w-5">
                                <MapPinIcon size={16} color='#7A7A7A' />
                            </span>
                            <p className=' text-semi-gray text-sm'>
                                {selectedPayment.location}
                            </p>
                        </div>
                    }

                    {/* calendar & days */}
                    {
                        (selectedPayment?.startDate && selectedPayment.endDate) &&
                        <div className='flex items-center gap-2'>
                            <span className="w-5">
                                <CalendarCheck2 size={16} color='#7A7A7A' />
                            </span>
                            <div className=' text-semi-gray text-sm flex items-center gap-1'>
                                <p>
                                    {t('training-courses.from')} {selectedPayment.startDate}
                                </p>
                                <p>
                                    {t('training-courses.to')} {selectedPayment.endDate}
                                </p>
                            </div>
                        </div>
                    }

                    {/* duration */}
                    {
                        selectedPayment?.duration &&
                        <div className='flex items-center gap-2'>
                            <span className="w-5">
                                <Hourglass size={16} color='#7A7A7A' />
                            </span>
                            <p className=' text-semi-gray text-sm '>
                                <span>
                                    {t('training-courses.duration')}
                                </span>
                                <span className="!mx-1">
                                    {selectedPayment.duration}
                                </span>
                                <span>
                                    {t('training-courses.days')}
                                </span>
                            </p>
                        </div>
                    }

                    {/* price */}
                    <div className="!my-4 flex items-center !gap-2 *:bg-primary-tw *:text-white *:flex *:items-center *:!gap-2">
                        {
                            ((Number(discountPercentage) !== 0) || (Number(discount) !== 0)) &&
                            <del className='px-3 h-6 rounded-lg w-fit text-nowrap'>
                                <span>
                                    {rowDetails?.priceBeforeDiscount || ""}
                                </span>
                                <span>
                                    {selectedPayment?.currencyTitle &&
                                        <SaudiRiyal size={16} />
                                    }
                                </span>
                            </del>
                        }
                        <p className="px-4 h-6 !py-0 rounded-lg w-fit text-nowrap">
                            {
                                page === 'offers' ?
                                    <span>
                                        {rowDetails?.courseOfferPrice || ""}
                                    </span>
                                    :
                                    // discountPercentage ?
                                    //     <>
                                    //         {Number(rowDetails?.totalPrice) - (Number(rowDetails?.totalPrice) * (Number(discountPercentage) / 100))}
                                    //     </>
                                    rowDetails?.courseFeePrice ?
                                        Number(rowDetails?.courseFeePrice)?.toFixed(2)
                                        :
                                        fromProfile && installmentId ?
                                            Number(rowDetails?.thisRowPrice || monthlyPayment || 0)?.toFixed(2)
                                            :
                                            Number(rowDetails?.totalPrice)?.toFixed(2)
                            }
                            <SaudiRiyal size={16} />
                        </p>
                    </div>

                    {/* Installment Details - Only show when paying for installments */}
                    {fromProfile && (dueDate || monthlyPayment || installmentId) && (
                        <div className="mt-2 pt-2 border-t border-gray-200 space-y-3">
                            <div className="flex items-center justify-between">
                                <h4 className="font-semibold text-lg text-primary-tw">
                                    {t("payment.installment-details")}
                                </h4>
                            </div>

                            <div className="space-y-3 bg-gray-50 p-3 rounded-lg">
                                {/* <div className="text-xs bg-blue-50 text-blue-700 px-2 py-1 rounded-md">
                                        {installmentId ? `خطة دفع ${installmentId}` : 'خطة الدفع'}
                                    </div> */}
                                {currentInstallmentNumber && (
                                    <div className='flex items-start gap-3 text-sm text-gray-700'>
                                        <span className="mt-0.5">
                                            <Receipt size={18} color='#4B5563' className="flex-shrink-0" />
                                        </span>
                                        <div className="flex-1">
                                            <p className="text-gray-500 text-xs">{t("payment.installment-number")}</p>
                                            <p className="font-medium text-gray-900">{currentInstallmentNumber}{installmentCount ? `/${installmentCount}` : ''}</p>
                                        </div>
                                    </div>
                                )}

                                {dueDate && (
                                    <div className='flex items-start gap-3 text-sm text-gray-700'>
                                        <span className="mt-0.5">
                                            <Clock size={18} color='#4B5563' className="flex-shrink-0" />
                                        </span>
                                        <div className="flex-1">
                                            <p className="text-gray-500 text-xs">{t("payment.due-date")}</p>
                                            <p className="font-medium text-gray-900">
                                                {dueDate}

                                            </p>
                                        </div>
                                    </div>
                                )}

                                {monthlyPayment && (
                                    <div className='flex items-start gap-3 text-sm text-gray-700'>
                                        <span className="mt-0.5">
                                            <CreditCard size={18} color='#4B5563' className="flex-shrink-0" />
                                        </span>
                                        <div className="flex-1">
                                            <p className="text-gray-500 text-xs">{t("payment.monthly-payment")}</p>
                                            <p className="font-medium text-gray-900 flex items-center gap-1">
                                                {Number(monthlyPayment).toLocaleString('ar-SA')}
                                                <SaudiRiyal size={16} className="inline text-gray-700" />
                                            </p>
                                        </div>
                                    </div>
                                )}
                            </div>


                        </div>
                    )}
                </div>
            </div>
        </div>
    )
});

export default PaymentCourseBox;