karbe/src/app/admin/media/page.tsx

import Link from "next/link";
import { MediaType } from "@/generated/prisma/enums";
import { getMediaStats, listMediaAdmin } from "@/lib/admin/media";
import { StatusBadge } from "@/components/admin/StatusBadge";

export const dynamic = "force-dynamic";

type PageProps = {
  searchParams: Promise<{ q?: string; type?: string; carbetId?: string }>;
};

const TYPE_VALUES = new Set<string>([MediaType.PHOTO, MediaType.VIDEO]);

export default async function MediaAdminPage({ searchParams }: PageProps) {
  const sp = await searchParams;
  const filters = {
    q: sp.q?.trim() || undefined,
    type: TYPE_VALUES.has(sp.type ?? "") ? (sp.type as MediaType) : undefined,
    carbetId: sp.carbetId || undefined,
  };
  const [items, stats] = await Promise.all([listMediaAdmin(filters), getMediaStats()]);
  const dateFmt = new Intl.DateTimeFormat("fr-FR", { day: "2-digit", month: "short", year: "2-digit" });

  return (
    <div className="mx-auto max-w-7xl">
      <header className="mb-5 mt-2">
        <h1 className="text-2xl font-semibold text-zinc-900">Médias</h1>
        <p className="mt-1 text-sm text-zinc-500">
          {items.length} affiché{items.length > 1 ? "s" : ""}
          {items.length === 200 ? " (limite atteinte — affinez les filtres)" : ""}
        </p>
      </header>

      <section className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-5">
        <Stat label="Total fichiers" value={stats.total} />
        <Stat label="Photos" value={stats.photo} />
        <Stat label="Vidéos" value={stats.video} />
        <Stat label="Carbets avec média" value={stats.carbetsWithMedia} />
        <Stat label="Carbets sans média" value={stats.carbetsWithoutMedia} tone="warn" />
      </section>

      <form className="mb-4 flex flex-wrap items-center gap-2 rounded-lg border border-zinc-200 bg-white p-3" method="get">
        <input
          type="text"
          name="q"
          defaultValue={filters.q ?? ""}
          placeholder="Recherche s3Key, carbet, slug…"
          className="flex-1 min-w-[220px] rounded-md border border-zinc-300 px-3 py-1.5 text-sm focus:border-zinc-900 focus:outline-none"
        />
        <select
          name="type"
          defaultValue={filters.type ?? ""}
          className="rounded-md border border-zinc-300 bg-white px-2 py-1.5 text-sm focus:border-zinc-900 focus:outline-none"
        >
          <option value="">Photos + vidéos</option>
          <option value={MediaType.PHOTO}>Photos</option>
          <option value={MediaType.VIDEO}>Vidéos</option>
        </select>
        <button type="submit" className="rounded-md bg-zinc-900 px-3 py-1.5 text-sm font-medium text-white hover:bg-zinc-800">
          Filtrer
        </button>
        {(filters.q || filters.type || filters.carbetId) ? (
          <Link href="/admin/media" className="text-sm text-zinc-500 hover:text-zinc-900">
            Réinit.
          </Link>
        ) : null}
      </form>

      {items.length === 0 ? (
        <div className="rounded-lg border border-zinc-200 bg-white px-4 py-8 text-center text-sm text-zinc-500">
          Aucun média ne correspond aux filtres.
        </div>
      ) : (
        <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
          {items.map((m) => (
            <Link
              key={m.id}
              href={`/admin/carbets/${m.carbet.id}`}
              className="group flex flex-col overflow-hidden rounded-lg border border-zinc-200 bg-white shadow-sm transition hover:shadow-md"
            >
              <div className="relative aspect-video bg-zinc-100">
                {m.type === MediaType.PHOTO ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img
                    src={m.s3Url}
                    alt={m.s3Key}
                    loading="lazy"
                    className="h-full w-full object-cover transition group-hover:scale-105"
                  />
                ) : (
                  <div className="flex h-full w-full items-center justify-center text-3xl text-zinc-400">▶</div>
                )}
                <span className="absolute right-1 top-1 rounded bg-black/60 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wider text-white">
                  {m.type}
                </span>
              </div>
              <div className="flex flex-col gap-1 p-2 text-xs">
                <div className="flex items-center justify-between gap-2">
                  <span className="truncate font-semibold text-zinc-900">{m.carbet.title}</span>
                  <StatusBadge status={m.carbet.status} />
                </div>
                <div className="flex items-center justify-between gap-2 text-[10px] text-zinc-500">
                  <code className="truncate">{m.s3Key}</code>
                  <span className="whitespace-nowrap">{dateFmt.format(m.createdAt)}</span>
                </div>
              </div>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}

function Stat({
  label,
  value,
  tone = "neutral",
}: {
  label: string;
  value: number;
  tone?: "neutral" | "warn";
}) {
  return (
    <div
      className={
        "rounded-lg border bg-white p-3 shadow-sm " +
        (tone === "warn" && value > 0 ? "border-amber-300" : "border-zinc-200")
      }
    >
      <div className="text-[11px] uppercase tracking-wider text-zinc-500">{label}</div>
      <div className={"mt-1 text-2xl font-semibold " + (tone === "warn" && value > 0 ? "text-amber-700" : "text-zinc-900")}>
        {value}
      </div>
    </div>
  );
}