'use client'
import { useEffect, useState } from "react"
import { useSelector } from "react-redux"
import { useRouter, useSearchParams } from "next/navigation"
import { useQuery } from "@tanstack/react-query"
import SearchInput from "@/Component/Common/Forms/SearchInput"
import { CampaignAPI } from "@/Utils/APIRequest/Endpoints"
import CustomFetch from "@/Utils/APIRequest/AxiosInstance"
import GradientButton from "@/Component/Common/Forms/GradientButton"
import { AppStore } from "@/lib/store"
import CampaignListingBox from "./CampaignListingBox"
import SkeletonLoader from "@/Layout/SkeletonLoader"
import { useLoading } from "@/Utils/Hooks/useLoading"
import Image from "next/image"
import CustomPagination from "@/Component/Common/Tables/CustomPagination"
import CampaignListingBoxSkeleton from "./CampaignListingBoxSkeleton"
import { useTranslation } from "@/Utils/Hooks/useTranslate"

const CampaignListing = () => {
  const router = useRouter();
  const searchParams = useSearchParams();
  const { translations } = useTranslation();
  const [search, setSearch] = useState("")
  const userDetails: any = useSelector((state: AppStore) => state.userDetailSlice?.userDetails);
  const { skeletonLoading, startSkeletonLoading, stopSkeletonLoading } = useLoading();

  const status: any = searchParams.get("status") || "";

  const statusEnum = {
    'running': translations?.running,
    "completed": translations?.completed,
  }

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

  // API GET
  const { data: boxData, isPending, refetch } = useQuery({ queryKey: [CampaignAPI, search, params], queryFn: () => CustomFetch({ url: `${CampaignAPI}/list`, params: { search: search, ...params } }, null, false), refetchOnWindowFocus: false, select: (data) => data?.data })

  useEffect(() => {
    if (isPending) {
      startSkeletonLoading();
    } else {
      stopSkeletonLoading();
    }
  }, [isPending]);

  return (
    <>
      {/* ── Header bar ── */}
      <div className='flex md:items-center justify-between pb-6 mb-8 border-b border-neutral-100 max-md:flex-col gap-3'>
        <SearchInput customInputMainClass="md:w-96" setSearch={setSearch} setParams={setParams} customClass="!bg-white" />
        <GradientButton title={translations?.createCampaign} buttonType='button' onClick={() => { router.push('/brand/my-campaigns/create-campaign') }} />
      </div>

      {skeletonLoading ? (
        <div>
          <div className="flex items-center gap-3 mb-5">
            <div className="h-9 w-9 rounded-xl bg-neutral-200 animate-pulse" />
            <div className="h-6 w-24 rounded-lg bg-neutral-200 animate-pulse" />
          </div>
          <div className="grid grid-cols-1 gap-4">
            <CampaignListingBoxSkeleton />
            <CampaignListingBoxSkeleton />
            <CampaignListingBoxSkeleton />
          </div>
        </div>
      ) : (
        <>
          {/* ── Section heading ── */}
          <div className="flex items-center gap-3 mb-5">
            <div className="h-9 w-9 rounded-xl bg-gradient-to-br from-primary/15 to-accent/15 flex items-center justify-center">
              {status == "completed" && <Image src="/assets/images/completed.svg" alt="Completed" width={18} height={18} />}
              {status == "running" && <Image src="/assets/images/running.svg" alt="Running" width={18} height={18} />}
            </div>
            <h3 className="text-display text-xl font-bold text-neutral-900 capitalize">{statusEnum[status]}</h3>
            {boxData?.total > 0 && (
              <span className="inline-flex items-center justify-center h-6 min-w-6 px-2 rounded-full bg-primary/10 text-primary text-xs font-bold">
                {boxData?.total}
              </span>
            )}
          </div>

          {boxData?.data?.length > 0 ? (
            <div className='grid grid-cols-1 gap-4 stagger-children'>
              {boxData?.data?.map((item, index) => (
                <CampaignListingBox itemData={item} userDetails={userDetails} key={index} refetch={refetch} translations={translations} />
              ))}
            </div>
          ) : (
            <>
              {!isPending && boxData?.data?.length == 0 && (
                <div className='relative overflow-hidden w-full bg-gradient-to-br from-primary/5 via-white to-accent/5 border border-neutral-100 shadow-soft p-8 rounded-card flex items-center justify-center'>
                  <span aria-hidden className="pointer-events-none absolute -top-10 -right-10 h-40 w-40 rounded-full bg-primary/10 blur-3xl" />
                  <span aria-hidden className="pointer-events-none absolute -bottom-10 -left-10 h-40 w-40 rounded-full bg-accent/10 blur-3xl" />
                  <span className="relative text-neutral-500 text-sm font-medium">{translations?.noDataFound}</span>
                </div>
              )}
            </>
          )}
          {boxData?.total > 10 &&
            <CustomPagination total={boxData?.total} currentPageObj={params} setParams={setParams} />}
        </>
      )}
    </>
  )
}

export default CampaignListing