"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { buttonClass } from "@/components/ui";
import ImageUploader from "@/components/image-uploader";

export interface ShopFormValues {
  slug: string;
  name: string;
  description: string;
  bannerUrl: string;
  pickupInstructions: string;
  pickupEnabled: boolean;
  deliveryEnabled: boolean;
  deliveryFeeKes: string;
  open: boolean;
}

export default function ShopForm({ initial, isNew }: { initial: ShopFormValues; isNew: boolean }) {
  const router = useRouter();
  const [form, setForm] = useState(initial);
  const [error, setError] = useState<string | null>(null);
  const [saved, setSaved] = useState(false);
  const [loading, setLoading] = useState(false);
  const [slugTouched, setSlugTouched] = useState(!isNew);

  const set = <K extends keyof ShopFormValues>(k: K, v: ShopFormValues[K]) => {
    setForm((f) => ({ ...f, [k]: v }));
    setSaved(false);
  };

  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setLoading(true);
    setError(null);
    const res = await fetch("/api/dashboard/merch/shop", {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        slug: form.slug,
        name: form.name,
        description: form.description || null,
        bannerUrl: form.bannerUrl || null,
        pickupInstructions: form.pickupInstructions || null,
        pickupEnabled: form.pickupEnabled,
        deliveryEnabled: form.deliveryEnabled,
        deliveryFeeCents: Math.round((Number(form.deliveryFeeKes) || 0) * 100),
        open: form.open,
      }),
    });
    const data = await res.json().catch(() => ({}));
    setLoading(false);
    if (!res.ok) {
      setError(data.error ?? "Could not save shop");
      return;
    }
    setSaved(true);
    router.refresh();
  }

  return (
    <form onSubmit={submit} className="space-y-4">
      <Field label="Shop name">
        <input
          required
          value={form.name}
          onChange={(e) => {
            set("name", e.target.value);
            if (!slugTouched) set("slug", e.target.value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60));
          }}
          placeholder="e.g. Vulai Festival Store"
          className="input"
        />
      </Field>

      <Field label="Shop link" hint="vibepasstickets.com/shop/…">
        <input
          required
          value={form.slug}
          onChange={(e) => {
            setSlugTouched(true);
            set("slug", e.target.value);
          }}
          placeholder="vulai-festival"
          className="input font-mono"
        />
      </Field>

      <Field label="About the shop" hint="Optional">
        <textarea
          rows={3}
          value={form.description}
          onChange={(e) => set("description", e.target.value)}
          className="input"
        />
      </Field>

      <ImageUploader label="Banner image" folder="merch" value={form.bannerUrl} onChange={(u) => set("bannerUrl", u)} />

      <fieldset className="space-y-3 rounded-lg border border-be-border p-4">
        <legend className="px-1 text-sm font-medium text-be-text">How buyers get their order</legend>
        <label className="flex items-center gap-2 text-sm text-be-text">
          <input type="checkbox" checked={form.pickupEnabled} onChange={(e) => set("pickupEnabled", e.target.checked)} />
          Pickup (at an event or location you choose)
        </label>
        {form.pickupEnabled && (
          <Field label="Pickup instructions" hint="Where and when to collect">
            <textarea
              rows={2}
              value={form.pickupInstructions}
              onChange={(e) => set("pickupInstructions", e.target.value)}
              placeholder="Merch tent next to the main gate, 12pm–10pm on event day."
              className="input"
            />
          </Field>
        )}
        <label className="flex items-center gap-2 text-sm text-be-text">
          <input
            type="checkbox"
            checked={form.deliveryEnabled}
            onChange={(e) => set("deliveryEnabled", e.target.checked)}
          />
          Delivery (you arrange it with the buyer)
        </label>
        {form.deliveryEnabled && (
          <Field label="Delivery fee (KES)" hint="Flat fee added to each delivery order">
            <input
              type="number"
              min="0"
              step="1"
              value={form.deliveryFeeKes}
              onChange={(e) => set("deliveryFeeKes", e.target.value)}
              className="input"
            />
          </Field>
        )}
      </fieldset>

      <label className="flex items-center gap-2 text-sm text-be-text">
        <input type="checkbox" checked={form.open} onChange={(e) => set("open", e.target.checked)} />
        Shop is open to buyers
      </label>

      {error && <p className="text-sm text-red-600">{error}</p>}
      {saved && <p className="text-sm text-be-muted">Saved.</p>}

      <button type="submit" disabled={loading} className={buttonClass("primary")}>
        {loading ? "Saving…" : isNew ? "Create shop" : "Save shop"}
      </button>
    </form>
  );
}

function Field({ label, hint, children }: { label: string; hint?: string; children: React.ReactNode }) {
  return (
    <div>
      <label className="mb-1 block text-sm font-medium text-be-text">
        {label} {hint && <span className="font-normal text-be-muted">— {hint}</span>}
      </label>
      {children}
    </div>
  );
}