import { prisma } from "@/lib/prisma";
import { updateHomepageSection } from "@/lib/actions/marketing";
import MarketingTabs from "@/components/admin/MarketingTabs";
import SaveIconButton from "@/components/admin/SaveIconButton";

const LABELS: Record<string, string> = {
  categories: "Shop by category",
  collections: "Collections",
  featured: "Featured products",
  new_arrivals: "New arrivals",
  best_sellers: "Best sellers",
  flash_sale: "Flash sale banner",
};

export default async function AdminHomepageSectionsPage() {
  const sections = await prisma.homepageSection.findMany({ orderBy: { sortOrder: "asc" } });

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Homepage Sections</h1>
      <p className="mt-1 text-sm text-stone-500">
        Show/hide each homepage section and control its order (lower number = higher up the page) and how many items it shows.
      </p>

      <MarketingTabs active="/iv-manage-84x2/marketing/sections" />

      <div className="overflow-hidden rounded-lg border border-rose-100 bg-white">
        <table className="w-full text-sm">
          <thead className="bg-rose-50/60 text-left text-xs uppercase text-stone-500">
            <tr>
              <th className="p-3">Section</th>
              <th className="p-3">Settings</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-rose-100">
            {sections.map((s) => (
              <tr key={s.id}>
                <td className="whitespace-nowrap p-3 font-medium text-stone-800">{LABELS[s.key] ?? s.key}</td>
                <td className="p-3">
                  <form action={updateHomepageSection.bind(null, s.id)} className="flex flex-wrap items-center gap-3">
                    <label className="flex items-center gap-1.5 text-xs text-stone-600">
                      <input type="checkbox" name="active" defaultChecked={s.active} className="h-4 w-4 rounded border-stone-300" />
                      Visible
                    </label>
                    <label className="flex items-center gap-1.5 text-xs text-stone-600">
                      Order
                      <input type="number" name="sortOrder" min={0} defaultValue={s.sortOrder} className="w-16 rounded border border-stone-300 px-2 py-1 text-sm" />
                    </label>
                    <label className="flex items-center gap-1.5 text-xs text-stone-600">
                      Items
                      <input type="number" name="itemLimit" min={1} max={24} defaultValue={s.itemLimit} className="w-16 rounded border border-stone-300 px-2 py-1 text-sm" />
                    </label>
                    <SaveIconButton />
                  </form>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="mt-2 text-xs text-stone-400">
        &ldquo;Shop by category&rdquo; and &ldquo;Collections&rdquo; ignore the items count (they show all categories / non-empty collections).
      </p>
    </div>
  );
}