mrp/client/src/modules/inventory/InventoryDetailPage.tsx

import type {
  InventoryItemDetailDto,
  InventoryReservationInput,
  InventoryTransactionInput,
  InventoryTransferInput,
  WarehouseLocationOptionDto,
} from "@mrp/shared/dist/inventory/types.js";
import type { FileAttachmentDto } from "@mrp/shared";
import { permissions } from "@mrp/shared";
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";

import { useAuth } from "../../auth/AuthProvider";
import { api, ApiError } from "../../lib/api";
import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
import { emptyInventoryTransactionInput, inventoryThumbnailOwnerType, inventoryTransactionOptions } from "./config";
import { InventoryAttachmentsPanel } from "./InventoryAttachmentsPanel";
import { InventoryStatusBadge } from "./InventoryStatusBadge";
import { InventoryTransactionTypeBadge } from "./InventoryTransactionTypeBadge";
import { InventoryTypeBadge } from "./InventoryTypeBadge";

const emptyTransferInput: InventoryTransferInput = {
  quantity: 1,
  fromWarehouseId: "",
  fromLocationId: "",
  toWarehouseId: "",
  toLocationId: "",
  notes: "",
};

const emptyReservationInput: InventoryReservationInput = {
  quantity: 1,
  warehouseId: null,
  locationId: null,
  notes: "",
};

