/** بنرهای صفحه اصلی */
import { AdminHeader, Card, Pill, SavedNotice } from "@/components/admin/ui";
import { SubmitButton } from "@/components/admin/SubmitButton";
import { ImageField } from "@/components/admin/ImageField";
import { imageSrc } from "@/lib/media";
import { ProductArt } from "@/components/product/ProductArt";
import { db } from "@/lib/db";
import { deleteBannerAction, saveBannerAction } from "@/server/admin/content";
import type { Banner, ProductShape } from "@/types/catalog";
import { requireStaffPage } from "@/server/admin/guard";

export const metadata = { title: "بنرها" };
export const dynamic = "force-dynamic";

const SHAPES: ProductShape[] = ["dropper", "bottle", "pump", "tube", "jar", "lipstick", "wand", "compact", "palette", "perfume"];
const THEMES = { dark: "مشکی", mist: "خاکستری روشن", light: "خاکستری" };

type Row = Omit<Banner, "art" | "theme" | "image"> & { art: unknown; theme: string; sortOrder: number; isActive: boolean; imageUrl: string | null; imageAlt: string | null };

function BannerForm({ b }: { b?: Row }) {
  const art = (b?.art as Banner["art"] | undefined) ?? [];
  return (
    <form action={saveBannerAction} className="grid gap-2 sm:grid-cols-2">
      {b && <input type="hidden" name="id" value={b.id} />}
      <input name="eyebrow" defaultValue={b?.eyebrow} placeholder="روتیتر (مثلاً: تازه رسیده)" className="field h-10" required maxLength={40} />
      <input name="title" defaultValue={b?.title} placeholder="تیتر" className="field h-10" required maxLength={80} />
      <input name="subtitle" defaultValue={b?.subtitle} placeholder="متن" className="field h-10 sm:col-span-2" required maxLength={200} />
      <input name="cta" defaultValue={b?.cta} placeholder="متن دکمه" className="field h-10" required maxLength={30} />
      <input name="href" defaultValue={b?.href} placeholder="لینک داخلی، مثلاً /c/آرایش" className="field h-10" required maxLength={200} />
      <select name="theme" defaultValue={b?.theme ?? "dark"} className="field h-10">
        {Object.entries(THEMES).map(([v, l]) => <option key={v} value={v}>زمینه {l}</option>)}
      </select>
      <input name="sortOrder" defaultValue={b?.sortOrder ?? 0} inputMode="numeric" className="field h-10" aria-label="ترتیب نمایش" />
      <div className="sm:col-span-2">
        <ImageField name="imageUrl" altName="imageAlt" target="banners" initialUrl={b?.imageUrl} initialAlt={b?.imageAlt} label="عکس بنر (اختیاری)" />
      </div>
      <fieldset className="grid grid-cols-3 gap-2 sm:col-span-2">
        <legend className="label">ترکیب تصویری (وقتی بنر عکس ندارد؛ تا ۳ ظرف)</legend>
        {[0, 1, 2].map((i) => (
          <span key={i} className="flex gap-1">
            <select name={`shape${i}`} defaultValue={art[i]?.shape ?? ""} className="field h-10 px-2 text-xs">
              <option value="">—</option>
              {SHAPES.map((s) => <option key={s} value={s}>{s}</option>)}
            </select>
            <input type="color" name={`tone${i}`} defaultValue={art[i]?.tone ?? "#e8e2d8"} className="h-10 w-10 shrink-0 rounded-lg border border-line" aria-label={`رنگ ظرف ${i + 1}`} />
          </span>
        ))}
      </fieldset>
      <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 AdminBanners({ searchParams }: { searchParams: Promise<{ saved?: string; error?: string }> }) {
  await requireStaffPage("/admin/banners", "banners");
  const { saved, error } = await searchParams;
  const banners = await db.banner.findMany({ orderBy: { sortOrder: "asc" } });
  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="space-y-4">
        {banners.map((b) => (
          <Card key={b.id}>
            <div className="mb-3 flex items-center gap-3">
              <div className={`flex h-16 w-28 shrink-0 items-end justify-center overflow-hidden rounded-xl ${b.theme === "dark" ? "bg-ink" : b.theme === "mist" ? "bg-mist" : "bg-fog"}`}>
                {b.imageUrl ? (
                  // eslint-disable-next-line @next/next/no-img-element
                  <img src={imageSrc(b.imageUrl, 400)} alt="" className="size-full rounded-xl bg-mist object-contain" />
                ) : (
                  ((b.art as Banner["art"]) ?? []).map((a, i) => <ProductArt key={i} shape={a.shape} tone={a.tone} className="h-14 w-auto" />)
                )}
              </div>
              <div className="min-w-0 flex-1">
                <p className="truncate text-sm font-bold">{b.title}</p>
                <p className="truncate text-xs text-muted">{b.href}</p>
              </div>
              {!b.isActive && <Pill tone="line">مخفی</Pill>}
            </div>
            <BannerForm b={b} />
            <form action={deleteBannerAction} className="mt-2">
              <input type="hidden" name="id" value={b.id} />
              <SubmitButton className="text-xs text-muted underline" pendingText="…" confirm="این بنر حذف شود؟">حذف بنر</SubmitButton>
            </form>
          </Card>
        ))}
        <Card title="بنر جدید"><BannerForm /></Card>
      </div>
    </>
  );
}