import FaixaRow from "@/components/FaixaRow";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { usePlayer } from "@/contexts/PlayerContext";
import { faixaToPlayable } from "@shared/playable";
import { trpc } from "@/lib/trpc";
import { assetUrl } from "@/lib/asset";
import { Link, useRoute } from "wouter";

export default function MusicaAlbum() {
  const [, params] = useRoute("/musica/album/:id");
  const id = params?.id ? parseInt(params.id) : 0;

  const { data, isLoading } = trpc.musica.getAlbum.useQuery({ id }, { enabled: !!id });
  const { play } = usePlayer();

  if (isLoading) {
    return (
      <div className="animate-pulse">
        <div className="flex gap-8 mb-12">
          <Skeleton className="w-64 h-64 rounded-xl bg-sof-surface" />
          <div className="flex-1 space-y-4 pt-8">
            <Skeleton className="h-4 w-24 bg-sof-surface" />
            <Skeleton className="h-12 w-3/4 bg-sof-surface" />
            <Skeleton className="h-20 w-full bg-sof-surface" />
          </div>
        </div>
        <Skeleton className="h-64 w-full bg-sof-surface rounded-xl" />
      </div>
    );
  }

  const { album, artista, faixas = [] } = data || {};

  if (!album) {
    return (
      <div>
        <p className="text-sof-text-2">Álbum não encontrado.</p>
      </div>
    );
  }

  return (
    <div className="pb-32">
      {/* Header */}
      <div className="flex flex-col md:flex-row gap-8 mb-12">
        <div className="w-64 h-64 flex-shrink-0 shadow-2xl rounded-xl overflow-hidden border border-sof-border">
          <img
            src={assetUrl(album.capa) ?? assetUrl("/placeholder-series.svg")}
            alt={album.titulo}
            className="w-full h-full object-cover"
          />
        </div>
        <div className="flex flex-col justify-end py-2">
          <span className="text-sof-gold font-bold uppercase tracking-widest text-xs mb-2">
            {album.genero} {album.anoLancamento ? `• ${album.anoLancamento}` : ""}
          </span>
          <h1 className="text-6xl font-bold font-display text-sof-text mb-2">{album.titulo}</h1>
          {artista && (
            <Link href={`/musica/artista/${artista.id}`}>
              <p className="text-sof-text-2 text-lg hover:text-sof-gold transition-colors cursor-pointer mb-4 w-fit">
                {artista.nome}
              </p>
            </Link>
          )}
          {album.descricao && <p className="text-sof-text-2 text-lg max-w-2xl mb-6">{album.descricao}</p>}
          <Button
            onClick={() =>
              faixas[0] &&
              play(
                faixaToPlayable(faixas[0], { artistaNome: artista?.nome }),
                faixas.map(fx => faixaToPlayable(fx, { artistaNome: artista?.nome })),
                0
              )
            }
            disabled={faixas.length === 0}
            className="bg-sof-gold text-sof-borgonha hover:bg-sof-gold-light rounded-full px-8 h-12 font-bold text-lg disabled:opacity-50 w-fit"
          >
            ▶ Ouvir Agora
          </Button>
        </div>
      </div>

      {/* Faixas */}
      {faixas.length === 0 ? (
        <p className="text-sof-text-3">Nenhuma faixa publicada neste álbum ainda.</p>
      ) : (
        <div className="bg-sof-surface/30 rounded-2xl border border-sof-border overflow-hidden divide-y divide-sof-border/50">
          {faixas.map((fx, index) => (
            <FaixaRow
              key={fx.id}
              faixa={fx}
              index={index}
              queue={faixas}
              queueIndex={index}
              fallbackCapa={album.capa}
              artistaNome={artista?.nome}
            />
          ))}
        </div>
      )}
    </div>
  );
}