mrp/client/src/modules/manufacturing/WorkOrderDetailPage.tsx

import { permissions } from "@mrp/shared";
import type {
  ManufacturingUserOptionDto,
  WorkOrderCompletionInput,
  WorkOrderDetailDto,
  WorkOrderMaterialIssueInput,
  WorkOrderOperationAssignmentInput,
  WorkOrderOperationExecutionInput,
  WorkOrderOperationLaborEntryInput,
  WorkOrderOperationScheduleInput,
  WorkOrderOperationTimerInput,
  WorkOrderStatus,
} from "@mrp/shared";
import type { WarehouseLocationOptionDto } from "@mrp/shared/dist/inventory/types.js";
import { useEffect, useMemo, useState } from "react";
import { Link, useParams } from "react-router-dom";

import { FileAttachmentsPanel } from "../../components/FileAttachmentsPanel";
import { useAuth } from "../../auth/AuthProvider";
import { api, ApiError } from "../../lib/api";
import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
import { emptyCompletionInput, emptyMaterialIssueInput, workOrderStatusOptions } from "./config";
import { WorkOrderStatusBadge } from "./WorkOrderStatusBadge";

export function WorkOrderDetailPage() {
  const { token, user } = useAuth();
  const { workOrderId } = useParams();
  const [workOrder, setWorkOrder] = useState<WorkOrderDetailDto | null>(null);
  const [locationOptions, setLocationOptions] = useState<WarehouseLocationOptionDto[]>([]);
  const [operatorOptions, setOperatorOptions] = useState<ManufacturingUserOptionDto[]>([]);
  const [issueForm, setIssueForm] = useState<WorkOrderMaterialIssueInput>(emptyMaterialIssueInput);
  const [completionForm, setCompletionForm] = useState<WorkOrderCompletionInput>(emptyCompletionInput);
  const [holdReasonDraft, setHoldReasonDraft] = useState("");
  const [status, setStatus] = useState("Loading work order...");
  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
  const [isPostingIssue, setIsPostingIssue] = useState(false);
  const [isPostingCompletion, setIsPostingCompletion] = useState(false);
  const [operationScheduleForm, setOperationScheduleForm] = useState<Record<string, WorkOrderOperationScheduleInput>>({});
  const [operationLaborForm, setOperationLaborForm] = useState<Record<string, WorkOrderOperationLaborEntryInput>>({});
  const [operationAssignmentForm, setOperationAssignmentForm] = useState<Record<string, WorkOrderOperationAssignmentInput>>({});
  const [operationTimerForm, setOperationTimerForm] = useState<Record<string, WorkOrderOperationTimerInput>>({});
  const [reschedulingOperationId, setReschedulingOperationId] = useState<string | null>(null);
  const [executingOperationId, setExecutingOperationId] = useState<string | null>(null);
  const [postingLaborOperationId, setPostingLaborOperationId] = useState<string | null>(null);
  const [assigningOperationId, setAssigningOperationId] = useState<string | null>(null);
  const [timerOperationId, setTimerOperationId] = useState<string | null>(null);
  const [pendingConfirmation, setPendingConfirmation] = useState<
    | {
        kind: "status" | "issue" | "completion";
        title: string;
        description: string;
        impact: string;
        recovery: string;
        confirmLabel: string;
        confirmationLabel?: string;
        confirmationValue?: string;
        nextStatus?: WorkOrderStatus;
      }
    | null
  >(null);

  const canManage = user?.permissions.includes(permissions.manufacturingWrite) ?? false;

  useEffect(() => {
    if (!token || !workOrderId) {
      return;
    }

    api.getWorkOrder(token, workOrderId)
      .then((nextWorkOrder) => {
        setWorkOrder(nextWorkOrder);
        setIssueForm({
          ...emptyMaterialIssueInput,
          warehouseId: nextWorkOrder.warehouseId,
          locationId: nextWorkOrder.locationId,
        });
        setCompletionForm({
          ...emptyCompletionInput,
          quantity: Math.max(nextWorkOrder.dueQuantity, 1),
        });
        setOperationScheduleForm(
          Object.fromEntries(
            nextWorkOrder.operations.map((operation) => [operation.id, { plannedStart: operation.plannedStart }])
          )
        );
        setOperationLaborForm(
          Object.fromEntries(
            nextWorkOrder.operations.map((operation) => [operation.id, { minutes: Math.max(Math.round(operation.plannedMinutes / 4), 15), notes: "" }])
          )
        );
        setOperationAssignmentForm(
          Object.fromEntries(
            nextWorkOrder.operations.map((operation) => [operation.id, { assignedOperatorId: operation.assignedOperatorId }])
          )
        );
        setOperationTimerForm(
          Object.fromEntries(
            nextWorkOrder.operations.map((operation) => [operation.id, { action: operation.activeTimerStartedAt ? "STOP" : "START", notes: "" }])
          )
        );
        setStatus("Work order loaded.");
      })
      .catch((error: unknown) => {
        const message = error instanceof ApiError ? error.message : "Unable to load work order.";
        setStatus(message);
      });

    api.getWarehouseLocationOptions(token).then(setLocationOptions).catch(() => setLocationOptions([]));
    api.getManufacturingUserOptions(token).then(setOperatorOptions).catch(() => setOperatorOptions([]));
  }, [token, workOrderId]);

  const filteredLocationOptions = useMemo(
    () => locationOptions.filter((option) => option.warehouseId === issueForm.warehouseId),
    [issueForm.warehouseId, locationOptions]
  );

  async function applyStatusChange(nextStatus: WorkOrderStatus) {
    if (!token || !workOrder) {
      return;
    }

    setIsUpdatingStatus(true);
    setStatus("Updating work-order status...");
    try {
      const nextWorkOrder = await api.updateWorkOrderStatus(token, workOrder.id, {
        status: nextStatus,
        reason: nextStatus === "ON_HOLD" ? holdReasonDraft : null,
      });
      setWorkOrder(nextWorkOrder);
      setHoldReasonDraft("");
      setStatus("Work-order status updated. Review downstream planning and shipment readiness if this change affects execution timing.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to update work-order status.";
      setStatus(message);
    } finally {
      setIsUpdatingStatus(false);
    }
  }

  async function submitIssue() {
    if (!token || !workOrder) {
      return;
    }

    setIsPostingIssue(true);
    setStatus("Posting material issue...");
    try {
      const nextWorkOrder = await api.issueWorkOrderMaterial(token, workOrder.id, issueForm);
      setWorkOrder(nextWorkOrder);
      setIssueForm({
        ...emptyMaterialIssueInput,
        warehouseId: nextWorkOrder.warehouseId,
        locationId: nextWorkOrder.locationId,
      });
      setStatus("Material issue posted. This consumed inventory immediately; post a correcting stock movement if the issue quantity was wrong.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to post material issue.";
      setStatus(message);
    } finally {
      setIsPostingIssue(false);
    }
  }

  async function submitCompletion() {
    if (!token || !workOrder) {
      return;
    }

    setIsPostingCompletion(true);
    setStatus("Posting completion...");
    try {
      const nextWorkOrder = await api.recordWorkOrderCompletion(token, workOrder.id, completionForm);
      setWorkOrder(nextWorkOrder);
      setCompletionForm({
        ...emptyCompletionInput,
        quantity: Math.max(nextWorkOrder.dueQuantity, 1),
      });
      setStatus("Completion posted. Finished-goods stock has been received; verify the remaining quantity and post a correcting transaction if this completion was overstated.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to post completion.";
      setStatus(message);
    } finally {
      setIsPostingCompletion(false);
    }
  }

  async function submitOperationReschedule(operationId: string) {
    if (!token || !workOrder) {
      return;
    }

    const payload = operationScheduleForm[operationId];
    if (!payload?.plannedStart) {
      return;
    }

    setReschedulingOperationId(operationId);
    setStatus("Rebuilding operation schedule...");
    try {
      const nextWorkOrder = await api.updateWorkOrderOperationSchedule(token, workOrder.id, operationId, payload);
      setWorkOrder(nextWorkOrder);
      setOperationScheduleForm(
        Object.fromEntries(
          nextWorkOrder.operations.map((operation) => [operation.id, { plannedStart: operation.plannedStart }])
        )
      );
      setStatus("Operation schedule updated with station calendar constraints.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to reschedule operation.";
      setStatus(message);
    } finally {
      setReschedulingOperationId(null);
    }
  }

  async function submitOperationExecution(operationId: string, action: WorkOrderOperationExecutionInput["action"]) {
    if (!token || !workOrder) {
      return;
    }

    setExecutingOperationId(operationId);
    setStatus("Updating operation execution...");
    try {
      const nextWorkOrder = await api.updateWorkOrderOperationExecution(token, workOrder.id, operationId, {
        action,
        notes: `${action} from work-order detail`,
      });
      setWorkOrder(nextWorkOrder);
      setOperationScheduleForm(
        Object.fromEntries(
          nextWorkOrder.operations.map((operation) => [operation.id, { plannedStart: operation.plannedStart }])
        )
      );
      setStatus("Operation execution updated.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to update operation execution.";
      setStatus(message);
    } finally {
      setExecutingOperationId(null);
    }
  }

  async function submitOperationLabor(operationId: string) {
    if (!token || !workOrder) {
      return;
    }

    const payload = operationLaborForm[operationId];
    if (!payload?.minutes) {
      return;
    }

    setPostingLaborOperationId(operationId);
    setStatus("Posting labor entry...");
    try {
      const nextWorkOrder = await api.recordWorkOrderOperationLabor(token, workOrder.id, operationId, payload);
      setWorkOrder(nextWorkOrder);
      setOperationLaborForm((current) => ({
        ...current,
        [operationId]: {
          minutes: Math.max(Math.round((nextWorkOrder.operations.find((operation) => operation.id === operationId)?.plannedMinutes ?? 60) / 4), 15),
          notes: "",
        },
      }));
      setStatus("Labor entry posted.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to post operation labor.";
      setStatus(message);
    } finally {
      setPostingLaborOperationId(null);
    }
  }

  async function submitOperationAssignment(operationId: string) {
    if (!token || !workOrder) {
      return;
    }

    const payload = operationAssignmentForm[operationId];
    if (!payload) {
      return;
    }

    setAssigningOperationId(operationId);
    setStatus("Updating operator assignment...");
    try {
      const nextWorkOrder = await api.updateWorkOrderOperationAssignment(token, workOrder.id, operationId, payload);
      setWorkOrder(nextWorkOrder);
      setStatus("Operator assignment updated.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to update operator assignment.";
      setStatus(message);
    } finally {
      setAssigningOperationId(null);
    }
  }

  async function submitOperationTimer(operationId: string, action: WorkOrderOperationTimerInput["action"]) {
    if (!token || !workOrder) {
      return;
    }

    const payload = operationTimerForm[operationId] ?? { action, notes: "" };
    setTimerOperationId(operationId);
    setStatus(action === "START" ? "Starting timer..." : "Stopping timer...");
    try {
      const nextWorkOrder = await api.updateWorkOrderOperationTimer(token, workOrder.id, operationId, {
        action,
        notes: payload.notes,
      });
      setWorkOrder(nextWorkOrder);
      setOperationTimerForm((current) => ({
        ...current,
        [operationId]: {
          action: action === "START" ? "STOP" : "START",
          notes: "",
        },
      }));
      setStatus(action === "START" ? "Operation timer started." : "Operation timer stopped and labor posted.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to update operation timer.";
      setStatus(message);
    } finally {
      setTimerOperationId(null);
    }
  }

  function handleStatusChange(nextStatus: WorkOrderStatus) {
    if (!workOrder) {
      return;
    }
    const option = workOrderStatusOptions.find((entry) => entry.value === nextStatus);
    setPendingConfirmation({
      kind: "status",
      title: `Change status to ${option?.label ?? nextStatus}`,
      description: `Update work order ${workOrder.workOrderNumber} from ${workOrder.status} to ${nextStatus}.`,
      impact:
        nextStatus === "CANCELLED"
          ? "Cancelling a work order can invalidate planning assumptions, reservations, and operator expectations."
          : nextStatus === "ON_HOLD"
            ? "Putting a work order on hold pauses expected execution and should capture the exact blocker so planning and shop-floor review stay aligned."
          : nextStatus === "COMPLETE"
            ? "Completing the work order signals execution closure and can change readiness views across the system."
            : "This changes the execution state used by planning, dashboards, and downstream operational review.",
      recovery: "If this status was selected in error, set the work order back to the correct state immediately after review.",
      confirmLabel: `Set ${option?.label ?? nextStatus}`,
      confirmationLabel: nextStatus === "CANCELLED" ? "Type work-order number to confirm:" : undefined,
      confirmationValue: nextStatus === "CANCELLED" ? workOrder.workOrderNumber : undefined,
      nextStatus,
    });
    setHoldReasonDraft(nextStatus === "ON_HOLD" ? workOrder.holdReason ?? "" : "");
  }

  function handleIssueSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!workOrder) {
      return;
    }
    const component = workOrder.materialRequirements.find((requirement) => requirement.componentItemId === issueForm.componentItemId);
    setPendingConfirmation({
      kind: "issue",
      title: "Post material issue",
      description: `Issue ${issueForm.quantity} units of ${component?.componentSku ?? "the selected component"} to work order ${workOrder.workOrderNumber}.`,
      impact: "This consumes component inventory immediately and updates work-order material history.",
      recovery: "If the wrong quantity was issued, post a correcting stock transaction and note the reason on the work order.",
      confirmLabel: "Post issue",
      confirmationLabel: "Type work-order number to confirm:",
      confirmationValue: workOrder.workOrderNumber,
    });
  }

  function handleCompletionSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!workOrder) {
      return;
    }
    setPendingConfirmation({
      kind: "completion",
      title: "Post production completion",
      description: `Receive ${completionForm.quantity} finished units into ${workOrder.warehouseCode} / ${workOrder.locationCode}.`,
      impact: "This increases finished-goods inventory immediately and advances the execution history for this work order.",
      recovery: "If the completion quantity is wrong, post the correcting inventory movement and verify the work-order remaining quantity.",
      confirmLabel: "Post completion",
      confirmationLabel: completionForm.quantity >= workOrder.dueQuantity ? "Type work-order number to confirm:" : undefined,
      confirmationValue: completionForm.quantity >= workOrder.dueQuantity ? workOrder.workOrderNumber : undefined,
    });
  }

  if (!workOrder) {
    return <div className="rounded-[20px] border border-line/70 bg-surface/90 p-4 text-sm text-muted shadow-panel">{status}</div>;
  }

  return (
    <section className="page-stack">
      <div className="surface-panel">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <p className="section-kicker">WORK ORDER</p>
            <h3 className="module-title">{workOrder.workOrderNumber}</h3>
            <p className="mt-1 text-sm text-text">{workOrder.itemSku} - {workOrder.itemName}</p>
            <div className="mt-2.5"><WorkOrderStatusBadge status={workOrder.status} /></div>
            {workOrder.status === "ON_HOLD" && workOrder.holdReason ? (
              <div className="mt-2.5 max-w-2xl rounded-[16px] border border-amber-300/60 bg-amber-50 px-3 py-2.5 text-sm text-amber-900">
                <div className="metric-kicker text-amber-900">Current Hold Reason</div>
                <div className="mt-2 whitespace-pre-line">{workOrder.holdReason}</div>
              </div>
            ) : null}
          </div>
          <div className="flex flex-wrap gap-3">
            <Link to="/manufacturing/work-orders" className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Back to work orders</Link>
            {workOrder.projectId ? <Link to={`/projects/${workOrder.projectId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Open project</Link> : null}
            {workOrder.salesOrderId ? <Link to={`/sales/orders/${workOrder.salesOrderId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Open sales order</Link> : null}
            <Link to={`/inventory/items/${workOrder.itemId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Open item</Link>
            {canManage ? <Link to={`/manufacturing/work-orders/${workOrder.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">Edit work order</Link> : null}
          </div>
        </div>
      </div>
      {canManage ? (
        <section className="surface-panel">
          <div className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
            <div>
              <p className="section-kicker">QUICK ACTIONS</p>
            </div>
            <div className="flex flex-wrap gap-2">
              {workOrderStatusOptions.map((option) => (
                <button key={option.value} type="button" onClick={() => handleStatusChange(option.value)} disabled={isUpdatingStatus || workOrder.status === option.value} className="rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">
                  {option.label}
                </button>
              ))}
            </div>
          </div>
        </section>
      ) : null}
      <section className="grid gap-2 xl:grid-cols-6">
        <article className="surface-panel-tight"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Planned</p><div className="mt-2 text-base font-bold text-text">{workOrder.quantity}</div></article>
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Completed</p><div className="mt-2 text-base font-bold text-text">{workOrder.completedQuantity}</div></article>
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Remaining</p><div className="mt-2 text-base font-bold text-text">{workOrder.dueQuantity}</div></article>
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Project</p><div className="mt-2 text-base font-bold text-text">{workOrder.projectNumber || "Unlinked"}</div></article>
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Operations</p><div className="mt-2 text-base font-bold text-text">{workOrder.operations.length}</div></article>
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Due Date</p><div className="mt-2 text-base font-bold text-text">{workOrder.dueDate ? new Date(workOrder.dueDate).toLocaleDateString() : "Not set"}</div></article>
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Material Shortage</p><div className="mt-2 text-base font-bold text-text">{workOrder.materialRequirements.reduce((sum, requirement) => sum + requirement.shortageQuantity, 0)}</div></article>
        <article className="rounded-[18px] border border-line/70 bg-surface/90 px-3 py-3 shadow-panel"><p className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Actual Hours</p><div className="mt-2 text-base font-bold text-text">{(workOrder.totalActualMinutes / 60).toFixed(1)}</div></article>
      </section>
      <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_minmax(360px,0.9fr)]">
        <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Execution Context</p>
          <dl className="mt-5 grid gap-3">
            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Build item</dt><dd className="mt-1 text-sm text-text">{workOrder.itemSku} - {workOrder.itemName}</dd></div>
            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Item type</dt><dd className="mt-1 text-sm text-text">{workOrder.itemType}</dd></div>
            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Output location</dt><dd className="mt-1 text-sm text-text">{workOrder.warehouseCode} / {workOrder.locationCode}</dd></div>
            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Project customer</dt><dd className="mt-1 text-sm text-text">{workOrder.projectCustomerName || "Not linked"}</dd></div>
            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Demand source</dt><dd className="mt-1 text-sm text-text">{workOrder.salesOrderNumber ?? "Not linked"}</dd></div>
          </dl>
        </article>
        <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Work Instructions</p>
          <p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{workOrder.notes || "No work-order notes recorded."}</p>
        </article>
      </div>
      <section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Operation Plan</p>
        {workOrder.operations.length === 0 ? (
          <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">This work order has no inherited station operations. Add routing steps on the item record to automate planning.</div>
        ) : (
          <div className="mt-5 overflow-hidden rounded-[18px] border border-line/70">
            <table className="min-w-full divide-y divide-line/70 text-sm">
              <thead className="bg-page/70">
                <tr className="text-left text-xs font-semibold uppercase tracking-[0.18em] text-muted">
                  <th className="px-3 py-3">Seq</th>
                  <th className="px-3 py-3">Station</th>
                  <th className="px-3 py-3">Execution</th>
                  <th className="px-3 py-3">Capacity</th>
                  <th className="px-3 py-3">Start</th>
                  <th className="px-3 py-3">End</th>
                  <th className="px-3 py-3">Planned / Actual</th>
                  {canManage ? <th className="px-3 py-3">Execution Controls</th> : null}
                </tr>
              </thead>
              <tbody className="divide-y divide-line/70">
                {workOrder.operations.map((operation) => (
                  <tr key={operation.id} className="bg-surface/70">
                    <td className="px-3 py-3 text-text">{operation.sequence}</td>
                    <td className="px-3 py-3">
                      <div className="font-semibold text-text">{operation.stationCode}</div>
                      <div className="mt-1 text-xs text-muted">{operation.stationName}</div>
                    </td>
                    <td className="px-3 py-3 text-xs text-muted">
                      <div className="font-semibold text-text">{operation.status.replaceAll("_", " ")}</div>
                      <div className="mt-1">Start {operation.actualStart ? new Date(operation.actualStart).toLocaleString() : "Not started"}</div>
                      <div>End {operation.actualEnd ? new Date(operation.actualEnd).toLocaleString() : "Open"}</div>
                      <div>Operator {operation.assignedOperatorName ?? "Unassigned"}</div>
                      <div>{operation.activeTimerStartedAt ? `Timer running since ${new Date(operation.activeTimerStartedAt).toLocaleTimeString()}` : "Timer stopped"}</div>
                      <div>{operation.laborEntryCount} labor entr{operation.laborEntryCount === 1 ? "y" : "ies"}</div>
                    </td>
                    <td className="px-3 py-3 text-xs text-muted">
                      <div>{operation.stationDailyCapacityMinutes} min/day x {operation.stationParallelCapacity}</div>
                      <div>{operation.stationWorkingDays.join(",")}</div>
                    </td>
                    <td className="px-3 py-3 text-text">{new Date(operation.plannedStart).toLocaleString()}</td>
                    <td className="px-3 py-3 text-text">{new Date(operation.plannedEnd).toLocaleString()}</td>
                    <td className="px-3 py-3 text-xs text-text">
                      <div>{operation.plannedMinutes} planned</div>
                      <div className="mt-1">{operation.actualMinutes} actual</div>
                    </td>
                    {canManage ? (
                      <td className="px-3 py-3">
                        <div className="min-w-[320px] space-y-2">
                          <div className="flex flex-wrap gap-2">
                            {operation.status === "PENDING" ? (
                              <button type="button" onClick={() => void submitOperationExecution(operation.id, "START")} disabled={executingOperationId === operation.id} className="rounded-2xl border border-line/70 px-2 py-2 text-xs font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">Start</button>
                            ) : null}
                            {(operation.status === "PENDING" || operation.status === "PAUSED") ? (
                              <button type="button" onClick={() => void submitOperationExecution(operation.id, "RESUME")} disabled={executingOperationId === operation.id} className="rounded-2xl border border-line/70 px-2 py-2 text-xs font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">Resume</button>
                            ) : null}
                            {operation.status === "IN_PROGRESS" ? (
                              <button type="button" onClick={() => void submitOperationExecution(operation.id, "PAUSE")} disabled={executingOperationId === operation.id} className="rounded-2xl border border-line/70 px-2 py-2 text-xs font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">Pause</button>
                            ) : null}
                            {operation.status !== "COMPLETE" ? (
                              <button type="button" onClick={() => void submitOperationExecution(operation.id, "COMPLETE")} disabled={executingOperationId === operation.id} className="rounded-2xl border border-line/70 px-2 py-2 text-xs font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60">Complete</button>
                            ) : null}
                          </div>
                          <div className="flex items-center gap-2">
                            <select
                              value={operationAssignmentForm[operation.id]?.assignedOperatorId ?? ""}
                              onChange={(event) =>
                                setOperationAssignmentForm((current) => ({
                                  ...current,
                                  [operation.id]: {
                                    assignedOperatorId: event.target.value || null,
                                  },
                                }))
                              }
                              className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-xs text-text outline-none transition focus:border-brand"
                            >
                              <option value="">Unassigned operator</option>
                              {operatorOptions.map((operator) => (
                                <option key={operator.id} value={operator.id}>
                                  {operator.name} ({operator.email})
                                </option>
                              ))}
                            </select>
                            <button
                              type="button"
                              onClick={() => void submitOperationAssignment(operation.id)}
                              disabled={assigningOperationId === operation.id}
                              className="rounded-2xl border border-line/70 px-2 py-2 text-xs font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60"
                            >
                              {assigningOperationId === operation.id ? "Saving..." : "Assign"}
                            </button>
                          </div>
                          <input
                            type="datetime-local"
                            value={(operationScheduleForm[operation.id]?.plannedStart ?? operation.plannedStart).slice(0, 16)}
                            onChange={(event) =>
                              setOperationScheduleForm((current) => ({
                                ...current,
                                [operation.id]: { plannedStart: new Date(event.target.value).toISOString() },
                              }))
                            }
                            className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-xs text-text outline-none transition focus:border-brand"
                          />
                          <div className="flex items-center gap-2">
                            <input
                              type="number"
                              min={1}
                              step={1}
                              value={operationLaborForm[operation.id]?.minutes ?? 15}
                              onChange={(event) =>
                                setOperationLaborForm((current) => ({
                                  ...current,
                                  [operation.id]: {
                                    ...(current[operation.id] ?? { notes: "" }),
                                    minutes: Number.parseInt(event.target.value, 10) || 1,
                                  },
                                }))
                              }
                              className="w-24 rounded-2xl border border-line/70 bg-page px-2 py-2 text-xs text-text outline-none transition focus:border-brand"
                            />
                            <input
                              type="text"
                              placeholder="Labor note"
                              value={operationLaborForm[operation.id]?.notes ?? ""}
                              onChange={(event) =>
                                setOperationLaborForm((current) => ({
                                  ...current,
                                  [operation.id]: {
                                    ...(current[operation.id] ?? { minutes: 15 }),
                                    notes: event.target.value,
                                  },
                                }))
                              }
                              className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-xs text-text outline-none transition focus:border-brand"
                            />
                          </div>
                          <div className="flex items-center gap-2">
                            <input
                              type="text"
                              placeholder={operation.activeTimerStartedAt ? "Stop timer note" : "Start timer note"}
                              value={operationTimerForm[operation.id]?.notes ?? ""}
                              onChange={(event) =>
                                setOperationTimerForm((current) => ({
                                  ...current,
                                  [operation.id]: {
                                    action: operation.activeTimerStartedAt ? "STOP" : "START",
                                    notes: event.target.value,
                                  },
                                }))
                              }
                              className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-xs text-text outline-none transition focus:border-brand"
                            />
                            <button
                              type="button"
                              onClick={() => void submitOperationTimer(operation.id, operation.activeTimerStartedAt ? "STOP" : "START")}
                              disabled={timerOperationId === operation.id || operation.status === "COMPLETE"}
                              className="rounded-2xl border border-line/70 px-2 py-2 text-xs font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60"
                            >
                              {timerOperationId === operation.id ? "Saving..." : operation.activeTimerStartedAt ? "Stop timer" : "Start timer"}
                            </button>
                          </div>
                          <div className="flex gap-2">
                            <button
                              type="button"
                              onClick={() => void submitOperationReschedule(operation.id)}
                              disabled={reschedulingOperationId === operation.id}
                              className="rounded-2xl border border-line/70 px-2 py-2 text-xs font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60"
                            >
                              {reschedulingOperationId === operation.id ? "Saving..." : "Apply plan"}
                            </button>
                            <button
                              type="button"
                              onClick={() => void submitOperationLabor(operation.id)}
                              disabled={postingLaborOperationId === operation.id || operation.status === "COMPLETE"}
                              className="rounded-2xl bg-brand px-2 py-2 text-xs font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60"
                            >
                              {postingLaborOperationId === operation.id ? "Posting..." : "Post labor"}
                            </button>
                          </div>
                        </div>
                      </td>
                    ) : null}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
      {canManage ? (
        <section className="grid gap-3 xl:grid-cols-2">
          <form onSubmit={handleIssueSubmit} className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Material Issue</p>
            <div className="mt-4 grid gap-3">
              <label className="block">
                <span className="mb-2 block text-sm font-semibold text-text">Component</span>
                <select value={issueForm.componentItemId} onChange={(event) => setIssueForm((current) => ({ ...current, componentItemId: event.target.value }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
                  <option value="">Select component</option>
                  {workOrder.materialRequirements.map((requirement) => (
                    <option key={requirement.componentItemId} value={requirement.componentItemId}>{requirement.componentSku} - {requirement.componentName}</option>
                  ))}
                </select>
              </label>
              <div className="grid gap-3 sm:grid-cols-3">
                <label className="block">
                  <span className="mb-2 block text-sm font-semibold text-text">Warehouse</span>
                  <select value={issueForm.warehouseId} onChange={(event) => setIssueForm((current) => ({ ...current, warehouseId: event.target.value, locationId: "" }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
                    {[...new Map(locationOptions.map((option) => [option.warehouseId, option])).values()].map((option) => (
                      <option key={option.warehouseId} value={option.warehouseId}>{option.warehouseCode} - {option.warehouseName}</option>
                    ))}
                  </select>
                </label>
                <label className="block">
                  <span className="mb-2 block text-sm font-semibold text-text">Location</span>
                  <select value={issueForm.locationId} onChange={(event) => setIssueForm((current) => ({ ...current, locationId: event.target.value }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
                    <option value="">Select location</option>
                    {filteredLocationOptions.map((option) => (
                      <option key={option.locationId} value={option.locationId}>{option.locationCode} - {option.locationName}</option>
                    ))}
                  </select>
                </label>
                <label className="block">
                  <span className="mb-2 block text-sm font-semibold text-text">Quantity</span>
                  <input type="number" min={1} step={1} value={issueForm.quantity} onChange={(event) => setIssueForm((current) => ({ ...current, quantity: Number.parseInt(event.target.value, 10) || 1 }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
                </label>
              </div>
              <label className="block">
                <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
                <textarea value={issueForm.notes} onChange={(event) => setIssueForm((current) => ({ ...current, notes: event.target.value }))} rows={3} className="w-full rounded-[18px] border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
              </label>
              <button type="submit" disabled={isPostingIssue} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
                {isPostingIssue ? "Posting issue..." : "Post material issue"}
              </button>
            </div>
          </form>
          <form onSubmit={handleCompletionSubmit} className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Production Completion</p>
            <div className="mt-4 grid gap-3">
              <label className="block">
                <span className="mb-2 block text-sm font-semibold text-text">Quantity</span>
                <input type="number" min={1} step={1} value={completionForm.quantity} onChange={(event) => setCompletionForm((current) => ({ ...current, quantity: Number.parseInt(event.target.value, 10) || 1 }))} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
              </label>
              <label className="block">
                <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
                <textarea value={completionForm.notes} onChange={(event) => setCompletionForm((current) => ({ ...current, notes: event.target.value }))} rows={3} className="w-full rounded-[18px] border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand" />
              </label>
              <div className="rounded-2xl border border-line/70 bg-page/70 px-2 py-2 text-sm text-muted">Finished goods receipt posts back to {workOrder.warehouseCode} / {workOrder.locationCode}.</div>
              <button type="submit" disabled={isPostingCompletion} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
                {isPostingCompletion ? "Posting completion..." : "Post completion"}
              </button>
            </div>
          </form>
        </section>
      ) : null}
      <section className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
        <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Material Requirements</p>
        {workOrder.materialRequirements.length === 0 ? (
          <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">This build item does not currently have BOM material requirements.</div>
        ) : (
          <div className="mt-5 overflow-hidden rounded-[18px] border border-line/70">
            <table className="min-w-full divide-y divide-line/70 text-sm">
              <thead className="bg-page/70">
                <tr className="text-left text-xs font-semibold uppercase tracking-[0.18em] text-muted">
                  <th className="px-3 py-3">Component</th>
                  <th className="px-3 py-3">Per</th>
                  <th className="px-3 py-3">Required</th>
                  <th className="px-3 py-3">Issued</th>
                  <th className="px-3 py-3">Remaining</th>
                  <th className="px-3 py-3">Available</th>
                  <th className="px-3 py-3">Shortage</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-line/70">
                {workOrder.materialRequirements.map((requirement) => (
                  <tr key={requirement.componentItemId} className="bg-surface/70">
                    <td className="px-3 py-3"><div className="font-semibold text-text">{requirement.componentSku}</div><div className="mt-1 text-xs text-muted">{requirement.componentName}</div></td>
                    <td className="px-3 py-3 text-text">{requirement.quantityPer} {requirement.unitOfMeasure}</td>
                    <td className="px-3 py-3 text-text">{requirement.requiredQuantity}</td>
                    <td className="px-3 py-3 text-text">{requirement.issuedQuantity}</td>
                    <td className="px-3 py-3 text-text">{requirement.remainingQuantity}</td>
                    <td className="px-3 py-3 text-text">{requirement.availableQuantity}</td>
                    <td className="px-3 py-3 text-text">{requirement.shortageQuantity}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
      <section className="grid gap-3 xl:grid-cols-2">
        <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Issue History</p>
          {workOrder.materialIssues.length === 0 ? (
            <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No material issues have been posted yet.</div>
          ) : (
            <div className="mt-5 space-y-3">
              {workOrder.materialIssues.map((issue) => (
                <div key={issue.id} className="rounded-[18px] border border-line/70 bg-page/60 px-3 py-3">
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div>
                      <div className="font-semibold text-text">{issue.componentSku} - {issue.componentName}</div>
                      <div className="mt-1 text-xs text-muted">{issue.warehouseCode} / {issue.locationCode} · {issue.createdByName}</div>
                    </div>
                    <div className="text-sm font-semibold text-text">{issue.quantity}</div>
                  </div>
                  <div className="mt-2 text-xs text-muted">{new Date(issue.createdAt).toLocaleString()}</div>
                  <div className="mt-2 text-sm text-text">{issue.notes || "No notes recorded."}</div>
                </div>
              ))}
            </div>
          )}
        </article>
        <article className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Completion History</p>
          {workOrder.completions.length === 0 ? (
            <div className="mt-6 rounded-[18px] border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No production completions have been posted yet.</div>
          ) : (
            <div className="mt-5 space-y-3">
              {workOrder.completions.map((completion) => (
                <div key={completion.id} className="rounded-[18px] border border-line/70 bg-page/60 px-3 py-3">
                  <div className="flex flex-wrap items-center justify-between gap-3">
                    <div className="font-semibold text-text">{completion.quantity} completed</div>
                    <div className="text-xs text-muted">{completion.createdByName}</div>
                  </div>
                  <div className="mt-2 text-xs text-muted">{new Date(completion.createdAt).toLocaleString()}</div>
                  <div className="mt-2 text-sm text-text">{completion.notes || "No notes recorded."}</div>
                </div>
              ))}
            </div>
          )}
        </article>
      </section>
      <FileAttachmentsPanel
        ownerType="WORK_ORDER"
        ownerId={workOrder.id}
        eyebrow="Manufacturing Documents"
        title="Work-order files"
        description="Store travelers, build instructions, inspection records, and support documents directly on the work order."
        emptyMessage="No manufacturing attachments have been uploaded for this work order yet."
      />
      <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm text-muted">{status}</div>
      <ConfirmActionDialog
        open={pendingConfirmation != null}
        title={pendingConfirmation?.title ?? "Confirm manufacturing action"}
        description={pendingConfirmation?.description ?? ""}
        impact={pendingConfirmation?.impact}
        recovery={pendingConfirmation?.recovery}
        confirmLabel={pendingConfirmation?.confirmLabel ?? "Confirm"}
        confirmationLabel={pendingConfirmation?.confirmationLabel}
        confirmationValue={pendingConfirmation?.confirmationValue}
        extraFieldLabel={pendingConfirmation?.kind === "status" && pendingConfirmation?.nextStatus === "ON_HOLD" ? "Hold reason" : undefined}
        extraFieldPlaceholder={pendingConfirmation?.kind === "status" && pendingConfirmation?.nextStatus === "ON_HOLD" ? "Explain the blocker forcing this work order onto hold." : undefined}
        extraFieldValue={pendingConfirmation?.kind === "status" && pendingConfirmation?.nextStatus === "ON_HOLD" ? holdReasonDraft : undefined}
        extraFieldRequired={pendingConfirmation?.kind === "status" && pendingConfirmation?.nextStatus === "ON_HOLD"}
        extraFieldMultiline={pendingConfirmation?.kind === "status" && pendingConfirmation?.nextStatus === "ON_HOLD"}
        onExtraFieldChange={pendingConfirmation?.kind === "status" && pendingConfirmation?.nextStatus === "ON_HOLD" ? setHoldReasonDraft : undefined}
        isConfirming={
          (pendingConfirmation?.kind === "status" && isUpdatingStatus) ||
          (pendingConfirmation?.kind === "issue" && isPostingIssue) ||
          (pendingConfirmation?.kind === "completion" && isPostingCompletion)
        }
        onClose={() => {
          if (!isUpdatingStatus && !isPostingIssue && !isPostingCompletion) {
            setPendingConfirmation(null);
          }
        }}
        onConfirm={async () => {
          if (!pendingConfirmation) {
            return;
          }

          if (pendingConfirmation.kind === "status" && pendingConfirmation.nextStatus) {
            await applyStatusChange(pendingConfirmation.nextStatus);
          } else if (pendingConfirmation.kind === "issue") {
            await submitIssue();
          } else if (pendingConfirmation.kind === "completion") {
            await submitCompletion();
          }

          setPendingConfirmation(null);
        }}
      />
    </section>
  );
}