import ImageUploader from "@/components/admin/ImageUploader";

type Category = { id: string; name: string };
type ProductDefaults = {
  name: string;
  description: string;
  basePrice: number;
  categoryId: string;
  images: string;
  personalizable: boolean;
  active: boolean;
  minOrderQty: number;
};

export default function ProductForm({
  action,
  categories,
  defaults,
  submitLabel,
}: {
  action: (formData: FormData) => void;
  categories: Category[];
  defaults?: ProductDefaults;
  submitLabel: string;
}) {
  let existingImages: string[] = [];
  try {
    existingImages = defaults ? (JSON.parse(defaults.images) as string[]) : [];
  } catch {
    existingImages = [];
  }

  return (
    <form action={action} className="space-y-4">
      <div>
        <label className="text-sm font-medium text-stone-700">Product name</label>
        <input
          type="text"
          name="name"
          required
          defaultValue={defaults?.name}
          className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm"
        />
      </div>

      <div>
        <label className="text-sm font-medium text-stone-700">Description</label>
        <textarea
          name="description"
          rows={4}
          defaultValue={defaults?.description}
          className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm"
        />
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        <div>
          <label className="text-sm font-medium text-stone-700">Category</label>
          <select
            name="categoryId"
            required
            defaultValue={defaults?.categoryId}
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm"
          >
            <option value="" disabled>
              Select a category
            </option>
            {categories.map((c) => (
              <option key={c.id} value={c.id}>
                {c.name}
              </option>
            ))}
          </select>
        </div>
        <div>
          <label className="text-sm font-medium text-stone-700">Base price (₹)</label>
          <input
            type="number"
            name="basePrice"
            required
            min={1}
            step="0.01"
            defaultValue={defaults ? defaults.basePrice / 100 : undefined}
            className="mt-1 block w-full rounded-md border border-stone-300 px-3 py-2 text-sm"
          />
        </div>
      </div>

      <ImageUploader defaultImages={existingImages} />

      <div>
        <label className="text-sm font-medium text-stone-700">Minimum order quantity</label>
        <input
          type="number"
          name="minOrderQty"
          min={1}
          defaultValue={defaults?.minOrderQty ?? 1}
          className="mt-1 block w-32 rounded-md border border-stone-300 px-3 py-2 text-sm"
        />
      </div>

      <div className="flex gap-6">
        <label className="flex items-center gap-2 text-sm text-stone-700">
          <input type="checkbox" name="personalizable" defaultChecked={defaults?.personalizable} />
          Allow personalization
        </label>
        <label className="flex items-center gap-2 text-sm text-stone-700">
          <input type="checkbox" name="active" defaultChecked={defaults ? defaults.active : true} />
          Active (visible in store)
        </label>
      </div>

      <button type="submit" className="rounded-md bg-rose-700 px-5 py-2.5 text-sm font-semibold text-white hover:bg-rose-800">
        {submitLabel}
      </button>
    </form>
  );
}