import * as React from "react"
import { addPropertyControls, ControlType } from "framer"
import { motion } from "framer-motion"

// Icon components
const PlayIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M8 5V19L19 12L8 5Z" fill="currentColor" />
  </svg>
)

const PauseIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M10 5H6V19H10V5ZM18 5H14V19H18V5Z" fill="currentColor" />
  </svg>
)

const PreviousIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M11 18V6L3 12L11 18ZM21 18V6L13 12L21 18Z" fill="currentColor" />
  </svg>
)

const NextIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M13 6V18L21 12L13 6ZM3 6V18L11 12L3 6Z" fill="currentColor" />
  </svg>
)

const DownloadIcon = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M5 20h14v-2H5v2zm0-10h4v6h6v-6h4l-7-7-7 7z" fill="currentColor" />
  </svg>
)

// TrackItem component
const TrackItem = ({ album, artist, title, selected, onPlay, onDownload }) => {
  return (
    <div style={{
      display: "flex",
      alignItems: "center",
      padding: "16px 0",
      borderBottom: "1px solid rgba(255,255,255,0.1)",
      backgroundColor: selected ? "rgba(255,255,255,0.05)" : "transparent",
    }}>
      <div style={{
        width: "50px",
        height: "50px",
        marginRight: "12px",
        backgroundColor: "#444",
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        overflow: "hidden",
        borderRadius: "8px",
      }}>
        <img 
          src={album.coverUrl} 
          alt={album.name} 
          style={{
            width: "100%",
            height: "100%",
            objectFit: "cover",
          }}
        />
      </div>
      
      <div style={{ flex: 1 }}>
        <div style={{ 
          fontSize: "16px", 
          color: "#fff", 
          marginBottom: "4px",
          fontWeight: "500",
        }}>
          {title}
        </div>
        <div style={{
          fontSize: "14px",
          color: "rgba(255,255,255,0.7)",
        }}>
          {artist}
        </div>
      </div>
      
      <div style={{
        display: "flex",
        alignItems: "center",
      }}>
        <button
          onClick={onDownload}
          style={{
            background: "none",
            border: "none",
            padding: "8px",
            marginRight: "8px",
            cursor: "pointer",
            color: "rgba(255,255,255,0.5)",
          }}
        >
          <DownloadIcon />
        </button>
        
        <button
          onClick={onPlay}
          style={{
            background: "rgba(255,255,255,0.1)",
            border: "none",
            padding: "8px",
            borderRadius: "50%",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            cursor: "pointer",
            color: "#fff",
          }}
        >
          <PlayIcon />
        </button>
      </div>
    </div>
  )
}

// Waveform visualization component
const Waveform = ({ audioData, progress }) => {
  // If no audio data provided, generate random data
  const waveformData = audioData || Array.from({ length: 100 }, () => Math.random() * 0.8 + 0.2);
  
  return (
    <div style={{
      width: "100%",
      height: "60px",
      display: "flex",
      alignItems: "center",
      position: "relative",
      marginBottom: "10px",
    }}>
      {/* Progress indicator */}
      <div style={{
        position: "absolute",
        top: 0,
        left: 0,
        height: "100%",
        width: `${progress * 100}%`,
        backgroundColor: "rgba(75, 0, 130, 0.1)",
        zIndex: 1,
      }} />
      
      {/* Progress line */}
      <div style={{
        position: "absolute",
        top: 0,
        left: `${progress * 100}%`,
        height: "100%",
        width: "2px",
        backgroundColor: "#6200ee",
        zIndex: 2,
      }} />
      
      {/* Waveform bars */}
      <div style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "space-between",
        width: "100%",
        height: "100%",
        zIndex: 0,
        padding: "0 10px",
      }}>
        {waveformData.map((height, index) => (
          <div
            key={index}
            style={{
              width: "3px",
              height: `${height * 60}%`,
              backgroundColor: index / waveformData.length < progress ? "#6200ee" : "#aaa",
              marginRight: "1px",
              borderRadius: "1px",
            }}
          />
        ))}
      </div>
    </div>
  );
};

