import AdminLayout from "@/components/AdminLayout";
import { trpc } from "@/lib/trpc";
import { Link } from "wouter";

export default function AdminDashboard() {
  const { data, isLoading } = trpc.podcast.admin.stats.useQuery();
  const { data: musicaStats, isLoading: musicaLoading } = trpc.musica.admin.stats.useQuery();

  const stats = [
    { label: "Total de Episódios", value: data?.totalEpisodios ?? 0, icon: "♪", color: "bg-blue-500" },
    { label: "Séries/Programas", value: data?.totalProgramas ?? 0, icon: "◈", color: "bg-purple-500" },
    { label: "Apresentadores", value: data?.totalApresentadores ?? 0, icon: "✦", color: "bg-amber-500" },
    { label: "Reproduções Totais", value: data?.totalReproducoes ?? 0, icon: "▶", color: "bg-emerald-500" },
  ];

  const musicaStatsCards = [
    { label: "Faixas de Música", value: musicaStats?.totalFaixas ?? 0, icon: "🎵", color: "bg-pink-500" },
    { label: "Artistas", value: musicaStats?.totalArtistas ?? 0, icon: "🎤", color: "bg-rose-500" },
    { label: "Álbuns", value: musicaStats?.totalAlbuns ?? 0, icon: "💿", color: "bg-fuchsia-500" },
    { label: "Reproduções Música", value: musicaStats?.totalReproducoes ?? 0, icon: "▶", color: "bg-violet-500" },
  ];

  return (
    <AdminLayout>
      <h2 className="text-base font-bold text-slate-600 mb-4">Podcast</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
        {stats.map(stat => (
          <div
            key={stat.label}
            className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex items-center gap-4"
          >
            <div
              className={`w-12 h-12 ${stat.color} text-white rounded-lg flex items-center justify-center text-2xl shadow-lg`}
            >
              {stat.icon}
            </div>
            <div>
              <p className="text-sm text-slate-500 font-medium">{stat.label}</p>
              <p className="text-2xl font-bold text-slate-800">
                {isLoading ? "…" : stat.value.toLocaleString("pt-BR")}
              </p>
            </div>
          </div>
        ))}
      </div>

      {/* Stats de Música */}
      <h2 className="text-base font-bold text-slate-600 mb-4 mt-2">Música</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
        {musicaStatsCards.map(stat => (
          <div
            key={stat.label}
            className="bg-white p-6 rounded-xl border border-slate-200 shadow-sm flex items-center gap-4"
          >
            <div className={`w-12 h-12 ${stat.color} text-white rounded-lg flex items-center justify-center text-2xl shadow-lg`}>
              {stat.icon}
            </div>
            <div>
              <p className="text-sm text-slate-500 font-medium">{stat.label}</p>
              <p className="text-2xl font-bold text-slate-800">
                {musicaLoading ? "…" : stat.value.toLocaleString("pt-BR")}
              </p>
            </div>
          </div>
        ))}
      </div>

      <div className="bg-slate-50 p-6 rounded-xl border border-slate-200">
        <h3 className="text-lg font-bold mb-4">Ações rápidas</h3>
        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
          <Link href="/admin/episodios">
            <div className="bg-sof-borgonha text-white p-4 rounded-lg font-bold hover:bg-sof-borgonha-dark transition-colors cursor-pointer text-center">
              + Novo Episódio
            </div>
          </Link>
          <Link href="/admin/series">
            <div className="bg-sof-gold text-sof-borgonha p-4 rounded-lg font-bold hover:bg-sof-gold-light transition-colors cursor-pointer text-center">
              + Nova Série
            </div>
          </Link>
          <Link href="/admin/apresentadores">
            <div className="bg-white border border-sof-borgonha text-sof-borgonha p-4 rounded-lg font-bold hover:bg-slate-50 transition-colors cursor-pointer text-center">
              + Apresentador
            </div>
          </Link>
          <Link href="/admin/vinhetas">
            <div className="bg-white border border-slate-300 text-slate-600 p-4 rounded-lg font-bold hover:bg-slate-50 transition-colors cursor-pointer text-center">
              Gerenciar Vinhetas
            </div>
          </Link>
          <Link href="/admin/musica/faixas">
            <div className="bg-pink-500 text-white p-4 rounded-lg font-bold hover:bg-pink-600 transition-colors cursor-pointer text-center">
              🎵 Nova Faixa
            </div>
          </Link>
          <Link href="/admin/musica/albuns">
            <div className="bg-fuchsia-500 text-white p-4 rounded-lg font-bold hover:bg-fuchsia-600 transition-colors cursor-pointer text-center">
              💿 Novo Álbum
            </div>
          </Link>
          <Link href="/admin/musica/artistas">
            <div className="bg-rose-500 text-white p-4 rounded-lg font-bold hover:bg-rose-600 transition-colors cursor-pointer text-center">
              🎤 Novo Artista
            </div>
          </Link>
        </div>
      </div>
    </AdminLayout>
  );
}
