"use client";

import { useMemo, useState } from "react";
import { shipSalesOrder } from "@/lib/actions";
import type { SalesOrderLineDetailRow } from "@/lib/types";

type Props = {
  orderId: number;
  lines: SalesOrderLineDetailRow[];
};

export function SalesOrderFulfillmentForm({ orderId, lines }: Props) {
  const [quantities, setQuantities] = useState<Record<number, string>>({});

  const payload = useMemo(
    () =>
      JSON.stringify(
        lines
          .map((line) => ({
            lineId: line.lineId,
            quantity: Number(quantities[line.lineId] || 0)
          }))
          .filter((line) => line.quantity > 0)
      ),
    [lines, quantities]
  );

  return (
    <form action={shipSalesOrder} className="form-grid">
      <input type="hidden" name="orderId" value={orderId} />
      <input type="hidden" name="fulfillmentLines" value={payload} />
      <div className="table-wrap">
        <table className="table">
          <thead>
            <tr>
              <th>SKU</th>
              <th>Item</th>
              <th>Remaining</th>
              <th>On Hand</th>
              <th>Ship Now</th>
            </tr>
          </thead>
          <tbody>
            {lines.map((line) => (
              <tr key={line.lineId}>
                <td>{line.sku}</td>
                <td>{line.partName}</td>
                <td>{line.remainingQuantity} {line.unitOfMeasure}</td>
                <td>{line.quantityOnHand} {line.unitOfMeasure}</td>
                <td>
                  <input
                    className="input"
                    type="number"
                    min="0"
                    max={Math.min(line.remainingQuantity, line.quantityOnHand)}
                    step="0.01"
                    value={quantities[line.lineId] ?? ""}
                    onChange={(event) =>
                      setQuantities((current) => ({
                        ...current,
                        [line.lineId]: event.target.value
                      }))
                    }
                  />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <button className="button secondary" type="submit">
        Ship Selected Quantities
      </button>
    </form>
  );
}