"use client";
import axios from "axios";
import { useQuery } from "@tanstack/react-query";
import { useTranslation } from "react-i18next";
import { Link } from "react-router-dom";

import { useLanguage } from "@/store/language-context";
import Breadcrumb from "@/ui/breadcrumb";

import TrCourseImg from "@/assets/used-images/TrainingCoursesImg.png";
import TrainingCourseLoading from "@/views/training-courses/loading/tr-course-box";
import { Button } from "@/components/ui/button";
import { ArrowBigRightDash, Badge, RefreshCcw } from "lucide-react";

const Offers = () => {
    const { URL } = useLanguage();
    const { t } = useTranslation();
    const { data: offers, isLoading, error, refetch } = useQuery({
        queryKey: ['offers', URL],
        queryFn: async () => {
            try {
                const response = await axios.get(`${URL}/offers`);
                return response?.data?.data?.data ?? response?.data?.data
            } catch (error) {
                throw new Error(t('custom.err'))
            }
        },
        retry: 0,
        refetchOnMount: false,
        refetchOnWindowFocus: false,
    });

    if (isLoading) {
        return (
            <>
            <Breadcrumb pages={[t('routes.offers')]} />
            <div className="grid lg:grid-cols-3 gap-20 my-12 max-lg:px-8 layout">
                {
                    [...Array(6)].map((_, i) => (
                        <TrainingCourseLoading key={i} />
                    ))
                }
            </div>
            </>
        )
    };

    if (error) {
        return (
            <>
            <Breadcrumb pages={[t('routes.offers')]} />
            <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.no-offers")}</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>
            </>
        )
    };

    return (
        <>
            <Breadcrumb pages={[t('routes.offers')]} />
            <div className="layout">
                <section className="grid lg:grid-cols-3 relative !gap-10 px-4">
                    {/* {offers?.map((offer: any, i: number) => (
                        <Link to={`/offers/${offer?.id}`} key={offer?.id || i}
                            className='relative group pt-7 pb-3 px-3 grid grid-cols-[35%_64%] border rounded-lg w-full max-lg:grid-cols-1 mb-5 mt-5'>
                            <div className='relative w-32 bg-transparent max-lg:h-18'>
                                <div className='w-[7.5rem] h-[7.5rem] flex justify-center items-center absolute -top-14 inset-y-0 end-12 max-md:relative max-lg:h-28 max-lg:w-48 max-lg:relative'>
                                    <div className='bg-secondary-tw w-[7.8rem] h-[7.8rem] max-lg:h-[7.4rem] max-lg:w-[12.4rem] absolute z-0 rounded-lg'></div>
                                    <img src={offer?.image || TrCourseImg} alt={offer?.title} className='object-cover w-full relative z-10 h-full rounded-lg' />
                                    <div className="absolute -bottom-8 z-20 bg-secondary-tw rounded-md text-white px-2">
                                        <p className="m-0">{offer?.discount}%</p>
                                        <p className="m-0">{t('training-courses.discount')}</p>
                                    </div>
                                </div>
                            </div>
                            <div className="space-y-2 flex flex-col justify-between">
                                {offer?.title &&

                                    <p className='text-primary-tw text-xl truncate !text-start'>
                                        {offer?.title}
                                    </p>
                                }
                                {
                                    offer?.start_date &&
                                    <div className="flex items-center gap-2 text-sm">
                                        <span className="text-white bg-secondary-tw rounded-md px-2">
                                            {t('contact.start-date')} :
                                        </span>
                                        <span className="font-mono text-primary-tw">
                                            {offer.start_date}
                                        </span>
                                    </div>
                                }
                                {
                                    offer?.end_date &&
                                    <div className="flex items-center gap-2 text-sm">
                                        <span className="text-white bg-secondary-tw rounded-md px-2">
                                            {t('contact.end-date')} :
                                        </span>
                                        <span className="font-mono text-primary-tw">
                                            {offer.end_date}
                                        </span>
                                    </div>
                                }
                            </div>
                        </Link>
                    ))} */}
                    {offers?.map((offer: any, i: number) => (
                        <Link to={`/offers/${offer?.id}`} key={offer?.id || i}
                            className='relative group grid gap-4 border rounded-lg w-full p-2 shadow-secondary-tw shadow-sm'>
                            <div className='relative w-full max-h-64'>
                                <img src={offer?.image || TrCourseImg} alt={offer?.title} className='object-cover w-full h-full rounded-lg' />
                            </div>
                            <div className="absolute top-4 end-6 grid place-items-center">
                                <p className="absolute text-white font-semibold text-lg z-20 grid place-items-center">
                                    <span className="text-sm font-normal">
                                        {t('offers.offer-to')}
                                    </span>
                                    <span>
                                        % {offer?.discount}
                                    </span>
                                </p>
                                <Badge className="fill-secondary-tw text-secondary-tw group-hover:rotate-180 transition-all z-10" size={75} />

                            </div>
                            <div className="text-primary-tw absolute end-5 bottom-32 opacity-0 group-hover:opacity-100 group-hover:end-6 transition-all">
                                <ArrowBigRightDash size={27} />
                            </div>
                            <div className="flex flex-col justify-between gap-8 px-2">
                                {offer?.title &&
                                    <div className="space-y-1">
                                        <p className='text-primary-tw text-xl truncate !text-start font-semibold'>
                                            {offer?.title}
                                        </p>
                                        <p className="text-gray-600 text-sm">
                                            <span>
                                                {t('custom.more-than')}
                                            </span>
                                            <strong className="mx-1">{offer?.course_offer?.length}</strong>
                                            <span className="me-1">
                                                {offer?.course_offer?.length > 10 ?
                                                    t('offers.single') :
                                                    t('offers.multiple')}
                                            </span>
                                        </p>
                                    </div>
                                }
                                <div className="grid gap-2">
                                    {
                                        offer?.start_date &&
                                        <div className="flex justify-center items-center gap-2 text-sm bg-secondary-tw text-white rounded-md w-full px-8 py-1">
                                            <span className="text-white">
                                                {t('contact.start-date')} :
                                            </span>
                                            <span className="font-mono text-primary-tw">
                                                {offer.start_date}
                                            </span>
                                        </div>
                                    }
                                    {
                                        offer?.end_date &&
                                        <div className="flex justify-center items-center gap-2 text-sm bg-secondary-tw text-white rounded-md w-full px-8 py-1">
                                            <span className="text-white">
                                                {t('contact.end-date')} :
                                            </span>
                                            <span className="font-mono text-primary-tw">
                                                {offer.end_date}
                                            </span>
                                        </div>
                                    }
                                </div>
                            </div>
                        </Link>
                    ))}
                </section>
            </div>
        </>
    );
};

export default Offers;