import EpisodioCard from "@/components/EpisodioCard";
import EpisodioRow from "@/components/EpisodioRow";
import FaixaRow from "@/components/FaixaRow";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { useAuth } from "@/_core/hooks/useAuth";
import { trpc } from "@/lib/trpc";
import { Link, useLocation, useSearch } from "wouter";
import { toast } from "sonner";

export default function Biblioteca() {
  useAuth({ redirectOnUnauthenticated: true });
  const search = useSearch();
  const [, navigate] = useLocation();
  const tab = new URLSearchParams(search).get("tab") || "favoritas";

  const favoritosQuery = trpc.podcast.getFavoritos.useQuery({ page: 1, limit: 60 });
  const playlistsQuery = trpc.podcast.playlists.listar.useQuery();
  const historicoQuery = trpc.podcast.getHistorico.useQuery({ limit: 50 });

  // Música — mesmas abas, dado paralelo (ADR-003). Consultas próprias, sem
  // mexer nas queries de Podcast acima.
  const favoritosMusicaQuery = trpc.musica.getFavoritos.useQuery({ page: 1, limit: 60 });
  const historicoMusicaQuery = trpc.musica.getHistorico.useQuery({ limit: 50 });

  const utils = trpc.useUtils();
  const criarPlaylistMutation = trpc.podcast.playlists.criar.useMutation({
    onSuccess: () => {
      utils.podcast.playlists.listar.invalidate();
      toast.success("Playlist criada.");
    },
    onError: error => toast.error(error.message),
  });

  const handleNovaPlaylist = () => {
    const titulo = window.prompt("Nome da nova playlist:");
    if (!titulo?.trim()) return;
    criarPlaylistMutation.mutate({ titulo: titulo.trim() });
  };

  return (
    <>
      <div className="p-8 pb-32">
        <h1 className="text-4xl font-bold font-display text-sof-text mb-8">Biblioteca</h1>

        <Tabs value={tab} onValueChange={value => navigate(`/biblioteca?tab=${value}`)} className="w-full">
          <TabsList className="bg-sof-surface border-b border-sof-border">
            <TabsTrigger value="favoritas">Favoritas</TabsTrigger>
            <TabsTrigger value="playlists">Playlists</TabsTrigger>
            <TabsTrigger value="historico">Histórico</TabsTrigger>
          </TabsList>

          {/* Favoritas */}
          <TabsContent value="favoritas" className="mt-6 space-y-10">
            <div>
              {favoritosQuery.isLoading ? (
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
                  {Array(6).fill(0).map((_, i) => (
                    <Skeleton key={i} className="aspect-square rounded-xl bg-sof-surface" />
                  ))}
                </div>
              ) : favoritosQuery.data && favoritosQuery.data.episodios.length > 0 ? (
                <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
                  {favoritosQuery.data.episodios.map((ep, idx) => (
                    <EpisodioCard
                      key={ep.id}
                      episodio={ep}
                      queue={favoritosQuery.data!.episodios}
                      queueIndex={idx}
                    />
                  ))}
                </div>
              ) : (
                <p className="text-sof-text-3">
                  Você ainda não tem episódios favoritos. Toque no ♡ em qualquer episódio para
                  salvá-lo aqui.
                </p>
              )}
            </div>

            <div>
              <h3 className="text-sm font-bold uppercase tracking-widest text-sof-text-3 mb-4">
                Músicas favoritas
              </h3>
              {favoritosMusicaQuery.isLoading ? (
                <div className="space-y-2">
                  {Array(3).fill(0).map((_, i) => (
                    <Skeleton key={i} className="h-16 w-full bg-sof-surface rounded-lg" />
                  ))}
                </div>
              ) : favoritosMusicaQuery.data && favoritosMusicaQuery.data.faixas.length > 0 ? (
                <div className="bg-sof-surface/30 rounded-2xl border border-sof-border overflow-hidden divide-y divide-sof-border/50">
                  {favoritosMusicaQuery.data.faixas.map((fx, idx) => (
                    <FaixaRow
                      key={fx.id}
                      faixa={fx}
                      index={idx}
                      queue={favoritosMusicaQuery.data!.faixas}
                      queueIndex={idx}
                    />
                  ))}
                </div>
              ) : (
                <p className="text-sof-text-3">
                  Você ainda não tem faixas favoritas. Toque no ♡ em qualquer faixa para
                  salvá-la aqui.
                </p>
              )}
            </div>
          </TabsContent>

          {/* Playlists */}
          <TabsContent value="playlists" className="mt-6">
            <div className="flex justify-end mb-4">
              <Button
                onClick={handleNovaPlaylist}
                className="bg-sof-gold text-sof-borgonha hover:bg-sof-gold-light"
              >
                + Nova playlist
              </Button>
            </div>

            {playlistsQuery.isLoading ? (
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {Array(4).fill(0).map((_, i) => (
                  <Skeleton key={i} className="aspect-square rounded-lg bg-sof-surface" />
                ))}
              </div>
            ) : playlistsQuery.data && playlistsQuery.data.length > 0 ? (
              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                {playlistsQuery.data.map(pl => (
                  <Link key={pl.id} href={`/playlist/${pl.id}`}>
                    <div className="bg-sof-borgonha-light rounded-lg p-6 aspect-square flex flex-col justify-between hover:bg-sof-surface transition-colors cursor-pointer">
                      <span className="text-3xl">♫</span>
                      <div>
                        <p className="font-bold text-sof-text truncate">{pl.titulo}</p>
                        <p className="text-xs text-sof-text-3">{pl.totalEpisodios} episódio(s)</p>
                      </div>
                    </div>
                  </Link>
                ))}
              </div>
            ) : (
              <p className="text-sof-text-3">
                Você ainda não criou nenhuma playlist. Clique em "Nova playlist" para começar.
              </p>
            )}
          </TabsContent>

          {/* Histórico */}
          <TabsContent value="historico" className="mt-6 space-y-10">
            <div>
              {historicoQuery.isLoading ? (
                <div className="space-y-2">
                  {Array(5).fill(0).map((_, i) => (
                    <Skeleton key={i} className="h-16 w-full bg-sof-surface rounded-lg" />
                  ))}
                </div>
              ) : historicoQuery.data && historicoQuery.data.length > 0 ? (
                <div className="bg-sof-surface/30 rounded-2xl border border-sof-border overflow-hidden divide-y divide-sof-border/50">
                  {historicoQuery.data.map(ep => (
                    <EpisodioRow key={ep.id} episodio={ep} />
                  ))}
                </div>
              ) : (
                <p className="text-sof-text-3">Você ainda não ouviu nenhum episódio.</p>
              )}
            </div>

            <div>
              <h3 className="text-sm font-bold uppercase tracking-widest text-sof-text-3 mb-4">
                Músicas ouvidas
              </h3>
              {historicoMusicaQuery.isLoading ? (
                <div className="space-y-2">
                  {Array(3).fill(0).map((_, i) => (
                    <Skeleton key={i} className="h-16 w-full bg-sof-surface rounded-lg" />
                  ))}
                </div>
              ) : historicoMusicaQuery.data && historicoMusicaQuery.data.length > 0 ? (
                <div className="bg-sof-surface/30 rounded-2xl border border-sof-border overflow-hidden divide-y divide-sof-border/50">
                  {historicoMusicaQuery.data.map(fx => (
                    <FaixaRow key={fx.id} faixa={fx} />
                  ))}
                </div>
              ) : (
                <p className="text-sof-text-3">Você ainda não ouviu nenhuma faixa.</p>
              )}
            </div>
          </TabsContent>
        </Tabs>
      </div>
    </>
  );
}
