"use client";
import { useToken } from "@/hooks/use-token";
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";
import {
    CalendarDays,
    Clock3,
    Eye,
    MapPin,
    PlayCircle,
    Volume2,
    X,
    Book,
    Check,
    BriefcaseBusiness,
    Podcast,
    TriangleAlert,
    Bomb,
    BadgeCheck,
} from "lucide-react";

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

import ImageSliderPopup from "@/views/seminars/ui/image-slider-popup";

import Image from "@/ui/image";

import IvoryList from "@/assets/icons/IvoryList.svg";
import IvoryGold from "@/assets/icons/IvoryGold.svg";
import Person from "@/assets/used-images/person.png";
import ImgSlide from "@/assets/used-images/img-slider.png";
import DefaultImg from "@/assets/used-images/defaultImg.jpeg";
import { useTranslation } from "react-i18next";
import { useLanguage } from "@/store/language-context";
import {
    Dialog,
    DialogContent,
    DialogDescription,
    DialogHeader,
    DialogTitle,
    DialogTrigger,
} from "@/components/ui/dialog"
import { useToast } from "@/hooks/use-toast";

const List = ({ pdfs }) => {
    const { t } = useTranslation();
    const [selectedPdf, setSelectedPdf] = useState(null);
    const [open, setOpen] = useState(false);

    const onOpen = (pdf) => {
        setSelectedPdf(pdf);
        setOpen(true);
    };

    return (
        <>
            <Dialog open={open} onOpenChange={setOpen}>
                <ul className="scrolling flex gap-2 overflow-auto px-2">
                    {pdfs.map((pdf, i: number) => (
                        <li key={i} className="relative">
                            <div className="w-full z-10 absolute bg-light-red h-full rounded-md"></div>
                            <div className="w-36"></div>
                            <Image
                                src={DefaultImg}
                                alt="Ivory PDF"
                                className="rounded-md w-full h-28"
                            />
                            <div className="flex gap-2 absolute bottom-2 right-2 z-20">
                                <DialogTrigger
                                    className="bg-primary-tw size-8 rounded-md flex justify-center items-center"
                                    onClick={() => onOpen(pdf?.pdf)}
                                >
                                    <Eye size={20} color="white" />
                                </DialogTrigger>
                            </div>
                        </li>
                    ))}
                </ul>

                <DialogContent className="w-full max-w-7xl h-[80vh] overflow-hidden p-0">
                    <DialogHeader>
                        <DialogHeader className="sr-only">
                            <DialogTitle className="sr-only">PDF title</DialogTitle>
                            <DialogDescription className="sr-only">PDF description</DialogDescription>
                        </DialogHeader>
                    </DialogHeader>
                    <div className="h-[75vh] overflow-hidden">
                        {selectedPdf && (
                            <iframe
                                src={`${selectedPdf}#toolbar=0&navpanes=0&scrollbar=0`}
                                title="PDF Viewer"
                                className="w-full h-full border-none"
                            />
                        )}
                    </div>
                </DialogContent>

            </Dialog>

        </>
    );
};

const ImgSlider = ({ title, imgs }) => {
    const [imgData, setImgData] = useState({
        see: false,
        imgIndex: null,
        cTitle: title,
    });

    return (
        <div>
            <Swiper
                spaceBetween={12}
                slidesPerView="auto"
                grabCursor={true}
                freeMode={true}
                className="w-full"
            >
                {imgs.map((img, i: number) => (
                    <SwiperSlide key={i} className="!w-48">
                        <div
                            className="w-full rounded-md cursor-pointer"
                            onClick={() =>
                                setImgData((prev) => ({
                                    ...prev,
                                    see: !prev.see,
                                    imgIndex: i,
                                }))
                            }
                        >
                            <div className="w-48 h-40 relative">
                                <Image
                                    src={img?.image || ImgSlide}
                                    alt={`${title || ""} - ${i + 1}`}
                                    className="w-full h-full object-cover rounded-md"
                                />
                            </div>
                        </div>
                    </SwiperSlide>
                ))}
            </Swiper>

            <ImageSliderPopup imgData={imgData} setImgData={setImgData} imgs={imgs} />
        </div>
    );
};