// Music Player View
const MusicPlayerView = ({ 
  artistName = "Metallica",
  trackTitle = "Welcome Home (Sanitarium)",
  episodeNumber = "EP001",
  albumCoverUrl = "https://upload.wikimedia.org/wikipedia/en/b/b2/Metallica_-_Master_of_Puppets_cover.jpg",
  isPlaying = false,
  currentTime = "03:22",
  totalTime = "04:36",
  progress = 0.6,
  onPlayPause,
  onNext,
  onPrevious,
  onSeek,
  audioRef,
  waveformData,
  onDownload,
}) => {
  
  // Handle progress bar click for seeking
  const handleProgressClick = (e) => {
    const progressBar = e.currentTarget;
    const clickPosition = e.clientX - progressBar.getBoundingClientRect().left;
    const newProgress = clickPosition / progressBar.offsetWidth;
    onSeek(newProgress);
  };
  
  return (
    <div style={{
      width: "100%",
      height: "100%",
      display: "flex",
      flexDirection: "column",
      backgroundColor: "#f5f5f7",
      overflow: "hidden",
      borderRadius: "12px",
    }}>      
      {/* Album Cover */}
      <div style={{
        padding: "30px",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        backgroundColor: "#6200ee",
      }}>
        <div style={{
          width: "180px",
          height: "180px",
          backgroundColor: "#ddd",
          borderRadius: "8px",
          boxShadow: "0 4px 20px rgba(0,0,0,0.3)",
          overflow: "hidden",
          marginBottom: "24px",
          position: "relative",
        }}>
          <img 
            src={albumCoverUrl} 
            alt={artistName}
            style={{
              width: "100%",
              height: "100%",
              objectFit: "cover",
            }}
          />
          <div style={{
            position: "absolute",
            top: 10,
            right: 10,
            backgroundColor: "rgba(0,0,0,0.6)",
            color: "white",
            padding: "4px 8px",
            borderRadius: "4px",
            fontSize: "12px",
            fontWeight: "bold",
          }}>
            {episodeNumber}
          </div>
        </div>
        
        <div style={{
          fontSize: "24px",
          fontWeight: "bold",
          marginBottom: "8px",
          textAlign: "center",
          color: "#fff",
        }}>
          {artistName.toUpperCase()}
        </div>
        
        <div style={{
          fontSize: "18px",
          color: "rgba(255,255,255,0.8)",
          textAlign: "center",
        }}>
          {trackTitle}
        </div>
        
        <button
          onClick={onDownload}
          style={{
            display: "flex",
            alignItems: "center",
            backgroundColor: "rgba(0,0,0,0.2)",
            border: "none",
            borderRadius: "20px",
            padding: "6px 12px",
            marginTop: "15px",
            cursor: "pointer",
            color: "white",
          }}
        >
          <DownloadIcon />
          <span style={{ marginLeft: "6px", fontSize: "14px" }}>Download Research</span>
        </button>
      </div>
      
      {/* Player Controls */}
      <div style={{
        padding: "20px",
        backgroundColor: "#fff",
        flex: 1,
        display: "flex",
        flexDirection: "column",
      }}>
        {/* Waveform visualization */}
        <Waveform 
          audioData={waveformData}
          progress={progress}
        />
        
        {/* Progress Bar */}
        <div 
          style={{
            width: "100%",
            height: "6px",
            backgroundColor: "#ddd",
            borderRadius: "3px",
            marginBottom: "10px",
            position: "relative",
            cursor: "pointer",
          }}
          onClick={handleProgressClick}
        >
          <div style={{
            position: "absolute",
            left: 0,
            top: 0,
            height: "100%",
            width: `${progress * 100}%`,
            backgroundColor: "#6200ee",
            borderRadius: "3px",
          }} />
        </div>
        
        {/* Time Indicators */}
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          fontSize: "14px",
          color: "#888",
          marginBottom: "24px",
        }}>
          <div>{currentTime}</div>
          <div>{totalTime}</div>
        </div>
        
        {/* Control Buttons */}
        <div style={{
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
          padding: "0 30px",
        }}>
          <button style={{
            background: "none",
            border: "none",
            padding: "12px",
            cursor: "pointer",
            color: "#6200ee",
            transform: "scale(1.2)",
          }}
          onClick={onPrevious}
          >
            <PreviousIcon />
          </button>
          
          <button 
            style={{
              background: "none",
              border: "none",
              width: "64px",
              height: "64px",
              borderRadius: "50%",
              backgroundColor: "#6200ee",
              display: "flex",
              alignItems: "center",
              justifyContent: "center",
              boxShadow: "0 2px 8px rgba(98, 0, 238, 0.4)",
              cursor: "pointer",
              color: "#fff",
            }}
            onClick={onPlayPause}
          >
            {isPlaying ? <PauseIcon /> : <PlayIcon />}
          </button>
          
          <button style={{
            background: "none",
            border: "none",
            padding: "12px",
            cursor: "pointer",
            color: "#6200ee",
            transform: "scale(1.2)",
          }}
          onClick={onNext}
          >
            <NextIcon />
          </button>
        </div>
        
        {/* Hidden audio element */}
        <audio 
          ref={audioRef} 
          style={{ display: "none" }} 
          controls
        />
      </div>
    </div>
  )
}

