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 MusicaArtista() {
  const [, params] = useRoute("/musica/artista/:id");
  const id = params?.id ? parseInt(params.id) : 0;

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

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

  if (!data?.artista) {
    return (
      <div>
        <p className="text-sof-text-2">Artista não encontrado.</p>
      </div>
    );
  }

  const { artista, albuns, faixas } = data;

  return (
    <div className="pb-32">
      {/* Header */}
      <div className="flex flex-col md:flex-row gap-8 mb-12 items-start">
        <div className="w-48 h-48 flex-shrink-0 shadow-2xl rounded-full overflow-hidden border border-sof-border">
          <img
            src={assetUrl(artista.foto) ?? assetUrl("/placeholder-user.svg")}
            alt={artista.nome}
            className="w-full h-full object-cover"
          />
        </div>
        <div className="flex flex-col justify-center py-2">
          <span className="text-sof-gold font-bold uppercase tracking-widest text-xs mb-2">Artista</span>
          <h1 className="text-5xl font-bold font-display text-sof-text mb-4">{artista.nome}</h1>
          {artista.bio && (
            <p className="text-sof-text-2 text-lg max-w-2xl whitespace-pre-line mb-6">{artista.bio}</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>

      {/* Álbuns */}
      {albuns.length > 0 && (
        <div className="mb-12">
          <h2 className="text-2xl font-bold font-display text-sof-text mb-6">Álbuns</h2>
          <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-6">
            {albuns.map(al => (
              <Link key={al.id} href={`/musica/album/${al.id}`}>
                <div className="group cursor-pointer">
                  <div className="aspect-square rounded-lg overflow-hidden shadow-lg mb-2">
                    <img
                      src={assetUrl(al.capa) ?? assetUrl("/placeholder-series.svg")}
                      alt={al.titulo}
                      className="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
                    />
                  </div>
                  <p className="text-sm font-medium text-sof-text group-hover:text-sof-gold transition-colors truncate">
                    {al.titulo}
                  </p>
                  {al.anoLancamento && <p className="text-xs text-sof-text-3">{al.anoLancamento}</p>}
                </div>
              </Link>
            ))}
          </div>
        </div>
      )}

      {/* Faixas */}
      <div>
        <h2 className="text-2xl font-bold font-display text-sof-text mb-6">Faixas</h2>
        {faixas.length === 0 ? (
          <p className="text-sof-text-3">Nenhuma faixa publicada 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, idx) => (
              <FaixaRow
                key={fx.id}
                faixa={fx}
                index={idx}
                queue={faixas}
                queueIndex={idx}
                fallbackCapa={artista.foto}
                artistaNome={artista.nome}
              />
            ))}
          </div>
        )}
      </div>
    </div>
  );
}