import { deleteHomepageBannerAction, saveHomepageBannerAction } from "@/app/admin/actions";
import { AdminImageUpload } from "@/components/admin/AdminImageUpload";
import { Button } from "@/components/ui/button";
import { getAdminHomepageBannerData } from "@/lib/admin-data";

const HOMEPAGE_BANNER_SIZE = "2400 x 520 px";

export default async function AdminSettingsPage() {
  const homepageBanner = await getAdminHomepageBannerData();

  return (
    <div className="space-y-5">
      <div className="soft-card p-6">
        <h1 className="text-2xl font-bold text-navy-deep">Settings</h1>
        <p className="mt-2 text-sm text-navy-muted">
          Configure homepage assets and global storefront content.
        </p>
      </div>

      <section className="soft-card p-6">
        <h2 className="text-xl font-bold text-navy-deep">Homepage Promo Banner</h2>
        <p className="mt-2 text-sm text-navy-muted">
          Upload one banner image to display in the homepage offers section.
        </p>
        <p className="mt-1 text-sm font-semibold text-primary-deep">
          Recommended size: {HOMEPAGE_BANNER_SIZE} (wide desktop banner, ratio ~4.6:1)
        </p>

        <form action={saveHomepageBannerAction} className="mt-4 grid gap-4">
          <AdminImageUpload
            label="Banner Image"
            name="imageUrl"
            defaultValue={String(homepageBanner?.imageUrl ?? "")}
            previewAlt="Homepage banner preview"
          />

          <div className="grid gap-3 md:grid-cols-2">
            <input
              name="altText"
              required
              defaultValue={String(homepageBanner?.altText ?? "Bashista Auto promotional banner")}
              placeholder="Banner alt text"
              className="rounded-lg border border-border px-3 py-2"
            />
            <input
              name="ctaUrl"
              defaultValue={String(homepageBanner?.ctaUrl ?? "/offers")}
              placeholder="/offers"
              className="rounded-lg border border-border px-3 py-2"
            />
          </div>

          <label className="inline-flex items-center gap-2 text-sm font-semibold text-navy-deep">
            <input
              type="checkbox"
              name="isActive"
              defaultChecked={homepageBanner ? Boolean((homepageBanner as any).isActive) : true}
            />
            Show this banner on homepage
          </label>

          <div className="flex flex-wrap items-center gap-2">
            <Button type="submit" variant="green">
              Save Banner
            </Button>
          </div>
        </form>

        <form action={deleteHomepageBannerAction} className="mt-3">
          <Button className="bg-red-600 text-white hover:bg-red-700" type="submit">
            Delete Banner
          </Button>
        </form>
      </section>
    </div>
  );
}