"use client";
import React, { useEffect, useMemo, useState } from "react";
import StreamingHeroHome from "@/components/home-slider/home-slider";
import {
  useHomeSeriesSliderData,
  useTopTenSeries,
} from "@/state/home/home.action";
import TopTen from "@/components/home/top-ten";
import Library from "@/components/home/library";
import CategoryRails from "@/components/home/category-rails";
import WhyReelFlix from "@/components/home/why-reelflix";
import EditorialQuote from "@/components/home/editorial-quote";
import Interactives from "@/components/home/interactives";
import Competition from "@/components/home/competition";
// import Pricing from "@/components/home/pricing";
import Faq from "@/components/home/faq";
import StreamingHeroHomeSkeleton from "@/components/home-slider/StreamingHeroHomeSkeleton";
import { useSettingsStore } from "@/state/store/settings.store";
import {
  useAddDailyCheckIn,
  useGetDailyCheckIn,
  useGetUserCoinSetting,
} from "@/state/profile/profile.action";
import CheckInModal from "@/components/profile/earnReward/checkin-modal";
import { Reward, usercoinSetting } from "@/components/profile/profile.type";
import { useSession } from "next-auth/react";

const HomePage = () => {
  const { data: session } = useSession();

  const { language, country, hasHydrated } = useSettingsStore();

  const { data: sliderData = [], isLoading: isSliderLoading } =
    useHomeSeriesSliderData();

  const { data: topTenData, isLoading: isTopTenLoading } = useTopTenSeries(
    {
      languageId: language?.language_id,
      countryId: country?.country_id,
    },
    // Wait for the persisted language/country, otherwise this fires once
    // unfiltered and again with the real values.
    { enabled: hasHydrated && !!language?.language_id }
  );
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [rewardsTemplate, setRewardsTemplate] = useState<any[]>([]);
  const [rewards, setRewards] = useState<Reward[]>([]);
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

  // ✅ Hooks for coin & check-in API calls
  const { mutate: getUserCoinSetting } = useGetUserCoinSetting();
  const { mutate: addDailyCheckIn, isPending: isClaiming } =
    useAddDailyCheckIn();
  const { data: checkInData = [], refetch: refetchCheckIns } =
    useGetDailyCheckIn({ timezone, session });

  const [isModalOpen, setIsModalOpen] = useState(false);
  // The endpoint has been seen returning a non-array body; the `= []` default
  // above only covers `undefined`, so normalise before anything iterates it.
  const checkIns = useMemo(
    () => (Array.isArray(checkInData) ? checkInData : []),
    [checkInData]
  );
  const streak = checkIns.length;

  // ⛳ Handle claim
  const handleClaimReward = () => {
    addDailyCheckIn(
      { timezone },
      {
        onSuccess: () => {
          refetchCheckIns();
          setIsModalOpen(false);
        },
      }
    );
  };

  // 🕒 Fetch reward settings — only after login
  useEffect(() => {
    if (!session?.user?.id) return; // ✅ wait for user session

    getUserCoinSetting(
      {},
      {
        onSuccess: (response: usercoinSetting) => {
          if (response?.weekly_coins) {
            setRewardsTemplate(response.weekly_coins);
          }
        },
        onError: (error) => {
          console.error("Failed to fetch coin settings:", error);
        },
      }
    );
  }, [session?.user?.id, getUserCoinSetting]);

  // 🧩 Compute rewards whenever template or check-in data changes (after login)
  useEffect(() => {
    if (!session?.user?.id || !rewardsTemplate.length) return;

    const claimedDays = new Set(
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      checkIns.map((item: any) => item.checkin_day_local)
    );
    const today = new Date().toLocaleString("en-US", { weekday: "long" });

    const processedRewards: Reward[] = rewardsTemplate.map((reward, index) => {
      const isClaimed = claimedDays.has(reward.day);
      const isToday = reward.day === today;

      return {
        id: index + 1,
        day: reward.day,
        points: reward.coins,
        type: "coins",
        claimed: isClaimed,
        available: isToday && !isClaimed,
      };
    });

    setRewards(processedRewards);

    // ✅ Auto-open modal if any reward is available
    const hasAvailable = processedRewards.some((r) => r.available);
    if (hasAvailable) {
      setIsModalOpen(true);
    }
  }, [session?.user?.id, rewardsTemplate, checkIns]);


  return (
    <div>
      {isSliderLoading ? (
        <StreamingHeroHomeSkeleton />
      ) : (
        <StreamingHeroHome data={sliderData} />
      )}

      <TopTen items={topTenData?.items} isLoading={isTopTenLoading} />

      <Library />

      <CategoryRails />

      <WhyReelFlix />

      <EditorialQuote />

      <Interactives />

      <Competition />

      {/* <Pricing /> */}

      <Faq />

      {/* 🎁 Daily Check-In Modal */}
      <CheckInModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        rewards={rewards}
        streak={streak}
        onClaim={handleClaimReward}
        isClaiming={isClaiming}
      />
    </div>
  );
};

export default HomePage;