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

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

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

  if (isLoading) {
    return (
      <>
        <div className="p-8 animate-pulse">
          <div className="flex gap-8 mb-12">
            <Skeleton className="w-48 h-48 rounded-full bg-sof-surface" />
            <div className="flex-1 space-y-4 pt-8">
              <Skeleton className="h-12 w-1/2 bg-sof-surface" />
              <Skeleton className="h-20 w-full bg-sof-surface" />
            </div>
          </div>
        </div>
      </>
    );
  }

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

  const { apresentador, episodios, programas } = data;

  return (
    <>
      <div className="p-8 pb-32">
        <div className="flex flex-col md:flex-row gap-8 mb-12 items-start">
          <div className="w-48 h-48 flex-shrink-0 shadow-2xl rounded-full overflow-hidden border border-sof-border">
            <img
              src={assetUrl(apresentador.foto) ?? assetUrl("/placeholder-user.svg")}
              alt={apresentador.nome}
              className="w-full h-full object-cover"
            />
          </div>
          <div className="flex flex-col justify-center py-2">
            <span className="text-sof-gold font-bold uppercase tracking-widest text-xs mb-2">
              Apresentador
            </span>
            <h1 className="text-5xl font-bold font-display text-sof-text mb-4">
              {apresentador.nome}
            </h1>
            {apresentador.bio && (
              <p className="text-sof-text-2 text-lg max-w-2xl whitespace-pre-line">
                {apresentador.bio}
              </p>
            )}
          </div>
        </div>

        {programas.length > 0 && (
          <div className="mb-12">
            <h2 className="text-2xl font-bold font-display text-sof-text mb-6">Séries</h2>
            <div className="flex gap-4 flex-wrap">
              {programas.map(prog => (
                <Link key={prog.id} href={`/serie/${prog.id}`}>
                  <div className="bg-sof-surface hover:bg-sof-borgonha-light px-5 py-3 rounded-lg cursor-pointer transition-colors">
                    <span className="text-sof-text font-medium hover:text-sof-gold transition-colors">
                      {prog.titulo}
                    </span>
                  </div>
                </Link>
              ))}
            </div>
          </div>
        )}

        <div>
          <h2 className="text-2xl font-bold font-display text-sof-text mb-6">Episódios</h2>
          {episodios.length === 0 ? (
            <p className="text-sof-text-3">Nenhum episódio publicado ainda.</p>
          ) : (
            <div className="bg-sof-surface/30 rounded-2xl border border-sof-border overflow-hidden divide-y divide-sof-border/50">
              {episodios.map((ep, idx) => (
                <EpisodioRow
                  key={ep.id}
                  episodio={ep}
                  index={idx}
                  queue={episodios}
                  queueIndex={idx}
                  fallbackCapa={apresentador.foto}
                />
              ))}
            </div>
          )}
        </div>
      </div>
    </>
  );
}
