"use client";
import axios from "axios";
import Countdown from "react-countdown";

import { useTranslation } from "react-i18next";
import { useLanguage } from "@/store/language-context";
import { useParams } from "react-router-dom";
import { useQuery } from "@tanstack/react-query";

import Breadcrumb from "@/ui/breadcrumb";
import Percentage from "@/assets/used-images/percentage.png";

import OfferBox from "./ui/offer-box";
import OffersDetailsLoading from "./loading/offers-details";

import { Button } from "@/components/ui/button";
import { RefreshCcw } from "lucide-react";

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

    const { data, isLoading, error, refetch } = useQuery({
        queryKey: ['offers-details', id, URL],
        queryFn: async () => {
            try {
                const response = await axios.get(`${URL}/offers/${id}`);
                return response?.data;
            } catch (error) {
                throw new Error(t('custom.err'))
            }
        },
        staleTime: 10 * 60 * 1000,
        gcTime: 10 * 60 * 1000
    });

    if (isLoading) {
        return (<OffersDetailsLoading />);
    }

    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>
        )
    };

    if (data && data.status === 200) {
        const { end_date, course_offer = [] } = data.data;
        const countdownEndDate = new Date(end_date).getTime();
        return (
            <>
                <Breadcrumb pages={[t('routes.offers')]} />
                <div className="layout">
                    <section className="grid grid-cols-3 max-xl:grid-cols-2 max-md:grid-cols-1 max-lg:gap-8 px-4 py-4 rounded-lg bg-[linear-gradient(180deg,#6A2F38_0%,#440D1D_100%)]  top-0 z-50  mb-4">

                        <div className="flex flex-col justify-center !text-start text-white space-y-2 max-lg:text-center">
                            <p className="text-3xl text-start">
                                {t('offers.title')}
                            </p>
                            <article className="text-secondary-tw" dangerouslySetInnerHTML={{ __html: t('offers.desc') }} />
                        </div>

                        <div className="grid place-items-center">
                            <Countdown
                                date={countdownEndDate}
                                renderer={({ days, hours, minutes, seconds }) => (
                                    <div className="flex items-center gap-4 text-white text-lg">
                                        <div className="flex items-center gap-2">
                                            <span>{String(days).padStart(2, '0')}</span>
                                            <span>{t('offers.day')}</span>
                                        </div>
                                        <b>:</b>
                                        <div className="flex items-center gap-2">
                                            <span>{String(hours).padStart(2, '0')}</span>
                                            <span>{t('offers.hour')}</span>
                                        </div>
                                        <b>:</b>
                                        <div className="flex items-center gap-2">
                                            <span>{String(minutes).padStart(2, '0')}</span>
                                            <span>{t('offers.minute')}</span>
                                        </div>
                                        <b>:</b>
                                        <div className="flex items-center gap-2">
                                            <span>{String(seconds).padStart(2, '0')}</span>
                                            <span>{t('offers.second')}</span>
                                        </div>
                                    </div>
                                )}
                            />
                        </div>

                        <div className="flex justify-end max-lg:justify-center">
                            <img src={Percentage} alt="offer" className="h-32" />
                        </div>
                    </section>

                    <section className="grid lg:grid-cols-3 gap-14 relative my-8">
                        {error || course_offer.length === 0 ? (
                            <div className="absolute top-10 z-50 bg-white flex justify-center items-center h-full w-full text-xl">
                                <p id="err">{t('custom.no-data')}</p>
                            </div>
                        ) : (
                            course_offer.map((offer, i: number) => (
                                <OfferBox offer={offer} key={offer?.id || i} />
                            ))
                        )}
                    </section>
                </div>

            </>
        );
    }
};