import { usePlayer } from "@/contexts/PlayerContext";
import { assetUrl } from "@/lib/asset";
import type { MusicaFaixa } from "@shared/types";
import { faixaToPlayable } from "@shared/playable";
import { Link } from "wouter";
import AddToPlaylistMenuMusica from "./AddToPlaylistMenuMusica";
import FavoritoFaixaButton from "./FavoritoFaixaButton";

/**
 * FaixaRow — espelha EpisodioRow.tsx para o módulo Música.
 *
 * REVISÃO (jul/2026, correção mobile): a coluna de número da faixa foi
 * removida. No lugar, uma seta ▶ fica sempre visível (antes só aparecia
 * no hover — inútil em touch, onde não existe hover) e vira o gráfico de
 * equalizer animado quando esta é a faixa tocando agora (mesmo elemento
 * visual de antes, só que sem depender de :hover pra aparecer). A capa
 * não foi alterada. A duração saiu da coluna própria no fim da linha e
 * foi para a segunda linha, junto do subtítulo — é onde o YouTube Music
 * também coloca, e libera espaço horizontal pro tí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 FaixaRow({
  faixa,
  index,
  queue,
  queueIndex,
  fallbackCapa,
  subtitle,
  artistaNome,
  rightSlot,
}: {
  faixa: MusicaFaixa;
  index?: number;
  queue?: MusicaFaixa[];
  queueIndex?: number;
  fallbackCapa?: string | null;
  subtitle?: string;
  artistaNome?: string | null;
  rightSlot?: React.ReactNode;
}) {
  const { play, togglePlayPause, currentItem, isPlaying } = usePlayer();
  const isCurrent = currentItem?.kind === "musica" && currentItem.sourceId === faixa.id;
  const tocandoAgora = isCurrent && isPlaying;

  const handlePlayClick = () => {
    if (isCurrent) {
      togglePlayPause();
    } else {
      play(
        faixaToPlayable(faixa, { artistaNome }),
        queue?.map(fx => faixaToPlayable(fx, { artistaNome })),
        queueIndex
      );
    }
  };

  const duracaoFormatada = formatDuration(faixa.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={`/musica/faixa/${faixa.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(faixa.capa || fallbackCapa) ?? assetUrl("/placeholder-podcast.svg")}
            alt={faixa.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"
            }`}
          >
            {faixa.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}
        <FavoritoFaixaButton faixaId={faixa.id} className="text-xl p-2" />
        <AddToPlaylistMenuMusica faixaId={faixa.id} titulo={faixa.titulo} />
      </div>
    </div>
  );
}
