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

export default function Series() {
  const { data, isLoading } = trpc.podcast.getProgramas.useQuery({ page: 1, limit: 60 });

  return (
    <>
      <div className="p-8 pb-32">
        <h1 className="text-4xl font-bold font-display text-sof-text mb-2">Séries</h1>
        <p className="text-sof-text-3 mb-8">Programas e séries do SpotOnFide Podcast</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.programas.length > 0 ? (
          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
            {data.programas.map(prog => (
              <Link key={prog.id} href={`/serie/${prog.id}`}>
                <div className="relative h-48 rounded-xl overflow-hidden group cursor-pointer shadow-xl">
                  <img
                    src={assetUrl(prog.capa) ?? assetUrl("/placeholder-series.svg")}
                    alt={prog.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">
                      {prog.categoria} {prog.ano ? `· ${prog.ano}` : ""}
                    </span>
                    <h4 className="text-lg font-bold text-sof-text leading-tight group-hover:text-sof-gold transition-colors">
                      {prog.titulo}
                    </h4>
                  </div>
                </div>
              </Link>
            ))}
          </div>
        ) : (
          <p className="text-sof-text-3">Nenhuma série encontrada.</p>
        )}
      </div>
    </>
  );
}
