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";

/**
 * FaixaRow — espelha EpisodioRow.tsx para o módulo Música.
 *
 * Escopo desta Etapa 3 (Catálogo): reprodução e navegação apenas.
 * Favoritar/adicionar à playlist para Música fica para um incremento
 * seguinte (precisa de endpoints próprios sobre user_favoritos_musica /
 * user_playlist_items_musica, já criadas no schema da Etapa 1, mas ainda
 * sem lógica de API) — por isso não há FavoritoButton/AddToPlaylistMenu
 * aqui, diferente de EpisodioRow.
 */

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,
}: {
  faixa: MusicaFaixa;
  index?: number;
  queue?: MusicaFaixa[];
  queueIndex?: number;
  fallbackCapa?: string | null;
  subtitle?: string;
  artistaNome?: string | null;
}) {
  const { play, togglePlayPause, currentItem, isPlaying } = usePlayer();
  const isCurrent = currentItem?.kind === "musica" && currentItem.sourceId === faixa.id;

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

  return (
    <div className="group flex items-center p-4 hover:bg-sof-surface transition-colors gap-4">
      <button
        onClick={handlePlayClick}
        className="w-12 flex items-center justify-center text-sof-text-3 group-hover:text-sof-gold font-medium flex-shrink-0"
        title={isCurrent && isPlaying ? "Pausar" : "Reproduzir"}
      >
        {isCurrent && isPlaying ? (
          "⏸"
        ) : (
          <>
            <span className="group-hover:hidden">
              {faixa.numeroFaixa ?? (index !== undefined ? index + 1 : "▶")}
            </span>
            <span className="hidden group-hover:inline">▶</span>
          </>
        )}
      </button>

      <Link href={`/musica/faixa/${faixa.id}`} className="flex-1 min-w-0 flex items-center gap-4">
        <div className="w-10 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-sof-text font-medium group-hover:text-sof-gold transition-colors truncate">
            {faixa.titulo}
          </h4>
          {subtitle && <p className="text-xs text-sof-text-3 truncate">{subtitle}</p>}
        </div>
      </Link>

      <div className="flex items-center gap-3 flex-shrink-0">
        <span className="w-14 text-right text-sof-text-3 text-sm">
          {formatDuration(faixa.duracao)}
        </span>
      </div>
    </div>
  );
}
