import EpisodioCard from "@/components/EpisodioCard";
import FaixaRow from "@/components/FaixaRow";
import { Button } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";
import { useMode } from "@/contexts/ModeContext";
import { trpc } from "@/lib/trpc";
import { useState } from "react";

const LIMIT = 24;

/**
 * REVISÃO (jul/2026): forcePodcast era passado pela rota fixa /episodios
 * (em App.tsx: <Explorar forcePodcast />) mas o componente nunca aceitava
 * esse prop — era descartado em silêncio. Resultado: /episodios mostrava
 * Música se o seletor global (ModeContext) estivesse em "Música" no
 * momento do clique, já que a página só olhava para `mode`. Corrigido
 * com um "modo efetivo": quando forcePodcast é true, ignora o seletor
 * global por completo e sempre trata como Podcast — em vez de tentar
 * sincronizar os dois estados.
 */
export default function Explorar({ forcePodcast = false }: { forcePodcast?: boolean }) {
  const { mode } = useMode();
  const effectiveMode = forcePodcast ? "podcast" : mode;
  const titulo = forcePodcast ? "Episódios" : "Explorar";
  const [page, setPage] = useState(1);

  const { data, isLoading } = trpc.podcast.getEpisodios.useQuery(
    { page, limit: LIMIT },
    { enabled: effectiveMode === "podcast" }
  );

  const { data: dataMusica, isLoading: isLoadingMusica } = trpc.musica.getFaixas.useQuery(
    { page, limit: LIMIT },
    { enabled: effectiveMode === "musica" }
  );

  if (effectiveMode === "audiolivro") {
    return (
      <>
        <div className="p-8 pb-32">
          <h1 className="text-4xl font-bold font-display text-sof-text mb-2">Explorar</h1>
          <p className="text-sof-text-3 mb-8">SpotOnFide Áudiolivro</p>
          <div className="rounded-2xl border border-sof-border bg-sof-surface/30 p-10 text-center">
            <p className="text-sof-text-2">O módulo de Áudiolivro ainda está por vir.</p>
          </div>
        </div>
      </>
    );
  }

  if (effectiveMode === "musica") {
    return (
      <>
        <div className="p-8 pb-32">
          <h1 className="text-4xl font-bold font-display text-sof-text mb-2">Explorar</h1>
          <p className="text-sof-text-3 mb-8">Todas as faixas do SpotOnFide Música</p>

          {isLoadingMusica ? (
            <div className="space-y-2">
              {Array(8).fill(0).map((_, i) => (
                <Skeleton key={i} className="h-16 w-full bg-sof-surface rounded-lg" />
              ))}
            </div>
          ) : dataMusica && dataMusica.faixas.length > 0 ? (
            <div className="bg-sof-surface/30 rounded-2xl border border-sof-border overflow-hidden divide-y divide-sof-border/50">
              {dataMusica.faixas.map((fx, idx) => (
                <FaixaRow key={fx.id} faixa={fx} index={idx} queue={dataMusica.faixas} queueIndex={idx} />
              ))}
            </div>
          ) : (
            <p className="text-sof-text-3">Nenhuma faixa encontrada.</p>
          )}

          {dataMusica && dataMusica.pages > 1 && (
            <div className="flex items-center justify-center gap-4 mt-10">
              <Button
                variant="outline"
                disabled={page <= 1}
                onClick={() => setPage(p => Math.max(1, p - 1))}
                className="border-sof-border text-sof-text hover:bg-sof-surface disabled:opacity-40"
              >
                ← Anterior
              </Button>
              <span className="text-sof-text-3 text-sm">
                Página {dataMusica.page} de {dataMusica.pages}
              </span>
              <Button
                variant="outline"
                disabled={page >= dataMusica.pages}
                onClick={() => setPage(p => Math.min(dataMusica.pages, p + 1))}
                className="border-sof-border text-sof-text hover:bg-sof-surface disabled:opacity-40"
              >
                Próxima →
              </Button>
            </div>
          )}
        </div>
      </>
    );
  }

  return (
    <>
      <div className="p-8 pb-32">
        <h1 className="text-4xl font-bold font-display text-sof-text mb-2">{titulo}</h1>
        <p className="text-sof-text-3 mb-8">Todos os episódios do SpotOnFide Podcast</p>

        {isLoading ? (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
            {Array(12).fill(0).map((_, i) => (
              <div key={i} className="space-y-3">
                <Skeleton className="aspect-square rounded-xl bg-sof-surface" />
                <Skeleton className="h-4 w-3/4 bg-sof-surface" />
                <Skeleton className="h-3 w-1/2 bg-sof-surface" />
              </div>
            ))}
          </div>
        ) : data && data.episodios.length > 0 ? (
          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-6">
            {data.episodios.map((ep, idx) => (
              <EpisodioCard key={ep.id} episodio={ep} queue={data.episodios} queueIndex={idx} />
            ))}
          </div>
        ) : (
          <p className="text-sof-text-3">Nenhum episódio encontrado.</p>
        )}

        {data && data.pages > 1 && (
          <div className="flex items-center justify-center gap-4 mt-10">
            <Button
              variant="outline"
              disabled={page <= 1}
              onClick={() => setPage(p => Math.max(1, p - 1))}
              className="border-sof-border text-sof-text hover:bg-sof-surface disabled:opacity-40"
            >
              ← Anterior
            </Button>
            <span className="text-sof-text-3 text-sm">
              Página {data.page} de {data.pages}
            </span>
            <Button
              variant="outline"
              disabled={page >= data.pages}
              onClick={() => setPage(p => Math.min(data.pages, p + 1))}
              className="border-sof-border text-sof-text hover:bg-sof-surface disabled:opacity-40"
            >
              Próxima →
            </Button>
          </div>
        )}
      </div>
    </>
  );
}