export function InventoryDetailPage() {
  const { token, user } = useAuth();
  const { itemId } = useParams();
  const [item, setItem] = useState<InventoryItemDetailDto | null>(null);
  const [locationOptions, setLocationOptions] = useState<WarehouseLocationOptionDto[]>([]);
  const [transactionForm, setTransactionForm] = useState<InventoryTransactionInput>(emptyInventoryTransactionInput);
  const [transferForm, setTransferForm] = useState<InventoryTransferInput>(emptyTransferInput);
  const [reservationForm, setReservationForm] = useState<InventoryReservationInput>(emptyReservationInput);
  const [transactionStatus, setTransactionStatus] = useState("Record receipts, issues, and adjustments against this item.");
  const [transferStatus, setTransferStatus] = useState("Move physical stock between warehouses or locations without manual paired entries.");
  const [reservationStatus, setReservationStatus] = useState("Reserve stock manually while active work orders reserve component demand automatically.");
  const [isSavingTransaction, setIsSavingTransaction] = useState(false);
  const [isSavingTransfer, setIsSavingTransfer] = useState(false);
  const [isSavingReservation, setIsSavingReservation] = useState(false);
  const [status, setStatus] = useState("Loading inventory item...");
  const [thumbnailAttachment, setThumbnailAttachment] = useState<FileAttachmentDto | null>(null);
  const [thumbnailPreviewUrl, setThumbnailPreviewUrl] = useState<string | null>(null);
  const [pendingConfirmation, setPendingConfirmation] = useState<
    | {
        kind: "transaction" | "transfer" | "reservation";
        title: string;
        description: string;
        impact: string;
        recovery: string;
        confirmLabel: string;
        confirmationLabel?: string;
        confirmationValue?: string;
      }
    | null
  >(null);

  const canManage = user?.permissions.includes(permissions.inventoryWrite) ?? false;
  const canReadFiles = user?.permissions.includes(permissions.filesRead) ?? false;

  function replaceThumbnailPreview(nextUrl: string | null) {
    setThumbnailPreviewUrl((current) => {
      if (current) {
        window.URL.revokeObjectURL(current);
      }

      return nextUrl;
    });
  }

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

    api
      .getInventoryItem(token, itemId)
      .then((nextItem) => {
        setItem(nextItem);
        setStatus("Inventory item loaded.");
      })
      .catch((error: unknown) => {
        const message = error instanceof ApiError ? error.message : "Unable to load inventory item.";
        setStatus(message);
      });

    api
      .getWarehouseLocationOptions(token)
      .then((options) => {
        setLocationOptions(options);
        const firstOption = options[0];
        if (!firstOption) {
          return;
        }

        setTransactionForm((current) => ({
          ...current,
          warehouseId: current.warehouseId || firstOption.warehouseId,
          locationId: current.locationId || firstOption.locationId,
        }));
        setTransferForm((current) => ({
          ...current,
          fromWarehouseId: current.fromWarehouseId || firstOption.warehouseId,
          fromLocationId: current.fromLocationId || firstOption.locationId,
          toWarehouseId: current.toWarehouseId || firstOption.warehouseId,
          toLocationId: current.toLocationId || firstOption.locationId,
        }));
      })
      .catch(() => setLocationOptions([]));
  }, [itemId, token]);

  useEffect(() => {
    return () => {
      if (thumbnailPreviewUrl) {
        window.URL.revokeObjectURL(thumbnailPreviewUrl);
      }
    };
  }, [thumbnailPreviewUrl]);

  useEffect(() => {
    if (!token || !itemId || !canReadFiles) {
      setThumbnailAttachment(null);
      replaceThumbnailPreview(null);
      return;
    }

    let cancelled = false;
    const activeToken: string = token;
    const activeItemId: string = itemId;

    async function loadThumbnail() {
      const attachments = await api.getAttachments(activeToken, inventoryThumbnailOwnerType, activeItemId);
      const latestAttachment = attachments[0] ?? null;

      if (!latestAttachment) {
        if (!cancelled) {
          setThumbnailAttachment(null);
          replaceThumbnailPreview(null);
        }
        return;
      }

      const blob = await api.getFileContentBlob(activeToken, latestAttachment.id);
      if (!cancelled) {
        setThumbnailAttachment(latestAttachment);
        replaceThumbnailPreview(window.URL.createObjectURL(blob));
      }
    }

    void loadThumbnail().catch(() => {
      if (!cancelled) {
        setThumbnailAttachment(null);
        replaceThumbnailPreview(null);
      }
    });

    return () => {
      cancelled = true;
    };
  }, [canReadFiles, itemId, token]);

  function updateTransactionField<Key extends keyof InventoryTransactionInput>(key: Key, value: InventoryTransactionInput[Key]) {
    setTransactionForm((current) => ({ ...current, [key]: value }));
  }

  function updateTransferField<Key extends keyof InventoryTransferInput>(key: Key, value: InventoryTransferInput[Key]) {
    setTransferForm((current) => ({ ...current, [key]: value }));
  }

  async function submitTransaction() {
    if (!token || !itemId) {
      return;
    }

    setIsSavingTransaction(true);
    setTransactionStatus("Saving stock transaction...");

    try {
      const nextItem = await api.createInventoryTransaction(token, itemId, transactionForm);
      setItem(nextItem);
      setTransactionStatus("Stock transaction recorded. If this was posted in error, create an offsetting stock entry and verify the result in Recent Movements.");
      setTransactionForm((current) => ({
        ...emptyInventoryTransactionInput,
        transactionType: current.transactionType,
        warehouseId: current.warehouseId,
        locationId: current.locationId,
      }));
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to save stock transaction.";
      setTransactionStatus(message);
    } finally {
      setIsSavingTransaction(false);
    }
  }

  async function submitTransfer() {
    if (!token || !itemId) {
      return;
    }

    setIsSavingTransfer(true);
    setTransferStatus("Saving transfer...");

    try {
      const nextItem = await api.createInventoryTransfer(token, itemId, transferForm);
      setItem(nextItem);
      setTransferStatus("Transfer recorded. Review stock balances on both locations and post a return transfer if this movement was entered incorrectly.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to save transfer.";
      setTransferStatus(message);
    } finally {
      setIsSavingTransfer(false);
    }
  }

  async function submitReservation() {
    if (!token || !itemId) {
      return;
    }

    setIsSavingReservation(true);
    setReservationStatus("Saving reservation...");

    try {
      const nextItem = await api.createInventoryReservation(token, itemId, reservationForm);
      setItem(nextItem);
      setReservationStatus("Reservation recorded. Verify available stock and add a compensating reservation change if this demand hold was entered incorrectly.");
      setReservationForm((current) => ({ ...current, quantity: 1, notes: "" }));
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to save reservation.";
      setReservationStatus(message);
    } finally {
      setIsSavingReservation(false);
    }
  }

  function handleTransactionSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!item) {
      return;
    }

    const transactionLabel = inventoryTransactionOptions.find((option) => option.value === transactionForm.transactionType)?.label ?? "transaction";
    setPendingConfirmation({
      kind: "transaction",
      title: `Post ${transactionLabel.toLowerCase()}`,
      description: `Post a ${transactionLabel.toLowerCase()} of ${transactionForm.quantity} units for ${item.sku} at the selected stock location.`,
      impact:
        transactionForm.transactionType === "ISSUE" || transactionForm.transactionType === "ADJUSTMENT_OUT"
          ? "This reduces available inventory immediately and affects downstream shortage and readiness calculations."
          : "This updates the stock ledger immediately and becomes part of the item transaction history.",
      recovery: "If this is incorrect, post an explicit offsetting transaction instead of editing history.",
      confirmLabel: `Post ${transactionLabel.toLowerCase()}`,
      confirmationLabel:
        transactionForm.transactionType === "ISSUE" || transactionForm.transactionType === "ADJUSTMENT_OUT"
          ? "Type item SKU to confirm:"
          : undefined,
      confirmationValue:
        transactionForm.transactionType === "ISSUE" || transactionForm.transactionType === "ADJUSTMENT_OUT"
          ? item.sku
          : undefined,
    });
  }

  function handleTransferSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!item) {
      return;
    }
    setPendingConfirmation({
      kind: "transfer",
      title: "Post inventory transfer",
      description: `Move ${transferForm.quantity} units of ${item.sku} between the selected source and destination locations.`,
      impact: "This creates paired stock movement entries and changes both source and destination availability immediately.",
      recovery: "If the move was entered incorrectly, post a reversing transfer back to the original location.",
      confirmLabel: "Post transfer",
    });
  }

  function handleReservationSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!item) {
      return;
    }
    setPendingConfirmation({
      kind: "reservation",
      title: "Create manual reservation",
      description: `Reserve ${reservationForm.quantity} units of ${item.sku}${reservationForm.locationId ? " at the selected location" : ""}.`,
      impact: "This reduces available quantity used by planning, purchasing, manufacturing, and readiness views.",
      recovery: "Add the correcting reservation entry if this hold should be reduced or removed.",
      confirmLabel: "Create reservation",
    });
  }

  if (!item) {
    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="space-y-4">
      <div className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Inventory Detail</p>
            <h3 className="mt-2 text-xl font-bold text-text">{item.sku}</h3>
            <p className="mt-1 text-sm text-text">{item.name}</p>
            <div className="mt-4 flex flex-wrap gap-3">
              <InventoryTypeBadge type={item.type} />
              <InventoryStatusBadge status={item.status} />
            </div>
            <p className="mt-3 text-sm text-muted">Last updated {new Date(item.updatedAt).toLocaleString()}.</p>
          </div>
          <div className="flex flex-wrap gap-3">
            <Link to="/inventory/items" 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 items
            </Link>
            {canManage ? (
              <Link to={`/inventory/items/${item.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-3 py-2 text-sm font-semibold text-white">
                Edit item
              </Link>
            ) : null}
          </div>
        </div>
      </div>

      <section className="grid gap-3 xl:grid-cols-7">
        <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">On Hand</p>
          <div className="mt-2 text-base font-bold text-text">{item.onHandQuantity}</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">Reserved</p>
          <div className="mt-2 text-base font-bold text-text">{item.reservedQuantity}</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">Available</p>
          <div className="mt-2 text-base font-bold text-text">{item.availableQuantity}</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">Stock Locations</p>
          <div className="mt-2 text-base font-bold text-text">{item.stockBalances.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">Transactions</p>
          <div className="mt-2 text-base font-bold text-text">{item.recentTransactions.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">Transfers</p>
          <div className="mt-2 text-base font-bold text-text">{item.transfers.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">Reservations</p>
          <div className="mt-2 text-base font-bold text-text">{item.reservations.length}</div>
        </article>
      </section>

      <div className="grid gap-3 xl:grid-cols-[minmax(0,1.05fr)_minmax(340px,0.95fr)]">
        <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">Item Definition</p>
          <dl className="mt-5 grid gap-3 xl:grid-cols-2">
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Description</dt>
              <dd className="mt-1 text-sm leading-6 text-text">{item.description || "No description provided."}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Unit of measure</dt>
              <dd className="mt-2 text-sm text-text">{item.unitOfMeasure}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Default cost</dt>
              <dd className="mt-2 text-sm text-text">{item.defaultCost == null ? "Not set" : `$${item.defaultCost.toFixed(2)}`}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Default price</dt>
              <dd className="mt-2 text-sm text-text">{item.defaultPrice == null ? "Not set" : `$${item.defaultPrice.toFixed(2)}`}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Preferred vendor</dt>
              <dd className="mt-2 text-sm text-text">{item.preferredVendorName ?? "Not set"}</dd>
            </div>
            <div>
              <dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Flags</dt>
              <dd className="mt-2 text-sm text-text">
                {item.isSellable ? "Sellable" : "Not sellable"} / {item.isPurchasable ? "Purchasable" : "Not purchasable"}
              </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">Thumbnail</p>
          <div className="mt-4 overflow-hidden rounded-[18px] border border-line/70 bg-page/70">
            {thumbnailPreviewUrl ? (
              <img src={thumbnailPreviewUrl} alt={`${item.sku} thumbnail`} className="aspect-square w-full object-cover" />
            ) : (
              <div className="flex aspect-square items-center justify-center px-4 text-center text-sm text-muted">
                No thumbnail image has been attached to this item.
              </div>
            )}
          </div>
          <div className="mt-3 text-xs text-muted">
            {thumbnailAttachment ? `Current file: ${thumbnailAttachment.originalName}` : "Add or replace the thumbnail from the item edit page."}
          </div>
        </article>
      </div>

      <div className="grid gap-3 xl:grid-cols-[minmax(0,1.05fr)_minmax(340px,0.95fr)]">
        <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">Stock By Location</p>
          {item.stockBalances.length === 0 ? (
            <p className="mt-4 text-sm text-muted">No stock or reservation balances have been posted for this item yet.</p>
          ) : (
            <div className="mt-4 space-y-2">
              {item.stockBalances.map((balance) => (
                <div key={`${balance.warehouseId}-${balance.locationId}`} className="flex items-center justify-between rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm">
                  <div className="min-w-0">
                    <div className="font-semibold text-text">
                      {balance.warehouseCode} / {balance.locationCode}
                    </div>
                    <div className="text-xs text-muted">
                      {balance.warehouseName} / {balance.locationName}
                    </div>
                  </div>
                  <div className="text-right">
                    <div className="font-semibold text-text">{balance.quantityOnHand} on hand</div>
                    <div className="text-xs text-muted">{balance.quantityReserved} reserved / {balance.quantityAvailable} available</div>
                  </div>
                </div>
              ))}
            </div>
          )}
        </article>
      </div>

      <section className="grid gap-3 xl:grid-cols-2">
        {canManage ? (
          <form className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5" onSubmit={handleTransactionSubmit}>
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Stock Transactions</p>
            <div className="mt-5 grid gap-3">
              <div className="grid gap-3 xl:grid-cols-2">
                <label className="block">
                  <span className="mb-2 block text-sm font-semibold text-text">Transaction type</span>
                  <select value={transactionForm.transactionType} onChange={(event) => updateTransactionField("transactionType", event.target.value as InventoryTransactionInput["transactionType"])} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
                    {inventoryTransactionOptions.map((option) => (
                      <option key={option.value} value={option.value}>
                        {option.label}
                      </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={transactionForm.quantity} onChange={(event) => updateTransactionField("quantity", Number.parseInt(event.target.value, 10) || 0)} 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">Stock location</span>
                <select value={transactionForm.locationId} onChange={(event) => {
                  const nextLocation = locationOptions.find((option) => option.locationId === event.target.value);
                  updateTransactionField("locationId", event.target.value);
                  if (nextLocation) {
                    updateTransactionField("warehouseId", nextLocation.warehouseId);
                  }
                }} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
                  {locationOptions.map((option) => (
                    <option key={option.locationId} value={option.locationId}>
                      {option.warehouseCode} / {option.locationCode}
                    </option>
                  ))}
                </select>
              </label>
              <label className="block">
                <span className="mb-2 block text-sm font-semibold text-text">Reference</span>
                <input value={transactionForm.reference} onChange={(event) => updateTransactionField("reference", event.target.value)} placeholder="PO, WO, adjustment note, etc." 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={transactionForm.notes} onChange={(event) => updateTransactionField("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="flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-2 py-2">
                <span className="text-sm text-muted">{transactionStatus}</span>
                <button type="submit" disabled={isSavingTransaction} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
                  {isSavingTransaction ? "Posting..." : "Post transaction"}
                </button>
              </div>
            </div>
          </form>
        ) : null}
        <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">Recent Movements</p>
          {item.recentTransactions.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 stock transactions have been recorded for this item yet.
            </div>
          ) : (
            <div className="mt-6 space-y-3">
              {item.recentTransactions.map((transaction) => (
                <article key={transaction.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                  <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
                    <div>
                      <div className="flex flex-wrap items-center gap-2">
                        <InventoryTransactionTypeBadge type={transaction.transactionType} />
                        <span className={`text-sm font-semibold ${transaction.signedQuantity >= 0 ? "text-emerald-700 dark:text-emerald-300" : "text-rose-700 dark:text-rose-300"}`}>
                          {transaction.signedQuantity >= 0 ? "+" : ""}
                          {transaction.signedQuantity}
                        </span>
                      </div>
                      <div className="mt-2 text-sm font-semibold text-text">
                        {transaction.warehouseCode} / {transaction.locationCode}
                      </div>
                      {transaction.reference ? <div className="mt-2 text-xs text-muted">Ref: {transaction.reference}</div> : null}
                      {transaction.notes ? <p className="mt-2 whitespace-pre-line text-sm leading-6 text-text">{transaction.notes}</p> : null}
                    </div>
                    <div className="text-sm text-muted lg:text-right">
                      <div>{new Date(transaction.createdAt).toLocaleString()}</div>
                      <div className="mt-1">{transaction.createdByName}</div>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}
        </article>
      </section>

      {canManage ? (
        <section className="grid gap-3 xl:grid-cols-2">
          <form className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5" onSubmit={handleTransferSubmit}>
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Inventory Transfer</p>
            <div className="mt-5 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={transferForm.quantity} onChange={(event) => updateTransferField("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 className="grid gap-3 sm:grid-cols-2">
                <label className="block">
                  <span className="mb-2 block text-sm font-semibold text-text">From</span>
                  <select value={transferForm.fromLocationId} onChange={(event) => {
                    const option = locationOptions.find((entry) => entry.locationId === event.target.value);
                    updateTransferField("fromLocationId", event.target.value);
                    if (option) {
                      updateTransferField("fromWarehouseId", option.warehouseId);
                    }
                  }} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
                    {locationOptions.map((option) => (
                      <option key={`from-${option.locationId}`} value={option.locationId}>
                        {option.warehouseCode} / {option.locationCode}
                      </option>
                    ))}
                  </select>
                </label>
                <label className="block">
                  <span className="mb-2 block text-sm font-semibold text-text">To</span>
                  <select value={transferForm.toLocationId} onChange={(event) => {
                    const option = locationOptions.find((entry) => entry.locationId === event.target.value);
                    updateTransferField("toLocationId", event.target.value);
                    if (option) {
                      updateTransferField("toWarehouseId", option.warehouseId);
                    }
                  }} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
                    {locationOptions.map((option) => (
                      <option key={`to-${option.locationId}`} value={option.locationId}>
                        {option.warehouseCode} / {option.locationCode}
                      </option>
                    ))}
                  </select>
                </label>
              </div>
              <label className="block">
                <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
                <textarea value={transferForm.notes} onChange={(event) => updateTransferField("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="flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-2 py-2">
                <span className="text-sm text-muted">{transferStatus}</span>
                <button type="submit" disabled={isSavingTransfer} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
                  {isSavingTransfer ? "Posting transfer..." : "Post transfer"}
                </button>
              </div>
            </div>
          </form>
          <form className="rounded-[20px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5" onSubmit={handleReservationSubmit}>
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Manual Reservation</p>
            <div className="mt-5 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={reservationForm.quantity} onChange={(event) => setReservationForm((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">Location</span>
                <select value={reservationForm.locationId ?? ""} onChange={(event) => {
                  const option = locationOptions.find((entry) => entry.locationId === event.target.value);
                  setReservationForm((current) => ({
                    ...current,
                    locationId: event.target.value || null,
                    warehouseId: option ? option.warehouseId : null,
                  }));
                }} 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="">Global / not location-specific</option>
                  {locationOptions.map((option) => (
                    <option key={option.locationId} value={option.locationId}>
                      {option.warehouseCode} / {option.locationCode}
                    </option>
                  ))}
                </select>
              </label>
              <label className="block">
                <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
                <textarea value={reservationForm.notes} onChange={(event) => setReservationForm((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="flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-2 py-2">
                <span className="text-sm text-muted">{reservationStatus}</span>
                <button type="submit" disabled={isSavingReservation} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
                  {isSavingReservation ? "Saving reservation..." : "Create reservation"}
                </button>
              </div>
            </div>
          </form>
        </section>
      ) : null}

      <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">Reservations</p>
          {item.reservations.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 reservations have been recorded for this item.
            </div>
          ) : (
            <div className="mt-5 space-y-3">
              {item.reservations.map((reservation) => (
                <article key={reservation.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                  <div className="flex items-center justify-between gap-3">
                    <div>
                      <div className="font-semibold text-text">{reservation.quantity} reserved</div>
                      <div className="mt-1 text-xs text-muted">{reservation.sourceLabel ?? reservation.sourceType}</div>
                    </div>
                    <div className="text-xs text-muted">{reservation.status}</div>
                  </div>
                  <div className="mt-2 text-xs text-muted">
                    {reservation.warehouseCode && reservation.locationCode ? `${reservation.warehouseCode} / ${reservation.locationCode}` : "Not location-specific"}
                  </div>
                  <div className="mt-2 text-sm text-text">{reservation.notes || "No notes recorded."}</div>
                </article>
              ))}
            </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">Transfers</p>
          {item.transfers.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 transfers have been recorded for this item.
            </div>
          ) : (
            <div className="mt-5 space-y-3">
              {item.transfers.map((transfer) => (
                <article key={transfer.id} className="rounded-[18px] border border-line/70 bg-page/60 p-3">
                  <div className="flex items-center justify-between gap-3">
                    <div className="font-semibold text-text">{transfer.quantity} moved</div>
                    <div className="text-xs text-muted">{new Date(transfer.createdAt).toLocaleString()}</div>
                  </div>
                  <div className="mt-2 text-xs text-muted">
                    {transfer.fromWarehouseCode} / {transfer.fromLocationCode} to {transfer.toWarehouseCode} / {transfer.toLocationCode}
                  </div>
                  <div className="mt-2 text-sm text-text">{transfer.notes || "No notes recorded."}</div>
                </article>
              ))}
            </div>
          )}
        </article>
      </section>

      <InventoryAttachmentsPanel itemId={item.id} />
      <ConfirmActionDialog
        open={pendingConfirmation != null}
        title={pendingConfirmation?.title ?? "Confirm inventory action"}
        description={pendingConfirmation?.description ?? ""}
        impact={pendingConfirmation?.impact}
        recovery={pendingConfirmation?.recovery}
        confirmLabel={pendingConfirmation?.confirmLabel ?? "Confirm"}
        confirmationLabel={pendingConfirmation?.confirmationLabel}
        confirmationValue={pendingConfirmation?.confirmationValue}
        isConfirming={
          (pendingConfirmation?.kind === "transaction" && isSavingTransaction) ||
          (pendingConfirmation?.kind === "transfer" && isSavingTransfer) ||
          (pendingConfirmation?.kind === "reservation" && isSavingReservation)
        }
        onClose={() => {
          if (!isSavingTransaction && !isSavingTransfer && !isSavingReservation) {
            setPendingConfirmation(null);
          }
        }}
        onConfirm={async () => {
          if (!pendingConfirmation) {
            return;
          }

          if (pendingConfirmation.kind === "transaction") {
            await submitTransaction();
          } else if (pendingConfirmation.kind === "transfer") {
            await submitTransfer();
          } else {
            await submitReservation();
          }

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