"use client";

import Link from "next/link";

export default function AdminOverview({ stats }: { stats: any }) {
  const cards = [
    {
      label: "Adhérents",
      value: stats.totalMembers,
      icon: "👥",
      href: "/admin/users",
      sub: `${stats.muayThaiMembers} Muay Thai · ${stats.yogaMembers} Yoga`,
    },
    {
      label: "Certificats en attente",
      value: stats.pendingCertificates,
      icon: "📄",
      href: "/admin/certificates",
      sub: stats.pendingCertificates > 0 ? "à valider" : "tout est à jour",
      alert: stats.pendingCertificates > 0,
    },
    {
      label: "Photos & vidéos",
      value: stats.totalMedia,
      icon: "🎬",
      href: "/admin/media",
      sub: "médias publiés",
    },
    {
      label: "Messages publiés",
      value: stats.messages,
      icon: "💬",
      href: "/admin/messages",
      sub: "messages envoyés",
    },
  ];

  return (
    <div className="space-y-6">
      <div className="grid grid-cols-2 gap-3">
        {cards.map((c) => (
          <Link
            key={c.label}
            href={c.href}
            className={`card transition-colors hover:bg-white/10 ${c.alert ? "border-amber-500/50 bg-amber-500/5" : ""}`}
          >
            <div className="flex items-center justify-between">
              <span className="text-2xl">{c.icon}</span>
              {c.alert && (
                <span className="h-3 w-3 rounded-full bg-amber-500" />
              )}
            </div>
            <p className="mt-2 text-3xl font-extrabold">{c.value}</p>
            <p className="text-sm font-semibold text-white/80">{c.label}</p>
            <p className="mt-1 text-xs text-white/50">{c.sub}</p>
          </Link>
        ))}
      </div>

      <div className="card">
        <h2 className="mb-2 font-bold">Accès rapides</h2>
        <div className="grid grid-cols-2 gap-2 text-sm">
          <Link href="/admin/users" className="rounded-xl bg-white/5 px-3 py-2 text-center hover:bg-white/10">
            👥 Gérer les membres
          </Link>
          <Link href="/admin/messages" className="rounded-xl bg-white/5 px-3 py-2 text-center hover:bg-white/10">
            💬 Publier un message
          </Link>
          <Link href="/admin/media" className="rounded-xl bg-white/5 px-3 py-2 text-center hover:bg-white/10">
            🎬 Ajouter une photo/vidéo
          </Link>
          <Link href="/admin/yoga" className="rounded-xl bg-white/5 px-3 py-2 text-center hover:bg-white/10">
            🧘 Gérer les séances yoga
          </Link>
        </div>
      </div>

      <Link href="/" className="btn-secondary w-full">
        ← Voir le site public
      </Link>
    </div>
  );
}