"use client";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";

import { useUserSelection } from "@/store/user-payment";

import { cn } from "@/lib/utils";
import { toast } from "@/hooks/use-toast";
import { CheckCircle, TriangleAlert } from "lucide-react";
import getToken from "@/utils/get-token";

import MyFatorah from "@/assets/used-images/myfatora.png";
import MyFatorahCards from "@/assets/used-images/myfatoorah-cards.png";
import Tabby from "@/assets/used-images/tabby.png";
import TabbyCards from "@/assets/used-images/tabby-cards.png";
import JeelPay from '@/assets/used-images/jeelpay.png';
import JeelPayCards from '@/assets/used-images/jeel-cards.png';
import Tamara from '@/assets/used-images/tamara.svg';

import PaymentCourseBox from "./payment-course-box";
import { useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useLanguage } from "@/store/language-context";
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
import { PrivacyInPayment } from "./privacy";

const PaymentWay = ({ page }) => {
    const navigate = useNavigate();
    const { t } = useTranslation();
    const { id } = useParams();
    const { URL } = useLanguage();
    const { setSelectedPayment, selectedPayment, rowDetails, setRowDetails } = useUserSelection();

    const [privacyChecked, setPrivacyChecked] = useState(false);

    const { data: course } = useQuery({
        queryKey: ['payment-data', id, page, URL],
        queryFn: async () => {
            const response = await axios.get(`${URL}/courses/${id}`);
            if (response.status !== 200) throw new Error(t('custom.err'));
            return response?.data?.data?.data ?? response?.data?.data;
        }
    });

    const { data: coursePolicies, } = useQuery({
        queryKey: ['course-policies', URL],
        queryFn: async () => {
            try {
                const response = await axios.get(`${URL}/course-policy`);
                if (response.status !== 200) throw new Error(t('custom.err'));
                const data = response?.data?.data;
                return data;
            } catch (error) {
                throw new Error(t('custom.err'));
            }
        },
        staleTime: 10 * 60 * 1000,
        gcTime: 10 * 60 * 1000
    });

    const handlePaymentSelect = (way) => {
        const today = new Date();
        const dueDate = new Date();
        dueDate.setMonth(today.getMonth() + 1); // Set due date to next month

        setSelectedPayment({
            ...selectedPayment,
            payment: way.value,
            paymentInAr: way.title,
            dueDate: dueDate.toISOString().split('T')[0],
            monthlyPayment: way.value === 'tabby' ? '500' : '1000' // Example values
        });

        // Update rowDetails with installmentId if needed
        if (!rowDetails.installmentId) {
            setRowDetails({
                ...rowDetails,
                installmentId: `INST-${Date.now()}` // Generate a unique ID
            });
        }
    };

    if (typeof document !== "undefined") document.title = page === 'offers' ?
        `${t('routes.offers')} | ${t('routes.payment-way')}` :
        `${t('routes.training-courses')} | ${t('routes.payment-way')}`;

    const getSubjects = (key: string) => {
        const subjects = t(key, { returnObjects: true });
        return Array.isArray(subjects) ? subjects : [];
    };

    const ways = [
        {
            title: t('training-courses.bank-transfer.title'),
            subjects: getSubjects('training-courses.bank-transfer.subjects'),
            value: 'bank-transfer'
        },
        {
            title: t('training-courses.fatoorah.title'),
            subjects: getSubjects('training-courses.fatoorah.subjects'),
            wayImg: MyFatorah,
            waySubjectImgs: MyFatorahCards,
            value: 'fatoorah'
        },
        {
            title: t('training-courses.tabby.title'),
            subjects: getSubjects('training-courses.tabby.subjects'),
            wayImg: Tabby,
            waySubjectImgs: TabbyCards,
            value: 'tabby'
        },
        {
            title: t('training-courses.jeel.title'),
            subjects: getSubjects('training-courses.jeel.subjects'),
            wayImg: JeelPay,
            waySubjectImgs: JeelPayCards,
            value: 'jeel'
        },
        // {
        //     title: t('training-courses.tamara.title'),
        //     subjects: getSubjects('training-courses.tabby.subjects'),
        //     wayImg: Tamara,
        //     waySubjectImgs: TabbyCards,
        //     value: 'tamara'
        // },
    ] as any[];

    useEffect(() => {
        const seeToken = getToken();
        if (!seeToken) {
            const timeout = setTimeout(() => {
                navigate('/login');
            }, 5000);

            return () => clearTimeout(timeout);
        }
    }, []);

    useEffect(() => {
        const toPreventRefresh = (e) => {
            const confirmRefresh = window.confirm(
                t('custom.sure')
            );
            if (confirmRefresh) {
                navigate(`/${page}/${id}`);
            } else {
                e.preventDefault();
            }
        };
        if (rowDetails.courseId === '') {
            navigate(`/${page}/${id}`);
        }
        window.addEventListener('beforeunload', toPreventRefresh);
        return () => {
            window.removeEventListener('beforeunload', toPreventRefresh);
        };
    }, [rowDetails.courseId]);

    const see = () => {
        if (selectedPayment.payment === '') {
            toast({
                variant: 'warning',
                title: (
                    <div className="flex items-center gap-1">
                        <span>
                            <TriangleAlert />
                        </span>
                        <span>
                            {t('training-courses.choose-way')}
                        </span>
                    </div>
                )
            });
        } else {
            navigate('../card')
        }
    };

    return (
        <>
            <div className="border rounded-xl p-2 lg:pb-14 z-50 h-full relative grid lg:grid-cols-2 gap-4">
                <div className="lg:sticky lg:top-8 h-auto w-full">
                    <PaymentCourseBox
                        course={course}
                        selectedPayment={selectedPayment}
                        rowDetails={rowDetails}
                        discountPercentage={""}
                        discount={""}
                        page={page}
                        className="lg:sticky lg:top-8"
                        dueDate={selectedPayment?.dueDate}
                        monthlyPayment={selectedPayment?.monthlyPayment}
                        installmentId={rowDetails?.installmentId}
                    />
                </div>
                <section className="grid gap-2">
                    {
                        ways.map((way, i) => (
                            <div key={i} className={cn("p-3 border rounded-md cursor-pointer hover:bg-gray-100 transition-all delay-100 ease-in-out hover:ring-1 hover:ring-slate-100",
                            )}
                                onClick={() => handlePaymentSelect(way)}
                            >
                                <div className="flex justify-between items-center gap-2">
                                    <div className="flex items-center gap-2">
                                        <input
                                            type="radio"
                                            name="payment-way"
                                            id={way.value}
                                            value={way.value}
                                            onChange={(e) => setSelectedPayment((prev) => ({
                                                ...prev,
                                                payment: e.target.value,
                                                paymentInAr: way.title
                                            }))}
                                            checked={way.value === selectedPayment.payment}
                                        />
                                        <span>
                                            {way.title}
                                        </span>
                                    </div>
                                    <div>
                                        {way.wayImg && <img src={way.wayImg} alt={way.title} className="w-24" />}
                                    </div>
                                </div>
                                <ul className="my-2">
                                    {Array.isArray(way.subjects) && way.subjects?.map((subject, i: number) => (
                                        <li key={i} className="flex items-start text-start gap-2 my-1">
                                            <span>
                                                <CheckCircle size={12} className="mt-1" />
                                            </span>
                                            <span className="text-sm text-start">
                                                {subject}
                                            </span>
                                        </li>
                                    ))}
                                </ul>
                                {way.waySubjectImgs &&
                                    <div className="mt-4">
                                        <img src={way.waySubjectImgs} alt={way.title} className={`${(
                                            way.title === t('training-courses.tabby.title') ||
                                            way.title === t('training-courses.tamara.title')) ? 'w-24' : 'w-36'}`} />
                                    </div>}
                            </div>
                        ))
                    }
                </section>
                <div className="flex items-center justify-between my-3 lg:absolute end-4 bottom-0 lg:w-[47%]">
                    <div className="flex items-center gap-2">
                        <Checkbox
                            onCheckedChange={(c: boolean) => setPrivacyChecked(c)}
                            id="policy"
                            className="data-[state=checked]:bg-secondary-tw data-[state=checked]:text-white rounded"
                        />

                        <Label htmlFor="policy">
                            {t('contact.i-agree')} {" "}
                            <PrivacyInPayment 
                                policies={course?.courseRequirements && course.courseRequirements.length > 0 
                                    ? course.courseRequirements 
                                    : coursePolicies
                                } 
                            />
                        </Label>
                    </div>
                    <button
                        className={`bg-primary-tw text-white py-1 px-5 ${(selectedPayment.payment === '') || (!privacyChecked) ? 'cursor-not-allowed opacity-65' : 'cursor-pointer opacity-100'} rounded-lg`}
                        onClick={see}
                    >
                        {t('custom.confirm')}
                    </button>
                </div>
            </div>
        </>
    );
}
export default PaymentWay;