"use client";
import { useParams } from 'react-router-dom';
import axios from 'axios';
import { useQuery } from '@tanstack/react-query';
import { CalendarDays } from 'lucide-react';

import Breadcrumb from '@/ui/breadcrumb';
import Image from '@/ui/image';

import PodcastBoxVideo from '@/views/podcasts/ui/podcast-box-video';
import PodcastPoster from '@/assets/used-images/IvoryPodcastPoster.png'
import PodacastVideoBoxLoading from "@/views/podcasts/loading/podcast-video-box-loading";
import { useTranslation } from 'react-i18next';
import { useLanguage } from '@/store/language-context';

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

    const { data: podcast, error: pErr } = useQuery({
        queryKey: ['podcast-details', id, URL],
        queryFn: async () => {
            const response = await axios.get(`${URL}/podcasts/${id}`);
            return response?.data?.data ?? response?.data?.data?.data
        },
        refetchOnMount: false,
        refetchOnWindowFocus: false
    });

    const { data: podcasts, error: podcastsErr, isLoading } = useQuery({
        queryKey: ['podcasts-of-podcast', id, URL],
        queryFn: async () => {
            const response = await axios.get(`${URL}/category-podcasts/5`);
            return response?.data?.data ?? response?.data?.data?.data
        },
        refetchOnMount: false,
        refetchOnWindowFocus: false
    });

    if (pErr) {
        <div className="h-dvh w-full flex justify-center items-center">
            <p>
                {pErr?.message || t('custom.no-data')}
            </p>
        </div>
    };

    if (isLoading) {
        return (
            <>
                <div className='h-8 w-full l-load-dt'></div>
                <div className="grid grid-cols-[59%_39%] gap-[2%] max-lg:grid-cols-1 px-20 py-8 max-lg:px-4">
                    <div>
                        <div className='space-y-4'>
                            <div className='w-full h-96 l-load-dt rounded-lg'></div>
                            <div className='w-full rounded-3xl h-12 l-load-dt'></div>
                        </div>
                        <div className="space-y-2 mt-10">
                            {
                                [...Array(5)].map((_, i) => (
                                    <div key={i} className='w-full h-6 rounded-md l-load-dt'></div>
                                ))
                            }
                        </div>
                    </div>
                    <div>
                        <PodacastVideoBoxLoading />
                    </div>
                </div>
            </>
        )
    };

    return (
        <>
            <Breadcrumb pages={[{ name: t("routes.podcasts"), link: '/podcasts' }, `${podcast?.title || t('routes.podcast-details')}`]} />
            <div className="layout">
                <div className="grid grid-cols-[59%_39%] gap-[2%] py-4 max-lg:grid-cols-1">
                    <section className="rounded-lg border p-6">
                        <section className="grid">
                            <div className='relative h-96'>
                                <Image
                                    src={podcast?.image || PodcastPoster} alt={`podcast-${podcast?.title}`} className='w-full h-[120px] rounded-md filter brightness-50'
                                />
                            </div>
                            <audio src={podcast?.sound} controls className='w-full mt-3'></audio>
                            {/* DATE */}
                            {
                                podcast?.category?.date &&
                                <div className="flex items-start gap-2 mt-2">
                                    <span>
                                        <CalendarDays size={20} color="white" fill="#7A7A7A" />
                                    </span>
                                    <span className="font-sans">
                                        {podcast?.category?.date}
                                    </span>
                                </div>
                            }
                            <div className='text-start'>
                                {/* podcast vid title */}
                                {
                                    podcast?.title &&
                                    <p className='text-primary-tw font-semibold'>
                                        {podcast?.title}
                                    </p>
                                }
                                {/* speaker */}
                                {
                                    podcast?.category?.name &&
                                    <p className='text-secondary-tw my-2'>
                                        {podcast?.category?.name}
                                    </p>
                                }
                                {/* desc */}
                                {
                                    podcast?.category?.description &&
                                    <article className='text-semi-gray my-2'
                                        dangerouslySetInnerHTML={{ __html: podcast?.category?.description }} />
                                }
                            </div>
                        </section>
                    </section>
                    <section >
                       
                        <section className="rounded-lg border border-[#EBEBEB] p-6">
                             <h2 className='text-start mb-4'>{t('podcasts.related')}</h2>
                            {
                                (podcasts?.podcasts?.length === 0) || podcastsErr ?
                                    <div>
                                        <p className='p-2'>
                                            {t('custom.no-data')}
                                        </p>
                                    </div>
                                    :
                                    podcasts?.podcasts?.map((podcast, i: number) => (
                                        <div key={podcast?.id}>
                                            <PodcastBoxVideo
                                                podcast={podcast}
                                                error={podcastsErr}
                                                isLoading={isLoading}
                                            />
                                            {i !== podcasts?.podcasts?.length - 1 ? <hr /> : null}
                                        </div>
                                    ))
                            }
                        </section>
                    </section>
                </div>
            </div>

        </>
    );
};