"use client";
import { courseHref } from "@/lib/course-url";
import { cmsHtml } from "@/utils/cms-html";
import { Link, useParams } from "react-router-dom";
import axios from "axios";
import Breadcrumb from "@/ui/breadcrumb";
import Image from "@/ui/image";
import { useLanguage } from "../../store/language-context";
import { useTranslation } from "react-i18next";
import { useQuery } from "@tanstack/react-query";
import { SwiperSlide } from "swiper/react";
import { ArrowLeft, DollarSign, RefreshCcw, SaudiRiyal, Timer } from "lucide-react";
import Swiper from "@/ui/swiper";
import { Button } from "@/components/ui/button";

export default function AccreditationDetails() {
    const { URL } = useLanguage();
    const { id } = useParams();
    const { t } = useTranslation();

    const { data, isLoading, error, refetch } = useQuery({
        queryKey: ['dependency-details', id, URL],
        queryFn: async () => {
            const res = await axios.get(`${URL}/dependencies/${id}`);
            return res?.data?.data;
        },
        refetchOnWindowFocus: false,
        staleTime: 1000 * 60 * 60 * 6, // 6HR
        gcTime: 1000 * 60 * 60 * 6,
    });

    if (typeof document !== "undefined") document.title = `${data?.title || t('routes.accreditations-details')} | ${t('routes.accreditations')}`;

    if (isLoading) {
        return (
            <div className="px-6 py-12 space-y-6">
                <div className="h-6 w-full bg-gray-200 animate-pulse rounded-md" />
                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div className="h-64 bg-gray-200 animate-pulse rounded-lg"></div>
                    <div className="h-64 bg-gray-200 animate-pulse rounded-lg"></div>
                </div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="text-center py-8 flex flex-col items-center justify-center gap-4 layout h-screen">
                <p className="text-red-500 text-xl">{t('custom.err')}</p>
                <div className="grid place-items-center">
                    <Button
                        variant="outline"
                        className="mt-2 bg-secondary-tw text-white px-4 py-2 rounded-md"
                        onClick={() => refetch && refetch()}
                    >
                        {t('custom.try-again')} <RefreshCcw />
                    </Button>
                </div>
            </div>
        )
    };

    const courses = data?.courses || [];
    return (
        <>
            <Breadcrumb heading={false} pages={[{ name: t("routes.accreditations"), link: '/accreditations' }, data?.title || t("routes.accreditations-details")]} />
            <div className="layout !pt-4">
                {/* Content Section */}
                <h1 className="text-xl font-semibold mb-4">
                    {data?.title}
                </h1>

                <div className="mt-2 grid grid-cols-1 lg:grid-cols-[2fr_1fr] gap-8 ">
                    <div className="h-full relative sm:order-2 order-2 md:order-1 ">
                        <div className="ring-1 ring-gray-200 rounded-lg p-3 border-0  border-b-4 border-secondary-tw h-full">
                            <article className="" dangerouslySetInnerHTML={{ __html: cmsHtml(data?.description, { alt: data?.title }) }} />
                        </div>
                    </div>
                    <div className="relative ring-1 ring-gray-200 rounded-lg p-10 border-0 border-b-4 border-secondary-tw sm:order-1 order-1  md:order-2 ">
                        <Image src={data?.image} alt={data?.title} className="rounded-lg w-full object-contain" />
                    </div>
                </div>

                {/* Courses Section */}
                <div className="mt-16">
                    <div className="flex justify-center">
                        <h2 className="text-2xl font-semibold mb-6 services-header after:w-36 flex justify-center">
                            {t("dependencies.title")}
                        </h2>
                    </div>

                    {/* {courses.length > 0 ? (
                        <Swiper id={'news'} props={swiperProps} showButtons>
                            {courses?.map((course, i: number) => (
                                <SwiperSlide key={course.id || i}>
                                    <div className="bg-white border rounded-lg shadow-sm h-full flex flex-col justify-between   w-full">
                                        <div className="relative h-48 mb-4">
                                            <Image src={course?.image} alt={course.title}
                                                className="rounded-md w-full h-full object-cover" />
                                            <div className="absolute inset-0 bg-primary-tw/75 bg-opacity-20 rounded-md"></div>
                                        </div>
                                        <span className="relative text-sm text-white bg-secondary-tw rounded-lg flex gap-1 p-2 justify-center items-center w-fit -top-8 right-2">
                                            <span>
                                                <Timer size={16} />
                                            </span>
                                            {course?.count_hours} {t("training-courses.hours")}
                                        </span>
                                        <p className="text-lg font-medium  p-1 truncate">{course?.title}</p>
                                        <Link to={courseHref(course)}
                                            className="mt-4 mb-4 text-secondary-tw     p-2 rounded-lg  py-1 justify-end w-full flex items-center gap-1"
                                        >
                                            {t("custom.more-details")} <ArrowLeft className="ltr:rotate-180 size-5" />
                                        </Link>
                                    </div>
                                </SwiperSlide>
                            ))}
                        </Swiper>
                    ) : (
                        <p className="text-gray-500 text-center">{t("custom.no-data")}</p>
                    )} */}
                    {courses.length > 0 ? (
                        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-4">
                            {courses?.map((course, i: number) => (
                                <div className="bg-white border rounded-lg shadow-sm h-full grid w-full" key={i}>
                                    <div className="relative h-48 mb-4 w-full">
                                        <Image
                                            src={course?.image}
                                            alt={course.title}
                                            className="rounded-md w-full h-full object-cover"
                                        />
                                        <div className="absolute inset-0 bg-primary-tw/75 bg-opacity-20 rounded-md" />
                                    </div>

                                    <div className=" flex items-center gap-2">
                                        <span className="relative text-sm text-white bg-secondary-tw rounded-lg flex gap-1 p-2 justify-center items-center w-fit -top-8 right-2">
                                            <span>
                                                <Timer size={16} />
                                            </span>
                                            {course?.count_hours} {t("training-courses.hours")}
                                        </span>

                                        <span className="relative text-sm text-white bg-secondary-tw rounded-lg flex gap-1 p-2 justify-center items-center w-fit -top-8 right-2">
                                            <span>
                                                <SaudiRiyal size={16} />
                                            </span>
                                            {course?.min_price}
                                        </span>
                                    </div>

                                    <p className="text-lg font-medium p-2">{course?.title}</p>
                                    <Link to={courseHref(course)}
                                        className="mt-4 mb-4 text-secondary-tw p-2 rounded-lg py-1 justify-end w-full flex items-center gap-1"
                                    >
                                        {t("custom.more-details")} <ArrowLeft className="ltr:rotate-180 size-5" />
                                    </Link>
                                </div>
                            ))}
                        </div>
                    ) : (
                        <p className="text-gray-500 text-center">{t("custom.no-data")}</p>
                    )}
                </div>
            </div>
        </>
    );
};