const CourseVideo = ({ title, video }) => {
    const [open, setOpen] = useState(false);
    const getId = () => {
        const isMatched = video.match(/[?&]v=([^&]+)/);
        return isMatched ? isMatched[1] : null;
    };

    const videoId = getId();
    const poster = videoId
        ? `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
        : DefaultImg; // Use default if no YouTube ID found

    return (
        <>
            <Dialog open={open} onOpenChange={setOpen}>
                <DialogTrigger asChild>
                    <div className="w-full h-40 bg-gray-200 rounded-md relative flex justify-center items-center cursor-pointer">
                        <span className="absolute z-10">
                            <PlayCircle size={25} color="white" />
                        </span>
                        <div className="absolute w-full h-full top-0 bg-[#0000009E] rounded-lg"></div>
                        {/* Poster */}
                        <img
                            src={poster}
                            alt="Video Thumbnail"
                            className="object-cover h-40 w-full object-center rounded-lg"
                        />
                    </div>
                </DialogTrigger>
                <DialogContent className="border-0 !w-full max-w-full"
                    onClick={() => setOpen(false)}
                >
                    <iframe
                        src={`https://www.youtube.com/embed/${videoId}`}
                        className="w-[60rem] h-full mx-auto"
                        frameBorder="0"
                        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
                        allowFullScreen
                    />
                </DialogContent>
            </Dialog>

        </>
    );
};

const Confirmation = ({ state }) => {
    return (
        <div
            className="flex flex-col justify-items-center w-full items-center !mt-4"
        >
            <div className="rounded-full bg-secondary-tw p-2 text-white font-black">
                {state.state ? <Check size={30} fontWeight={900} /> : <X size={30} fontWeight={900} />}
            </div>
            <p className="text-lg !my-3">
                {state.message}
            </p>
        </div>
    );
};

const Topics = ({ topics }) => {
    const { t } = useTranslation();
    return (
        <div>
            {
                topics && topics?.length !== 0 ?
                    <>
                        {
                            topics?.map((topic, i) => (
                                <div className="flex items-start gap-2 text-start" key={i}>
                                    <span className="w-3">
                                        <img src={IvoryGold} alt="" className="w-full mt-[2px]" />
                                    </span>
                                    <p className="text-primary-tw text-base font-semibold mb-2">
                                        {topic?.title}
                                    </p>
                                </div>
                            ))
                        }
                    </>
                    :
                    <p className="text-start text-primary-tw text-lg font-semibold my-2">
                        {t('custom.no-data')}
                    </p>
            }
        </div>
    )
}

