import { Skeleton } from "@/components/ui/skeleton";
import { assetUrl } from "@/lib/asset";
import { trpc } from "@/lib/trpc";

const categoriaLabels: Record<string, string> = {
  abertura: "Aberturas",
  transicao: "Transições (AutoDJ)",
  encerramento: "Encerramentos",
};

export default function Vinhetas() {
  const { data, isLoading } = trpc.podcast.getVinhetas.useQuery();

  const grupos = (data ?? []).reduce<Record<string, typeof data>>((acc, vinheta) => {
    const categoria = vinheta.categoria ?? "transicao";
    acc[categoria] = acc[categoria] ?? [];
    acc[categoria]!.push(vinheta);
    return acc;
  }, {});

  return (
    <>
      <div className="p-8 pb-32">
        <h1 className="text-4xl font-bold font-display text-sof-text mb-2">Vinhetas</h1>
        <p className="text-sof-text-3 mb-8">
          Vinhetas de abertura, transição e encerramento usadas no AutoDJ entre episódios.
        </p>

        {isLoading ? (
          <div className="space-y-3">
            {Array(4).fill(0).map((_, i) => (
              <Skeleton key={i} className="h-16 w-full bg-sof-surface rounded-lg" />
            ))}
          </div>
        ) : !data || data.length === 0 ? (
          <p className="text-sof-text-3">Nenhuma vinheta cadastrada ainda.</p>
        ) : (
          <div className="space-y-10">
            {Object.entries(grupos).map(([categoria, vinhetas]) => (
              <section key={categoria}>
                <h2 className="text-xl font-bold text-sof-text mb-4">
                  {categoriaLabels[categoria] ?? categoria}
                </h2>
                <div className="space-y-3">
                  {vinhetas?.map(vinheta => (
                    <div
                      key={vinheta.id}
                      className="bg-sof-surface rounded-lg p-4 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-6"
                    >
                      <p className="text-sof-text font-medium flex-1 truncate">{vinheta.titulo}</p>
                      <audio controls src={assetUrl(vinheta.arquivo)} className="w-full sm:w-80 h-10" />
                    </div>
                  ))}
                </div>
              </section>
            ))}
          </div>
        )}
      </div>
    </>
  );
}
