import EpisodioRow from "@/components/EpisodioRow";
import FaixaRow from "@/components/FaixaRow";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { useAuth } from "@/_core/hooks/useAuth";
import { trpc } from "@/lib/trpc";
import { useRoute, useLocation } from "wouter";
import { toast } from "sonner";

export default function Playlist() {
  useAuth({ redirectOnUnauthenticated: true });
  const [, params] = useRoute("/playlist/:id");
  const [, navigate] = useLocation();
  const id = params?.id ? parseInt(params.id) : 0;

  const utils = trpc.useUtils();
  const { data, isLoading } = trpc.podcast.playlists.obter.useQuery({ id }, { enabled: !!id });

  // Música — mesma playlist (container compartilhado), consulta própria
  // porque os itens ficam em user_playlist_items_musica (ADR-003).
  const { data: faixas, isLoading: isLoadingFaixas } = trpc.musica.playlists.obterFaixas.useQuery(
    { playlistId: id },
    { enabled: !!id }
  );

  const removerMutation = trpc.podcast.playlists.removerEpisodio.useMutation({
    onSuccess: () => utils.podcast.playlists.obter.invalidate({ id }),
  });

  const removerFaixaMutation = trpc.musica.playlists.removerFaixa.useMutation({
    onSuccess: () => utils.musica.playlists.obterFaixas.invalidate({ playlistId: id }),
  });

  const renomearMutation = trpc.podcast.playlists.atualizar.useMutation({
    onSuccess: () => utils.podcast.playlists.obter.invalidate({ id }),
  });

  const deletarMutation = trpc.podcast.playlists.deletar.useMutation({
    onSuccess: () => {
      toast.success("Playlist excluída.");
      utils.podcast.playlists.listar.invalidate();
      navigate("/biblioteca?tab=playlists");
    },
  });

  if (isLoading) {
    return (
      <>
        <div className="p-8 pb-32 space-y-6">
          <Skeleton className="h-12 w-1/2 bg-sof-surface" />
          <Skeleton className="h-64 w-full bg-sof-surface rounded-xl" />
        </div>
      </>
    );
  }

  if (!data) {
    return (
      <>
        <div className="p-8 pb-32">
          <p className="text-sof-text-2">Playlist não encontrada.</p>
        </div>
      </>
    );
  }

  const { playlist, episodios } = data;

  const handleRename = () => {
    const novoTitulo = window.prompt("Novo nome da playlist:", playlist.titulo);
    if (!novoTitulo?.trim() || novoTitulo === playlist.titulo) return;
    renomearMutation.mutate({ id: playlist.id, titulo: novoTitulo.trim() });
  };

  const handleDelete = () => {
    if (!window.confirm(`Excluir a playlist "${playlist.titulo}"? Esta ação não pode ser desfeita.`)) return;
    deletarMutation.mutate({ id: playlist.id });
  };

  return (
    <>
      <div className="p-8 pb-32">
        <div className="flex flex-wrap items-end justify-between gap-4 mb-8">
          <div>
            <span className="text-sof-gold font-bold uppercase tracking-widest text-xs mb-2 block">
              Playlist
            </span>
            <h1 className="text-4xl font-bold font-display text-sof-text">{playlist.titulo}</h1>
            {playlist.descricao && <p className="text-sof-text-2 mt-2">{playlist.descricao}</p>}
            <p className="text-sof-text-3 text-sm mt-1">
              {episodios.length} episódio(s){faixas?.length ? ` · ${faixas.length} faixa(s)` : ""}
            </p>
          </div>
          <div className="flex gap-2">
            <Button
              variant="outline"
              onClick={handleRename}
              className="border-sof-border text-sof-text hover:bg-sof-surface"
            >
              Renomear
            </Button>
            <Button
              variant="outline"
              onClick={handleDelete}
              className="border-red-500/40 text-red-400 hover:bg-red-500/10"
            >
              Excluir
            </Button>
          </div>
        </div>

        {episodios.length === 0 ? (
          <p className="text-sof-text-3">
            Esta playlist ainda não tem episódios. Use o menu "⋮" em qualquer episódio para
            adicioná-lo aqui.
          </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}
                rightSlot={
                  <button
                    title="Remover da playlist"
                    onClick={() =>
                      removerMutation.mutate({ playlistId: playlist.id, episodioId: ep.id })
                    }
                    className="text-sof-text-3 hover:text-red-400 transition-colors"
                  >
                    ✕
                  </button>
                }
              />
            ))}
          </div>
        )}

        {/* Faixas de Música — mesma playlist, itens de outra tabela (ADR-003) */}
        <div className="mt-10">
          <h3 className="text-sm font-bold uppercase tracking-widest text-sof-text-3 mb-4">Faixas</h3>
          {isLoadingFaixas ? (
            <Skeleton className="h-32 w-full bg-sof-surface rounded-xl" />
          ) : faixas && faixas.length > 0 ? (
            <div className="bg-sof-surface/30 rounded-2xl border border-sof-border overflow-hidden divide-y divide-sof-border/50">
              {faixas.map((fx, idx) => (
                <FaixaRow
                  key={fx.id}
                  faixa={fx}
                  index={idx}
                  queue={faixas}
                  queueIndex={idx}
                  artistaNome={fx.artistaNome}
                  subtitle={fx.artistaNome ?? undefined}
                  rightSlot={
                    <button
                      title="Remover da playlist"
                      onClick={() =>
                        removerFaixaMutation.mutate({ playlistId: playlist.id, faixaId: fx.id })
                      }
                      className="text-sof-text-3 hover:text-red-400 transition-colors"
                    >
                      ✕
                    </button>
                  }
                />
              ))}
            </div>
          ) : (
            <p className="text-sof-text-3">
              Esta playlist ainda não tem faixas. Use o menu "⋮" em qualquer faixa para
              adicioná-la aqui.
            </p>
          )}
        </div>
      </div>
    </>
  );
}
