import { prisma } from "@/lib/db";
import { parseSpecFields } from "@/lib/serialize";
import { updateCategory } from "@/app/admin/actions";

export const dynamic = "force-dynamic";

export default async function AdminCategoriesPage() {
  const categories = await prisma.category.findMany({
    orderBy: { sortOrder: "asc" },
    include: { _count: { select: { products: true } } },
  });

  return (
    <div className="space-y-4">
      <div>
        <h2 className="text-lg font-bold text-slate-900">Categories</h2>
        <p className="text-sm text-slate-500">
          Edit category names and the specification fields shown on product forms
          and pages. One field per line as <code>key|Label</code>.
        </p>
      </div>

      <div className="grid gap-4 md:grid-cols-2">
        {categories.map((c) => {
          const fields = parseSpecFields(c.specFields);
          const text = fields.map((f) => `${f.key}|${f.label}`).join("\n");
          return (
            <form
              key={c.id}
              action={updateCategory}
              className="rounded-xl border border-slate-200 bg-white p-5"
            >
              <input type="hidden" name="id" value={c.id} />
              <div className="flex items-center justify-between">
                <h3 className="font-bold text-slate-800">
                  {c.icon} {c.name}
                </h3>
                <span className="text-xs text-slate-400">
                  {c._count.products} products
                </span>
              </div>

              <div className="mt-3 grid grid-cols-[1fr_80px] gap-2">
                <label className="block">
                  <span className="text-xs font-medium text-slate-500">Name</span>
                  <input
                    name="name"
                    defaultValue={c.name}
                    className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm"
                  />
                </label>
                <label className="block">
                  <span className="text-xs font-medium text-slate-500">Icon</span>
                  <input
                    name="icon"
                    defaultValue={c.icon ?? ""}
                    className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-center text-sm"
                  />
                </label>
              </div>

              <label className="mt-3 block">
                <span className="text-xs font-medium text-slate-500">
                  Spec fields (key|Label per line)
                </span>
                <textarea
                  name="specFields"
                  rows={6}
                  defaultValue={text}
                  className="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 font-mono text-xs"
                />
              </label>

              <button className="mt-3 rounded-lg bg-brand-600 px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">
                Save
              </button>
            </form>
          );
        })}
      </div>
    </div>
  );
}