import { assetUrl } from "@/lib/asset";
import { trpc } from "@/lib/trpc";
import { Skeleton } from "@/components/ui/skeleton";
import { usePlayer } from "@/contexts/PlayerContext";
import { episodioToPlayable } from "@shared/playable";
import FavoritoButton from "@/components/FavoritoButton";
import { Link } from "wouter";

export default function HomePodcast() {
  const { data, isLoading } = trpc.podcast.getHomeData.useQuery();
  const { play, togglePlayPause, currentItem, isPlaying } = usePlayer();

  return (
    <div className="px-6 lg:px-10 pt-8 pb-32">
      {/* Hero */}
      <div className="mb-14">
        <h2 className="text-3xl lg:text-4xl font-bold font-ui text-white mb-3 tracking-tight">
          Bem-vindo ao SpotOnFide
        </h2>
        <p className="text-sm lg:text-base text-white/55 font-ui max-w-2xl leading-relaxed">
          A Palavra que transforma — Podcasts, Ensino e Comunhão.
        </p>
      </div>

      <div className="space-y-16">
        {/* Mais tocadas */}
        <section>
          <div className="flex items-center justify-between mb-6">
            <h3 className="text-lg font-bold font-ui text-white tracking-wide uppercase">Mais tocadas</h3>
            <Link href="/explorar" className="text-sof-gold hover:text-sof-gold-light text-sm font-medium transition-colors">
              Ver tudo
            </Link>
          </div>

          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-5">
            {isLoading
              ? Array(5)
                  .fill(0)
                  .map((_, i) => (
                    <div key={i} className="space-y-3">
                      <Skeleton className="aspect-square rounded-2xl bg-sof-surface" />
                      <Skeleton className="h-4 w-3/4 bg-sof-surface" />
                      <Skeleton className="h-3 w-1/2 bg-sof-surface" />
                    </div>
                  ))
              : data?.topEpisodios.map((ep, idx) => (
                  <div
                    key={ep.id}
                    className="group rounded-2xl p-3 bg-white/[0.04] hover:bg-white/[0.07] transition-all duration-300 cursor-pointer"
                  >
                    <div className="relative aspect-square mb-4 overflow-hidden rounded-xl">
                      <Link href={`/episodio/${ep.id}`}>
                        <img
                          src={assetUrl(ep.capa) ?? assetUrl("/placeholder-podcast.svg")}
                          alt={ep.titulo}
                          className="object-cover w-full h-full transition-transform duration-500 group-hover:scale-105"
                        />
                      </Link>

                      <div className="absolute inset-0 bg-black/40 opacity-100 sm:opacity-0 sm:group-hover:opacity-100 transition-opacity" />

                      <button
                        onClick={() => {
                          if (currentItem?.kind === "episodio" && currentItem.sourceId === ep.id) {
                            togglePlayPause();
                          } else {
                            play(episodioToPlayable(ep), data.topEpisodios.map(episodioToPlayable), idx);
                          }
                        }}
                        className="absolute bottom-3 right-3 w-12 h-12 rounded-full bg-sof-gold text-sof-borgonha text-lg flex items-center justify-center shadow-2xl opacity-100 translate-y-0 sm:opacity-0 sm:translate-y-3 sm:group-hover:opacity-100 sm:group-hover:translate-y-0 transition-all duration-300"
                      >
                        {currentItem?.kind === "episodio" && currentItem.sourceId === ep.id && isPlaying ? "⏸" : "▶"}
                      </button>

                      <div className="absolute top-2 right-2">
                        <FavoritoButton episodioId={ep.id} className="text-lg drop-shadow" />
                      </div>
                    </div>

                    <Link href={`/episodio/${ep.id}`}>
                      <h4 className="font-ui font-semibold text-white text-sm truncate mb-1 hover:text-sof-gold transition-colors">
                        {ep.titulo}
                      </h4>
                    </Link>

                    <p className="text-xs text-white/45 truncate">
                      {ep.numeroEpisodio ? `Episódio ${ep.numeroEpisodio}` : ""}
                    </p>
                  </div>
                ))}
          </div>
        </section>

        {/* Apresentadores */}
        <section>
          <h3 className="text-lg font-bold font-ui text-white uppercase tracking-wide mb-6">Apresentadores em destaque</h3>

          <div className="flex gap-6 overflow-x-auto pb-6 scrollbar-hide">
            {isLoading
              ? Array(6)
                  .fill(0)
                  .map((_, i) => (
                    <div key={i} className="flex-shrink-0 w-28 space-y-3">
                      <Skeleton className="w-24 h-24 rounded-full bg-sof-surface mx-auto" />
                      <Skeleton className="h-4 w-full bg-sof-surface" />
                    </div>
                  ))
              : data?.apresentadores.map(ap => (
                  <Link key={ap.id} href={`/apresentador/${ap.id}`}>
                    <div className="flex-shrink-0 w-32 text-center group cursor-pointer">
                      <div className="relative w-24 h-24 mx-auto mb-4 overflow-hidden rounded-full border border-white/10 group-hover:border-sof-gold transition-all">
                        <img
                          src={assetUrl(ap.foto) ?? assetUrl("/placeholder-user.svg")}
                          alt={ap.nome}
                          className="object-cover w-full h-full grayscale group-hover:grayscale-0 transition-all duration-500"
                        />
                      </div>
                      <p className="text-sm font-medium font-ui text-white truncate group-hover:text-sof-gold transition-colors">
                        {ap.nome}
                      </p>
                    </div>
                  </Link>
                ))}
          </div>
        </section>

        {/* Séries */}
        <section>
          <h3 className="text-lg font-bold font-ui text-white uppercase tracking-wide mb-6">Séries recentes</h3>

          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5">
            {isLoading
              ? Array(4)
                  .fill(0)
                  .map((_, i) => <Skeleton key={i} className="h-56 rounded-2xl bg-sof-surface" />)
              : data?.programas.map(prog => (
                  <Link key={prog.id} href={`/serie/${prog.id}`}>
                    <div className="relative h-56 rounded-2xl overflow-hidden group cursor-pointer bg-white/[0.05]">
                      <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-105"
                      />
                      <div className="absolute inset-0 bg-gradient-to-t from-black/90 via-black/30 to-transparent" />
                      <div className="absolute bottom-0 left-0 p-5 w-full">
                        <span className="text-[11px] uppercase tracking-[0.2em] text-white/55 font-semibold font-ui mb-1 block">
                          {prog.categoria}
                        </span>
                        <h4 className="text-lg font-semibold font-ui text-white leading-tight group-hover:text-sof-gold transition-colors">
                          {prog.titulo}
                        </h4>
                      </div>
                    </div>
                  </Link>
                ))}
          </div>
        </section>
      </div>
    </div>
  );
}
