/** دسته‌بندی‌ها و برندها */
import { AdminHeader, Card, Pill, SavedNotice } from "@/components/admin/ui";
import { SubmitButton } from "@/components/admin/SubmitButton";
import { db } from "@/lib/db";
import { faNumber } from "@/lib/format";
import { saveBrandAction, saveCategoryAction } from "@/server/admin/content";
import { requireStaffPage } from "@/server/admin/guard";

export const metadata = { title: "دسته‌ها و برندها" };
export const dynamic = "force-dynamic";

type Cat = { id: string; name: string; slug: string; description: string | null; sortOrder: number; isActive: boolean; parentId: string | null };

function CategoryForm({ c, roots }: { c?: Cat; roots: Cat[] }) {
  return (
    <form action={saveCategoryAction} className="grid gap-2 sm:grid-cols-2">
      {c && <input type="hidden" name="id" value={c.id} />}
      <input name="name" defaultValue={c?.name} placeholder="نام دسته" className="field h-10" required maxLength={60} />
      <input name="slug" defaultValue={c?.slug} placeholder="اسلاگ (خالی = از روی نام)" className="field h-10" maxLength={80} />
      <select name="parentId" defaultValue={c?.parentId ?? ""} className="field h-10">
        <option value="">— دسته اصلی —</option>
        {roots.filter((r) => r.id !== c?.id).map((r) => <option key={r.id} value={r.id}>زیرِ {r.name}</option>)}
      </select>
      <input name="sortOrder" defaultValue={c?.sortOrder ?? 0} inputMode="numeric" className="field h-10" aria-label="ترتیب" />
      <input name="description" defaultValue={c?.description ?? ""} placeholder="توضیح (برای SEO)" className="field h-10 sm:col-span-2" maxLength={300} />
      <label className="flex items-center gap-2 text-sm"><input type="checkbox" name="isActive" defaultChecked={c?.isActive ?? true} className="accent-ink" /> فعال</label>
      <SubmitButton className="btn-primary h-10">{c ? "ذخیره" : "افزودن دسته"}</SubmitButton>
    </form>
  );
}

type Brand = { id: string; name: string; nameEn: string; slug: string; country: string; description: string; isActive: boolean };

function BrandForm({ b }: { b?: Brand }) {
  return (
    <form action={saveBrandAction} className="grid gap-2 sm:grid-cols-2">
      {b && <input type="hidden" name="id" value={b.id} />}
      <input name="name" defaultValue={b?.name} placeholder="نام فارسی" className="field h-10" required maxLength={60} />
      <input name="nameEn" defaultValue={b?.nameEn} placeholder="نام لاتین" className="field h-10" dir="ltr" required maxLength={60} />
      <input name="slug" defaultValue={b?.slug} placeholder="اسلاگ (خالی = از نام لاتین)" className="field h-10" dir="ltr" maxLength={60} />
      <input name="country" defaultValue={b?.country} placeholder="کشور" className="field h-10" required maxLength={40} />
      <input name="description" defaultValue={b?.description} placeholder="معرفی کوتاه" className="field h-10 sm:col-span-2" required maxLength={400} />
      <label className="flex items-center gap-2 text-sm"><input type="checkbox" name="isActive" defaultChecked={b?.isActive ?? true} className="accent-ink" /> فعال</label>
      <SubmitButton className="btn-primary h-10">{b ? "ذخیره" : "افزودن برند"}</SubmitButton>
    </form>
  );
}

export default async function AdminCatalog({ searchParams }: { searchParams: Promise<{ saved?: string; error?: string }> }) {
  await requireStaffPage("/admin/catalog", "catalog");
  const { saved, error } = await searchParams;
  const [cats, brands] = await Promise.all([
    db.category.findMany({ orderBy: { sortOrder: "asc" }, include: { _count: { select: { products: true } } } }),
    db.brand.findMany({ orderBy: { nameEn: "asc" }, include: { _count: { select: { products: true } } } }),
  ]);
  const roots = cats.filter((c) => !c.parentId);
  const ordered = roots.flatMap((r) => [r, ...cats.filter((c) => c.parentId === r.id)]);

  return (
    <>
      <AdminHeader title="دسته‌ها و برندها" description="برای ویرایش روی هر ردیف بزنید" />
      <SavedNotice show={saved === "1"} />
      {error && <p className="mb-4 rounded-xl bg-paper px-4 py-3 text-sm ring-1 ring-ink" role="alert">⚠ {error}</p>}
      <div className="grid gap-4 xl:grid-cols-2">
        <Card title="دسته‌بندی‌ها">
          <ul className="divide-y divide-line">
            {ordered.map((c) => (
              <li key={c.id}>
                <details className="group py-2 [&_summary::-webkit-details-marker]:hidden">
                  <summary className={`flex cursor-pointer list-none items-center justify-between gap-2 text-sm ${c.parentId ? "ps-5 text-ink-soft" : "font-bold"}`}>
                    <span>{c.parentId && "↳ "}{c.name} <span className="text-xs font-normal text-muted">({faNumber(c._count.products)} محصول)</span></span>
                    {!c.isActive && <Pill tone="line">غیرفعال</Pill>}
                  </summary>
                  <div className="pt-3"><CategoryForm c={c} roots={roots} /></div>
                </details>
              </li>
            ))}
          </ul>
          <div className="mt-4 border-t border-line pt-4"><p className="label">دسته جدید</p><CategoryForm roots={roots} /></div>
        </Card>
        <Card title="برندها">
          <ul className="divide-y divide-line">
            {brands.map((b) => (
              <li key={b.id}>
                <details className="py-2 [&_summary::-webkit-details-marker]:hidden">
                  <summary className="flex cursor-pointer list-none items-center justify-between gap-2 text-sm">
                    <span><b className="tracking-widest" dir="ltr">{b.nameEn}</b> · {b.name} <span className="text-xs text-muted">({faNumber(b._count.products)})</span></span>
                    {!b.isActive && <Pill tone="line">غیرفعال</Pill>}
                  </summary>
                  <div className="pt-3"><BrandForm b={b} /></div>
                </details>
              </li>
            ))}
          </ul>
          <div className="mt-4 border-t border-line pt-4"><p className="label">برند جدید</p><BrandForm /></div>
        </Card>
      </div>
    </>
  );
}