import { prisma } from "@/lib/prisma";
import { activatePharmacy } from "@/lib/pharmacy-activation";
import { revalidatePath } from "next/cache";
import type { PharmacyStatus } from "@prisma/client";
import Link from "next/link";

const STATUS_LABEL: Record<PharmacyStatus, string> = {
  PENDING: "En attente",
  ACTIVE: "Active",
  SUSPENDED: "Suspendue",
  CANCELED: "Résiliée",
};

const STATUS_CLASS: Record<PharmacyStatus, string> = {
  PENDING: "bg-slate-100 text-slate-600",
  ACTIVE: "bg-emerald-50 text-emerald-700",
  SUSPENDED: "bg-amber-50 text-amber-700",
  CANCELED: "bg-red-50 text-red-700",
};

async function setStatus(pharmacyId: string, status: PharmacyStatus) {
  "use server";
  if (status === "ACTIVE") {
    await activatePharmacy(pharmacyId);
  } else {
    await prisma.pharmacy.update({ where: { id: pharmacyId }, data: { status } });
  }
  revalidatePath("/admin");
}

export default async function AdminPage() {
  const [pharmacies, totalBilans] = await Promise.all([
    prisma.pharmacy.findMany({
      orderBy: { createdAt: "desc" },
      include: { _count: { select: { bilans: true } } },
    }),
    prisma.bilan.count(),
  ]);

  const activeCount = pharmacies.filter((p) => p.status === "ACTIVE").length;

  return (
    <div className="space-y-8">
      <section className="grid gap-4 sm:grid-cols-3">
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <div className="text-xs text-slate-400 mb-1">Pharmacies</div>
          <div className="text-2xl font-extrabold text-[#07008b]">{pharmacies.length}</div>
        </div>
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <div className="text-xs text-slate-400 mb-1">Pharmacies actives</div>
          <div className="text-2xl font-extrabold text-[#07008b]">{activeCount}</div>
        </div>
        <div className="bg-white border border-slate-200 rounded-xl p-4">
          <div className="text-xs text-slate-400 mb-1">Bilans reçus (total)</div>
          <div className="text-2xl font-extrabold text-[#07008b]">{totalBilans}</div>
        </div>
      </section>

      <section className="bg-white border border-slate-200 rounded-xl p-5">
        <h2 className="font-bold text-[#07008b] mb-4">Pharmacies</h2>
        <div className="divide-y divide-slate-100">
          {pharmacies.map((pharmacy) => (
            <div key={pharmacy.id} className="py-3 flex items-center justify-between gap-4 text-sm">
              <div>
                <Link href={`/admin/pharmacies/${pharmacy.id}`} className="font-semibold hover:underline">
                  {pharmacy.name}
                </Link>
                <div className="text-xs text-slate-400">
                  {pharmacy.contactEmail} · {pharmacy._count.bilans} bilan(s)
                  {pharmacy.status === "ACTIVE" && (
                    <>
                      {" "}
                      ·{" "}
                      <a href={`/api/pharmacies/${pharmacy.id}/qr`} target="_blank" className="underline">
                        QR code
                      </a>
                    </>
                  )}
                </div>
              </div>
              <div className="flex items-center gap-2">
                <span className={`text-xs font-bold rounded-full px-2.5 py-1 ${STATUS_CLASS[pharmacy.status]}`}>
                  {STATUS_LABEL[pharmacy.status]}
                </span>
                {pharmacy.status !== "ACTIVE" && (
                  <form action={setStatus.bind(null, pharmacy.id, "ACTIVE")}>
                    <button className="text-xs rounded-lg bg-[#10a37f] text-white font-semibold px-3 py-1.5">
                      Activer
                    </button>
                  </form>
                )}
                {pharmacy.status === "ACTIVE" && (
                  <form action={setStatus.bind(null, pharmacy.id, "SUSPENDED")}>
                    <button className="text-xs rounded-lg bg-amber-100 text-amber-800 font-semibold px-3 py-1.5">
                      Suspendre
                    </button>
                  </form>
                )}
              </div>
            </div>
          ))}
          {pharmacies.length === 0 && <p className="text-sm text-slate-400">Aucune pharmacie inscrite.</p>}
        </div>
      </section>
    </div>
  );
}