import Image from "next/image";
import { prisma } from "@/lib/prisma";
import { createBanner, toggleBanner, deleteBanner, updateBannerSortOrder } from "@/lib/actions/marketing";
import MarketingTabs from "@/components/admin/MarketingTabs";
import type { Banner } from "@prisma/client";

const GROUPS: { device: string; label: string; hint: string }[] = [
  { device: "desktop", label: "Desktop slider", hint: "Shown on the homepage hero slider on laptop/desktop screens (wide image)." },
  { device: "mobile", label: "Mobile slider", hint: "Shown on the homepage hero slider on phones (shorter, more compact image)." },
  { device: "both", label: "Both (desktop & mobile)", hint: "Shown in both sliders — use only if one image works well at both shapes." },
];

function BannerCard({ banner }: { banner: Banner }) {
  return (
    <div className="overflow-hidden rounded-lg border border-rose-100 bg-white">
      <div className="relative aspect-[2/1] w-full bg-rose-50">
        <Image src={banner.image} alt={banner.title ?? "Banner"} fill className="object-cover" />
      </div>
      <div className="p-3">
        <div className="flex items-center justify-between">
          <p className="text-sm font-medium text-stone-800">{banner.title ?? "Untitled"}</p>
          <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${banner.active ? "bg-emerald-100 text-emerald-800" : "bg-stone-200 text-stone-600"}`}>
            {banner.active ? "Active" : "Inactive"}
          </span>
        </div>
        {banner.link && <p className="text-xs text-stone-500">{banner.link}</p>}
        <div className="mt-2 flex flex-wrap items-center gap-3">
          <form action={updateBannerSortOrder.bind(null, banner.id)} className="flex items-center gap-1">
            <label className="text-xs text-stone-500">Order</label>
            <input
              name="sortOrder"
              type="number"
              min={0}
              defaultValue={banner.sortOrder}
              className="w-14 rounded-md border border-stone-300 px-1.5 py-1 text-xs"
            />
            <button type="submit" className="rounded-md border border-stone-300 px-2 py-1 text-xs font-medium text-stone-600 hover:bg-stone-50">
              Save
            </button>
          </form>
          <form action={toggleBanner.bind(null, banner.id)}>
            <button type="submit" className="text-xs text-stone-500 hover:text-rose-700">
              {banner.active ? "Deactivate" : "Activate"}
            </button>
          </form>
          <form action={deleteBanner.bind(null, banner.id)}>
            <button type="submit" className="text-xs text-stone-400 hover:text-red-700">
              Delete
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

export default async function AdminBannersPage({
  searchParams,
}: {
  searchParams: Promise<{ error?: string }>;
}) {
  const { error } = await searchParams;
  const banners = await prisma.banner.findMany({ orderBy: { sortOrder: "asc" } });

  return (
    <div>
      <h1 className="font-[family-name:var(--font-heading)] text-2xl font-bold text-stone-800">Banners</h1>
      <p className="mt-1 max-w-2xl text-sm text-stone-500">
        These images power the homepage hero slider. Add a new slide, pick where it should show (desktop, mobile, or
        both), and set its order — no code changes needed.
      </p>

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

      {error && <p className="mb-4 text-sm text-red-700">{decodeURIComponent(error)}</p>}

      <form action={createBanner} className="grid max-w-2xl grid-cols-1 gap-3 rounded-lg border border-rose-100 bg-white p-4 sm:grid-cols-3">
        <input name="image" type="file" accept="image/*" required className="rounded-md border border-stone-300 px-2 py-1.5 text-sm sm:col-span-3" />
        <div className="sm:col-span-3">
          <label className="text-xs text-stone-500">Show this slide on</label>
          <select name="device" defaultValue="both" className="mt-1 block w-full rounded-md border border-stone-300 px-2 py-2 text-sm">
            {GROUPS.map((g) => (
              <option key={g.device} value={g.device}>
                {g.label}
              </option>
            ))}
          </select>
        </div>
        <input name="title" placeholder="Title (optional)" className="rounded-md border border-stone-300 px-2 py-2 text-sm" />
        <input name="link" placeholder="Link URL (optional)" className="rounded-md border border-stone-300 px-2 py-2 text-sm sm:col-span-2" />
        <button type="submit" className="col-span-1 rounded-md bg-rose-700 px-4 py-2 text-sm font-semibold text-white hover:bg-rose-800 sm:col-span-3">
          Add banner
        </button>
      </form>

      {banners.length === 0 ? (
        <p className="mt-8 rounded-lg border border-rose-100 bg-white p-4 text-sm text-stone-500">No banners yet.</p>
      ) : (
        <div className="mt-8 space-y-8">
          {GROUPS.map((g) => {
            const group = banners.filter((b) => b.device === g.device);
            if (group.length === 0) return null;
            return (
              <div key={g.device}>
                <h2 className="text-sm font-semibold text-stone-800">{g.label}</h2>
                <p className="text-xs text-stone-500">{g.hint}</p>
                <div className="mt-3 grid grid-cols-1 gap-4 sm:grid-cols-2">
                  {group.map((b) => (
                    <BannerCard key={b.id} banner={b} />
                  ))}
                </div>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
}