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

function formatDuration(seconds: number | null) {
  const total = seconds ?? 0;
  const minutes = Math.floor(total / 60);
  const secs = total % 60;
  return `${minutes}:${secs.toString().padStart(2, "0")}`;
}

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

  const { data, isLoading } = trpc.podcast.getEpisodio.useQuery({ id }, { enabled: !!id });
  const { play, togglePlayPause, currentItem, isPlaying } = 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>
        </div>
      </>
    );
  }

  if (!data?.episodio) {
    return (
      <>
        <div className="p-8">
          <p className="text-sof-text-2">Episódio não encontrado.</p>
        </div>
      </>
    );
  }

  const { episodio, programa, apresentador, relacionados } = data;
  const isCurrent =
    currentItem?.kind === "episodio" && currentItem.sourceId === episodio.id;

  const handlePlay = () => {
    if (isCurrent) {
      togglePlayPause();
    } else {
      play(episodioToPlayable(episodio, { apresentadorNome: apresentador?.nome ?? null }));
    }
  };

  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(episodio.capa || programa?.capa) ?? assetUrl("/placeholder-podcast.svg")}
              alt={episodio.titulo}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="flex flex-col justify-end py-2">
            <div className="flex items-center gap-2 text-xs uppercase tracking-widest text-sof-gold font-bold mb-2">
              {programa && (
                <Link href={`/serie/${programa.id}`} className="hover:underline">
                  {programa.titulo}
                </Link>
              )}
              {episodio.numeroEpisodio && <span>· Episódio {episodio.numeroEpisodio}</span>}
              {episodio.duracao && <span>· {formatDuration(episodio.duracao)}</span>}
            </div>
            <h1 className="text-4xl md:text-5xl font-bold font-display text-sof-text mb-4">
              {episodio.titulo}
            </h1>
            {apresentador && (
              <Link href={`/apresentador/${apresentador.id}`}>
                <div className="flex items-center gap-3 mb-4 group cursor-pointer">
                  <img
                    src={assetUrl(apresentador.foto) ?? assetUrl("/placeholder-user.svg")}
                    alt={apresentador.nome}
                    className="w-10 h-10 rounded-full object-cover"
                  />
                  <span className="text-sof-text-2 group-hover:text-sof-gold transition-colors">
                    {apresentador.nome}
                  </span>
                </div>
              </Link>
            )}
            {episodio.descricao && (
              <p className="text-sof-text-2 text-lg max-w-2xl mb-6">{episodio.descricao}</p>
            )}
            <div className="flex items-center gap-4">
              <Button
                onClick={handlePlay}
                className="bg-sof-gold text-sof-borgonha hover:bg-sof-gold-light rounded-full px-8 h-12 font-bold text-lg"
              >
                {isCurrent && isPlaying ? "⏸ Pausar" : "▶ Ouvir Agora"}
              </Button>
              <FavoritoButton
                episodioId={episodio.id}
                className="text-2xl border border-sof-border rounded-full w-12 h-12 flex items-center justify-center"
              />
              <AddToPlaylistMenu
                episodioId={episodio.id}
                className="text-2xl border border-sof-border rounded-full w-12 h-12 flex items-center justify-center"
              />
            </div>
          </div>
        </div>

        {episodio.transcricao && (
          <div className="bg-sof-surface/30 rounded-2xl border border-sof-border p-6 mb-12">
            <h2 className="text-xl font-bold text-sof-text mb-4">Transcrição</h2>
            <p className="text-sof-text-2 whitespace-pre-line leading-relaxed">
              {episodio.transcricao}
            </p>
          </div>
        )}

        {relacionados.length > 0 && (
          <div>
            <h2 className="text-2xl font-bold font-display text-sof-text mb-6">
              Episódios relacionados
            </h2>
            <div className="bg-sof-surface/30 rounded-2xl border border-sof-border overflow-hidden divide-y divide-sof-border/50">
              {relacionados.map((ep, idx) => (
                <EpisodioRow
                  key={ep.id}
                  episodio={ep}
                  index={idx}
                  queue={relacionados}
                  queueIndex={idx}
                  fallbackCapa={programa?.capa}
                />
              ))}
            </div>
          </div>
        )}
      </div>
    </>
  );
}
