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

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

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

  if (isLoading) {
    return (
      <>
        <div className="p-8 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 { programa, episodios = [] } = data || {};

  if (!programa) {
    return (
      <>
        <div className="p-8">
          <p className="text-sof-text-2">Série não encontrada.</p>
        </div>
      </>
    );
  }

  return (
    <>
      <div className="p-8 pb-32">
        <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(programa.capa) ?? assetUrl("/placeholder-series.svg")}
              alt={programa.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">
              {programa.categoria} {programa.ano ? `• ${programa.ano}` : ""}
            </span>
            <h1 className="text-6xl font-bold font-display text-sof-text mb-4">{programa.titulo}</h1>
            {programa.descricao && (
              <p className="text-sof-text-2 text-lg max-w-2xl mb-6">{programa.descricao}</p>
            )}
            <div className="flex items-center gap-4">
              <Button
                onClick={() =>
                  episodios[0] &&
                  play(episodioToPlayable(episodios[0]), episodios.map(episodioToPlayable), 0)
                }
                disabled={episodios.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"
              >
                ▶ Ouvir Agora
              </Button>
              {!!programa.configAutodj && (
                <span className="text-xs uppercase tracking-widest text-sof-text-3 border border-sof-border rounded-full px-4 py-2">
                  AutoDJ ativado
                </span>
              )}
            </div>
          </div>
        </div>

        {episodios.length === 0 ? (
          <p className="text-sof-text-3">Nenhum episódio publicado nesta série ainda.</p>
        ) : (
          <div className="bg-sof-surface/30 rounded-2xl border border-sof-border overflow-hidden">
            <div className="p-6 border-b border-sof-border flex items-center text-sof-text-3 text-xs font-bold uppercase tracking-wider">
              <span className="w-12 text-center">#</span>
              <span className="flex-1">Título</span>
              <span className="w-14 text-right">Duração</span>
            </div>
            <div className="divide-y divide-sof-border/50">
              {episodios.map((ep, index) => (
                <EpisodioRow
                  key={ep.id}
                  episodio={ep}
                  index={index}
                  queue={episodios}
                  queueIndex={index}
                  fallbackCapa={programa.capa}
                />
              ))}
            </div>
          </div>
        )}
      </div>
    </>
  );
}
