mrp/client/src/modules/purchasing/PurchaseDetailPage.tsx

import { permissions } from "@mrp/shared";
import type { PurchaseOrderDetailDto, PurchaseOrderStatus } from "@mrp/shared";
import type { WarehouseLocationOptionDto } from "@mrp/shared/dist/inventory/types.js";
import type { PurchaseReceiptInput } from "@mrp/shared/dist/purchasing/types.js";
import { useEffect, useState } from "react";
import { Link, useParams } from "react-router-dom";

import { useAuth } from "../../auth/AuthProvider";
import { api, ApiError } from "../../lib/api";
import { emptyPurchaseReceiptInput, purchaseStatusOptions } from "./config";
import { PurchaseStatusBadge } from "./PurchaseStatusBadge";

export function PurchaseDetailPage() {
  const { token, user } = useAuth();
  const { orderId } = useParams();
  const [document, setDocument] = useState<PurchaseOrderDetailDto | null>(null);
  const [locationOptions, setLocationOptions] = useState<WarehouseLocationOptionDto[]>([]);
  const [receiptForm, setReceiptForm] = useState<PurchaseReceiptInput>(emptyPurchaseReceiptInput);
  const [receiptQuantities, setReceiptQuantities] = useState<Record<string, number>>({});
  const [receiptStatus, setReceiptStatus] = useState("Receive ordered material into inventory against this purchase order.");
  const [isSavingReceipt, setIsSavingReceipt] = useState(false);
  const [status, setStatus] = useState("Loading purchase order...");
  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
  const [isOpeningPdf, setIsOpeningPdf] = useState(false);

  const canManage = user?.permissions.includes("purchasing.write") ?? false;
  const canReceive = canManage && (user?.permissions.includes(permissions.inventoryWrite) ?? false);

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

    api.getPurchaseOrder(token, orderId)
      .then((nextDocument) => {
        setDocument(nextDocument);
        setStatus("Purchase order loaded.");
      })
      .catch((error: unknown) => {
        const message = error instanceof ApiError ? error.message : "Unable to load purchase order.";
        setStatus(message);
      });

    if (!canReceive) {
      return;
    }

    api.getWarehouseLocationOptions(token)
      .then((options) => {
        setLocationOptions(options);
        setReceiptForm((current: PurchaseReceiptInput) => {
          if (current.locationId) {
            return current;
          }

          const firstOption = options[0];
          return firstOption
            ? {
                ...current,
                warehouseId: firstOption.warehouseId,
                locationId: firstOption.locationId,
              }
            : current;
        });
      })
      .catch(() => setLocationOptions([]));
  }, [canReceive, orderId, token]);

  useEffect(() => {
    if (!document) {
      return;
    }

    setReceiptQuantities((current) => {
      const next: Record<string, number> = {};
      for (const line of document.lines) {
        if (line.remainingQuantity > 0) {
          next[line.id] = current[line.id] ?? 0;
        }
      }

      return next;
    });
  }, [document]);

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

  const activeDocument = document;
  const openLines = activeDocument.lines.filter((line) => line.remainingQuantity > 0);

  function updateReceiptField<Key extends keyof PurchaseReceiptInput>(key: Key, value: PurchaseReceiptInput[Key]) {
    setReceiptForm((current: PurchaseReceiptInput) => ({ ...current, [key]: value }));
  }

  function updateReceiptQuantity(lineId: string, quantity: number) {
    setReceiptQuantities((current: Record<string, number>) => ({
      ...current,
      [lineId]: quantity,
    }));
  }

  async function handleStatusChange(nextStatus: PurchaseOrderStatus) {
    if (!token) {
      return;
    }

    setIsUpdatingStatus(true);
    setStatus("Updating purchase order status...");

    try {
      const nextDocument = await api.updatePurchaseOrderStatus(token, activeDocument.id, nextStatus);
      setDocument(nextDocument);
      setStatus("Purchase order status updated.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to update purchase order status.";
      setStatus(message);
    } finally {
      setIsUpdatingStatus(false);
    }
  }

  async function handleReceiptSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!token || !canReceive) {
      return;
    }

    setIsSavingReceipt(true);
    setReceiptStatus("Posting purchase receipt...");

    try {
      const payload: PurchaseReceiptInput = {
        ...receiptForm,
        lines: openLines
          .map((line) => ({
            purchaseOrderLineId: line.id,
            quantity: Math.max(0, Math.floor(receiptQuantities[line.id] ?? 0)),
          }))
          .filter((line) => line.quantity > 0),
      };

      const nextDocument = await api.createPurchaseReceipt(token, activeDocument.id, payload);
      setDocument(nextDocument);
      setReceiptQuantities({});
      setReceiptForm((current: PurchaseReceiptInput) => ({
        ...current,
        receivedAt: new Date().toISOString(),
        notes: "",
      }));
      setReceiptStatus("Purchase receipt recorded.");
      setStatus("Purchase order updated after receipt.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to record purchase receipt.";
      setReceiptStatus(message);
    } finally {
      setIsSavingReceipt(false);
    }
  }

  async function handleOpenPdf() {
    if (!token) {
      return;
    }

    setIsOpeningPdf(true);
    setStatus("Rendering purchase order PDF...");

    try {
      const blob = await api.getPurchaseOrderPdf(token, activeDocument.id);
      const objectUrl = URL.createObjectURL(blob);
      window.open(objectUrl, "_blank", "noopener,noreferrer");
      window.setTimeout(() => URL.revokeObjectURL(objectUrl), 60_000);
      setStatus("Purchase order PDF ready.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to render purchase order PDF.";
      setStatus(message);
    } finally {
      setIsOpeningPdf(false);
    }
  }

  return (
    <section className="space-y-4">
      <div className="rounded-[28px] 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">Purchase Order</p>
            <h3 className="mt-2 text-xl font-bold text-text">{activeDocument.documentNumber}</h3>
            <p className="mt-1 text-sm text-text">{activeDocument.vendorName}</p>
            <div className="mt-3 flex flex-wrap gap-2">
              <PurchaseStatusBadge status={activeDocument.status} />
            </div>
          </div>
          <div className="flex flex-wrap gap-3">
            <Link to="/purchasing/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 purchase orders
            </Link>
            <button
              type="button"
              onClick={handleOpenPdf}
              disabled={isOpeningPdf}
              className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text disabled:cursor-not-allowed disabled:opacity-60"
            >
              {isOpeningPdf ? "Rendering PDF..." : "Open PDF"}
            </button>
            {canManage ? (
              <Link to={`/purchasing/orders/${activeDocument.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">
                Edit purchase order
              </Link>
            ) : null}
          </div>
        </div>
      </div>
      {canManage ? (
        <section className="rounded-[28px] 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-center lg:justify-between">
            <div>
              <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Quick Actions</p>
              <p className="mt-2 text-sm text-muted">Update purchase-order status without opening the full editor.</p>
            </div>
            <div className="flex flex-wrap gap-2">
              {purchaseStatusOptions.map((option) => (
                <button key={option.value} type="button" onClick={() => handleStatusChange(option.value)} disabled={isUpdatingStatus || activeDocument.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-3 xl:grid-cols-4">
        <article className="rounded-[24px] 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">Issue Date</p><div className="mt-2 text-base font-bold text-text">{new Date(activeDocument.issueDate).toLocaleDateString()}</div></article>
        <article className="rounded-[24px] 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">Lines</p><div className="mt-2 text-base font-bold text-text">{activeDocument.lineCount}</div></article>
        <article className="rounded-[24px] 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">Receipts</p><div className="mt-2 text-base font-bold text-text">{activeDocument.receipts.length}</div></article>
        <article className="rounded-[24px] 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">Qty Remaining</p><div className="mt-2 text-base font-bold text-text">{activeDocument.lines.reduce((sum, line) => sum + line.remainingQuantity, 0)}</div></article>
      </section>
      <section className="grid gap-3 xl:grid-cols-4">
        <article className="rounded-[24px] 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">Subtotal</p><div className="mt-2 text-base font-bold text-text">${activeDocument.subtotal.toFixed(2)}</div></article>
        <article className="rounded-[24px] 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">Total</p><div className="mt-2 text-base font-bold text-text">${activeDocument.total.toFixed(2)}</div></article>
        <article className="rounded-[24px] 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">Tax</p><div className="mt-2 text-base font-bold text-text">${activeDocument.taxAmount.toFixed(2)}</div><div className="mt-1 text-xs text-muted">{activeDocument.taxPercent.toFixed(2)}%</div></article>
        <article className="rounded-[24px] 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">Freight</p><div className="mt-2 text-base font-bold text-text">${activeDocument.freightAmount.toFixed(2)}</div></article>
        <article className="rounded-[24px] 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">Payment Terms</p><div className="mt-2 text-base font-bold text-text">{activeDocument.paymentTerms || "N/A"}</div></article>
        <article className="rounded-[24px] 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">Currency</p><div className="mt-2 text-base font-bold text-text">{activeDocument.currencyCode || "USD"}</div></article>
      </section>
      <div className="grid gap-3 xl:grid-cols-[minmax(0,1.05fr)_minmax(320px,0.95fr)]">
        <article className="rounded-[28px] 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">Vendor</p>
          <dl className="mt-5 grid gap-3">
            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Account</dt><dd className="mt-1 text-sm text-text">{activeDocument.vendorName}</dd></div>
            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Email</dt><dd className="mt-1 text-sm text-text">{activeDocument.vendorEmail}</dd></div>
          </dl>
        </article>
        <article className="rounded-[28px] 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">Notes</p>
          <p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{activeDocument.notes || "No notes recorded for this document."}</p>
        </article>
      </div>
      <section className="rounded-[28px] 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">Line Items</p>
        {activeDocument.lines.length === 0 ? (
          <div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">No line items have been added yet.</div>
        ) : (
          <div className="mt-6 overflow-hidden rounded-2xl border border-line/70">
            <table className="min-w-full divide-y divide-line/70 text-sm">
              <thead className="bg-page/80 text-left text-muted">
                <tr><th className="px-2 py-2">Item</th><th className="px-2 py-2">Description</th><th className="px-2 py-2">Ordered</th><th className="px-2 py-2">Received</th><th className="px-2 py-2">Remaining</th><th className="px-2 py-2">UOM</th><th className="px-2 py-2">Unit Cost</th><th className="px-2 py-2">Total</th></tr>
              </thead>
              <tbody className="divide-y divide-line/70 bg-surface">
                {activeDocument.lines.map((line: PurchaseOrderDetailDto["lines"][number]) => (
                  <tr key={line.id}>
                    <td className="px-2 py-2"><div className="font-semibold text-text">{line.itemSku}</div><div className="mt-1 text-xs text-muted">{line.itemName}</div></td>
                    <td className="px-2 py-2 text-muted">{line.description}</td>
                    <td className="px-2 py-2 text-muted">{line.quantity}</td>
                    <td className="px-2 py-2 text-muted">{line.receivedQuantity}</td>
                    <td className="px-2 py-2 text-muted">{line.remainingQuantity}</td>
                    <td className="px-2 py-2 text-muted">{line.unitOfMeasure}</td>
                    <td className="px-2 py-2 text-muted">${line.unitCost.toFixed(2)}</td>
                    <td className="px-2 py-2 text-muted">${line.lineTotal.toFixed(2)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </section>
      <section className="grid gap-3 2xl:grid-cols-[minmax(360px,0.82fr)_minmax(0,1.18fr)]">
        {canReceive ? (
          <article className="rounded-[28px] 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">Purchase Receiving</p>
            <h4 className="mt-2 text-lg font-bold text-text">Receive material</h4>
            <p className="mt-2 text-sm text-muted">Post received quantities to inventory and retain a receipt record against this order.</p>
            {openLines.length === 0 ? (
              <div className="mt-5 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
                All ordered quantities have been received for this purchase order.
              </div>
            ) : (
              <form className="mt-5 space-y-4" onSubmit={handleReceiptSubmit}>
                <div className="grid gap-3 xl:grid-cols-2">
                  <label className="block">
                    <span className="mb-2 block text-sm font-semibold text-text">Receipt date</span>
                    <input
                      type="date"
                      value={receiptForm.receivedAt.slice(0, 10)}
                      onChange={(event) => updateReceiptField("receivedAt", new Date(event.target.value).toISOString())}
                      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">Stock location</span>
                    <select
                      value={receiptForm.locationId}
                      onChange={(event) => {
                        const nextLocation = locationOptions.find((option) => option.locationId === event.target.value);
                        updateReceiptField("locationId", event.target.value);
                        if (nextLocation) {
                          updateReceiptField("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>
                </div>
                <label className="block">
                  <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
                  <textarea
                    value={receiptForm.notes}
                    onChange={(event) => updateReceiptField("notes", event.target.value)}
                    rows={3}
                    className="w-full rounded-3xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
                  />
                </label>
                <div className="space-y-3">
                  {openLines.map((line) => (
                    <div key={line.id} className="grid gap-3 rounded-3xl border border-line/70 bg-page/60 p-3 xl:grid-cols-[minmax(0,1.3fr)_0.6fr_0.7fr_0.7fr]">
                      <div>
                        <div className="font-semibold text-text">{line.itemSku}</div>
                        <div className="mt-1 text-xs text-muted">{line.itemName}</div>
                        <div className="mt-2 text-xs text-muted">{line.description}</div>
                      </div>
                      <div className="text-sm">
                        <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Remaining</div>
                        <div className="mt-2 font-semibold text-text">{line.remainingQuantity}</div>
                      </div>
                      <div className="text-sm">
                        <div className="text-xs font-semibold uppercase tracking-[0.16em] text-muted">Received</div>
                        <div className="mt-2 font-semibold text-text">{line.receivedQuantity}</div>
                      </div>
                      <label className="block">
                        <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Receive Now</span>
                        <input
                          type="number"
                          min={0}
                          max={line.remainingQuantity}
                          step={1}
                          value={receiptQuantities[line.id] ?? 0}
                          onChange={(event) => updateReceiptQuantity(line.id, Number.parseInt(event.target.value, 10) || 0)}
                          className="w-full rounded-2xl border border-line/70 bg-surface px-2 py-2 text-text outline-none transition focus:border-brand"
                        />
                      </label>
                    </div>
                  ))}
                </div>
                <div className="flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-2 py-2 sm:flex-row sm:items-center sm:justify-between">
                  <span className="min-w-0 text-sm text-muted">{receiptStatus}</span>
                  <button
                    type="submit"
                    disabled={isSavingReceipt || locationOptions.length === 0}
                    className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60"
                  >
                    {isSavingReceipt ? "Posting..." : "Post receipt"}
                  </button>
                </div>
              </form>
            )}
          </article>
        ) : null}
        <article className="rounded-[28px] 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">Receipt History</p>
          <h4 className="mt-2 text-lg font-bold text-text">Received material log</h4>
          {activeDocument.receipts.length === 0 ? (
            <div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-4 py-8 text-center text-sm text-muted">
              No purchase receipts have been recorded for this order yet.
            </div>
          ) : (
            <div className="mt-6 space-y-3">
              {activeDocument.receipts.map((receipt) => (
                <article key={receipt.id} className="rounded-3xl 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="text-sm font-semibold text-text">{receipt.receiptNumber}</div>
                      <div className="mt-1 text-xs text-muted">
                        {receipt.warehouseCode} / {receipt.locationCode} · {receipt.totalQuantity} units across {receipt.lineCount} line{receipt.lineCount === 1 ? "" : "s"}
                      </div>
                      <div className="mt-2 text-xs text-muted">
                        {receipt.warehouseName} · {receipt.locationName}
                      </div>
                      <div className="mt-3 space-y-1">
                        {receipt.lines.map((line) => (
                          <div key={line.id} className="text-sm text-text">
                            <span className="font-semibold">{line.itemSku}</span> · {line.quantity}
                          </div>
                        ))}
                      </div>
                      {receipt.notes ? <p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{receipt.notes}</p> : null}
                    </div>
                    <div className="text-sm text-muted lg:text-right">
                      <div>{new Date(receipt.receivedAt).toLocaleDateString()}</div>
                      <div className="mt-1">{receipt.createdByName}</div>
                    </div>
                  </div>
                </article>
              ))}
            </div>
          )}
        </article>
      </section>
      <div className="rounded-2xl border border-line/70 bg-page/60 px-2 py-2 text-sm text-muted">{status}</div>
    </section>
  );
}