// Tracks List View
const TracksListView = ({ 
  artistName = "Metallica",
  tracks = [],
  currentTrackId = null,
  onSelectTrack,
  onDownloadTrack,
}) => {
  return (
    <div style={{
      width: "100%",
      height: "100%",
      display: "flex",
      flexDirection: "column",
      backgroundColor: "#222",
      overflow: "hidden",
      borderRadius: "12px",
    }}>      
      {/* Header Info */}
      <div style={{
        padding: "30px 16px",
        backgroundColor: "#111",
      }}>
        <h1 style={{
          fontSize: "30px",
          fontWeight: "bold",
          margin: 0,
          color: "#fff",
          textAlign: "center",
        }}>
          {artistName.toUpperCase()}
        </h1>
        <h2 style={{
          fontSize: "18px",
          fontWeight: "normal",
          margin: "8px 0 0 0",
          color: "rgba(255,255,255,0.7)",
          textAlign: "center",
        }}>
          Episodes
        </h2>
      </div>
      
      {/* Track List */}
      <div style={{
        flex: 1,
        overflowY: "auto",
        padding: "0 16px",
      }}>
        {tracks.map((track) => (
          <TrackItem 
            key={track.id}
            title={track.title}
            artist={track.artist}
            album={track.album}
            selected={track.id === currentTrackId}
            onDownload={() => onDownloadTrack(track)}
            onPlay={() => onSelectTrack(track)}
          />
        ))}
      </div>
    </div>
  )
}

