import { asc, sql, eq } from "drizzle-orm";
import { db } from "@/db";
import { categories, products } from "@/db/schema";
import { saveCategory, deleteCategory } from "@/app/admin/actions";
export default async function Cats() {
  const cats = await db.select({ c: categories, n: sql<number>`(select count(*)::int from ${products} where ${products.categoryId} = ${categories.id})` }).from(categories).orderBy(asc(categories.sortOrder));
  void eq;
  const Form = ({ c }: { c?: typeof cats[number]["c"] }) => (
    <form action={saveCategory} className="grid md:grid-cols-[80px_1fr_1fr_90px_auto] gap-3 items-end">
      <input type="hidden" name="id" value={c?.id ?? ""} />
      <div className="w-20 h-16 rounded-lg bg-mint overflow-hidden">{/* eslint-disable-next-line @next/next/no-img-element */}{c?.image && <img src={c.image} alt="" className="w-full h-full object-cover" />}</div>
      <div className="space-y-2"><input name="name" defaultValue={c?.name} placeholder="Category name" required className="input" /><input name="description" defaultValue={c?.description} placeholder="Description / SEO text" className="input" /></div>
      <div className="space-y-2"><input name="image" defaultValue={c?.image} placeholder="Image URL" className="input" /><input name="imageFile" type="file" accept="image/*" className="input !py-1.5" /></div>
      <div className="space-y-2"><input name="sortOrder" type="number" defaultValue={c?.sortOrder ?? cats.length} className="input" title="Order" /><label className="flex gap-1 text-xs"><input type="checkbox" name="active" defaultChecked={c?.active ?? true} /> Active</label></div>
      <button className="btn btn-green !py-2">{c ? "Save" : "Add"}</button>
    </form>
  );
  return (
    <div><h1 className="text-2xl font-extrabold mb-1">Categories & Subcategories</h1><p className="text-sm text-slate-500 mb-5">Upload clear, relevant HD images. Lower order numbers appear first. Name subcategories with a parent prefix (e.g. “Vitamins › Kids”).</p>
      <div className="card p-5 mb-5"><h3 className="font-bold mb-3">Add category</h3><Form /></div>
      <div className="space-y-3">{cats.map(({ c, n }) => <div key={c.id} className="card p-5"><div className="flex justify-between text-xs text-slate-500 mb-2"><span>/{c.slug} · {n} products</span><form action={deleteCategory}><input type="hidden" name="id" value={c.id} /><button className="text-red-600 font-semibold">Delete / archive</button></form></div><Form c={c} /></div>)}</div>
    </div>
  );
}