import { useEffect, useState } from "react"
import { useSelector } from "react-redux";
import { usePathname, useRouter } from "next/navigation"
import { ArrowBackBlackSVG } from "@/Component/Common/SVGs/CommonSVG";
import { AppStore } from "@/lib/store";
import { useLoading } from "@/Utils/Hooks/useLoading";
import SkeletonLoader from "../SkeletonLoader";
import { useTranslation } from "@/Utils/Hooks/useTranslate";

const HeaderTitle = (props) => {
    const { hideHeader } = props
    const router = useRouter();
    const pathName = usePathname();
    const [isMainPage, setIsMainPage] = useState(true);
    const [title, setTitle] = useState('');
    const [breadcrumb, setBreadcrumb] = useState('');
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
    const influencerDetails: any = useSelector((state: AppStore) => state.influencerDataSlice?.influencerDetails);
    const isLoading: boolean = useSelector((state: AppStore) => state.influencerDataSlice?.loading);
    const campaignDetails: any = useSelector((state: AppStore) => state.influencerDataSlice?.campaignDetails);
    const { translations } = useTranslation();
    const shouldHideDashboardSummary = hideHeader && (
        (userDetails?.role === 'brand' && pathName.includes('brand/dashboard')) ||
        (userDetails?.role === 'influencer' && pathName.includes('influencer/dashboard'))
    );

    const getGreeting = () => {
        const currentHour = new Date().getHours();
        if (currentHour < 12) {
            return translations?.goodMorning;
        } else if (currentHour < 18) {
            return translations?.goodAfternoon;
        } else {
            return translations?.goodEvening;
        }
    };

    useEffect(() => {
        const pathArray = pathName.split('/').filter(Boolean); // Split the path and filter out empty values

        if (pathArray.length <= 2) {
            // If the path is just /brands, /influencers or /admin it's the main page
            setIsMainPage(true);
            setTitle(pathArray[1]?.replace('-', ' ') || translations?.dashboard); // Main page title
        } else {
            // If more than two parts exist, it's an inner page
            setIsMainPage(false);

            if (pathName.includes('brand/browse-influencer/user')) {
                setTitle(`${influencerDetails?.display_name}`);
                setBreadcrumb('browse influencer');
            } else if (pathName.includes('admin/influencers') || pathName.includes('admin/influencers/edit')) {
                setTitle(`${influencerDetails?.display_name}`);
                setBreadcrumb(pathArray.slice(1, -1).map((path) => path.replace('-', ' ')).join(' / '));
            } else if (pathName.includes('admin/brands')) {
                setTitle(`${influencerDetails?.first_name} ${influencerDetails?.last_name}`);
                setBreadcrumb(pathArray.slice(1, -1).map((path) => path.replace('-', ' ')).join(' / '));
            } else if (pathName.includes('brand/my-campaigns') || pathName.includes('admin/disputes') || pathName.includes('brand/edit-campaign') || pathName.includes('admin/campaigns')) {
                setTitle(pathArray[pathArray.length - 1]?.split('_')[0].split('-').join(' '));
                setBreadcrumb(pathArray.slice(1, -1).map((path) => path.replace('-', ' ')).join(' / '));
            } else {
                setTitle(pathArray[pathArray.length - 1]?.split('-').join(' '));
                setBreadcrumb(pathArray.slice(1, -1).map((path) => path.replace('-', ' ')).join(' / '));
            }
        }

    }, [pathName, influencerDetails]);

    const routeEnum = {
        "my campaigns": "/brand/my-campaigns",
        "save list": "/brand/save-list",
        "browse influencer": "/brand/browse-influencer",
        "profile": `/${userDetails?.role}/profile`,
        "influencers": "/admin/influencers",
        "brands": "/admin/brands",
        "campaigns": "/admin/campaigns",
        "disputes": "/admin/disputes",
        "import influencer / error log": "/admin/import-influencer",
        "browse influencer / user": "/brand/browse-influencer",
        "influencers / edit": "/admin/influencers",
        "brands / edit": "/admin/brands",
        "plan / edit plan": "/admin/plan",
        "notification preferences": "/brand/notification-preferences",
    }

    const routeTranslationEnum = {
        "dashboard": translations?.dashboard,
        "my campaigns": translations?.myCampaigns,
        "browse influencer": translations?.browseInfluencer,
        "profile": translations?.profile,
        "influencers": translations?.influencers,
        "brands": translations?.brands,
        "campaigns": translations?.campaigns,
        "disputes": translations?.disputes,
        "import influencer": translations?.importInfluencer,
        "import influencer / error log": translations?.importInfluencerError,
        "jobs": translations?.jobs,
        "my jobs": translations?.myJobs,
        "payment": translations?.payment,
        "payments": translations?.payments,
        "payment method": translations?.paymentMethod ?? "Payment Method",
        "create": "Add Payment Method",
        "edit": "Edit Payment Method",
        "profile settings": translations?.profileSettings,
        "social media account": translations?.socialMediaAccount,
        "bank account": translations?.bankAccount,
        "password security": translations?.passwordSecurity,
        "terms conditions": translations?.termsConditions,
        "terms condition": translations?.termsConditions,
        "privacy policy": translations?.privacyPolicy,
        "faq": translations?.faqs,
        "plan": translations?.plan,
        "subscription history": translations?.subscriptionHistory,
        "settings": translations?.settings,
        "category": translations?.categoryHeaderTitle,
        "ad banner": translations?.adBanner,
        "save list": translations?.saveList,
        "subscription": translations?.subscription,
        "reports": translations?.reports,
        "create campaign": translations?.createCampaign,
        "published campaign": translations?.publishedCampaign,
        "edit campaign": translations?.editCampaign,
        "my subscriptions": translations?.mySubscriptions,
        "notifications": translations?.notification,
        "whatsapp messages": translations?.whatsappMessages,
        "brands / edit": translations?.brandEdit,
        "influencers / edit": translations?.influencerEdit,
        "plan / edit plan": translations?.planEdit,
        "browse influencer / user": translations?.browseUser,
        "notification preferences": translations?.notificationPreferences,
        "messages": translations?.messages ?? "Messages",
    }

    return (
        <>
            <div className={`flex ${shouldHideDashboardSummary ? 'flex-1' : ''} ${hideHeader ? 'items-start' : 'items-center'}`}>
                {!hideHeader ? (
                    <>
                        {!isMainPage && (
                            <div onClick={() => router.back()} className="cursor-pointer">
                                <ArrowBackBlackSVG customClass='xl:mr-12 md:mr-6 mr-3' />
                            </div>
                        )}
                        <div className="flex flex-col gap-1">
                            {!isMainPage && (
                                <>
                                    <span className="kicker flex items-center">
                                        <span className="max-md:hidden cursor-pointer hover:text-primary transition-colors" onClick={() => routeEnum[breadcrumb] && router.push(routeEnum[breadcrumb])}>
                                            {routeTranslationEnum[breadcrumb] ? routeTranslationEnum[breadcrumb] : breadcrumb}&nbsp;/&nbsp;
                                        </span>
                                    </span>
                                    {isLoading
                                        ? <SkeletonLoader width="220" height={32} rows={1} />
                                        : <h1 className="text-display 2xl:text-2xl md:text-xl text-lg font-bold capitalize text-neutral-900">
                                            {routeTranslationEnum[title] ? routeTranslationEnum[title] : decodeURIComponent(title)}
                                        </h1>}
                                </>
                            )}
                            {isMainPage && <h1 className="text-display text-neutral-900 2xl:text-2xl md:text-xl text-lg font-bold capitalize">
                                {routeTranslationEnum[title] ? routeTranslationEnum[title] : title}
                            </h1>
                            }
                        </div>
                    </>
                ) : shouldHideDashboardSummary ? null :
                    <div className="flex flex-col gap-1">
                        <span className='kicker hidden lg:block'>{getGreeting()}</span>
                        {userDetails?.role === 'brand' && (
                            <h1 className='text-display 2xl:text-2xl md:text-xl text-lg font-bold leading-tight text-neutral-900'>
                                <span className="text-brand-gradient">{userDetails?.active_campaigns ?? userDetails?.campaigns_count ?? 0}</span>&nbsp;{translations?.activeCampaigns || 'Active campaigns'}
                            </h1>
                        )}
                        {userDetails?.role === 'influencer' && (
                            <h1 className='text-display 2xl:text-2xl md:text-xl text-lg font-bold leading-tight text-neutral-900'>
                                <span className="text-brand-gradient">{userDetails?.invited_count ?? 0}</span>&nbsp;{translations?.invitedJobs || 'Invited jobs'}
                            </h1>
                        )}
                        {userDetails?.role !== 'brand' && userDetails?.role !== 'influencer' && (
                            <h1 className='text-display 2xl:text-2xl md:text-xl text-lg font-bold leading-tight text-neutral-900'>{translations?.hello}, <span className="text-brand-gradient">{userDetails?.first_name + ' ' + userDetails?.last_name}</span></h1>
                        )}
                    </div>
               
                }
            </div>
        </>
    );

}

export default HeaderTitle