PacketStation/frontend/src/packet/WeldSheet.tsx

import { useState, type FormEvent } from "react";
import type { PacketRead, Weld, WeldBody } from "../api/types";
import { Sheet } from "../components/Sheet";
import { bpos } from "../lib/geometry";
import { fmtTime } from "../lib/format";
import {
  DEFAULT_SIZE,
  DEFAULT_TYPE,
  PROCESSES,
  WELD_TYPES,
  lastProcess,
  weldId,
  woChoices,
} from "../lib/weldDefaults";

/** The new weld's spot, from the tap on the drawing. */
export interface NewWeldAt {
  page: number;
  fx: number;
  fy: number;
}

interface Draft {
  wo_base: string;
  piece: number;
  type: string;
  size: string;
  process: string;
  stamp: string;
  items: number[];
}

/**
 * The weld sheet: work order, piece, type, size, process, stamp and the BOM items the weld joins (at least one).
 * A new weld sends its point and the default label position; an existing one sends only what changed.
 */
export function WeldSheet({
  p,
  weld,
  at,
  editable,
  myStamp,
  sub,
  onSave,
  onRemove,
  onClose,
}: {
  p: PacketRead;
  /** The weld to edit, or null for a new one. */
  weld: Weld | null;
  at: NewWeldAt | null;
  editable: boolean;
  /** The signed-in user's welder stamp, when known. */
  myStamp: string | null;
  sub: string;
  onSave: (body: WeldBody) => void;
  onRemove: () => void;
  onClose: () => void;
}) {
  const wos = woChoices(p);
  const [d, setD] = useState<Draft>(() =>
    weld
      ? {
          wo_base: weld.wo_base ?? wos[0]?.base ?? "",
          piece: weld.piece ?? 1,
          type: weld.type ?? DEFAULT_TYPE,
          size: weld.size ?? DEFAULT_SIZE,
          process: weld.process ?? lastProcess(p),
          stamp: weld.stamp ?? "",
          items: [...weld.items],
        }
      : {
          wo_base: wos[0]?.base ?? "",
          piece: 1,
          type: DEFAULT_TYPE,
          size: DEFAULT_SIZE,
          process: lastProcess(p),
          stamp: myStamp || p.welder?.stamp || "",
          items: [],
        },
  );
  const [error, setError] = useState<string | null>(null);
  const qty = wos.find((w) => w.base === d.wo_base)?.qty ?? 1;
  const title = weld ? `Weld ${weldId(weld)}` : "New weld";
  const dis = !editable;

  const toggle = (item: number) =>
    setD((o) => ({
      ...o,
      items: o.items.includes(item)
        ? o.items.filter((x) => x !== item)
        : [...o.items, item].sort((a, b) => a - b),
    }));

  const heats = d.items
    .map((i) => {
      const b = p.bom.find((x) => x.item === i);
      return b ? `${i}: ${b.heat || (b.na ? "N/A" : "-")}` : "";
    })
    .filter(Boolean)
    .join(" · ");

  const submit = (e: FormEvent) => {
    e.preventDefault();
    if (!editable) return;
    if (!d.items.length) {
      setError("Pick at least one BOM item this weld joins.");
      return;
    }
    const size = d.size.trim() || DEFAULT_SIZE;
    const stamp = d.stamp.trim() || null;
    if (!weld) {
      if (!at) return;
      const b = bpos({ fx: at.fx, fy: at.fy });
      onSave({
        page: at.page,
        fx: at.fx,
        fy: at.fy,
        bfx: b.bfx,
        bfy: b.bfy,
        ...(d.wo_base ? { wo_base: d.wo_base } : {}),
        piece: d.piece,
        items: d.items,
        type: d.type,
        size,
        process: d.process,
        ...(stamp ? { stamp } : {}),
      });
      return;
    }
    const body: WeldBody = {};
    if ((weld.wo_base ?? "") !== d.wo_base && d.wo_base)
      body.wo_base = d.wo_base;
    if ((weld.piece ?? 1) !== d.piece) body.piece = d.piece;
    if ((weld.type ?? "") !== d.type) body.type = d.type;
    if ((weld.size ?? "") !== size) body.size = size;
    if ((weld.process ?? "") !== d.process) body.process = d.process;
    if ((weld.stamp ?? null) !== stamp) body.stamp = stamp;
    if ([...weld.items].sort((a, b) => a - b).join(",") !== d.items.join(","))
      body.items = d.items;
    if (!Object.keys(body).length) {
      onClose();
      return;
    }
    onSave(body);
  };

  return (
    <Sheet
      title={title}
      sub={weld ? `${sub} · recorded ${fmtTime(weld.at)}` : sub}
      onClose={onClose}
      wide
    >
      {weld?.carried ? (
        <div className="callout flush">
          Logged in an earlier department. Shown for the record.
        </div>
      ) : null}
      <form className="stack" onSubmit={submit} noValidate aria-label={title}>
        <div className="frow">
          <label className="f">
            Work order
            <select
              aria-label="Work order"
              className="in"
              value={d.wo_base}
              disabled={dis}
              onChange={(e) =>
                setD((o) => ({ ...o, wo_base: e.target.value, piece: 1 }))
              }
            >
              {wos.map((w) => (
                <option key={w.base} value={w.base}>
                  {w.base}
                </option>
              ))}
            </select>
          </label>
          <label className="f">
            Piece
            <select
              aria-label="Piece"
              className="in"
              value={d.piece}
              disabled={dis}
              onChange={(e) =>
                setD((o) => ({ ...o, piece: Number(e.target.value) }))
              }
            >
              {Array.from({ length: Math.max(qty, d.piece) }, (_, i) => (
                <option key={i + 1} value={i + 1}>
                  {i + 1} of {qty}
                </option>
              ))}
            </select>
          </label>
          <label className="f">
            Type
            <select
              aria-label="Type"
              className="in"
              value={d.type}
              disabled={dis}
              onChange={(e) => setD((o) => ({ ...o, type: e.target.value }))}
            >
              {WELD_TYPES.map((t) => (
                <option key={t}>{t}</option>
              ))}
            </select>
          </label>
          <label className="f">
            Size
            <input
              aria-label="Size"
              className="in"
              value={d.size}
              maxLength={40}
              disabled={dis}
              onChange={(e) => setD((o) => ({ ...o, size: e.target.value }))}
            />
          </label>
          <label className="f">
            Process
            <select
              aria-label="Process"
              className="in"
              value={d.process}
              disabled={dis}
              onChange={(e) => setD((o) => ({ ...o, process: e.target.value }))}
            >
              {PROCESSES.map((t) => (
                <option key={t}>{t}</option>
              ))}
            </select>
          </label>
          <label className="f">
            Welder stamp
            <input
              aria-label="Welder stamp"
              className="in"
              value={d.stamp}
              maxLength={40}
              disabled={dis}
              onChange={(e) => setD((o) => ({ ...o, stamp: e.target.value }))}
            />
          </label>
        </div>
        <div role="group" aria-label="Mating BOM items">
          <div className="flabel">Mating BOM items</div>
          <div className="chips">
            {p.bom.map((b) => (
              <button
                key={b.item}
                type="button"
                className="ichip"
                aria-pressed={d.items.includes(b.item)}
                aria-label={`Item ${b.item}`}
                disabled={dis}
                onClick={() => {
                  toggle(b.item);
                  setError(null);
                }}
              >
                {b.item}
              </button>
            ))}
          </div>
          <div className="small muted">
            {d.items.length
              ? `Selected: item ${d.items.join(" + ")}${heats ? ` · heats ${heats}` : ""}`
              : "Tap each BOM item number this weld joins."}
          </div>
        </div>
        {error ? (
          <div className="callout warn flush" role="alert">
            {error}
          </div>
        ) : null}
        <div className="sheet-acts start">
          {editable ? (
            <button className="btn pri" type="submit">
              {weld ? "Save changes" : "Log weld"}
            </button>
          ) : null}
          <button className="btn ghost" type="button" onClick={onClose}>
            {editable ? "Cancel" : "Close"}
          </button>
          {editable && weld ? (
            <>
              <span className="grow" />
              <button
                className="btn ghost pinktxt"
                type="button"
                onClick={onRemove}
              >
                Remove weld
              </button>
            </>
          ) : null}
        </div>
      </form>
    </Sheet>
  );
}