import RookLogo from "@/components/RookLogo";
import { prisma } from "@/lib/prisma";
import Link from "next/link";
import { revalidatePath } from "next/cache";

export const dynamic = "force-dynamic";

async function restorePreview(formData: FormData) {
  "use server";

  const previewId = String(formData.get("previewId") ?? "");

  if (!previewId) return;

  await prisma.preview.update({
    where: { id: previewId },
    data: {
      archived: false,
    },
  });

  revalidatePath("/admin/previews");
  revalidatePath("/admin/previews/bin");
}

export default async function PreviewBinPage() {
  const previews = await prisma.preview.findMany({
    where: {
      archived: true,
    },
    include: {
      campaign: true,
    },
    orderBy: {
      updatedAt: "desc",
    },
  });

  return (
    <main className="min-h-screen bg-[#EEF4F6] text-[#071722]">
      <header className="bg-[#071722] text-white">
        <div className="mx-auto flex max-w-[1200px] items-center justify-between px-6 py-5">
          <RookLogo priority />

          <Link
            className="rounded-full border border-white/15 bg-white/10 px-5 py-2.5 text-sm font-semibold transition hover:bg-white/20"
            href="/admin/previews"
          >
            Back to Dashboard
          </Link>
        </div>
      </header>

      <section className="mx-auto max-w-[1200px] px-6 py-12">
        <div>
          <p className="text-[11px] font-bold tracking-[0.16em] text-[#309FC3] uppercase">
            Archived previews
          </p>

          <h1 className="mt-2 text-4xl font-semibold tracking-[-0.04em]">
            Bin
          </h1>

          <p className="mt-3 text-sm text-slate-500">
            {previews.length} archived preview
            {previews.length === 1 ? "" : "s"}.
          </p>
        </div>

        {previews.length === 0 ? (
          <div className="mt-10 rounded-3xl border border-slate-200 bg-white p-12 text-center">
            <h2 className="text-xl font-semibold">Bin is empty</h2>

            <p className="mt-2 text-sm text-slate-500">
              Archived previews will appear here.
            </p>
          </div>
        ) : (
          <div className="mt-10 space-y-4">
            {previews.map((preview: any) => (
              <article
                className="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm"
                key={preview.id}>
                <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <p className="text-[10px] font-bold tracking-[0.14em] text-slate-400 uppercase">
                      Archived preview
                    </p>

                    <h2 className="mt-2 text-xl font-semibold">
                      {preview.creativeName}
                    </h2>

                    <div className="mt-4 flex flex-wrap gap-x-8 gap-y-3 text-sm">
                      <div>
                        <p className="text-xs text-slate-400">Client</p>
                        <p className="font-semibold">
                          {preview.campaign.clientName}
                        </p>
                      </div>

                      <div>
                        <p className="text-xs text-slate-400">Campaign</p>
                        <p className="font-semibold">
                          {preview.campaign.name}
                        </p>
                      </div>

                      <div>
                        <p className="text-xs text-slate-400">Vendor</p>
                        <p className="font-semibold">
                          {preview.vendor.toUpperCase()}
                        </p>
                      </div>
                    </div>
                  </div>

                  <form action={restorePreview}>
                    <input
                      name="previewId"
                      type="hidden"
                      value={preview.id}
                    />

                    <button
                      className="min-h-12 rounded-full bg-[#309FC3] px-6 text-sm font-semibold text-white transition hover:bg-[#287F9C]"
                      type="submit"
                    >
                      Restore Preview
                    </button>
                  </form>
                </div>
              </article>
            ))}
          </div>
        )}
      </section>
    </main>
  );
}