"use client";
import { useToken } from "@/hooks/use-token";
import { useState } from "react";
import { BadgeCheck, Bomb, ChevronLeft, ChevronRight, TriangleAlert } from "lucide-react";
import { SwiperSlide } from "swiper/react";
import { Navigation, A11y } from "swiper/modules";

import Breadcrumb from "@/ui/breadcrumb";
import Image from "@/ui/image";
import ServiceRegisterNoAuth from "@/ui/service-no-auth";
import ServiceRegisterAuth from "@/ui/service-register-auth";

import LSServices1 from "@/assets/used-images/learning-solutions-services-1.png"
import LSServices2 from "@/assets/used-images/learning-solutions-services-2.jpg"
import LSServices3 from "@/assets/used-images/learning-solutions-services-3.jpg"
import LSServices4 from "@/assets/used-images/learning-solutions-services-4.png"
import LSServices5 from "@/assets/used-images/learning-solutions-services-5.png"
import LSServices6 from "@/assets/used-images/learning-solutions-services-6.jpg"
import LSServices7 from "@/assets/used-images/learning-solutions-services-7.jpg"
import LSServices8 from "@/assets/used-images/learning-solutions-services-8.jpg"
import LSServices9 from "@/assets/used-images/learning-solutions-services-9.jpg"
import LSServices10 from "@/assets/used-images/learning-solutions-services-10.png"
import LSServices11 from "@/assets/used-images/learning-solutions-services-11.png"
import LSServices12 from "@/assets/used-images/learning-solutions-services-12.jpg"
import LSServices13 from "@/assets/used-images/learning-solutions-services-13.jpg"
import LSServices14 from "@/assets/used-images/learning-solutions-services-14.jpg";

import IvoryLearningSolutions from "@/assets/used-images/IvoryLearningSolutions.png";

import LearningSoltions from "@/assets/used-images/learning-solutions-img.png";
import DeliveryMechanism1 from "@/assets/used-images/learning-solutions-1.png";
import DeliveryMechanism2 from "@/assets/used-images/learning-solutions-2.png";
import DeliveryMechanism3 from "@/assets/used-images/learning-solutions-3.png";
import DeliveryMechanism4 from "@/assets/used-images/learning-solutions-4.png";
import DeliveryMechanism5 from "@/assets/used-images/learning-solutions-5.png";
import DeliveryMechanism6 from "@/assets/used-images/learning-solutions-6.png";
import DeliveryMechanism7 from "@/assets/used-images/learning-solutions-7.png";
import DeliveryMechanism8 from "@/assets/used-images/learning-solutions-8.png";
import IvoryGold from "@/assets/used-icons/IvoryGold.svg";

import { useLanguage } from "@/store/language-context";
import { useTranslation } from "react-i18next";
import axios from "axios";
import { useToast } from "@/hooks/use-toast";
import Swiper from "@/ui/swiper";

