"use client";
import React, { useState, useEffect } from "react";
import CheckInModal from "./checkin-modal";
import {
  useAddDailyCheckIn,
  useGetDailyCheckIn,
  useGetUserCoinSetting,
} from "@/state/profile/profile.action";
import { Reward, usercoinSetting } from "../profile.type";
import DailyRewardCard from "./daily-reward-card";
import { useSession } from "next-auth/react";

export default function DailyRewardsPage({
  onRefetch,
}: {
  onRefetch: () => void;
}) {
  const [rewards, setRewards] = useState<Reward[]>([]);
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [rewardsTemplate, setRewardsTemplate] = useState<any[]>([]);
  const [isModalOpen, setIsModalOpen] = useState(false);
  const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  const { data: session } = useSession();

  const {
    data: checkInData = [],
    refetch: refetchCheckIns,
    isLoading: isCheckInLoading,
  } = useGetDailyCheckIn({ timezone, session });
  const { mutate: getUserCoinSetting, isPending: isSettingsLoading } =
    useGetUserCoinSetting();
  const { mutate: addDailyCheckIn, isPending: isClaiming } =
    useAddDailyCheckIn();

  useEffect(() => {
    getUserCoinSetting(
      {},
      {
        onSuccess: (response: usercoinSetting) => {
          console.log(response, "response");
          if (response?.weekly_coins) {
            setRewardsTemplate(response?.weekly_coins);
          }
        },
        onError: (error) => {
          console.error("Failed to fetch coin settings:", error);
        },
      }
    );
  }, [getUserCoinSetting]); //react-hooks/exhaustive-deps

  useEffect(() => {
    if (rewardsTemplate.length === 0) 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);
  }, [checkInData, rewardsTemplate]);

  const handleClaimReward = () => {
    addDailyCheckIn(
      { timezone },
      {
        onSuccess: () => {
          refetchCheckIns();
          setIsModalOpen(false);
          onRefetch();
        },
      }
    );
  };

  const todayReward = rewards.find((r) => r.available);
  const streak = checkInData?.length || 0;

  const isLoading = isCheckInLoading || isSettingsLoading;
  console.log(rewards, "rewards");
  return (
    <>
      <div className="min-h-screen bg-[#1A1A1A] p-6 relative overflow-hidden">
        <div className="absolute inset-0 opacity-10 bg-[radial-gradient(circle_at_center,rgba(237,58,87,0.2),transparent_40%)]"></div>
        <div className="relative z-10 max-w-7xl mx-auto">
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold text-white drop-shadow-lg mb-2">
              My Coin Rewards
            </h1>
          </div>

          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6">
            {isLoading
              ? Array.from({ length: 7 })?.map((_, index) => (
                  <div
                    key={index}
                    className="h-48 bg-white/10 rounded-2xl animate-pulse"
                  ></div>
                ))
              : rewards?.map((reward) => (
                  <DailyRewardCard
                    key={reward.id}
                    reward={reward}
                    isToday={
                      reward.day ===
                      new Date().toLocaleString("en-US", { weekday: "long" })
                    }
                    onClaim={() => {
                      // Only open the modal if there is a reward available to claim
                      if (todayReward) {
                        setIsModalOpen(true);
                      }
                    }}
                  />
                ))}
          </div>
        </div>
      </div>

      <CheckInModal
        isOpen={isModalOpen}
        onClose={() => setIsModalOpen(false)}
        rewards={rewards}
        streak={streak}
        onClaim={handleClaimReward}
        isClaiming={isClaiming}
      />
    </>
  );
}