const SeminarDetailBox = ({ details, coach, title }) => {
    const { t } = useTranslation();
    const { id } = useParams();
    const { URL } = useLanguage();
    const token = useToken();
    const { toast } = useToast();

    const images = details?.attachments?.filter((item) => item.type === "image");
    const pdfs = details?.attachments?.filter((item) => item.type === "pdf");

    function getFirstValidSectionNumber() {
        if (pdfs && pdfs.length > 0) return 1;
        if (images && images.length > 0) return 2;
        if (details?.video) return 3;
        if (details?.courses?.[0]?.trainingProgram?.length > 0) return 5;
    };

    const [seenSection, setSeenSection] = useState(getFirstValidSectionNumber());

    const [dateState, setDateState] = useState({
        state: null,
        message: null
    });

    const nowFullDate = new Date().toLocaleDateString();
    const seminarDate = details?.date?.replaceAll('-', '/');

    const nowTimeParsed = Date.parse(nowFullDate);
    const seminarTimeParsed = Date.parse(seminarDate);

    useEffect(() => {
        if (nowTimeParsed > seminarTimeParsed) {
            setDateState({
                state: false,
                message: t('seminars.no-time')
            });
        } else {
            setDateState({
                state: true,
                message: t('custom.done')
            });
        }
    }, [details, nowTimeParsed, seminarTimeParsed]);

    const registerForSeminar = async () => {
        if (!token) {
            toast({
                variant: "warning",
                title: (
                    <div className="flex items-center gap-2">
                        <TriangleAlert />
                        <span>
                            {t('seminars.warn')}
                        </span>
                    </div>
                ),
                description: t('custom.login-first')
            });
            // Swal.fire({
            //     icon: "warning",
            //     title: t('seminars.warn'),
            //     text: t('custom.login-first'),
            //     confirmButtonText: t('custom.accept'),
            // });
            return;
        }

        if (!id) {
            toast({
                variant: "destructive",
                title: (
                    <div className="flex items-center gap-2">
                        <Bomb size={19} />
                        <span>
                            {t('custom.err-title')}
                        </span>
                    </div>
                ),
                description: t('custom.err')
            });
            return;
        }

        try {
            const response = await fetch(
                `${URL}/seminar-register?seminar_id=${id}`,
                {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        Authorization: `Bearer ${token}`,
                    },
                    body: JSON.stringify({
                        seminar_id: id,
                    }),
                }
            );

            const result = await response.json();

            if (response.ok) {
                toast({
                    variant: "success",
                    title: (
                        <div className="flex items-center gap-2">
                            <BadgeCheck />
                            <span>
                                {t('custom.done-check')}
                            </span>
                        </div>
                    ),
                    description: t('seminars.check-p')
                });

                // Swal.fire({
                //     icon: "success",
                //     title: t('custom.done-check'),
                //     text: t('seminars.check-p'),
                //     confirmButtonText: t('custom.accept'),
                // });

            } else if (response.status === 409) {

                toast({
                    variant: "warning",
                    title: (
                        <div className="flex items-center gap-2">
                            <TriangleAlert />
                            <span>
                                {t('custom.old-check')}
                            </span>
                        </div>
                    ),
                    description: result.message
                });

                // Swal.fire({
                //     icon: "info",
                //     title: t('custom.old-check'),
                //     text: result.message,
                //     confirmButtonText: t('custom.accept'),
                // });

            } else {
                toast({
                    variant: "destructive",
                    title: (
                        <div className="flex items-center gap-2">
                            <Bomb size={19} />
                            <span>
                                {t('custom.err-title')}
                            </span>
                        </div>
                    ),
                    description: t('custom.err')
                });

                // Swal.fire({
                //     icon: "error",
                //     title: t('custom.err-title'),
                //     text: t('custom.err'),
                //     confirmButtonText: t('custom.accept'),
                // });
            }
        } catch (error) {
            toast({
                variant: "destructive",
                title: (
                    <div className="flex items-center gap-2">
                        <Bomb size={19} />
                        <span>
                            {t('custom.err-title')}
                        </span>
                    </div>
                ),
                description: t('custom.err')
            });

            // Swal.fire({
            //     icon: "error",
            //     title: t('custom.err-title'),
            //     text: t('custom.err'),
            //     confirmButtonText: t('custom.accept'),
            // });
        }
    };

    const returnedSection = {
        1: <List pdfs={pdfs} />,
        2: <ImgSlider title={title} imgs={images} />,
        3: <CourseVideo title={title} video={details?.video} />,
        4: <Confirmation state={dateState} />,
        5: <Topics topics={details?.courses[0]?.trainingProgram || []} />
    };

    return (
        <div className="border p-3 rounded-md mb-3 grid grid-cols-[59%_39%] gap-4 max-lg:grid-cols-1">

            {/* Course details */}
            <div className="flex items-start gap-4 max-md:flex-col">
                {/* coach image */}
                <div className="w-48 h-64 max-lg:w-full max-lg:h-full">
                    <div className="w-48 max-lg:w-full"></div>
                    <img
                        src={coach?.profile_picture || Person}
                        alt={`${coach?.first_name} ${coach?.last_name}`}
                        className="w-full h-full object-cover rounded-md border-secondary-tw border-4"
                    />
                </div>

                <ul>
                    {/* DATE */}
                    {
                        details?.date &&
                        <li className="flex items-center gap-2 text-semi-gray">
                            <span>
                                <CalendarDays size={20} color="white" fill="var(--semi-gray)" />
                            </span>
                            <span className="text-base font-sans">{details?.date}</span>
                        </li>
                    }

                    {/* TIME */}
                    {
                        details?.start_time &&
                        <li className="flex items-center gap-2 text-semi-gray my-3 flex-wrap">
                            <span>
                                <Clock3 size={20} color="white" fill="var(--semi-gray)" />
                            </span>
                            <span className="text-base font-sans">
                                {details?.start_time} - {" "}
                            </span>
                            <span className="text-base font-sans">{details?.end_time}</span>
                        </li>
                    }

                    {/* LANG */}
                    {
                        details?.languages &&
                        <li className="flex items-center gap-2 text-semi-gray my-3 flex-wrap">
                            <span>
                                <Volume2 size={20} color="" fill="var(--semi-gray)" />
                            </span>
                            <span className="text-base">
                                {details?.languages?.title}
                            </span>
                        </li>
                    }

                    {/* LOCATION */}
                    {
                        details?.hall &&
                        <li className="flex items-center gap-2 text-semi-gray my-3 flex-wrap">
                            <span>
                                <MapPin size={20} color="white" fill="var(--semi-gray)" />
                            </span>
                            <span className="text-base">
                                {details?.hall?.title}
                            </span>
                            <span className="text-base">
                                {details?.hall?.country?.title || ""}
                            </span>
                        </li>
                    }

                    {/* COACH */}
                    {
                        coach?.first_name &&
                        <li className="flex items-center gap-2 text-semi-gray my-3">
                            <span>
                                <Podcast size={20} />
                            </span>
                            <span className="text-base text-nowrap">
                                {coach?.first_name + " " + coach?.last_name || ""}
                            </span>
                        </li>
                    }

                    {/* specialty */}
                    {
                        coach?.specialty &&
                        <li className="flex items-start gap-2 text-semi-gray my-3">
                            <span>
                                <BriefcaseBusiness size={20} />
                            </span>
                            <span className="text-sm font-medium text-start">
                                {coach?.specialty}
                            </span>
                        </li>
                    }

                    {/* course */}
                    {
                        details?.courses &&
                        <li className="flex items-start gap-2 text-semi-gray my-3 flex-wrap">
                            <span>
                                <Book size={20} />
                            </span>
                            <div className="flex gap-2 items-center flex-wrap">
                                {
                                    details?.courses?.map((course, i) => (
                                        <span key={i} className="text-sm font-medium text-start">
                                            {course?.title}
                                        </span>
                                    ))
                                }
                            </div>
                        </li>
                    }
                </ul>
            </div>

            {/* Course Content */}
            <div className="bg-light-gray p-3 rounded-md relative w-full pt-5 max-lg:w-full mt-4">
                <div className="flex gap-2 items-center mb-4 absolute flex-wrap -top-6 right-0 max-lg:gap-1">
                    {
                        pdfs?.length > 0 &&
                        <button
                            className={`border ${seenSection === 1
                                ? "seenSection"
                                : "unSeenSection"
                                } flex items-center gap-2 px-3 py-1 rounded-tl-xl`}
                            onClick={() => setSeenSection(1)}
                        >
                            <span>
                                <img
                                    src={seenSection === 1 ? IvoryList : IvoryGold}
                                    alt=""
                                    className="w-3 mt-1"
                                />
                            </span>
                            <span>{t('seminars.content')}</span>
                        </button>
                    }
                    <>
                        {
                            images?.length > 0 &&
                            <button
                                className={`border px-3 py-1 ${seenSection === 2 ? "seenSection" : "unSeenSection"
                                    } flex items-center gap-2 rounded-md`}
                                onClick={() => setSeenSection(2)}
                            >
                                <span>
                                    <img
                                        src={seenSection === 2 ? IvoryList : IvoryGold}
                                        alt=""
                                        className="w-3 mt-1"
                                    />
                                </span>
                                <span>{t('seminars.imgs')}</span>
                            </button>
                        }
                        <button
                            className={`border px-3 py-1 ${seenSection === 3 ? "seenSection" : "unSeenSection"
                                } flex items-center gap-2 rounded-md`}
                            onClick={() => setSeenSection(3)}
                        >
                            <span>
                                <img
                                    src={seenSection === 3 ? IvoryList : IvoryGold}
                                    alt=""
                                    className="w-3 mt-1"
                                />
                            </span>
                            <span>{t('seminars.vids')}</span>
                        </button>
                    </>


                    {
                        dateState.state &&
                        <button
                            className={`border px-3 py-1 ${seenSection === 4 ? "seenSection" : "unSeenSection"
                                } flex items-center gap-2 rounded-md`}
                            onClick={async () => {
                                if (dateState.state) {
                                    await registerForSeminar();
                                }
                                setSeenSection(4);
                            }}
                        >
                            <span>
                                <img
                                    src={seenSection === 4 ? IvoryList : IvoryGold}
                                    alt=""
                                    className="w-3 mt-1"
                                />
                            </span>
                            <span>{t('custom.check')}</span>
                        </button>
                    }
                    {
                        details?.courses[0]?.trainingProgram?.length > 0 &&
                        <button
                            className={`border ${seenSection === 5 ? "seenSection" : "unSeenSection"} flex items-center gap-2 px-3 py-1 rounded-md`}
                            onClick={() => setSeenSection(5)}
                        >
                            <span>
                                <img
                                    src={seenSection === 5 ? IvoryList : IvoryGold}
                                    alt=""
                                    className="w-3 mt-1"
                                />
                            </span>
                            <span> {t('seminars.targets')}</span>
                        </button>
                    }
                </div>
                <div className="mt-4 max-lg:mt-10">{returnedSection[seenSection]}</div>
            </div>
        </div>
    );
};
export default SeminarDetailBox;