import { redirect } from "next/navigation";
import { AdminNav } from "@/components/AdminNav";
import { requireAdmin } from "@/lib/auth";
import { prisma } from "@/lib/db";
import { deletePricingItem, savePricingCategory, savePricingItem } from "../actions";

export const dynamic = "force-dynamic";

export default async function AdminPricingPage() {
  if (!(await requireAdmin())) redirect("/admin/login");
  const categories = await prisma.pricingCategory.findMany({
    include: { items: { orderBy: { sortOrder: "asc" } } },
    orderBy: { sortOrder: "asc" },
  });

  return (
    <div className="mx-auto max-w-5xl px-4 py-8">
      <AdminNav />
      <h1 className="font-display text-3xl">Cjenik</h1>

      {categories.map((cat) => (
        <section key={cat.id} className="mt-8 border border-white/10 p-4">
          <form action={savePricingCategory} className="space-y-2">
            <input type="hidden" name="id" value={cat.id} />
            <input name="name" defaultValue={cat.name} className="w-full border border-white/20 bg-black px-3 py-2" />
            <textarea name="note" defaultValue={cat.note || ""} rows={2} className="w-full border border-white/20 bg-black px-3 py-2" />
            <div className="flex gap-3">
              <input name="sortOrder" type="number" defaultValue={cat.sortOrder} className="w-24 border border-white/20 bg-black px-2 py-2" />
              <label className="flex items-center gap-2 text-sm">
                <input type="checkbox" name="published" defaultChecked={cat.published} /> Objavljeno
              </label>
              <button type="submit" className="bg-red-600 px-3 py-2 text-sm font-bold">
                Spremi kategoriju
              </button>
            </div>
          </form>

          <div className="mt-4 space-y-2">
            {cat.items.map((item) => (
              <form key={item.id} action={savePricingItem} className="grid gap-2 md:grid-cols-5">
                <input type="hidden" name="id" value={item.id} />
                <input type="hidden" name="categoryId" value={cat.id} />
                <input name="label" defaultValue={item.label} className="border border-white/20 bg-black px-2 py-2 md:col-span-2" />
                <input name="price" defaultValue={item.price} className="border border-white/20 bg-black px-2 py-2" />
                <input name="sortOrder" type="number" defaultValue={item.sortOrder} className="border border-white/20 bg-black px-2 py-2" />
                <div className="flex items-center gap-2">
                  <label className="flex items-center gap-1 text-xs">
                    <input type="checkbox" name="published" defaultChecked={item.published} /> OK
                  </label>
                  <button type="submit" className="bg-red-600 px-2 py-1 text-xs font-bold">
                    Spremi
                  </button>
                </div>
              </form>
            ))}
          </div>

          <form action={savePricingItem} className="mt-3 grid gap-2 border-t border-white/10 pt-3 md:grid-cols-4">
            <input type="hidden" name="categoryId" value={cat.id} />
            <input name="label" placeholder="Nova stavka" required className="border border-white/20 bg-black px-2 py-2" />
            <input name="price" placeholder="50 €" required className="border border-white/20 bg-black px-2 py-2" />
            <input name="sortOrder" type="number" defaultValue={0} className="border border-white/20 bg-black px-2 py-2" />
            <label className="flex items-center gap-2 text-sm">
              <input type="checkbox" name="published" defaultChecked /> Objavljeno
            </label>
            <button type="submit" className="bg-white/10 px-3 py-2 text-sm">
              Dodaj stavku
            </button>
          </form>

          <div className="mt-2">
            {cat.items.map((item) => (
              <form key={`del-${item.id}`} action={deletePricingItem} className="inline">
                <input type="hidden" name="id" value={item.id} />
                <button type="submit" className="mr-2 text-xs text-red-400 underline">
                  Obriši {item.label}
                </button>
              </form>
            ))}
          </div>
        </section>
      ))}

      <form action={savePricingCategory} className="mt-8 space-y-2 border border-dashed border-white/20 p-4">
        <h2 className="font-semibold">Nova kategorija</h2>
        <input name="name" required placeholder="Naziv" className="w-full border border-white/20 bg-black px-3 py-2" />
        <textarea name="note" rows={2} placeholder="Napomena" className="w-full border border-white/20 bg-black px-3 py-2" />
        <input name="sortOrder" type="number" defaultValue={99} className="w-24 border border-white/20 bg-black px-2 py-2" />
        <label className="ml-3 inline-flex items-center gap-2 text-sm">
          <input type="checkbox" name="published" defaultChecked /> Objavljeno
        </label>
        <div>
          <button type="submit" className="bg-red-600 px-4 py-2 text-sm font-bold uppercase">
            Dodaj kategoriju
          </button>
        </div>
      </form>
    </div>
  );
}