import JobDetails from "@/Component/Influencer/InfluencerJobs/JobDetails";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import { JobRecommendListingAPI } from "@/Utils/APIRequest/Endpoints";
import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import RecommendJobBox from "./RecommendJobBox";
import RecommendJobBoxSkeleton from "./RecommendJobBoxSkeleton";
import SectionHeader from "../../SectionHeader";

const RecommendJobs = (props) => {
    const { userDetails, translations } = props;
    const [openSideModal, setOpenSideModal] = useState(null);
    const [params, setParams] = useState<any>({ page: 1, per_page: 4, sort_by: "", sort: "DESC", status: "all" });

    // API GET
    const { data, isPending, fetchStatus, refetch } = useQuery({ queryKey: [JobRecommendListingAPI, params], queryFn: () => CustomFetch({ url: JobRecommendListingAPI, params: { ...params } }, null, false), refetchOnWindowFocus: false, enabled: userDetails ? true : false, select: (data) => data?.data?.data });

    return (
        <>
            {fetchStatus == 'fetching' ?
                <>
                    <div className="flex items-center justify-between mb-5">
                        <div className="flex flex-col gap-2">
                            <span className="h-3 w-16 bg-neutral-200 animate-pulse rounded"></span>
                            <span className="h-7 w-52 bg-neutral-200 animate-pulse rounded"></span>
                        </div>
                        <span className="h-9 w-24 bg-neutral-200 animate-pulse rounded-full"></span>
                    </div>
                    <div className='grid grid-cols-2 gap-4'>
                        <RecommendJobBoxSkeleton />
                        <RecommendJobBoxSkeleton />
                        <RecommendJobBoxSkeleton />
                        <RecommendJobBoxSkeleton />
                    </div>
                </>
                :
                <>
                    <SectionHeader
                        kicker={'✨ ' + (translations?.recommended || 'Recommended for you')}
                        title={translations?.jobsRecommendation}
                        actionLabel={translations?.viewAll}
                        actionHref="/influencer/jobs?recommended=true"
                    />
                    {data?.length > 0 ?
                        <div className='grid md:grid-cols-2 grid-cols-1 gap-4 stagger-children'>
                            {data?.slice(0, 4).map((item, index) => (
                                <RecommendJobBox itemData={item?.campaign} key={index} setOpenSideModal={setOpenSideModal} translations={translations} />
                            ))}
                        </div>
                        :
                        <>
                            {!isPending && data?.length == 0 &&
                                <div className='w-full bg-white border border-neutral-100 shadow-soft p-8 rounded-card flex items-center justify-center flex-col gap-3'>
                                    <div className="h-12 w-12 rounded-2xl bg-brand-gradient-soft text-primary flex items-center justify-center text-xl">🎯</div>
                                    <span className='text-sm font-medium text-neutral-500'>{translations?.noDataFound}</span>
                                </div>
                            }
                        </>
                    }
                </>
            }
            {<JobDetails openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} mainListRefetch={refetch} />}
        </>
    )
}

export default RecommendJobs