'use client';

import { useState } from 'react';
import { setStockQuantity } from '@/app/admin/accounts/purchases/actions';

type ProductOption = {
  id: string;
  name: string;
  colors: string[];
  sizes: string[];
};

// "I counted the shelf" — set the absolute quantity for any product/colour/size
// combo, including ones with no stock row yet (initial stock take).
export default function StockAdjustForm({ products }: { products: ProductOption[] }) {
  const [productId, setProductId] = useState(products[0]?.id ?? '');
  const product = products.find((p) => p.id === productId);
  const [color, setColor] = useState(product?.colors[0] ?? '');
  const [size, setSize] = useState(product?.sizes[0] ?? '');

  const pick = (id: string) => {
    setProductId(id);
    const next = products.find((p) => p.id === id);
    setColor(next?.colors[0] ?? '');
    setSize(next?.sizes[0] ?? '');
  };

  if (products.length === 0) return null;

  return (
    <form action={setStockQuantity} className="mt-6 flex flex-wrap items-end gap-2 border border-line bg-surface p-4">
      <input type="hidden" name="productId" value={productId} />
      <input type="hidden" name="color" value={color} />
      <input type="hidden" name="size" value={size} />
      <div>
        <label className="tag-label mb-1 block">Product</label>
        <select
          value={productId}
          onChange={(e) => pick(e.target.value)}
          className="border border-line bg-paper px-2 py-2 text-sm"
        >
          {products.map((p) => (
            <option key={p.id} value={p.id}>
              {p.name}
            </option>
          ))}
        </select>
      </div>
      {product && product.colors.length > 0 && (
        <div>
          <label className="tag-label mb-1 block">Colour</label>
          <select
            value={color}
            onChange={(e) => setColor(e.target.value)}
            className="border border-line bg-paper px-2 py-2 text-sm"
          >
            {product.colors.map((c) => (
              <option key={c} value={c}>
                {c}
              </option>
            ))}
          </select>
        </div>
      )}
      {product && product.sizes.length > 0 && (
        <div>
          <label className="tag-label mb-1 block">Size</label>
          <select
            value={size}
            onChange={(e) => setSize(e.target.value)}
            className="border border-line bg-paper px-2 py-2 text-sm"
          >
            {product.sizes.map((s) => (
              <option key={s} value={s}>
                {s}
              </option>
            ))}
          </select>
        </div>
      )}
      <div>
        <label className="tag-label mb-1 block">Count</label>
        <input
          type="number"
          name="quantity"
          required
          className="w-24 border border-line bg-paper px-2 py-2 text-sm"
          placeholder="0"
        />
      </div>
      <button type="submit" className="bg-clay px-4 py-2 text-sm font-medium text-paper hover:bg-clay-dark">
        Set count
      </button>
    </form>
  );
}