const LearningSolutions = () => {
    const { URL } = useLanguage();
    const { t } = useTranslation();
    const { toast } = useToast();
    const token = useToken();

    const [noAuthSeen, setNoAuthSeen] = useState(false);
    const [packageName, setPackageName] = useState('');

    const [isLoadingPackage, setIsLoadingPackage] = useState({
        isLoading: false,
        loadingPackageName: ''
    })

    const [activeTab, setActiveTab] = useState("strong");
    const [activeService, setActiveService] = useState(1);
    const [activeMicro, setActiveMicro] = useState(1);
    const [seeFeatures, setSeeFeatures] = useState(null);

    const points = t('learning.points', { returnObjects: true });
    const services = {
        1: [
            {
                title: t('learning.service-title-1'),
                image: LSServices1
            },
            {
                title: t('learning.service-title-2'),
                image: LSServices2
            },
            {
                title: t('learning.service-title-3'),
                image: LSServices3
            }
        ],
        2: [
            {
                title: t('learning.service-title-4'),
                image: LSServices4
            },
            {
                title: t('learning.service-title-5'),
                image: LSServices5
            },
            {
                title: t('learning.service-title-6'),
                image: LSServices6
            },
            {
                title: t('learning.service-title-7'),
                image: LSServices7
            },
            {
                title: t('learning.service-title-8'),
                image: LSServices8
            },
            {
                title: t('learning.service-title-9'),
                image: LSServices9
            }
        ],
        3: [
            {
                title: t('learning.service-title-10'),
                image: LSServices10
            },
            {
                title: t('learning.service-title-11'),
                image: LSServices11
            }
        ],
        4: [
            {
                title: t('learning.service-title-12'),
                image: LSServices12
            },
            {
                title: t('learning.service-title-13'),
                image: LSServices13
            },
            {
                title: t('learning.service-title-14'),
                image: LSServices14
            }
        ]
    };
    const steps = t('learning.steps', { returnObjects: true }) as string[];
    const deliveryMechanisms = [
        {
            img: DeliveryMechanism1,
            title: t('learning.deliveryMechanisms-1.title'),
            desc: t('learning.deliveryMechanisms-1.desc'),
        },
        {
            img: DeliveryMechanism2,
            title: t('learning.deliveryMechanisms-2.title'),
            desc: t('learning.deliveryMechanisms-2.desc'),
        },
        {
            img: DeliveryMechanism3,
            title: t('learning.deliveryMechanisms-3.title'),
            desc: t('learning.deliveryMechanisms-3.desc'),
        },
        {
            img: DeliveryMechanism4,
            title: t('learning.deliveryMechanisms-4.title'),
            desc: t('learning.deliveryMechanisms-4.desc'),
        },
        {
            img: DeliveryMechanism5,
            title: t('learning.deliveryMechanisms-5.title'),
            desc: t('learning.deliveryMechanisms-5.desc'),
        },
        {
            img: DeliveryMechanism6,
            title: t('learning.deliveryMechanisms-6.title'),
            desc: t('learning.deliveryMechanisms-6.desc'),
        },
        {
            img: DeliveryMechanism7,
            title: t('learning.deliveryMechanisms-7.title'),
            desc: t('learning.deliveryMechanisms-7.desc'),
        },
        {
            img: DeliveryMechanism8,
            title: t('learning.deliveryMechanisms-8.title'),
            desc: t('learning.deliveryMechanisms-8.desc'),
        }
    ];
    const microsLearning = t('learning.microsLearning', { returnObjects: true })
    const developments = t('learning.developments', { returnObjects: true }) as any[];
    const servicePackages = t('learning.servicePackages', { returnObjects: true }) as any[];

    const subscribeInService = async (packageTitle: string) => {
        if (token) {
            setIsLoadingPackage({ isLoading: true, loadingPackageName: packageTitle })
            try {
                const response = await axios.post(`${URL}/packages`, {
                    package_name: packageTitle,
                    service_id: 6,
                }, { headers: { "Authorization": `Bearer ${token}` } });
                if (response.status === 200) {
                    toast({
                        variant: "success",
                        title: (
                            <div className="flex items-center gap-2">
                                <span>
                                    <BadgeCheck />
                                </span>
                                <p>
                                    {t('custom.done-check')}
                                </p>
                            </div>
                        ),
                        description: t('custom.done-desc')
                    });
                    // Swal.fire({
                    //     icon: 'success',
                    //     title: t('custom.done-check'),
                    //     text: `تم الاشتراك في  ${packageTitle} بنجاح`,
                    //     confirmButtonText: t('custom.accept')
                    // })
                }
            } catch (error) {
                if (error.status === 400) {
                    // Swal.fire({
                    //     icon: 'info',
                    //     title: t('custom.old-check'),
                    //     confirmButtonText: t('custom.accept')
                    // })
                    toast({
                        variant: "warning",
                        title: (
                            <div className="flex items-center gap-2">
                                <span>
                                    <TriangleAlert />
                                </span>
                                <p>
                                    {t('custom.old-check')}
                                </p>
                            </div>
                        ),
                    });
                } else {
                    toast({
                        variant: "destructive",
                        title: (
                            <div className="flex items-center gap-2">
                                <span>
                                    <Bomb size={19} />
                                </span>
                                <p>
                                    {t('custom.err-title')}
                                </p>
                            </div>
                        ),
                        description: t('custom.err')
                    });
                    // Swal.fire({
                    //     icon: 'error',
                    //     title: t('custom.err-title'),
                    //     text: t('custom.err'),
                    //     confirmButtonText: t('custom.accept')
                    // })
                }
            } finally {
                setIsLoadingPackage({ isLoading: false, loadingPackageName: '' });
            }
        } else {
            setNoAuthSeen(true);
            setPackageName(packageTitle)
        };
    };

    const swiperProps = {
        loop: true,
        slidesPerView: 3,
        spaceBetween: 10,
        breakpoints: {
            0: { slidesPerView: 1 },
            1000: { slidesPerView: 2 },
            1200: { slidesPerView: 3 }
        },
        className: "!px-0 my-8",
    };
    return (
        <>
            <Breadcrumb pages={[t('routes.services'), t('routes.learning-solutions')]} />
            {/* قسم التعلم و التطوير الداخلي */}
            <div className="layout mt-10">
                <section className="grid grid-cols-[29%_69%] max-md:grid-cols-1 gap-4">
                    <div className="w-full h-72 rounded-xl relative">
                        <Image
                            src={LearningSoltions}
                            alt={'learing solutions'}
                            className={'w-full h-full object-cover object-top rounded-xl'}
                        />
                    </div>
                    <div className="border rounded-lg p-3">
                        <h2 className="text-2xl m-2 relative text-black after:h-[2.5px] after:start-0 after:rounded-lg after:absolute after:bg-secondary-tw after:w-24 after:-bottom-2 text-start font-bold">
                            {t('routes.learning-solutions')}
                        </h2>
                        <article className="text-semi-gray text-start mt-4">
                            {t('learning.desc')}
                        </article>
                    </div>
                </section>
                <div className="bg-primary-tw z-20 py-4 px-16 rounded-lg max-lg:px-8 mt-4 mb-4 relative overflow-hidden">
                    <div className="absolute -top-12 left-5 h-full z-10 max-lg:-left-10">
                        <img src={IvoryLearningSolutions} alt={t("routes.learning-solutions")} className="w-full h-72 max-lg:h-96" />
                    </div>
                    <p className="text-xl text-center text-white">
                        {t('learning.title-1')}
                    </p>
                    <article className="text-[#D9D9D9] mt-4 text-justify" >
                        {t('learning.desc-1')}
                    </article>
                </div>
                <section>
                    <div className="flex justify-center items-center">
                        <h2 className="services-header after:w-20 after:-bottom-2 flex justify-center text-center !text-black">
                            {t('learning.title-2')}
                        </h2>
                    </div>
                    <section className="space-y-14 my-8">
                        <div className="flex justify-center items-center gap-4">
                            <button className={`border py-2 px-4 rounded-lg ${activeTab === "strong" ? 'bg-primary-tw text-white' : 'text-semi-gray'}`}
                                onClick={() => setActiveTab("strong")}>
                                {t('learning.strong-points')}
                            </button>
                            <button className={`border py-2 px-4 rounded-lg ${activeTab === "weak" ? 'bg-primary-tw text-white' : 'text-semi-gray'}`}
                                onClick={() => setActiveTab("weak")}>
                                {t('learning.weak-points')}
                            </button>
                        </div>
                        <section className="grid grid-cols-3 gap-10 justify-items-center items-center max-md:grid-cols-1 max-xl:grid-cols-2">
                            {
                                points[activeTab].map((point, i) => (
                                    <div key={i} className="border rounded-lg px-3 pb-3 pt-8 relative z-0 h-44 max-md:h-auto">
                                        <div className="flex justify-center items-center absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10">
                                            <div className="bg-secondary-tw rounded-lg px-12 py-1 text-center text-white">
                                                <p className="text-nowrap !m-0">
                                                    {point.title}
                                                </p>
                                            </div>
                                        </div>
                                        <article className="text-center my-2">
                                            {point.content}
                                        </article>
                                    </div>
                                ))
                            }
                        </section>
                    </section>
                </section>
            </div>

            {/* فى النتيجة الحلول المخصصة والشراكة الاستراتيجية */}
            <section className="bg-[#F5F5F5] pt-0 pb-4 max-lg:px-4">
                <div className="layout">
                    <div className="flex flex-col items-center gap-2">
                        <h2 className="services-header after:w-24 after:-bottom-2 text-center max-lg:text-base flex justify-center">
                            {t('learning.title-3')}
                        </h2>
                        <article className="text-semi-gray text-center" dangerouslySetInnerHTML={{ __html: t('learning.desc-3') }} />
                    </div>
                </div>
            </section>

            {/* الخدمات */}
            <div className="layout" >
                <div className="flex justify-center">
                    <h2 className="services-header after:-bottom-2 after:w-20 flex justify-center !text-black">{t('routes.services')}</h2>
                </div>
                <div className="flex flex-wrap lg:justify-center items-center gap-3 mt-4 mb-4">
                    <button className={`border py-2 px-4 rounded-lg ${activeService === 1 ? 'bg-primary-tw text-white' : 'text-semi-gray'}`}
                        onClick={() => setActiveService(1)}>
                        {t('learning.trigger-1')}
                    </button>
                    <button className={`border py-2 px-4 rounded-lg ${activeService === 2 ? 'bg-primary-tw text-white' : 'text-semi-gray'}`}
                        onClick={() => setActiveService(2)}>
                        {t('routes.training')}
                    </button>
                    <button className={`border py-2 px-4 rounded-lg ${activeService === 3 ? 'bg-primary-tw text-white' : 'text-semi-gray'}`}
                        onClick={() => setActiveService(3)}>
                        {t('learning.trigger-2')}
                    </button>
                    <button className={`border py-2 px-4 rounded-lg ${activeService === 4 ? 'bg-primary-tw text-white' : 'text-semi-gray'}`}
                        onClick={() => setActiveService(4)}>
                        {t('learning.trigger-3')}
                    </button>
                </div>

                <div className="grid grid-cols-3 gap-8 py-6 px-2 max-xl:grid-cols-2 max-lg:grid-cols-1">
                    {
                        services[activeService].map((service, i) => (
                            <div key={i} className="text-center relative flex justify-center">
                                <div className="w-full h-52">
                                    <img src={service.image} alt={service?.title} className="rounded-lg w-full h-full object-cover" />
                                </div>
                                <div className="bg-light-red absolute z-0 w-full h-full rounded-lg top-0"></div>
                                <p className="text-lg text-white absolute z-10 bottom-3 font-semibold m-0">
                                    {service.title}
                                </p>
                            </div>
                        ))
                    }
                </div>
            </div>

            {/*  خطوات حلول التعلم المتكاملة*/}
            <div className="layout">
                <div className="flex justify-center">
                    <h2 className="services-header after:-bottom-2 after:w-20 flex justify-center !text-black">
                        {t('learning.title-4')}
                    </h2>
                </div>
                <div className="grid grid-cols-4 gap-8 py-6 px-2 max-2xl:grid-cols-3 max-xl:grid-cols-2 max-lg:grid-cols-2">
                    {
                        steps?.map((step: string, i: number) => (
                            <div key={i} className="border px-2  md:px-4 py-8 rounded-lg text-center relative z-0 bg-secondary-tw">
                                <div className="size-12 grid place-items-center rounded-full border-4 border-secondary-tw bg-white z-10 absolute -top-5 -right-4 outline outline-4 outline-white">
                                    <p className="text-lg font-bold text-secondary-tw m-0">
                                        {++i}
                                    </p>
                                </div>
                                <p className="text-lg text-white">
                                    {step}
                                </p>
                            </div>
                        ))
                    }
                </div>
            </div>

            {/* الية تقديم الخدمة */}
            <div className="layout" >
                <div className="flex justify-center">
                    <h2 className="services-header after:-bottom-2 after:w-20 flex justify-center">
                        {t('learning.title-5')}
                    </h2>
                </div>
                <div className="grid grid-cols-2 gap-8 py-6  max-2xl:grid-cols-1">
                    {
                        deliveryMechanisms.map((mech, i) => (
                            <div key={i} className={`grid grid-cols-4 gap-3`}>
                                <div className={`w-full h-full rounded-lg col-span-1 max-lg:col-span-2 ${i % 4 === 0 || i % 4 === 1 ? 'order-last' : ''} relative`}>
                                    <Image
                                        src={mech.img}
                                        alt={mech.title}
                                        className={'w-full h-full object-cover rounded-lg object-center'}
                                    />
                                </div>
                                <div className="border rounded-lg md:p-3 p-1   text-start col-span-3 max-lg:col-span-2"
>
                                    <p className="text-secondary-tw sm:text-xs md:text-lg text-md">
                                        {mech.title}
                                    </p>
                                    <article className="text-common-text sm:text-xs md:text-lg text-sm mt-2">
                                        {mech.desc}
                                    </article>
                                </div>
                            </div>
                        ))
                    }
                </div>
            </div>

            {/* التعلم المصغر “ Microlearning “ */}
            <div className="bg-[#F5F5F5] px-28 !py-4 max-lg:px-4 space-y-8">
                <div className="flex flex-col gap-4 items-center">
                    <h2 className="services-header after:-bottom-2 after:w-20 flex justify-center">
                        {t('learning.title-6')}
                    </h2>
                    <article>
                        {t('learning.desc-6')}
                    </article>
                </div>
                <div className="flex justify-center items-center gap-2">
                    <button className={`py-1 px-4 rounded-lg border ${activeMicro === 1 ? 'bg-primary-tw' : 'bg-semi-gray '} text-white`}
                        onClick={() => setActiveMicro(1)}
                    >
                        {t('learning.trigger-4')}
                    </button>
                    <button className={`py-1 px-4 rounded-lg border ${activeMicro === 2 ? 'bg-primary-tw' : 'bg-semi-gray '} text-white`}
                        onClick={() => setActiveMicro(2)}
                    >
                        {t('learning.trigger-5')}
                    </button>
                </div>
                <div className="grid grid-cols-3 py-8 gap-8 max-xl:grid-cols-2 max-lg:grid-cols-1">
                    {
                        microsLearning[activeMicro].map((box, i: number) => (
                            <div className="bg-white rounded-lg relative z-0 px-3 py-8 h-44" key={i}>
                                <div className="size-12 grid place-items-center bg-secondary-tw rounded-full text-white font-bold text-zl absolute  top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 z-10 m-0">
                                    <p className="m-0">
                                        {++i}
                                    </p>
                                </div>
                                <p className="text-secondary-tw text-lg text-center">
                                    {box.title}
                                </p>
                                <p className="text-center my-2">
                                    {box.description}
                                </p>
                            </div>
                        ))
                    }
                </div>
            </div>

            {/* منهجية التطوير */}
            <div className="layout !pb-3">
                <div className="flex flex-col items-center gap-4">
                    <h2 className="services-header after:-bottom-2 after:w-20 flex justify-center">
                        {t('learning.title-7')}
                    </h2>
                    <p>
                        {t('learning.desc-7')}
                    </p>
                </div>
                <Swiper id={'dev'} showButtons props={swiperProps}>
                    {
                        developments?.map((dev, i: number) => (
                            <SwiperSlide key={i} className="!w-fit">
                                <div className="relative border rounded-lg py-4 px-3 my-4 h-48 w-[24.5rem]">
                                    <div className="absolute -top-4 lg:-right-3 px-8 bg-secondary-tw text-white rounded-lg ">
                                        <p className="m-0">{dev.title}</p>
                                    </div>
                                    <p className="text-start">
                                        {dev.description}
                                    </p>
                                </div>
                            </SwiperSlide>
                        ))
                    }
                </Swiper>
            </div>

            {/* حزم الخدمات */}
            <div className="layout">
                <div className="flex justify-center mt-4 mb-4">
                    <h2 className="services-header after:-bottom-2 after:w-20 flex justify-center">
                        {t('learning.title-8')}
                    </h2>
                </div>
                <section className="grid grid-cols-2 gap-8 max-lg:grid-cols-1">
                    {
                        servicePackages?.map((pack, i: number) => (
                            <div key={i} className="border rounded-lg pt-4 pb-10 space-y-3 relative h-60 px-4">
                                {
                                    seeFeatures === i
                                        ?
                                        <ul className="space-y-2">
                                            {pack.features.map((feature: string, iFeature: number) => (
                                                <li key={iFeature} className={`text-start max-lg:text-sm flex items-center gap-2 text-secondary-tw px-3`}>
                                                    <span>
                                                        <img src={IvoryGold} alt="" />
                                                    </span>
                                                    <span>
                                                        {feature}
                                                    </span>
                                                </li>
                                            ))}
                                        </ul>
                                        :
                                        <>
                                            <p className="text-secondary-tw text-lg">
                                                {pack.title}
                                            </p>
                                            <p className="!px-2">
                                                {pack.description}
                                            </p>
                                        </>
                                }
                                <div className="absolute -bottom-4 flex justify-center items-center gap-2 w-full">
                                    <button className="border bg-primary-tw text-white py-1 px-4 rounded-lg"
                                        onClick={() => setSeeFeatures(prev => prev === i ? null : i)}
                                    >
                                        {seeFeatures === i ? t('learning.hide-data') : t('learning.show-data')}
                                    </button>
                                    {/* noAuthSeen */}
                                    <button
                                        className="bg-white border border-secondary-tw text-secondary-tw py-1 px-4 rounded-lg ml-8"
                                        onClick={async () => await subscribeInService(pack.title)}
                                    >
                                        {(isLoadingPackage.isLoading && isLoadingPackage.loadingPackageName === pack.title) ? `${t('custom.subiscribing')}...` : t('custom.subs-now')}
                                    </button>
                                </div>
                            </div>
                        ))
                    }
                </section>
            </div>

            {
                noAuthSeen &&
                <ServiceRegisterNoAuth
                    serviceName={t('routes.learning-solutions')}
                    setOpen={setNoAuthSeen}
                    open={noAuthSeen}
                    serviceId={6}
                    isService={false}
                    packageName={packageName}
                />
            }

            <div className="mt-5 mb-3">
                <ServiceRegisterAuth serviceId={6} serviceName={t('routes.learning-solutions')} />
            </div>
        </>
    );
};

export default LearningSolutions;