"use client";

import React from "react";
import Image from "next/image";
import { DailyRewardCardProps, Reward } from "../profile.type";
import { ImageConstant } from "../../../../constant/ImageConstant";
import { CircleCheckBig } from "lucide-react";

const getRewardIcon = (type: Reward["type"], claimed: boolean) => {
  switch (claimed) {
    default:
      return <Image src={ImageConstant.coins} alt="coins" />;
  }
};

const DailyRewardCard: React.FC<DailyRewardCardProps> = ({
  reward,
  isToday,
  onClaim,
}) => {
  const { id, day, points, type, claimed, available } = reward;

  const cardStateClasses = claimed
    ? isToday
      ? "bg-gray-800/50 border-red-500 shadow-red-500/20"
      : "bg-gray-800/50 border-gray-700"
    : isToday
      ? "bg-gray-900 border-red-500 shadow-red-500/20 hover:scale-105 cursor-pointer"
      : "bg-gray-900/40 border-gray-800 opacity-60";

  const buttonStateClasses = claimed
    ? "bg-gray-800 text-gray-500 cursor-not-allowed"
    : available
      ? "bg-[#ED3A57] text-white hover:bg-red-600 shadow-lg hover:shadow-red-500/40"
      : "bg-gray-800 text-gray-600 cursor-not-allowed";

  const badgeStateClasses = isToday
    ? "bg-[#ED3A57] text-white border-red-400"
    : "bg-gray-700 text-gray-300 border-gray-600";

  return (
    <div
      className="relative group transition-transform duration-300"
      onClick={() => available && !claimed && onClaim(id)}
      data-reward-id={id}
    >
      <div
        className={`relative p-4 rounded-xl border-2 shadow-lg transition-all duration-300 ${cardStateClasses}`}
      >
        {/* Day Badge */}
        <div className="absolute -top-4 left-1/2 transform -translate-x-1/2">
          <div
            className={`px-4 py-1.5 rounded-full text-sm font-bold border-2 shadow-md ${badgeStateClasses}`}
          >
            {day.toUpperCase()}
          </div>
        </div>

        <div className="text-center space-y-4 pt-6">
          {/* Icon */}
          <div className="flex justify-center">
            {getRewardIcon(type, claimed)}
          </div>

          {/* Reward Title */}
          <h3 className="text-xl font-bold text-white drop-shadow-lg">
            {points > 0 ? `${points} Coins` : "Special Prize"}
          </h3>

          {/* Claim Button */}
          <button
            className={`w-full py-3 px-6 rounded-lg font-bold text-lg cursor-pointer transition-all duration-300 ${buttonStateClasses}`}
            disabled={!available || claimed}
            onClick={() => {}}
          >
            {claimed ? (
              <div className="flex gap-1 items-center justify-center">
                <CircleCheckBig className="w-4" /> CLAIMED
              </div>
            ) : available ? (
              "CLAIM NOW"
            ) : (
              "LOCKED"
            )}
          </button>
        </div>

        {/* Sparkle effects for available rewards */}
        {available && !claimed && (
          <>
            <div className="absolute top-3 right-3 w-1.5 h-1.5 bg-red-400 rounded-full animate-ping"></div>
            <div className="absolute bottom-3 left-3 w-1 h-1 bg-red-300 rounded-full animate-pulse"></div>
          </>
        )}
      </div>
    </div>
  );
};

export default DailyRewardCard;