"use client";

import React from "react";
import Image from "next/image";
import { X } from "lucide-react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { ImageConstant } from "../../../../constant/ImageConstant";
import { CheckInModalProps } from "../profile.type";
import { VisuallyHidden } from "@radix-ui/react-visually-hidden";

const CheckInModal: React.FC<CheckInModalProps> = ({
  isOpen,
  onClose,
  rewards,
  streak,
  onClaim,
  isClaiming,
}) => {
  const todayReward = rewards.find((r) => r.available && !r.claimed);
  const nextReward = rewards.find(
    (r) =>
      r.day ===
      [
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
        "Sunday",
      ][new Date().getDay()]
  );

  const getDayLabel = (day: string, isToday: boolean) => {
    if (isToday) return "Today";
    const dayIndex = [
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday",
      "Friday",
      "Saturday",
      "Sunday",
    ].indexOf(day);
    return `${dayIndex + 1} day`;
  };

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent
        className="bg-[#FFECEF] text-black rounded-2xl p-6 text-center sm:max-w-sm border-none shadow-2xl overflow-visible"
        showCloseButton={false}
      >
        <VisuallyHidden>
          <DialogTitle>Check In Modal</DialogTitle>
        </VisuallyHidden>
        <button
          onClick={onClose}
          className="absolute top-4 right-4 w-8 h-8 bg-black/10 rounded-full flex items-center justify-center z-20 hover:bg-black/20 transition-colors"
        >
          <X className="w-5 h-5 text-black" />
        </button>

        <div className="absolute -top-20 left-1/2 -translate-x-1/2 w-48 h-32 z-10 pointer-events-none">
          <Image
            src={ImageConstant.giftBoxes}
            alt="Rewards"
            className="object-contain"
          />
        </div>

        <div className="relative pt-12">
          <DialogHeader>
            <DialogTitle className="text-2xl font-bold mt-4 text-center">
              Sign In Today
            </DialogTitle>
            <DialogDescription className="text-sm text-gray-700 mt-1 text-center">
              Signed {streak}/{rewards.length} days. Tomorrow{" "}
              {nextReward?.points || 0} coins
            </DialogDescription>
          </DialogHeader>
          <div className="grid grid-cols-4 gap-3 mt-6">
            {/* {rewards?.map((reward) => (
              <div
                key={reward.id}
                className={`p-2 rounded-lg text-center ${
                  reward.available && !reward.claimed
                    ? "bg-[#FF7A51] text-white"
                    : "bg-[#FADCD2]"
                }`}
              >
                <p className="text-xs font-bold text-orange-800/80">
                  +{reward.points}
                </p>
                <div className="w-10 h-10 mx-auto my-1 flex items-center justify-center">
                  <Image
                    src={ImageConstant.coin}
                    alt="coin"
                    width={reward.day === "Sunday" ? 36 : 28}
                    height={reward.day === "Sunday" ? 36 : 28}
                  />
                </div>
                <p
                  className={`text-xs font-semibold ${reward.available && !reward.claimed ? "text-white" : "text-gray-700"}`}
                >
                  {getDayLabel(reward.day, reward.available && !reward.claimed)}
                </p>
              </div>
            ))} */}
            {Array.isArray(rewards) && rewards.length > 0 ? (
              rewards.map((reward) => (
                <div
                  key={reward.id || reward.day}
                  className={`p-2 rounded-lg text-center ${
                    reward.available && !reward.claimed
                      ? "bg-[#FF7A51] text-white"
                      : "bg-[#FADCD2]"
                  }`}
                >
                  <p className="text-xs font-bold text-orange-800/80">
                    +{reward.points || 0}
                  </p>
                  <div className="w-10 h-10 mx-auto my-1 flex items-center justify-center">
                    <Image
                      src={ImageConstant.coin}
                      alt="coin"
                      width={reward.day === "Sunday" ? 36 : 28}
                      height={reward.day === "Sunday" ? 36 : 28}
                    />
                  </div>
                  <p
                    className={`text-xs font-semibold ${
                      reward.available && !reward.claimed
                        ? "text-white"
                        : "text-gray-700"
                    }`}
                  >
                    {getDayLabel(
                      reward.day,
                      reward.available && !reward.claimed
                    )}
                  </p>
                </div>
              ))
            ) : (
              <p>No rewards available</p>
            )}
          </div>
          <button
            onClick={onClaim}
            disabled={isClaiming || !todayReward}
            className="w-full mt-6 py-3 cursor-pointer rounded-lg font-bold text-white text-lg bg-gradient-to-r from-[#ED3A57] to-[#FD521E] shadow-lg disabled:opacity-60 disabled:cursor-not-allowed transition-transform active:scale-95"
          >
            {isClaiming
              ? "Claiming..."
              : `Check In Now +${todayReward?.points || 0} Coins`}
          </button>
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default CheckInModal;