import { Skeleton } from "@/components/ui/skeleton";
import { trpc } from "@/lib/trpc";
import { assetUrl } from "@/lib/asset";
import { Link } from "wouter";

export default function MusicaAlbuns() {
  const { data, isLoading } = trpc.musica.getAlbuns.useQuery({ page: 1, limit: 60 });

  return (
    <div className="pb-32">
      <h1 className="text-4xl font-bold font-display text-sof-text mb-2">Álbuns</h1>
      <p className="text-sof-text-3 mb-8">Álbuns do SpotOnFide Música</p>

      {isLoading ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {Array(8)
            .fill(0)
            .map((_, i) => (
              <Skeleton key={i} className="h-48 rounded-xl bg-sof-surface" />
            ))}
        </div>
      ) : data && data.albuns.length > 0 ? (
        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
          {data.albuns.map(al => (
            <Link key={al.id} href={`/musica/album/${al.id}`}>
              <div className="relative h-48 rounded-xl overflow-hidden group cursor-pointer shadow-xl">
                <img
                  src={assetUrl(al.capa) ?? assetUrl("/placeholder-series.svg")}
                  alt={al.titulo}
                  className="absolute inset-0 object-cover w-full h-full transition-transform duration-700 group-hover:scale-110"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-sof-borgonha via-sof-borgonha/40 to-transparent opacity-80 group-hover:opacity-90 transition-opacity" />
                <div className="absolute bottom-0 left-0 p-5 w-full">
                  <span className="text-[10px] uppercase tracking-widest text-sof-gold font-bold mb-1 block">
                    {al.genero} {al.anoLancamento ? `· ${al.anoLancamento}` : ""}
                  </span>
                  <h4 className="text-lg font-bold text-sof-text leading-tight group-hover:text-sof-gold transition-colors">
                    {al.titulo}
                  </h4>
                </div>
              </div>
            </Link>
          ))}
        </div>
      ) : (
        <p className="text-sof-text-3">Nenhum álbum encontrado.</p>
      )}
    </div>
  );
}