"use client";

import React, { useState } from "react";
import { players, getPlayerUrl } from "@/lib/players";
import PlayerTabs from "./PlayerTabs";
import SkeletonCard from "./SkeletonCard";

interface WatchModalProps {
  movieId: number;
  movieTitle: string;
  mediaType?: "movie" | "tv";
  seasonNumber?: number;
  episodeNumber?: number;
  onClose: () => void;
}

export default function WatchModal({
  movieId,
  movieTitle,
  mediaType = "movie",
  seasonNumber = 1,
  episodeNumber = 1,
  onClose,
}: WatchModalProps) {
  const [activePlayerIdx, setActivePlayerIdx] = useState(0);
  const [playerLoading, setPlayerLoading] = useState(true);
  const activePlayer = players[activePlayerIdx];

  const playerUrl = getPlayerUrl({
    player: activePlayer,
    id: movieId,
    mediaType,
    season: seasonNumber,
    episode: episodeNumber,
  });

  const handleServerSelect = (index: number) => {
    setActivePlayerIdx(index);
    setPlayerLoading(true);
  };

  return (
    <div
      className="fixed inset-0 bg-black bg-opacity-90 flex justify-center items-center z-50 p-4"
    >
      <div className="relative w-full max-w-6xl bg-dark rounded-lg overflow-hidden shadow-lg">
        {/* Close Button */}
        <button
          className="absolute top-3 right-3 text-white text-2xl hover:text-red-500"
          onClick={onClose}
        >
          &times;
        </button>

        {/* Player Area */}
        <div className="relative w-full aspect-video bg-black">
          {playerLoading && (
            <div className="absolute inset-0 z-10">
              <SkeletonCard />
            </div>
          )}
          <iframe
            key={`${activePlayerIdx}-${mediaType}-${seasonNumber}-${episodeNumber}`}
            src={playerUrl}
            title={`Watch ${movieTitle}`}
            allowFullScreen
            allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
            onLoad={() => setPlayerLoading(false)}
            className="w-full h-full border-0"
          />
        </div>

        {/* PlayerTabs */}
        <div className="p-3 bg-gray-900 flex flex-col md:flex-row justify-between items-center gap-3">
          <PlayerTabs
            playersList={players}
            activePlayerIndex={activePlayerIdx}
            onPlayerSelect={handleServerSelect}
          />
          <div className="text-sm text-gray-300">
            {mediaType === "tv"
              ? `Season ${seasonNumber}, Episode ${episodeNumber}`
              : `Movie`}
          </div>
        </div>
      </div>
    </div>
  );
}