'use client'
import { useEffect, useState } from 'react'
import { useSelector } from 'react-redux';
import { useLoading } from '@/Utils/Hooks/useLoading';
import { AppStore } from '@/lib/store';
import { useQuery } from '@tanstack/react-query';
import { io } from 'socket.io-client'
import { MyJobListingAPI, SocketURL } from '@/Utils/APIRequest/Endpoints';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import MyJobListing from './MyJobListing';
import JobDetails from '../InfluencerJobs/JobDetails';
import CampaignListingBoxSkeleton from '@/Component/Brand/MyCampaigns/CampaignListing/CampaignListingBoxSkeleton';
import { useRouter, useSearchParams } from 'next/navigation';
import { useTranslation } from '@/Utils/Hooks/useTranslate';

const MyJobs = () => {
    const searchQuery = useSearchParams();
    const { translations } = useTranslation();
    const router = useRouter();
    const queryTab = searchQuery.get("tab");
    const [activeTab, setActiveTab] = useState(queryTab ? queryTab : 'inprogress');
    const [search, setSearch] = useState("");
    const { skeletonLoading, startSkeletonLoading, stopSkeletonLoading } = useLoading();
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const [openSideModal, setOpenSideModal] = useState(null);
    const [selectSortBy, setSelectSortBy] = useState('');

    const [params, setParams] = useState<any>({ page: 1, per_page: 12, sort_by: "updated_at", sort: "DESC" });

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

    useEffect(() => {
        if (fetchStatus == 'fetching' || isPending) {
            startSkeletonLoading();
        } else {
            stopSkeletonLoading();
        }
        setParams({ ...params, job_status: activeTab })
    }, [isPending, fetchStatus, activeTab, search]);

    const handleTabClick = (tabName) => {
        setActiveTab(tabName);
        setParams({ ...params, page: 1 })
        router.push(`/influencer/my-jobs?tab=${tabName}`)
    }

    useEffect(() => {
        if (userDetails && activeTab == 'inprogress') {
            const socket = io(SocketURL, {
                withCredentials: true,
                transports: ['websocket'],
                query: {
                    userId: userDetails?.id,
                },
            });

            socket.on("connect", () => {
                // console.log("Connected to Socket.io Server");
            });

            socket.on("data", (data) => {
                console.log("data", data);
                if (data?.job_inprogress) {
                    refetch();
                }
            });

            return () => {
                socket.disconnect();
            };
        }
    }, [userDetails, activeTab]);

    const handleChange = (event) => {
        let split = event.split('-');
        setParams((prev) => ({ ...prev, sort_by: split[0], sort: split[1], page: 1 }));
    }

    return (
        <>
            <div className="flex items-center justify-between border-b border-lightGray md:mb-5 mb-2.5 overflow-hidden overflow-x-auto md:pb-5 pb-2.5">
                <div className="flex items-center *:py-1 *:whitespace-nowrap md:gap-3 gap-1.5">
                    <span onClick={() => handleTabClick("inprogress")} className={`${activeTab == 'inprogress' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'}  text-sm cursor-pointer border rounded-full px-5`}>
                        {translations?.inProgress}
                    </span>
                    <span onClick={() => handleTabClick("closed")} className={`${activeTab == 'closed' ? 'text-white bg-primary font-medium border-transparent' : 'text-black font-medium border-lightGray'} text-sm cursor-pointer border !mx-0 rounded-full px-5 py-2 `}>
                        {translations?.closed}
                    </span>
                </div>
                <div className='flex items-center gap-1.5'>
                    <select className="appearance-none border border-lightGray rounded-full w-32 md:py-1.5 py-1 px-4 pr-4 sm:text-sm text-xs text-darkGray font-medium placeholder:text-white/50 bg-transparent placeholder:font-normal focus:outline-none  focus-visible:outline-none bg-[url('/assets/images/select-arrow.svg')] bg-no-repeat bg-[90%] *:bg-white *:px-2 *:py-1" onChange={(e) => handleChange(e.target.value)}>
                        <option value="updated_at-DESC" selected>{translations?.latestJobs}</option>
                        <option value="updated_at-ASC">{translations?.oldJobs}</option>
                        {activeTab == 'inprogress' && <option value="draft_due_date-ASC">{translations?.dueDate}</option>}
                    </select>
                </div>
            </div>
            {skeletonLoading ?
                <div className="grid grid-cols-1 gap-4">
                    <CampaignListingBoxSkeleton />
                    <CampaignListingBoxSkeleton />
                    <CampaignListingBoxSkeleton />
                </div> :
                <MyJobListing data={jobData} userDetails={userDetails} openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} refetch={refetch} setParams={setParams} params={params} isPending={isPending} translations={translations} />
            }
            <JobDetails openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} mainListRefetch={refetch} />

        </>
    )
}

export default MyJobs