"use client";

import { Lock, X } from "lucide-react";
import Image, { StaticImageData } from "next/image";
import React from "react";
import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogClose } from "@/components/ui/dialog";
import { ImageConstant } from "../../../constant/ImageConstant";
import { UnlockEpisodeModalProps } from "./video-detail-type";

export const UnlockEpisodeModal = ({
  isOpen,
  onClose,
  content,
  mode,
  onClick,
}: UnlockEpisodeModalProps) => {
  if (!isOpen || !content) return null;

  const isNotReleased = mode === "not_released";
  const contentType = content?.series ? "episode" : "video";
  // const seriesName = content?.series?.title || "this video";
  const imageUrl: string | StaticImageData =
    content?.thumbnail_high_1x1 ??
    content?.thumbnail_high_9x16 ??
    content?.thumbnail_high_3x4 ??
    content?.thumbnail ??
    ImageConstant?.imagePlaceHolder;

  const descriptionText = isNotReleased
    ? `Unlock to watch this ${contentType} after ${content?.series?.title} released`
    : `Unlock and watch this episode before it's released`;

  return (
    <Dialog open={isOpen} onOpenChange={onClose}>
      <DialogContent className="bg-[#181818] text-white p-0 rounded-2xl w-[90%] sm:max-w-sm border border-gray-800 shadow-2xl focus:outline-none">
        <DialogClose asChild>
          <button
            className="absolute top-4 right-4 z-20 rounded-full bg-black/60 p-1.5 text-white/80 opacity-80 transition-opacity hover:opacity-100 focus:outline-none"
            aria-label="Close"
          >
            <X className="h-5 w-5" />
          </button>
        </DialogClose>
        <div className="flex flex-col items-center text-center p-6 pt-10">
          <div className="w-full max-w-[300px] overflow-hidden rounded-xl shadow-lg shadow-black/30 mb-5">
            <Image
              src={imageUrl}
              alt={content.title}
              width={350}
              height={197}
              className="w-full aspect-video object-cover"
              // onError={(e) => {
              //   e.currentTarget.src = ImageConstant.imagePlaceHolder;
              // }}
            />
          </div>
          <h2 className="text-2xl font-bold mb-4">{content.title}</h2>
          <div className="bg-zinc-800/80 p-3.5 rounded-xl mb-4">
            <Lock className="h-7 w-7 text-white/90" />
          </div>
          <p className="text-sm text-gray-400 mb-6 max-w-xs">
            {descriptionText}
          </p>
          {!isNotReleased && (
            <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"
              disabled={isNotReleased}
              onClick={onClick}
            >
              <div className="flex items-center justify-center gap-3">
                <span>{"Unlock Now"}</span>
                <div className="flex items-center gap-1.5 bg-black/25 px-3 py-1 rounded-full text-sm font-semibold">
                  <Image
                    src={ImageConstant.coin}
                    alt="coin"
                    width={20}
                    height={20}
                  />
                  <span>
                    {content?.early_access_datetime
                      ? (content?.early_access_coins ?? 0)
                      : (content?.coin_price ?? 0)}
                  </span>
                </div>
              </div>
            </Button>
          )}
          {!isNotReleased && (
            <p className="text-xs text-gray-500 px-4">
              {"Get early access to unlock new and exciting upcoming episodes."}
            </p>
          )}
        </div>
      </DialogContent>
    </Dialog>
  );
};