"use client";
import { useState, useMemo } from "react";
import { cn } from "@/lib/utils";
import { Heart, LockKeyhole, Star } from "lucide-react";
import { Badge } from "../ui/badge";
import { Button } from "../ui/button";
import Link from "next/link";
import { formatDuration } from "@/lib/common-function";
import { EpisodesDetailsProps } from "./video-detail-type";
import Image from "next/image";
import { ImageConstant } from "../../../constant/ImageConstant";

const EPISODES_PER_PAGE = 20;

const EpisodesDetails: React.FC<EpisodesDetailsProps> = ({
  selectedContent,
  onSelectEpisode,
  episodeList = [],
  onLikeToggle,
  onSaveToggle,
  isLiking,
  isSaving,
  seriesId,
}) => {
  const [selectedRangeStart, setSelectedRangeStart] = useState(0);
  const contentId = selectedContent?.episode_id || selectedContent?.video_id;
  const isLiked = selectedContent?.is_liked ?? false;
  const isSaved = selectedContent?.is_saved ?? false;
  const likeCount = selectedContent?.likeCount ?? 0;
  const saveCount = selectedContent?.saveCount ?? 0;
  const duration = Number(selectedContent?.duration || 0);
  const description =
    selectedContent?.description ?? "No description available.";
  const tags = selectedContent?.series?.tags || selectedContent?.tags || [];

  const title = useMemo(() => {
    if (selectedContent) {
      return selectedContent.episode_number
        ? `Ep ${selectedContent.episode_number} - ${selectedContent.title}`
        : selectedContent.title;
    } else {
      return "-";
    }
  }, [selectedContent]);

  const episodeRanges = useMemo(() => {
    const totalEpisodes = episodeList.length;
    if (totalEpisodes === 0) return [];
    const ranges = [];
    for (let i = 0; i < totalEpisodes; i += EPISODES_PER_PAGE) {
      const startNum = i + 1;
      const endNum = Math.min(i + EPISODES_PER_PAGE, totalEpisodes);
      ranges.push({ start: i, label: `${startNum}-${endNum}` });
    }
    return ranges;
  }, [episodeList]);

  const displayedEpisodes = useMemo(() => {
    return episodeList.slice(
      selectedRangeStart,
      selectedRangeStart + EPISODES_PER_PAGE
    );
  }, [episodeList, selectedRangeStart]);
  return (
    <div className="h-[calc(100vh-110px)] overflow-auto p-6">
      <h1 className="text-2xl font-bold mb-4 text-balance">{title}</h1>

      <div className="flex items-center gap-6 mb-4">
        <div className="flex items-center gap-2">
          <button
            onClick={() => contentId && onLikeToggle(contentId, isLiked)}
            disabled={!contentId || isLiking}
            className="flex items-center gap-2 cursor-pointer group disabled:opacity-50"
          >
            <Heart
              className={cn(
                "w-6 h-4 text-red-500 transition-all group-hover:scale-110",
                isLiked ? "fill-red-500" : "fill-none"
              )}
            />
          </button>
          <span className="text-sm">{likeCount}</span>
        </div>
        <div className="flex items-center gap-2">
          <button
            onClick={() => contentId && onSaveToggle(contentId, isSaved)}
            disabled={!contentId || isSaving}
            className="flex items-center gap-2 cursor-pointer group disabled:opacity-50"
          >
            <Star
              className={cn(
                "w-4 h-4 text-yellow-400 transition-all group-hover:scale-110",
                isSaved ? "fill-yellow-400" : "fill-none"
              )}
            />
          </button>
          <span className="text-sm">{saveCount}</span>
        </div>
        {formatDuration(duration)}
      </div>

      <p className="text-sm text-gray-300 mb-6 leading-relaxed">
        {description}
      </p>
      <div className="flex flex-wrap gap-2 mb-6">
        {tags?.map((item, index) => (
          <Badge
            key={index}
            variant="secondary"
            className="bg-[#040404] text-white hover:bg-gray-600"
          >
            {item}
          </Badge>
        ))}
      </div>

      {episodeList && episodeList.length > 0 && (
        <div className="mb-4">
          <div className="flex items-center justify-between mb-4">
            <div className="flex gap-2 flex-wrap">
              {episodeRanges?.map((range) => (
                <Button
                  key={range.label}
                  onClick={() => setSelectedRangeStart(range.start)}
                  variant={
                    selectedRangeStart === range.start ? "destructive" : "ghost"
                  }
                  size="sm"
                  className={cn(
                    "cursor-pointer",
                    selectedRangeStart !== range.start
                      ? "text-white hover:bg-white/10 border bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] border-gray-600 hover:text-white"
                      : "bg-[#ED3A57]"
                  )}
                >
                  {range.label}
                </Button>
              ))}
            </div>
            <Link
              href={`/series/all-episodes/${seriesId}`}
              className="text-white cursor-pointer hover:text-[#ED3A57] whitespace-nowrap"
            >
              All Episodes
            </Link>
          </div>
          <div className="flex gap-2 flex-wrap">
            {displayedEpisodes?.map((episode) => {
              const isSelected =
                selectedContent?.episode_id === episode.episode_id;
              return (
                <Button
                  key={episode.episode_id}
                  variant="ghost"
                  size="sm"
                  onClick={() => onSelectEpisode(episode)}
                  className={cn(
                    "relative h-[60px] w-[60px] text-white hover:bg-white/10 bg-[#2A2A2A] hover:text-white border border-[#3A3A3A] cursor-pointer",
                    selectedContent?.episode_id === episode.episode_id &&
                      "bg-[#2a2a2aaf] border-white"
                  )}
                >
                  {isSelected ? (
                    <Image
                      src={ImageConstant.animationGIF}
                      alt="Playing animation"
                      className={"h-8 w-auto"}
                    />
                  ) : (
                    episode.episode_number
                  )}
                  {episode.is_locked && (
                    <div className="bg-gradient-to-r from-[#ED3A57] via-[#ED3A57] to-[#FD521E] p-1 absolute top-[4px] right-[4px] rounded-full">
                      <LockKeyhole className="!w-3 !h-3" size={10} />
                    </div>
                  )}
                </Button>
              );
            })}
          </div>
        </div>
      )}
    </div>
  );
};

export default EpisodesDetails;