import AdminLayout from "@/components/AdminLayout";
import { trpc } from "@/lib/trpc";
import { Building2, Mic2, Radio, FileText, TrendingUp, ArrowRight } from "lucide-react";
import { Link } from "wouter";
import { Button } from "@/components/ui/button";

const ARTWORK_COLORS = [
  "from-blue-500 to-indigo-600",
  "from-violet-500 to-purple-700",
  "from-emerald-500 to-teal-600",
  "from-orange-500 to-red-600",
  "from-cyan-500 to-blue-600",
  "from-rose-500 to-pink-600",
  "from-amber-500 to-orange-600",
  "from-indigo-500 to-blue-700",
];

export default function AdminDashboard() {
  const { data: stats, isLoading } = trpc.podcasts.stats.useQuery();
  const { data: recentPodcasts } = trpc.podcasts.list.useQuery({ statut: undefined });

  const statCards = [
    {
      title: "Total podcasts",
      value: stats?.total ?? 0,
      icon: Mic2,
      gradient: "from-blue-500 to-indigo-600",
      textColor: "text-blue-600",
      bgLight: "bg-blue-50",
      change: null,
    },
    {
      title: "Publiés",
      value: stats?.publies ?? 0,
      icon: Radio,
      gradient: "from-emerald-500 to-teal-600",
      textColor: "text-emerald-600",
      bgLight: "bg-emerald-50",
      change: null,
    },
    {
      title: "Brouillons",
      value: stats?.brouillons ?? 0,
      icon: FileText,
      gradient: "from-amber-500 to-orange-500",
      textColor: "text-amber-600",
      bgLight: "bg-amber-50",
      change: null,
    },
    {
      title: "Établissements",
      value: stats?.etablissements ?? 0,
      icon: Building2,
      gradient: "from-violet-500 to-purple-600",
      textColor: "text-violet-600",
      bgLight: "bg-violet-50",
      change: null,
    },
  ];

  return (
    <AdminLayout>
      <div className="space-y-7 max-w-6xl">
        {/* ── Header ── */}
        <div className="flex items-start justify-between">
          <div>
            <h1 className="text-2xl font-bold text-foreground tracking-tight">Tableau de bord</h1>
            <p className="text-muted-foreground text-sm mt-1">
              Vue d'ensemble de la plateforme Itinova Podcasts
            </p>
          </div>
          <div className="hidden sm:flex items-center gap-2 px-3 py-1.5 bg-emerald-50 border border-emerald-200 rounded-full">
            <span className="w-2 h-2 rounded-full bg-emerald-500 animate-pulse" />
            <span className="text-xs font-medium text-emerald-700">Plateforme active</span>
          </div>
        </div>

        {/* ── Stat cards ── */}
        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          {statCards.map((card) => (
            <div
              key={card.title}
              className="relative bg-card rounded-2xl p-5 border border-border shadow-sm hover:shadow-md transition-all duration-200 overflow-hidden group"
            >
              {/* Gradient accent top */}
              <div className={`absolute top-0 left-0 right-0 h-1 bg-gradient-to-r ${card.gradient}`} />
              <div className="flex items-start justify-between">
                <div>
                  <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">{card.title}</p>
                  <p className="text-3xl font-bold text-foreground mt-2 tabular-nums">
                    {isLoading ? (
                      <span className="inline-block w-10 h-8 bg-muted rounded-lg animate-pulse" />
                    ) : card.value}
                  </p>
                </div>
                <div className={`w-11 h-11 rounded-xl flex items-center justify-center bg-gradient-to-br ${card.gradient} shadow-md group-hover:scale-110 transition-transform`}>
                  <card.icon className="w-5 h-5 text-white" />
                </div>
              </div>
            </div>
          ))}
        </div>

        {/* ── Taux de publication ── */}
        {stats && stats.total > 0 && (
          <div className="bg-card rounded-2xl p-5 border border-border shadow-sm">
            <div className="flex items-center justify-between mb-3">
              <div className="flex items-center gap-2">
                <TrendingUp className="w-4 h-4 text-primary" />
                <span className="text-sm font-semibold text-foreground">Taux de publication</span>
              </div>
              <span className="text-sm font-bold text-primary">
                {Math.round((stats.publies / stats.total) * 100)}%
              </span>
            </div>
            <div className="h-2.5 bg-muted rounded-full overflow-hidden">
              <div
                className="h-full bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full transition-all duration-700"
                style={{ width: `${Math.round((stats.publies / stats.total) * 100)}%` }}
              />
            </div>
            <div className="flex justify-between mt-2 text-xs text-muted-foreground">
              <span>{stats.publies} publié{stats.publies !== 1 ? "s" : ""}</span>
              <span>{stats.brouillons} brouillon{stats.brouillons !== 1 ? "s" : ""}</span>
            </div>
          </div>
        )}

        {/* ── Podcasts récents ── */}
        <div className="bg-card rounded-2xl border border-border shadow-sm overflow-hidden">
          <div className="flex items-center justify-between px-6 py-4 border-b border-border">
            <h2 className="font-semibold text-foreground">Podcasts récents</h2>
            <Link href="/admin/podcasts">
              <a className="flex items-center gap-1 text-sm text-primary hover:text-primary/80 font-medium transition-colors">
                Voir tout
                <ArrowRight className="w-3.5 h-3.5" />
              </a>
            </Link>
          </div>

          {!recentPodcasts || recentPodcasts.length === 0 ? (
            <div className="text-center py-16 px-6">
              <div className="w-16 h-16 rounded-2xl bg-muted flex items-center justify-center mx-auto mb-4">
                <Mic2 className="w-8 h-8 text-muted-foreground/40" />
              </div>
              <p className="font-semibold text-foreground">Aucun podcast pour l'instant</p>
              <p className="text-sm text-muted-foreground mt-1">Commencez par créer votre premier podcast</p>
              <Link href="/admin/podcasts">
                <Button variant="outline" size="sm" className="mt-4">
                  Créer le premier podcast
                </Button>
              </Link>
            </div>
          ) : (
            <div className="divide-y divide-border">
              {recentPodcasts.slice(0, 6).map((p) => {
                const colorClass = ARTWORK_COLORS[p.id % ARTWORK_COLORS.length];
                return (
                  <div
                    key={p.id}
                    className="flex items-center gap-4 px-6 py-3.5 hover:bg-muted/30 transition-colors group"
                  >
                    {/* Artwork */}
                    <div className={`w-10 h-10 rounded-xl bg-gradient-to-br ${colorClass} flex items-center justify-center shrink-0 shadow-sm`}>
                      <Mic2 className="w-4 h-4 text-white" />
                    </div>
                    {/* Info */}
                    <div className="flex-1 min-w-0">
                      <p className="font-medium text-sm text-foreground truncate leading-tight">{p.titre}</p>
                      <p className="text-xs text-muted-foreground truncate mt-0.5">{p.etablissementNom}</p>
                    </div>
                    {/* Badge statut */}
                    <span className={p.statut === "publie" ? "badge-publie" : "badge-brouillon"}>
                      {p.statut === "publie" ? "Publié" : "Brouillon"}
                    </span>
                    {/* Action */}
                    <Link href="/admin/podcasts">
                      <a className="opacity-0 group-hover:opacity-100 transition-opacity text-xs text-primary hover:underline font-medium flex items-center gap-1">
                        Éditer <ArrowRight className="w-3 h-3" />
                      </a>
                    </Link>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>
    </AdminLayout>
  );
}