'use client'

import { useState } from 'react'
import { Play, ChevronDown } from 'lucide-react'
import type { Episode } from '@/lib/types'

interface EpisodeListProps {
  episodes: Episode[]
  currentEpisodeId?: string
  onSelectEpisode: (episode: Episode) => void
}

export function EpisodeList({ episodes, currentEpisodeId, onSelectEpisode }: EpisodeListProps) {
  const seasons = [...new Set(episodes.map((e) => e.season_number))].sort()
  const [expandedSeason, setExpandedSeason] = useState<number>(seasons[0] || 1)

  const getEpisodesBySeason = (season: number) => {
    return episodes.filter((e) => e.season_number === season).sort((a, b) => a.episode_number - b.episode_number)
  }

  if (episodes.length === 0) return null

  // Check if episodes use parts (A/B) naming convention
  const usesParts = episodes.some((e) => e.title.toLowerCase().includes('part'))

  return (
    <div className="bg-[#141414] rounded-2xl p-6">
      <h3 className="text-xl font-bold font-[family-name:var(--font-poppins)] text-white mb-4">
        Episodes
      </h3>

      {seasons.length > 1 ? (
        // Multiple Seasons View
        <div className="space-y-4">
          {seasons.map((season) => (
            <div key={season} className="border border-white/10 rounded-xl overflow-hidden">
              <button
                onClick={() => setExpandedSeason(expandedSeason === season ? -1 : season)}
                className="w-full flex items-center justify-between px-4 py-3 bg-white/5 hover:bg-white/10 transition-colors"
              >
                <span className="font-semibold text-white">Season {season}</span>
                <ChevronDown
                  className={`w-5 h-5 text-gray-400 transition-transform ${
                    expandedSeason === season ? 'rotate-180' : ''
                  }`}
                />
              </button>

              {expandedSeason === season && (
                <div className="divide-y divide-white/10">
                  {getEpisodesBySeason(season).map((episode) => (
                    <EpisodeItem
                      key={episode.id}
                      episode={episode}
                      isActive={episode.id === currentEpisodeId}
                      onSelect={() => onSelectEpisode(episode)}
                      usesParts={usesParts}
                    />
                  ))}
                </div>
              )}
            </div>
          ))}
        </div>
      ) : (
        // Single Season / Parts View
        <div className="divide-y divide-white/10 border border-white/10 rounded-xl overflow-hidden">
          {episodes.map((episode) => (
            <EpisodeItem
              key={episode.id}
              episode={episode}
              isActive={episode.id === currentEpisodeId}
              onSelect={() => onSelectEpisode(episode)}
              usesParts={usesParts}
            />
          ))}
        </div>
      )}
    </div>
  )
}

function EpisodeItem({
  episode,
  isActive,
  onSelect,
  usesParts,
}: {
  episode: Episode
  isActive: boolean
  onSelect: () => void
  usesParts: boolean
}) {
  return (
    <button
      onClick={onSelect}
      className={`w-full flex items-center gap-4 px-4 py-4 text-left hover:bg-white/10 transition-colors ${
        isActive ? 'bg-[#e50914]/20' : ''
      }`}
    >
      <div
        className={`flex-shrink-0 w-10 h-10 rounded-full flex items-center justify-center ${
          isActive ? 'bg-[#e50914]' : 'bg-white/10'
        }`}
      >
        {isActive ? (
          <Play className="w-4 h-4 text-white fill-white" />
        ) : (
          <span className="text-sm font-medium text-white">
            {usesParts ? episode.episode_number : `E${episode.episode_number}`}
          </span>
        )}
      </div>

      <div className="flex-1 min-w-0">
        <p className={`font-medium truncate ${isActive ? 'text-[#e50914]' : 'text-white'}`}>
          {episode.title}
        </p>
        {!usesParts && (
          <p className="text-sm text-gray-400">Episode {episode.episode_number}</p>
        )}
      </div>

      {isActive && (
        <span className="text-xs text-[#e50914] font-medium">Now Playing</span>
      )}
    </button>
  )
}