// Main MusicPlayer component
export default function MusicPlayer({ 
  width, 
  height, 
  showTracks,
  artistName,
  podcastTitle,
  episodeTitle,
  episodeNumber,
  coverImageUrl,
  audioFile1,
  audioFile2,
  audioFile3,
  audioFile4,
  audioFile5,
  episodeTitle1,
  episodeTitle2,
  episodeTitle3,
  episodeTitle4,
  episodeTitle5,
  episodeArtist1,
  episodeArtist2,
  episodeArtist3,
  episodeArtist4,
  episodeArtist5,
  episodeNumber1,
  episodeNumber2,
  episodeNumber3,
  episodeNumber4,
  episodeNumber5,
  episodeCover1,
  episodeCover2,
  episodeCover3,
  episodeCover4,
  episodeCover5,
  isPlaying: defaultIsPlaying,
  primaryColor,
}) {
  // Audio state
  const [isPlaying, setIsPlaying] = React.useState(defaultIsPlaying)
  const [progress, setProgress] = React.useState(0)
  const [currentTime, setCurrentTime] = React.useState("00:00")
  const [duration, setDuration] = React.useState("00:00")
  const [waveformData, setWaveformData] = React.useState(null)
  const audioRef = React.useRef(null)
  const [trackList, setTrackList] = React.useState([])
  const [currentTrack, setCurrentTrack] = React.useState(null)
  
  // Format time in mm:ss
  const formatTime = (seconds) => {
    if (isNaN(seconds)) return "00:00";
    const minutes = Math.floor(seconds / 60);
    const secs = Math.floor(seconds % 60);
    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
  }
  
  React.useEffect(() => {
    // Process episodes data from individual props
    const processedEpisodes = [];
    
    // Helper function to add episode if it has a title
    const addEpisodeIfValid = (index, title, artist, episodeNum, coverUrl, audioUrl) => {
      if (title) {
        processedEpisodes.push({
          id: `ep00${index}`,
          title: title,
          artist: artist || artistName,
          episodeNumber: episodeNum || `EP00${index}`,
          album: { 
            name: podcastTitle, 
            coverUrl: coverUrl || coverImageUrl
          },
          audioUrl: audioUrl || ""
        });
      }
    };
    
    // Add all configured episodes
    addEpisodeIfValid(1, episodeTitle1, episodeArtist1, episodeNumber1, episodeCover1, audioFile1);
    addEpisodeIfValid(2, episodeTitle2, episodeArtist2, episodeNumber2, episodeCover2, audioFile2);
    addEpisodeIfValid(3, episodeTitle3, episodeArtist3, episodeNumber3, episodeCover3, audioFile3);
    addEpisodeIfValid(4, episodeTitle4, episodeArtist4, episodeNumber4, episodeCover4, audioFile4);
    addEpisodeIfValid(5, episodeTitle5, episodeArtist5, episodeNumber5, episodeCover5, audioFile5);
    
    // If no episodes are configured, add the default one
    if (processedEpisodes.length === 0 && episodeTitle) {
      processedEpisodes.push({
        id: "ep001",
        title: episodeTitle,
        artist: artistName,
        episodeNumber: episodeNumber || "EP001",
        album: { 
          name: podcastTitle, 
          coverUrl: coverImageUrl
        },
        audioUrl: ""
      });
    }
    
    setTrackList(processedEpisodes);
    setCurrentTrack(processedEpisodes[0] || null);
    
  }, [
    artistName, podcastTitle, episodeTitle, episodeNumber, coverImageUrl,
    episodeTitle1, episodeTitle2, episodeTitle3, episodeTitle4, episodeTitle5,
    episodeArtist1, episodeArtist2, episodeArtist3, episodeArtist4, episodeArtist5,
    episodeNumber1, episodeNumber2, episodeNumber3, episodeNumber4, episodeNumber5,
    episodeCover1, episodeCover2, episodeCover3, episodeCover4, episodeCover5,
    audioFile1, audioFile2, audioFile3, audioFile4, audioFile5
  ]);
  
  React.useEffect(() => {
    if (!audioRef.current) return;
    
    // Set up event listeners for the audio element
    const audio = audioRef.current;
    
    // Set the source if current track has an audio URL
    if (currentTrack && currentTrack.audioUrl && audio.src !== currentTrack.audioUrl) {
      audio.src = currentTrack.audioUrl;
    }
    
    const updateProgress = () => {
      const currentTime = audio.currentTime;
      const duration = audio.duration;
      if (duration > 0) {
        setProgress(currentTime / duration);
        setCurrentTime(formatTime(currentTime));
        setDuration(formatTime(duration));
      }
    };
    
    const handleEnded = () => {
      setIsPlaying(false);
      setProgress(0);
      setCurrentTime("00:00");
    };
    
    audio.addEventListener("timeupdate", updateProgress);
    audio.addEventListener("ended", handleEnded);
    audio.addEventListener("loadedmetadata", updateProgress);
    
    return () => {
      audio.removeEventListener("timeupdate", updateProgress);
      audio.removeEventListener("ended", handleEnded);
      audio.removeEventListener("loadedmetadata", updateProgress);
    };
  }, [audioRef.current, currentTrack]);
  
  // Handle play/pause
  const handlePlayPause = () => {
    const audio = audioRef.current;
    if (!audio) return;
    
    if (isPlaying) {
      audio.pause();
    } else {
      audio.play().catch(error => {
        console.error("Error playing audio:", error);
      });
    }
    
    setIsPlaying(!isPlaying);
  };
  
  // Handle seeking
  const handleSeek = (newProgress) => {
    const audio = audioRef.current;
    if (!audio) return;
    
    const newTime = audio.duration * newProgress;
    audio.currentTime = newTime;
    setProgress(newProgress);
    setCurrentTime(formatTime(newTime));
  };
  
  // Handle next track
  const handleNext = () => {
    if (!currentTrack || trackList.length === 0) return;
    
    const currentIndex = trackList.findIndex(track => track.id === currentTrack.id);
    const nextIndex = (currentIndex + 1) % trackList.length;
    setCurrentTrack(trackList[nextIndex]);
    
    // Set new audio source
    if (audioRef.current && trackList[nextIndex].audioUrl) {
      audioRef.current.src = trackList[nextIndex].audioUrl;
      audioRef.current.play().catch(error => {
        console.error("Error playing audio:", error);
      });
      setIsPlaying(true);
    }
  };
  
  // Handle previous track
  const handlePrevious = () => {
    if (!currentTrack || trackList.length === 0) return;
    
    const currentIndex = trackList.findIndex(track => track.id === currentTrack.id);
    const prevIndex = (currentIndex - 1 + trackList.length) % trackList.length;
    setCurrentTrack(trackList[prevIndex]);
    
    // Set new audio source
    if (audioRef.current && trackList[prevIndex].audioUrl) {
      audioRef.current.src = trackList[prevIndex].audioUrl;
      audioRef.current.play().catch(error => {
        console.error("Error playing audio:", error);
      });
      setIsPlaying(true);
    }
  };
  
  // Handle selecting a track from the list
  const handleSelectTrack = (track) => {
    setCurrentTrack(track);
    
    // Set new audio source
    if (audioRef.current && track.audioUrl) {
      audioRef.current.src = track.audioUrl;
      audioRef.current.play().catch(error => {
        console.error("Error playing audio:", error);
      });
      setIsPlaying(true);
    }
  };
  
  // Handle downloading a track
  const handleDownload = (track) => {
    if (!track || !track.audioUrl) {
      console.log("Download requested for:", track ? track.title : currentTrack ? currentTrack.title : "current track");
      alert("Research materials ready for download!");
      return;
    }
    
    // Create a temporary anchor element and trigger download
    const a = document.createElement('a');
    a.href = track.audioUrl;
    a.download = `${track.artist} - ${track.title}.mp3`;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
  };
  
  return (
    <div style={{
      width,
      height,
      display: "flex",
      overflow: "hidden",
      borderRadius: 12,
      boxShadow: "0 10px 30px rgba(0, 0, 0, 0.2)",
      background: `linear-gradient(135deg, ${primaryColor || "#6200ee"}, ${primaryColor ? adjustColor(primaryColor, -40) : "#3700b3"})`,
      padding: 15,
    }}>
      <div style={{ 
        width: showTracks ? "50%" : "100%", 
        height: "100%",
        paddingRight: showTracks ? 8 : 0,
      }}>
        <MusicPlayerView 
          artistName={currentTrack?.artist || artistName}
          trackTitle={currentTrack?.title || episodeTitle}
          episodeNumber={currentTrack?.episodeNumber || episodeNumber}
          albumCoverUrl={currentTrack?.album?.coverUrl || coverImageUrl}
          isPlaying={isPlaying}
          currentTime={currentTime}
          totalTime={duration}
          progress={progress}
          onPlayPause={handlePlayPause}
          onNext={handleNext}
          onPrevious={handlePrevious}
          onSeek={handleSeek}
          audioRef={audioRef}
          waveformData={waveformData}
          onDownload={() => handleDownload(currentTrack)}
        />
      </div>
      
      {showTracks && (
        <div style={{ width: "50%", height: "100%", paddingLeft: 8 }}>
          <TracksListView 
            artistName={artistName}
            tracks={trackList}
            currentTrackId={currentTrack?.id}
            onSelectTrack={handleSelectTrack}
            onDownloadTrack={handleDownload}
          />
        </div>
      )}
    </div>
  )
}

