"use client";

import { FormEvent, useState } from "react";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";
import {
  CheckboxField,
  FormCard,
  SelectField,
  TextInput,
} from "@/components/admin/form-fields";
import { apiFetch } from "@/lib/admin-api";

export type BannerFormValues = {
  title: string;
  subtitle: string;
  image: string;
  mobileImage: string;
  linkUrl: string;
  linkText: string;
  type: string;
  sortOrder: string;
  isActive: boolean;
};

const empty: BannerFormValues = {
  title: "",
  subtitle: "",
  image: "",
  mobileImage: "",
  linkUrl: "",
  linkText: "",
  type: "SLIDER",
  sortOrder: "0",
  isActive: true,
};

const TYPES = ["SLIDER", "POPUP", "PROMO", "FEATURED"].map((v) => ({ value: v, label: v }));

export function BannerForm({
  initial,
  bannerId,
}: {
  initial?: Partial<BannerFormValues>;
  bannerId?: string;
}) {
  const router = useRouter();
  const [values, setValues] = useState<BannerFormValues>({ ...empty, ...initial });
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);

  function set<K extends keyof BannerFormValues>(key: K, value: BannerFormValues[K]) {
    setValues((v) => ({ ...v, [key]: value }));
  }

  async function onSubmit(e: FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError("");
    try {
      const payload = {
        title: values.title,
        subtitle: values.subtitle || null,
        image: values.image,
        mobileImage: values.mobileImage || null,
        linkUrl: values.linkUrl || null,
        linkText: values.linkText || null,
        type: values.type,
        sortOrder: Number(values.sortOrder || 0),
        isActive: values.isActive,
      };
      if (bannerId) {
        await apiFetch(`/api/banners/${bannerId}`, { method: "PUT", json: payload });
      } else {
        await apiFetch("/api/banners", { method: "POST", json: payload });
      }
      router.push("/admin/banners");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Save failed");
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={onSubmit} className="space-y-6">
      <FormCard>
        <div className="grid gap-4 md:grid-cols-2">
          <TextInput label="Title" name="title" required value={values.title} onChange={(e) => set("title", e.target.value)} />
          <TextInput label="Subtitle" name="subtitle" value={values.subtitle} onChange={(e) => set("subtitle", e.target.value)} />
          <TextInput className="md:col-span-2" label="Image URL" name="image" required value={values.image} onChange={(e) => set("image", e.target.value)} />
          <TextInput label="Mobile image URL" name="mobileImage" value={values.mobileImage} onChange={(e) => set("mobileImage", e.target.value)} />
          <SelectField label="Type" name="type" options={TYPES} value={values.type} onChange={(e) => set("type", e.target.value)} />
          <TextInput label="Link URL" name="linkUrl" value={values.linkUrl} onChange={(e) => set("linkUrl", e.target.value)} />
          <TextInput label="Link text" name="linkText" value={values.linkText} onChange={(e) => set("linkText", e.target.value)} />
          <TextInput label="Sort order" name="sortOrder" type="number" value={values.sortOrder} onChange={(e) => set("sortOrder", e.target.value)} />
          <CheckboxField label="Active" name="isActive" checked={values.isActive} onChange={(e) => set("isActive", e.target.checked)} />
        </div>
      </FormCard>
      {error ? <p className="text-sm text-danger">{error}</p> : null}
      <div className="flex gap-2">
        <Button type="submit" disabled={loading}>{loading ? "Saving…" : "Save"}</Button>
        <Button type="button" variant="secondary" href="/admin/banners">Cancel</Button>
      </div>
    </form>
  );
}