import { usePlayer } from "@/contexts/PlayerContext";
import { assetUrl } from "@/lib/asset";
import type { PodcastEpisodio } from "@shared/types";
import { episodioToPlayable } from "@shared/playable";
import { Link } from "wouter";
import AddToPlaylistMenu from "./AddToPlaylistMenu";
import FavoritoButton from "./FavoritoButton";

/**
 * EpisodioRow — REVISÃO (jul/2026, correção mobile): mesmo padrão
 * aplicado em FaixaRow.tsx, pra manter Podcast e Música consistentes.
 * Número/seta-só-no-hover removidos; seta ▶ sempre visível, vira
 * equalizer animado quando é o episódio tocando agora. Duração moveu
 * pra segunda linha, junto do subtítulo.
 */

function formatDuration(seconds: number | null) {
  const total = seconds ?? 0;
  const minutes = Math.floor(total / 60);
  const secs = total % 60;
  return `${minutes}:${secs.toString().padStart(2, "0")}`;
}

export default function EpisodioRow({
  episodio,
  index,
  queue,
  queueIndex,
  fallbackCapa,
  subtitle,
  rightSlot,
}: {
  episodio: PodcastEpisodio;
  index?: number;
  queue?: PodcastEpisodio[];
  queueIndex?: number;
  fallbackCapa?: string | null;
  subtitle?: string;
  rightSlot?: React.ReactNode;
}) {
  const { play, togglePlayPause, currentItem, isPlaying } = usePlayer();
  const isCurrent = currentItem?.kind === "episodio" && currentItem.sourceId === episodio.id;
  const tocandoAgora = isCurrent && isPlaying;

  const handlePlayClick = () => {
    if (isCurrent) {
      togglePlayPause();
    } else {
      play(episodioToPlayable(episodio), queue?.map(episodioToPlayable), queueIndex);
    }
  };

  const duracaoFormatada = formatDuration(episodio.duracao);
  const linhaSecundaria = subtitle ? `${subtitle} · ${duracaoFormatada}` : duracaoFormatada;

  return (
    <div
      className={`group flex items-center p-3 sm:p-4 transition-colors gap-3 sm:gap-4 ${
        isCurrent ? "bg-sof-gold/10" : "hover:bg-sof-surface"
      }`}
    >
      <button
        onClick={handlePlayClick}
        aria-label={tocandoAgora ? "Pausar" : "Reproduzir"}
        title={tocandoAgora ? "Pausar" : "Reproduzir"}
        className="w-9 h-9 flex items-center justify-center text-sof-text-2 hover:text-sof-gold flex-shrink-0 text-lg"
      >
        {tocandoAgora ? (
          <span className="eq flex items-end justify-center gap-[2px] h-4 text-sof-gold">
            <span className="eq-bar" />
            <span className="eq-bar" />
            <span className="eq-bar" />
          </span>
        ) : (
          "▶"
        )}
      </button>

      <Link href={`/episodio/${episodio.id}`} className="flex-1 min-w-0 flex items-center gap-3">
        <div className="w-11 h-11 sm:w-10 sm:h-10 rounded bg-sof-borgonha-light flex-shrink-0 overflow-hidden">
          <img
            src={assetUrl(episodio.capa || fallbackCapa) ?? assetUrl("/placeholder-podcast.svg")}
            alt={episodio.titulo}
            className="w-full h-full object-cover"
          />
        </div>
        <div className="min-w-0">
          <h4
            className={`text-base font-semibold leading-tight transition-colors truncate ${
              isCurrent ? "text-sof-gold" : "text-sof-text group-hover:text-sof-gold"
            }`}
          >
            {episodio.titulo}
          </h4>
          <p className="text-xs text-sof-text-3 truncate mt-0.5">{linhaSecundaria}</p>
        </div>
      </Link>

      <div className="flex items-center gap-1 flex-shrink-0">
        {rightSlot}
        <FavoritoButton episodioId={episodio.id} className="text-xl p-2" />
        <AddToPlaylistMenu episodioId={episodio.id} titulo={episodio.titulo} />
      </div>
    </div>
  );
}