// Helper function to adjust a color's brightness
function adjustColor(hex, amount) {
  let r = parseInt(hex.substring(1, 3), 16);
  let g = parseInt(hex.substring(3, 5), 16);
  let b = parseInt(hex.substring(5, 7), 16);

  r = Math.max(0, Math.min(255, r + amount));
  g = Math.max(0, Math.min(255, g + amount));
  b = Math.max(0, Math.min(255, b + amount));

  return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

// Property controls for Framer
MusicPlayer.defaultProps = {
  width: 900,
  height: 450,
  showTracks: true,
  artistName: "METALLICA",
  podcastTitle: "Metal Conversations",
  episodeTitle: "Welcome Home (Sanitarium)",
  episodeNumber: "EP001",
  coverImageUrl: "https://upload.wikimedia.org/wikipedia/en/b/b2/Metallica_-_Master_of_Puppets_cover.jpg",
  isPlaying: false,
  primaryColor: "#6200ee",
  
  // Default episode properties
  episodeTitle1: "Skeletons of Society",
  episodeArtist1: "Slayer",
  episodeNumber1: "EP001",
  episodeCover1: "https://upload.wikimedia.org/wikipedia/en/a/a0/Slayer_-_Seasons_in_the_Abyss.jpg",
  
  episodeTitle2: "Harvester of Sorrow",
  episodeArtist2: "Metallica",
  episodeNumber2: "EP002",
  episodeCover2: "https://upload.wikimedia.org/wikipedia/en/b/bd/Metallica_-_...And_Justice_for_All_cover.jpg",
  
  episodeTitle3: "Hell Awaits",
  episodeArtist3: "Slayer",
  episodeNumber3: "EP003",
  episodeCover3: "https://upload.wikimedia.org/wikipedia/en/9/9e/Slayer_-_Hell_Awaits.jpg",
  
  episodeTitle4: "Iconoclasm",
  episodeArtist4: "Exodus",
  episodeNumber4: "EP004",
  episodeCover4: "https://upload.wikimedia.org/wikipedia/en/5/59/Exodus_Tempo_Of_The_Damned.jpg",
}

addPropertyControls(MusicPlayer, {
  // Basic settings
  showTracks: {
    type: ControlType.Boolean,
    title: "Show Episodes List",
    defaultValue: true,
  },
  artistName: {
    type: ControlType.String,
    title: "Podcast Host",
    defaultValue: "METALLICA",
  },
  podcastTitle: {
    type: ControlType.String,
    title: "Podcast Title",
    defaultValue: "Metal Conversations",
  },
  primaryColor: {
    type: ControlType.Color,
    title: "Primary Theme Color",
    defaultValue: "#6200ee",
  },
  coverImageUrl: {
    type: ControlType.Image,
    title: "Default Cover Image",
    defaultValue: "https://upload.wikimedia.org/wikipedia/en/b/b2/Metallica_-_Master_of_Puppets_cover.jpg",
  },
  isPlaying: {
    type: ControlType.Boolean,
    title: "Auto Play",
    defaultValue: false,
  },
  
  // Default episode (shown if no episodes are added)
  episodeTitle: {
    type: ControlType.String,
    title: "Default Episode Title",
    defaultValue: "Welcome Home (Sanitarium)",
    hidden(props) {
      return props.episodeTitle1 || props.episodeTitle2 || props.episodeTitle3 || props.episodeTitle4 || props.episodeTitle5;
    },
  },
  episodeNumber: {
    type: ControlType.String,
    title: "Default Episode Number",
    defaultValue: "EP001",
    hidden(props) {
      return props.episodeTitle1 || props.episodeTitle2 || props.episodeTitle3 || props.episodeTitle4 || props.episodeTitle5;
    },
  },
  
  // Episode 1 settings
  episodeTitle1: {
    type: ControlType.String,
    title: "Episode 1 Title",
    defaultValue: "Skeletons of Society",
    displayStepper: true,
  },
  episodeArtist1: {
    type: ControlType.String,
    title: "Episode 1 Artist",
    defaultValue: "Slayer",
    hidden(props) {
      return !props.episodeTitle1;
    },
  },
  episodeNumber1: {
    type: ControlType.String,
    title: "Episode 1 Number",
    defaultValue: "EP001",
    hidden(props) {
      return !props.episodeTitle1;
    },
  },
  episodeCover1: {
    type: ControlType.Image,
    title: "Episode 1 Cover",
    defaultValue: "https://upload.wikimedia.org/wikipedia/en/a/a0/Slayer_-_Seasons_in_the_Abyss.jpg",
    hidden(props) {
      return !props.episodeTitle1;
    },
  },
  audioFile1: {
    type: ControlType.File,
    title: "Episode 1 Audio File (MP3)",
    allowedFileTypes: ["audio/mpeg", "audio/mp3"],
    hidden(props) {
      return !props.episodeTitle1;
    },
  },
  
  // Episode 2 settings
  episodeTitle2: {
    type: ControlType.String,
    title: "Episode 2 Title",
    defaultValue: "Harvester of Sorrow",
    displayStepper: true,
  },
  episodeArtist2: {
    type: ControlType.String,
    title: "Episode 2 Artist",
    defaultValue: "Metallica",
    hidden(props) {
      return !props.episodeTitle2;
    },
  },
  episodeNumber2: {
    type: ControlType.String,
    title: "Episode 2 Number",
    defaultValue: "EP002",
    hidden(props) {
      return !props.episodeTitle2;
    },
  },
  episodeCover2: {
    type: ControlType.Image,
    title: "Episode 2 Cover",
    defaultValue: "https://upload.wikimedia.org/wikipedia/en/b/bd/Metallica_-_...And_Justice_for_All_cover.jpg",
    hidden(props) {
      return !props.episodeTitle2;
    },
  },
  audioFile2: {
    type: ControlType.File,
    title: "Episode 2 Audio File (MP3)",
    allowedFileTypes: ["audio/mpeg", "audio/mp3"],
    hidden(props) {
      return !props.episodeTitle2;
    },
  },
  
  // Episode 3 settings
  episodeTitle3: {
    type: ControlType.String,
    title: "Episode 3 Title",
    defaultValue: "Hell Awaits",
    displayStepper: true,
  },
  episodeArtist3: {
    type: ControlType.String,
    title: "Episode 3 Artist",
    defaultValue: "Slayer",
    hidden(props) {
      return !props.episodeTitle3;
    },
  },
  episodeNumber3: {
    type: ControlType.String,
    title: "Episode 3 Number",
    defaultValue: "EP003",
    hidden(props) {
      return !props.episodeTitle3;
    },
  },
  episodeCover3: {
    type: ControlType.Image,
    title: "Episode 3 Cover",
    defaultValue: "https://upload.wikimedia.org/wikipedia/en/9/9e/Slayer_-_Hell_Awaits.jpg",
    hidden(props) {
      return !props.episodeTitle3;
    },
  },
  audioFile3: {
    type: ControlType.File,
    title: "Episode 3 Audio File (MP3)",
    allowedFileTypes: ["audio/mpeg", "audio/mp3"],
    hidden(props) {
      return !props.episodeTitle3;
    },
  },
  
  // Episode 4 settings
  episodeTitle4: {
    type: ControlType.String,
    title: "Episode 4 Title",
    defaultValue: "Iconoclasm",
    displayStepper: true,
  },
  episodeArtist4: {
    type: ControlType.String,
    title: "Episode 4 Artist",
    defaultValue: "Exodus",
    hidden(props) {
      return !props.episodeTitle4;
    },
  },
  episodeNumber4: {
    type: ControlType.String,
    title: "Episode 4 Number",
    defaultValue: "EP004",
    hidden(props) {
      return !props.episodeTitle4;
    },
  },
  episodeCover4: {
    type: ControlType.Image,
    title: "Episode 4 Cover",
    defaultValue: "https://upload.wikimedia.org/wikipedia/en/5/59/Exodus_Tempo_Of_The_Damned.jpg",
    hidden(props) {
      return !props.episodeTitle4;
    },
  },
  audioFile4: {
    type: ControlType.File,
    title: "Episode 4 Audio File (MP3)",
    allowedFileTypes: ["audio/mpeg", "audio/mp3"],
    hidden(props) {
      return !props.episodeTitle4;
    },
  },
  
  // Episode 5 settings
  episodeTitle5: {
    type: ControlType.String,
    title: "Episode 5 Title",
    defaultValue: "",
    displayStepper: true,
  },
  episodeArtist5: {
    type: ControlType.String,
    title: "Episode 5 Artist",
    defaultValue: "",
    hidden(props) {
      return !props.episodeTitle5;
    },
  },
  episodeNumber5: {
    type: ControlType.String,
    title: "Episode 5 Number",
    defaultValue: "EP005",
    hidden(props) {
      return !props.episodeTitle5;
    },
  },
  episodeCover5: {
    type: ControlType.Image,
    title: "Episode 5 Cover",
    defaultValue: "",
    hidden(props) {
      return !props.episodeTitle5;
    },
  },
  audioFile5: {
    type: ControlType.File,
    title: "Episode 5 Audio File (MP3)",
    allowedFileTypes: ["audio/mpeg", "audio/mp3"],
    hidden(props) {
      return !props.episodeTitle5;
    },
  },
})