"use client";

import { useActionState } from "react";
import { updateProductPrice } from "../actions";
import {
  FieldError,
  FormErrorSummary,
  INITIAL_UPDATE_STATE,
  Label,
  SubmitButton,
  inputClass,
  useUpdateResult,
} from "./shared";

const OWN_FIELDS = ["base_price", "load_within", "quantity", "price_validity"];

export type PriceDefaults = {
  base_price: string;
  load_within: string;
  quantity: string;
  price_validity: string;
};

/**
 * The legacy app split these across two dialogs — "Price" and "Dispatch Within" —
 * so a seller could publish a new base price while the dispatch window and price
 * validity still described the old quote. They are one save here: a price is only
 * meaningful together with how long it stands, how much is on offer and how fast
 * it ships.
 *
 * Inputs are uncontrolled and seeded from the product the server already
 * fetched, so nothing here needs `useState`.
 */
export default function PriceForm({
  id,
  defaults,
  onDone,
}: {
  id: number;
  defaults: PriceDefaults;
  onDone: () => void;
}) {
  const [state, formAction] = useActionState(updateProductPrice, INITIAL_UPDATE_STATE);
  useUpdateResult(state, onDone);

  return (
    <form action={formAction} className="space-y-4">
      <input type="hidden" name="id" value={id} />

      <FormErrorSummary state={state} own={OWN_FIELDS} />

      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
        <div>
          <Label required>Base Price (₹)</Label>
          <input
            type="number"
            step="0.01"
            min="0"
            name="base_price"
            defaultValue={defaults.base_price}
            placeholder="e.g. 48500"
            className={inputClass}
            required
          />
          <FieldError messages={state.errors.base_price} />
        </div>

        <div>
          <Label required>Dispatch Within (Days)</Label>
          <input
            type="number"
            step="1"
            min="0"
            name="load_within"
            defaultValue={defaults.load_within}
            placeholder="e.g. 3"
            className={inputClass}
            required
          />
          <FieldError messages={state.errors.load_within} />
        </div>

        <div>
          <Label required>Quantity</Label>
          <input
            type="number"
            step="0.01"
            min="0"
            name="quantity"
            defaultValue={defaults.quantity}
            placeholder="e.g. 100"
            className={inputClass}
            required
          />
          <FieldError messages={state.errors.quantity} />
        </div>

        <div>
          <Label required>Price Validity</Label>
          <input
            type="datetime-local"
            name="price_validity"
            defaultValue={defaults.price_validity}
            className={inputClass}
            required
          />
          <FieldError messages={state.errors.price_validity} />
        </div>
      </div>

      <p className="text-xs text-gray-500">
        Buyers watching this product are alerted whenever the price changes.
      </p>

      <div className="flex justify-end">
        <SubmitButton label="Update price" />
      </div>
    </form>
  );
}