"use client";
import React, { useEffect, useState } from "react";
import StreamingHeroHome from "../../src/components/home-slider/home-slider";
import {
  useHomeSeriesCarousalData,
  useHomeSeriesSliderData,
  useRecommendationsCarousalData,
} from "@/state/home/home.action";
import HomeCarousal from "@/components/home/home-carousal";
import { HomeCarousalSkeleton } from "@/components/home/home-carousel-skeleton";
import StreamingHeroHomeSkeleton from "@/components/home-slider/StreamingHeroHomeSkeleton";
import { formatTitle } from "@/lib/common-function";
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 } = useSettingsStore();
  const {
    data: carousalData,
    isLoading: isCarousalLoading,
    refetch,
  } = useHomeSeriesCarousalData({
    language: language?.language_id,
    country: country?.country_id,
  });

  const { data: recommendData, error } =
    useRecommendationsCarousalData(session);

  const recommendList = recommendData?.recommendations;
  const recommendTrendingList = carousalData?.trending;

  const { data: sliderData = [], isLoading: isSliderLoading } =
    useHomeSeriesSliderData();
  // 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);
  const streak = checkInData?.length || 0;

  // ⛳ 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
      checkInData?.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, checkInData]);

  const skeletonCategories = [
    "COMING SOON",
    "NEW RELEASE",
    "TRENDING NOW",
    "ACTION",
    "DRAMA",
    "COMEDY",
    "THRILLER",
    "DOCUMENTARY",
    "ROMANCE",
    "HORROR",
    "FULL MOVIES",
  ];

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

      {isCarousalLoading ? (
        <div>
          {skeletonCategories?.map((title) => (
            <HomeCarousalSkeleton key={title} title={title} />
          ))}
        </div>
      ) : (
        <>
          {carousalData &&
            Object.keys(carousalData)
              .filter((key) => carousalData[key]?.length > 0)
              ?.map((categoryKey, index) => (
                <HomeCarousal
                  key={categoryKey}
                  data={carousalData[categoryKey]}
                  recommendData={
                    index === 1
                      ? recommendList
                      : index === 5
                        ? recommendTrendingList
                        : undefined
                  }
                  categoryKey={categoryKey}
                  title={formatTitle(categoryKey)}
                  refetch={refetch}
                  indexSet={index}
                />
              ))}
        </>
      )}

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

export default HomePage;