'use client'
import React, { useEffect, useState } from 'react'
import Layout from '../../layout/Layout'
import Breadcrumb from '../../breadcrumb/Breadcrumb'
import { translate } from '@/utils/translation'
import { EpisodeCard } from '../../commonComponents/commonCards/EpisodeCard'
import Link from 'next/link'
import { currentLangCode } from '@/utils/helpers'
import { useGetMyPodcasts } from '@/hooks/queries/podcast/useGetMyPodcasts'
import LoadMoreBtn from '../../commonComponents/loadermoreBtn/LoadmoreBtn'
import { EpisodeCardSkeleton } from '@/components/skeletons/podcast/EpisodeCardSkeleton'
import NoDataFound from '@/components/commonComponents/NoDataFound'
import { deletePodcastApi } from '@/utils/api/api'
import toast from 'react-hot-toast'

const ManagePodcast = () => {

    const langCode = currentLangCode()

    const dataPerPage = 6;

    const [loadMore, setLoadMore] = useState(false)
    const [data, setData] = useState([])
    const [offset, setOffset] = useState(0)
    const [totalData, setTotalData] = useState('')

    const [searchValue, setSearchValue] = useState(null)
    const [debouncedSearch, setDebouncedSearch] = useState(null)

    const [activeTab, setActiveTab] = useState(0)

    const tabs = [
        {
            id: 0,
            label: translate('allLbl'),
            type: 'all',
        },
        {
            id: 1,
            label: translate('draft'),
            type: 'draft',
        },
    ]

    useEffect(() => {
        const timeout = setTimeout(() => {
            setDebouncedSearch(searchValue)
        }, 500);
        return () => clearTimeout(timeout)
    }, [searchValue]);

    useEffect(() => {
        setLoadMore(false)
        setOffset(0)
        setData([])
    }, [activeTab, debouncedSearch]);

    const { data: podcastsQueryData, isLoading, isFetching, isError, error } = useGetMyPodcasts({
        type: tabs.find((tab) => tab.id === activeTab)?.type,
        offset: offset * dataPerPage,
        limit: dataPerPage,
    });

    useEffect(() => {
        if (isError) {
            setData([])
            console.log('my podcasts err =>', error?.message)
            return;
        }
        if (!podcastsQueryData) return;
        const items = podcastsQueryData?.data?.data;
        setTotalData(podcastsQueryData?.data?.total)
        if (loadMore) {
            setData((prev) => [...prev, ...(items ?? [])])
        } else {
            setData(items ?? [])
        }
    }, [podcastsQueryData, isError]);

    const handleLoadMore = () => {
        setLoadMore(true)
        setOffset((prev) => prev + 1)
    }


    const deletePodcast = async (id) => {
        try {
            console.log(id)

            const { data: resData } = await deletePodcastApi.deletePodcast({
                id: id
            })
            if (resData.error) {
                toast.error(resData?.message)
            }
            else {
                toast.success(translate('deletedSuccessfully'))
                const updatedData = data?.filter(item => item.id !== id)
                setData(updatedData)
            }
        } catch (error) {
            console.log(error)
        }
    };



    return (
        <Layout>
            <Breadcrumb secondElement={translate('managePodcast')} />
            <section className='container commonMT'>


                <div className='flex items-centern justify-between max-sm:gap-y-6 max-sm:flex-wrap bg-white dark:secondaryBg rounded-2xl p-3 border border-[#EFEFEF] dark:borderColor gap-3 overflow-x-auto customScrollbar commonMT'>
                    <div className="grid grid-rows-1 grid-flow-col gap-3 w-fit">
                        {
                            tabs?.map((tab) => {
                                return <div key={tab?.id} className={`w-28 md:w-[200px] rounded-[8px] p-3 flexCenter font-bold cursor-pointer ${tab.id === activeTab ? 'secondaryBg dark:bodyBgColor text-white' : 'opacity-70'}`}
                                    onClick={() => setActiveTab(tab?.id)}
                                >
                                    {tab?.label}
                                </div>
                            })
                        }
                    </div>
                    <Link href={`/${langCode}/manage-podcast/create-podcast`} title={translate('createPodcast')} className='commonBtn font-semibold! flexCenter'>
                        {translate('createPodcast')}
                    </Link>
                </div>
                <div className='grid md:grid-cols-2 lg:grid-cols-3 gap-6 commonMT'>
                    {
                        isLoading && !loadMore ?
                            Array.from({ length: dataPerPage })?.map((_, index) => (
                                <EpisodeCardSkeleton podcastCard={true} key={index} />
                            ))
                            :
                            data?.map((podcast) => (
                                <Link key={podcast?.id} href={`/${langCode}/manage-podcast/${podcast?.slug}`}>
                                    <EpisodeCard
                                        podcastCard={true}
                                        data={podcast}
                                        managePodcastCard={true}
                                        onDelete={deletePodcast}
                                    />
                                </Link>
                            ))
                    }
                </div>

                {
                    !isLoading && data?.length < 1 &&
                    <div>
                        <NoDataFound />
                    </div>
                }
                <div className='mt-12'>
                    {totalData > dataPerPage && totalData !== data?.length ? (
                        <LoadMoreBtn handleLoadMore={handleLoadMore} loadMoreLoading={isFetching && loadMore} />
                    ) : null}
                </div>
            </section>
        </Layout>
    )
}

export default ManagePodcast