import { useEffect, useRef, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { usePathname, useRouter } from 'next/navigation';
import Link from 'next/link';
import Cookies from 'js-cookie'
import DatePicker from 'react-datepicker';
import moment from 'moment';
import { RiRefreshLine } from 'react-icons/ri';
import { useQuery, useQueryClient } from '@tanstack/react-query';
import { CometChat } from "@cometchat/chat-sdk-javascript";
import PrimaryButton from '@/Component/Common/Forms/PrimaryButton'
import ImageWithFallback from '@/Component/Common/ImageWithFallback'
import { CalendarSVG, VerticalDotsSVG } from '@/Component/Common/SVGs/CommonSVG'
import { toggleProfileSidebar } from '@/lib/Features/ThemeSlice/themeSlice'
import { getUserDetails } from '@/lib/Features/UserDetails/userDetails'
import { AppStore } from '@/lib/store'
import useOutsideDropdown from '@/Utils/Hooks/useOutsideDropdown'
import ConfirmationModal from '@/Component/Common/Modal/ConfirmationModal'
import { useTranslation } from '@/Utils/Hooks/useTranslate';
import CustomFetch from '@/Utils/APIRequest/AxiosInstance';
import { DashboardBrandCalendarAPI, DashboardInfluencerCalendarAPI } from '@/Utils/APIRequest/Endpoints';
import JobDetails from '@/Component/Influencer/InfluencerJobs/JobDetails';
import SkeletonLoader from '../SkeletonLoader';
import HeaderSidebarInfluencerCampaignList from './HeaderSidebarInfluencerCampaignList';
import HeaderSidebarBrandCampaignList from './HeaderSidebarBrandCampaignList';
import CampaignManagementDetail from '@/Component/Brand/MyCampaigns/CampaignDetail/CampaignDetailsTabs/CampaignManagement/CampaignManagementDetail';
import { CustomToast } from '@/Utils/CustomToast';

const HeaderProfileSidebar = (props) => {
    const { hideHeader } = props;
    const dispatch = useDispatch();
    const queryClient = useQueryClient();
    const pathName = usePathname();
    const router = useRouter();
    const [modal, setModal] = useState<any>(null);
    const [openSideModal, setOpenSideModal] = useState<any>(null);
    const [brandOpenSideModal, setBrandOpenSideModal] = useState<any>(null);
    const { translations } = useTranslation();
    const { toggleProfileSidebarState } = useSelector((state: AppStore) => state.themeSlice);
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const { ref, isComponentVisible, setIsComponentVisible } = useOutsideDropdown();
    const [dateRange, setDateRange] = useState<any>([moment().startOf('month').format('YYYY-MM-DD'), moment().endOf('month').format('YYYY-MM-DD')]);
    const [startDate, endDate] = dateRange;
    const datePickerRef = useRef<any>(null);

    const handleToggle = () => {
        dispatch(toggleProfileSidebar(!toggleProfileSidebarState));
    }

    const closeMenu = () => {
        setIsComponentVisible((prev) => prev !== true)
    }

    const handleLogout = () => {
        setModal(true)
    }

    const { ref: sidebarRef, isComponentVisible: sidebarIsComponentVisible, setIsComponentVisible: sidebarSetIsComponentVisible } = useOutsideDropdown();

    useEffect(() => {
        setIsComponentVisible(openSideModal ? true : false)
    }, [openSideModal])

    const callbackFunction = () => {
        CometChat.logout().then(
            (loggedOut: Object) => {
                let usersRequest: CometChat.UsersRequest = new CometChat.UsersRequestBuilder()
                    .setStatus(CometChat.USER_STATUS.OFFLINE)
                    .build();
            },
            (error: CometChat.CometChatException) => {
                console.log("Logout failed with exception:", { error });
            }
        );
        // Clear Redux user first so calendar/self queries disable before cache clear
        // dispatch(getUserDetails(null));
        dispatch(toggleProfileSidebar(false));
        Cookies.remove('aat')
        Cookies.remove('iat')
        Cookies.remove('bat')
        Cookies.remove('verifyUAT')
        Cookies.remove('user_info')
        Cookies.remove('cc_auth')
        Cookies.remove('campaign_slug')
        sessionStorage.clear();
        setModal(false);
        // Cancel in-flight; clear on next tick after observers re-render with enabled:false
        queryClient.cancelQueries();
        router.push('/login');        
        setTimeout(() => queryClient.clear(), 0);
    }

    const handleEditProfile = () => {
        if (userDetails?.role !== "admin" && pathName.includes("dashboard")) {
            router.push(`/${userDetails?.role}/profile/profile-settings`)
        } else {
            dispatch(toggleProfileSidebar(!toggleProfileSidebarState));
        }
    }

    const APIEndPont = userDetails?.role == 'brand' ? DashboardBrandCalendarAPI : DashboardInfluencerCalendarAPI;
    const hasAuthCookie = !!(Cookies.get('aat') || Cookies.get('bat') || Cookies.get('iat'));

    // Get API
    const { data: CalendarData, isPending, fetchStatus, refetch } = useQuery({
        queryKey: [APIEndPont, dateRange],
        queryFn: () => CustomFetch({
            url: APIEndPont,
            params: {
                start_date: moment(dateRange[0]).format('YYYY-MM-DD'),
                end_date: moment(dateRange[1]).format('YYYY-MM-DD'),
            },
        }, null, false),
        refetchOnWindowFocus: false,
        enabled: !!(dateRange[0] && dateRange[1] && hasAuthCookie && userDetails && userDetails?.role !== 'admin'),
        select: (data) => data.data.data,
    });

    const refetchAPI = () => {
        console.log("dateRange", dateRange[0], dateRange[1]);

        if (dateRange[0] && dateRange[1]) {
            refetch();
        } else {
            CustomToast('error', 'Please select date range')
        }
    }

    return (
        <>
            <div className={`${hideHeader ? 'xl:translate-x-0' : ''} ${(toggleProfileSidebarState) ? 'translate-x-0' : 'translate-x-full'}  transition-all duration-300 transform fixed top-0 right-0 bottom-0 z-[62] w-72 md:pt-7 pt-5 overflow-x-hidden px-4 bg-white border-l border-lightGray`}>
                <div className='bg-gradient-to-br from-[#EEE9FF] to-[#DFE9FE] rounded-xl px-7 py-6'>
                    <div className='flex flex-col gap-y-8 items-center text-center'>
                        <div className='flex flex-col gap-y-2 items-center'>
                            <div className='relative w-24 h-24 rounded-full overflow-hidden'>
                                {userDetails &&
                                    <ImageWithFallback src={userDetails?.image} className="w-full h-full object-cover" alt="Profile 1" width={96} height={96} />}
                            </div>
                            <div className='flex flex-col'>
                                <Link href={`/${userDetails?.role}/profile`}><span className='text-lg leading-6 font-semibold cursor-pointer'>{userDetails?.role === 'influencer' ? userDetails?.display_name : userDetails?.first_name + ' ' + userDetails?.last_name}</span></Link>
                                <span className='text-sm leading-6'>{userDetails?.role === 'influencer' ? userDetails?.country :
                                    userDetails?.company_name}</span>
                            </div>
                        </div>
                        <div className='flex items-center justify-center 2xl:gap-3 gap-1.5 relative' ref={ref}>
                            <Link href={`/${userDetails?.role}/profile/profile-settings`} onClick={handleEditProfile}>
                                <PrimaryButton title={userDetails?.role === 'admin' ? 'Edit Profile' : translations?.profileSettings} customClass="!bg-black !border-black !py-1.5 !text-sm !px-4" buttonType="button" />
                            </Link>
                            <div className='w-9 h-9 rounded-full flex items-center justify-center bg-white cursor-pointer' onClick={closeMenu}>
                                <VerticalDotsSVG />
                            </div>
                            {
                                isComponentVisible &&
                                <div className="absolute right-0 z-10 mt-2 w-52 origin-top-right rounded-xl bg-white shadow-lg border border-lightGray/30 top-full">
                                    <div className="p-2">
                                        <a onClick={handleLogout} className='cursor-pointer flex items-center p-3 text-xs font-medium text-gray-900 hover:bg-gray-10 rounded-lg'>
                                            {userDetails?.role === 'admin' ? 'Logout' : translations?.logOut}
                                        </a>
                                    </div>
                                </div>
                            }
                        </div>
                    </div>
                </div>
                {userDetails?.role !== 'admin' &&
                    <div className='mt-5'>
                        <div className='flex items-center justify-between'>
                            <h5 className='2xl:text-lg text-base font-bold '>{translations?.calendar}</h5>
                            <div className='flex items-center gap-1.5'>
                                <RiRefreshLine className={`${fetchStatus == 'fetching' ? 'animate-spin' : ''} text-xl text-gray cursor-pointer`} title='Refresh' onClick={refetchAPI} />
                                <span className='cursor-pointer' onClick={() => datePickerRef?.current?.setFocus()}><CalendarSVG /></span>
                            </div>
                        </div>
                        <DatePicker ref={datePickerRef} selectsRange={true} startDate={startDate} endDate={endDate} onChange={(update) => setDateRange(update)} dateFormat={'EEE, dd MMM YY'} className='appearance-none border-b border-gray/50 w-full py-2.5 sm:text-sm text-xs text-black font-medium placeholder:text-gray/70 placeholder:font-normal focus:outline-none focus:shadow-none focus-visible:outline-none mb-2' />
                        {fetchStatus == 'fetching' ?
                            <div className='flex flex-col gap-3'>
                                <SkeletonLoader width='100%' height={170} />
                                <SkeletonLoader width='100%' height={170} />
                            </div> :
                            userDetails?.role == 'influencer' ?
                                <HeaderSidebarInfluencerCampaignList data={CalendarData} userDetails={userDetails} setOpenSideModal={setOpenSideModal} translations={translations} />
                                :
                                <HeaderSidebarBrandCampaignList data={CalendarData} userDetails={userDetails} setOpenSideModal={setBrandOpenSideModal} translations={translations} />
                        }
                    </div>}
            </div>

            <div onClick={handleToggle} className={`${toggleProfileSidebarState ? "visible" : "invisible"} transition-all duration-300 fixed top-0 right-0 bottom-0 left-0 w-full h-full z-[61] bg-black/20`}></div>

            {modal && <ConfirmationModal setModal={setModal} modal={modal} callbackFunction={callbackFunction} args={{ size: "sm", message: userDetails?.role === 'admin' ? 'Are you sure you want to logout?' : translations.logOutMessage, buttonText: userDetails?.role === 'admin' ? 'Logout' : translations.logout }} translations={translations} />}
            {openSideModal && <JobDetails openSideModal={openSideModal} setOpenSideModal={setOpenSideModal} mainListRefetch={refetch} />}
            {brandOpenSideModal && <CampaignManagementDetail openSideModal={brandOpenSideModal} setOpenSideModal={setBrandOpenSideModal} mainListRefetch={refetch} ref={sidebarRef} isComponentVisible={sidebarIsComponentVisible} setIsComponentVisible={sidebarSetIsComponentVisible} translations={translations} />}

        </>
    )
}

export default HeaderProfileSidebar