'use client'
import { useEffect, useState } from "react";
import { useQuery } from "@tanstack/react-query";
import ReportHeader from "./ReportHeader";
import usePost from "@/Utils/Hooks/usePost";
import { CampaignAPI, PermissionAPI } from "@/Utils/APIRequest/Endpoints";
import Loader from "@/Layout/Loader";
import ReportStripe from "./ReportStripe";
import CustomFetch from "@/Utils/APIRequest/AxiosInstance";
import BarChart from "./BarChart";
import PieChart from "./PieChart";
import InfluencerMetrics from "./InfluencerMetrics";
import ReportsSkeleton from "./ReportsSkeleton";
import { useSelector } from "react-redux";
import { AppStore } from "@/lib/store";
import { useTranslation } from "@/Utils/Hooks/useTranslate";
import Image from "next/image";
import GradientButton from "@/Component/Common/Forms/GradientButton";
import Link from "next/link";
import { useRouter } from "next/navigation";

const MainReport = () => {
    const [state, setState] = useState<any>({ campaign_ids: [], type: "YEAR", days: 6, status: "", platforms: [] })
    const { translations } = useTranslation();
    const router = useRouter();
    const [reportData, setReportData] = useState<any>({});
    const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);

    // Get API
    const { data: CampaignListData, isPending: getCampaignLoader, refetch } = useQuery({ queryKey: [CampaignAPI], queryFn: () => CustomFetch({ url: `${CampaignAPI}/name` }, null, false), enabled: !!userDetails, refetchOnWindowFocus: false, select: (data) => data?.data });

    // Get Permission API
    const { data: PermissionData, isPending: PermissionLoader } = useQuery({ queryKey: [PermissionAPI], queryFn: () => CustomFetch({ url: PermissionAPI }, null, false), enabled: !!userDetails, refetchOnWindowFocus: false, select: (data) => data?.data?.permissions });

    // API Post
    const { isPending, mutate } = usePost(`${CampaignAPI}/reports`, null, (response) => {
        if (response?.status == 200 || response?.status == 201) {
            setReportData(response?.data)
        }
    }, null)

    useEffect(() => {
        mutate(state);
    }, [state, mutate]);

    const isReportBlurred = PermissionData?.campaign_report;

    const handleBecomePremium = () => {
        router.push("/brand/subscription");
    }

    return (
        <>
            {!isReportBlurred ?
                <div className="h-[1800px] relative">
                    <div className="absolute top-20 left-0 right-0 flex items-center justify-center gap-4 max-w-80 mx-auto flex-col bg-white p-5 rounded-2xl text-center shadow-lg text-sm">
                        <span className="text-lg font-medium">{translations?.accessFeature}</span>
                        <GradientButton title={translations?.becomePremium} onClick={handleBecomePremium} buttonType="button" customClass="px-4 !w-full" />
                    </div>
                    <Image src='/assets/images/reports-blur.jpg' width={1600} alt='Report' height={1800} className='w-full h-full' />
                </div> :
                <>
                    <ReportHeader state={state} setState={setState} CampaignListData={CampaignListData} userDetails={userDetails} reportData={reportData?.statistics} translations={translations} />
                    {isPending ? <ReportsSkeleton /> :
                        <>
                            <ReportStripe reportData={reportData?.statistics} translations={translations} />
                            <BarChart barChartData={reportData?.barChart} translations={translations} />
                            <PieChart pieChartData={reportData?.pieChart} translations={translations} />
                            <InfluencerMetrics tableData={reportData?.postRows} userDetails={userDetails} translations={translations} />
                        </>
                    }
                </>
            }
        </>
    );
}

export default MainReport;