"use client";

import React, { useEffect, useState } from "react";
import Image from "next/image";
import { X, CalendarDays, ShoppingCart } from "lucide-react";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import {
  useGetCheckWalletBalance,
  useGetSubScriptionList,
} from "@/state/profile/profile.action";
import { UnlockModalProps } from "./video-detail-type";
import { ImageConstant } from "../../../constant/ImageConstant";
import { useSession } from "next-auth/react";

const UnlockModal: React.FC<UnlockModalProps> = ({
  isOpen,
  onClose,
  onWatchAd,
  onBecomeVip,
  content,
  onUnLockEpisodes,
}) => {
  const { data: session } = useSession();
  const { data: subscriptionData } = useGetSubScriptionList(
    !!session?.user?.id
  );
  const { data: walletData } = useGetCheckWalletBalance(!!session?.user?.id);
  const [unlockData, setUnlockData] = useState({
    cost: 0,
    balance: 0,
    adsWatched: 0,
    maxAds: 0,
  });
  const contentType = content?.series ? "episode" : "video";

  useEffect(() => {
    if (content?.is_locked && walletData) {
      const { free_coins = 0, purchased_coins = 0 } = walletData;
      const balance = content.can_use_free_coin
        ? free_coins + purchased_coins
        : purchased_coins;
      setUnlockData({
        cost: content.coin_price || 0,
        balance,
        maxAds: 0,
        adsWatched: 0,
      });
    }
  }, [content, walletData]);

  if (!isOpen || !content) return null;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent
        className="bg-[#181818] text-white p-4 rounded-2xl sm:max-w-md border-gray-700 shadow-2xl"
        showCloseButton={false}
      >
        <div className="flex justify-between items-center mb-4">
          <DialogTitle>
            <div className="text-[18px]">
              <p className="text-[#ffeb33]  text-center font-bold">
                PREMIUM CONTENT.
              </p>{" "}
              Unlock this episode using your purchased coins
            </div>
          </DialogTitle>
          <button onClick={onClose} className="text-gray-400 hover:text-white">
            <X className="w-5 h-5" />
          </button>
        </div>
        <div className="bg-black/40 rounded-lg p-3 flex justify-around items-center mb-4">
          <div className="flex items-center gap-2">
            <span className="text-gray-400 font-bold">You need</span>
            <Image src={ImageConstant.coin} alt="coin" width={24} height={24} />
            <span className="font-bold">{unlockData.cost}</span>
          </div>
          <div className="w-px h-6 bg-gray-600"></div>
          <div className="flex items-center gap-2">
            <span className="text-gray-400 font-bold">Purchase Coins</span>
            <Image src={ImageConstant.coin} alt="coin" width={24} height={24} />
            <span className="font-bold">{unlockData.balance}</span>
          </div>
        </div>
        <div className="space-y-3">
          {content.can_use_free_coin && (
            <Button
              onClick={onWatchAd}
              className="w-full h-auto text-left p-3 rounded-lg bg-gradient-to-r from-[#ED3A57] to-[#FD521E] text-white"
            >
              <div className="flex items-center gap-3">
                <div className="bg-white/20 p-2 rounded-md">
                  <CalendarDays className="w-5 h-5" />
                </div>
                <div>
                  <p className="font-bold">Watch ad to unlock for free</p>
                  <p className="text-xs text-white/80">
                    Watched today ({unlockData?.adsWatched}/{unlockData?.maxAds}
                    )
                  </p>
                </div>
              </div>
            </Button>
          )}

          {unlockData?.cost <= unlockData?.balance ? (
            <Button
              className="w-full cursor-pointer h-14 bg-gradient-to-r  from-[#ED3A57] to-[#FD521E] hover:opacity-95 transition-opacity text-white font-bold py-3 text-base rounded-xl mb-4 disabled:opacity-50"
              onClick={onUnLockEpisodes}
            >
              <div className="flex items-center justify-center gap-3">
                <span>{"Unlock Now"}</span>
                <Image
                  src={ImageConstant.coin}
                  alt="coin"
                  width={20}
                  height={20}
                />
                <span>{content.coin_price}</span>
              </div>
            </Button>
          ) : (
            <>
              <Button
                onClick={onBecomeVip}
                className="w-full h-auto justify-between p-3 rounded-lg bg-[#F3D393] text-black hover:bg-amber-300 cursor-pointer "
              >
                <span className="font-bold">COINS</span>
                <span className="font-bold bg-black/10 px-3 py-1 rounded-md flex gap-1">
                  Buy Now <ShoppingCart />
                </span>
              </Button>
              <Button
                onClick={onBecomeVip}
                className="w-full h-auto justify-between p-3 rounded-lg bg-[#F3D393] text-black hover:bg-amber-300 cursor-pointer"
              >
                <span className="font-bold">
                  {subscriptionData?.[0]?.subscription_name || "Purchase Coins"}
                </span>
                <span className="font-bold bg-black/10 px-3 py-1 rounded-md flex gap-1">
                  Buy Now <ShoppingCart />
                </span>
              </Button>
            </>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
};

export default UnlockModal;