import React from "react";
import "./MusicPlayerModalMobile.css";
import { MusicPlayerModalProps, usePlayer } from "../usePlayer";

const MusicPlayerModalMobile: React.FC<MusicPlayerModalProps> = ({
  audioUrl,
  genre,
  genreColor,
  isMobile,
  onDiceRoll,
  onGenreChange,
  onPlayPauseClick,
}) => {
  const {
    audioRef,
    changeSong,
    currentAudioUrl,
    currentGenre,
    currentSongIndex,
    currentSongTitle,
    diceRolled,
    handleDiceRoll,
    handleNextSong,
    handleOnEndedNextSong,
    handlePlayPause,
    handlePrevSong,
    handleProgressBarClick,
    handleVolumeToggle,
    hoverPosition,
    isPlaying,
    miniPlaylist,
    progress,
    progressBarRef,
    setHoverPosition,
    setProgress,
    setShowHoverDot,
    showHoverDot,
    volumeOn,
  } = usePlayer({
    audioUrl,
    genre,
    genreColor,
    isMobile,
    onDiceRoll,
    onGenreChange,
    onPlayPauseClick,
  });

  return (
    <div
      className="musicPlayerModalMobile"
      style={{
        border: genreColor ? `1px solid ${genreColor}` : "none",
      }}
    >
      <audio
        ref={audioRef}
        src={currentAudioUrl}
        preload="auto"
        onTimeUpdate={() => {
          if (audioRef.current) {
            const { currentTime, duration } = audioRef.current;
            setProgress((currentTime / duration) * 100);
          }
        }}
        onEnded={() => handleOnEndedNextSong(currentGenre, currentSongTitle)}
      />
      <div className="outerMusicPlayerControlsMobile">
        <div
          onClick={handleVolumeToggle}
          aria-label="Sound"
          className="soundButtonMobile"
          style={{
            backgroundImage: `url('https://cdn1.suno.ai/groove-assets/public/icons/${
              volumeOn ? "Unmute" : "Mute"
            }.svg')`,
          }}
        />
        <div className="musicPlayerControlsMobile">
          <button
            onClick={handlePrevSong}
            aria-label="Previous song"
            className="prevSongButtonMobile"
            style={{
              backgroundColor:
                currentGenre !== "..."
                  ? genreColor
                  : "rgba(255, 255, 255, 0.10)",
              border:
                currentGenre !== "..." || !diceRolled
                  ? "none"
                  : "1px solid #E7E6E1",
              cursor: currentGenre !== "..." ? "pointer" : "default",
            }}
            disabled={miniPlaylist.length <= 0}
          />
          {diceRolled || currentGenre !== "..." ? (
            <div
              onClick={handlePlayPause}
              aria-label={isPlaying ? "Pause" : "Play"}
              className="playPauseButtonMobile"
              style={{
                backgroundImage: `url('https://cdn1.suno.ai/groove-assets/public/icons/${
                  isPlaying ? "Pause" : "Play"
                }.svg')`,
                backgroundColor: genreColor ? genreColor : "",
                backgroundPosition: "center",
                backgroundRepeat: "no-repeat",
                backgroundSize: "40%, cover",
              }}
            />
          ) : (
            <div
              onClick={() => handleDiceRoll("playPause")}
              aria-label={isPlaying ? "Pause" : "Play"}
              className="playPauseButtonMobile"
              style={{
                backgroundImage: `url('https://cdn1.suno.ai/groove-assets/public/icons/Union.svg'), url('/auras/Aura-1.png')`,
                backgroundPosition: "center",
                backgroundRepeat: "no-repeat",
                backgroundSize: "40%, cover",
              }}
            />
          )}

          <button
            onClick={handleNextSong}
            aria-label="Next song"
            className="nextSongButtonMobile"
            style={{
              backgroundColor:
                currentGenre !== "..."
                  ? genreColor
                  : "rgba(255, 255, 255, 0.10)",
              border:
                currentGenre !== "..." || !diceRolled
                  ? "none"
                  : "1px solid #E7E6E1",
              cursor: currentGenre !== "..." ? "pointer" : "default",
            }}
            disabled={miniPlaylist.length <= 0}
          />
        </div>
        {diceRolled || currentGenre !== "..." ? (
          <div
            onClick={() => handleDiceRoll("diceButton")}
            aria-label="Random Genre"
            className="diceButtonMobile"
          />
        ) : (
          <div
            className="emptyPlaceholder"
            style={{
              border: "none",
              borderRadius: "50%",
              cursor: "pointer",
              width: "30px",
              height: "30px",
            }}
          />
        )}
      </div>
      <div
        className="musicPlayerProgressMobile"
        ref={progressBarRef}
        onClick={handleProgressBarClick}
        onMouseMove={(e) => {
          const progressBar = progressBarRef.current;
          if (!progressBar) return;
          const rect = progressBar.getBoundingClientRect();
          setHoverPosition(e.clientX - rect.left);
          setShowHoverDot(true);
        }}
        onMouseEnter={() => setShowHoverDot(true)}
        onMouseLeave={() => setShowHoverDot(false)}
      >
        <div
          className="musicPlayerProgressBarMobile"
          style={{
            width: `${progress}%`,
            backgroundColor: genreColor ? genreColor : "",
          }}
        />
        {showHoverDot && currentAudioUrl && (
          <div
            className="hoverDotMobile"
            style={{
              left: `${hoverPosition}px`,
            }}
          />
        )}
      </div>
      <div className="dotIndicatorsMobile">
        {miniPlaylist.map((song, index) => (
          <div
            key={index}
            className={`dotMobile ${
              currentSongIndex === index ? "active" : ""
            }`}
            onClick={() => changeSong(index)}
            style={{
              backgroundColor:
                currentSongIndex === index && genreColor
                  ? genreColor
                  : "rgba(255, 255, 255, 0.20)",
              cursor: "pointer",
            }}
          />
        ))}
      </div>
    </div>
  );
};

export default MusicPlayerModalMobile;