mrp/client/src/modules/shipping/ShipmentDetailPage.tsx

import { permissions } from "@mrp/shared";
import type { ShipmentDetailDto, ShipmentStatus, ShipmentSummaryDto } from "@mrp/shared/dist/shipping/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 { shipmentStatusOptions } from "./config";
import { ShipmentStatusBadge } from "./ShipmentStatusBadge";

export function ShipmentDetailPage() {
  const { token, user } = useAuth();
  const { shipmentId } = useParams();
  const [shipment, setShipment] = useState<ShipmentDetailDto | null>(null);
  const [relatedShipments, setRelatedShipments] = useState<ShipmentSummaryDto[]>([]);
  const [status, setStatus] = useState("Loading shipment...");
  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);

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

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

    api.getShipment(token, shipmentId)
      .then((nextShipment) => {
        setShipment(nextShipment);
        setStatus("Shipment loaded.");
        return api.getShipments(token, { salesOrderId: nextShipment.salesOrderId });
      })
      .then((shipments) => setRelatedShipments(shipments.filter((candidate) => candidate.id !== shipmentId)))
      .catch((error: unknown) => {
        const message = error instanceof ApiError ? error.message : "Unable to load shipment.";
        setStatus(message);
      });
  }, [shipmentId, token]);

  async function handleStatusChange(nextStatus: ShipmentStatus) {
    if (!token || !shipment) {
      return;
    }

    setIsUpdatingStatus(true);
    setStatus("Updating shipment status...");
    try {
      const nextShipment = await api.updateShipmentStatus(token, shipment.id, nextStatus);
      setShipment(nextShipment);
      setStatus("Shipment status updated.");
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to update shipment status.";
      setStatus(message);
    } finally {
      setIsUpdatingStatus(false);
    }
  }

  if (!shipment) {
    return <div className="rounded-[28px] 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-[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">Shipment</p>
            <h3 className="mt-2 text-xl font-bold text-text">{shipment.shipmentNumber}</h3>
            <p className="mt-1 text-sm text-text">{shipment.salesOrderNumber} · {shipment.customerName}</p>
            <div className="mt-3"><ShipmentStatusBadge status={shipment.status} /></div>
          </div>
          <div className="flex flex-wrap gap-3">
            <Link to="/shipping/shipments" 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 shipments</Link>
            <Link to={`/sales/orders/${shipment.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>
            {canManage ? (
              <Link to={`/shipping/shipments/${shipment.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white">Edit shipment</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 shipment status without opening the editor.</p>
            </div>
            <div className="flex flex-wrap gap-2">
              {shipmentStatusOptions.map((option) => (
                <button key={option.value} type="button" onClick={() => handleStatusChange(option.value)} disabled={isUpdatingStatus || shipment.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">Carrier</p><div className="mt-2 text-base font-bold text-text">{shipment.carrier || "Not set"}</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">Service</p><div className="mt-2 text-base font-bold text-text">{shipment.serviceLevel || "Not set"}</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">Tracking</p><div className="mt-2 text-base font-bold text-text">{shipment.trackingNumber || "Not set"}</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">Packages</p><div className="mt-2 text-base font-bold text-text">{shipment.packageCount}</div></article>
      </section>
      <div className="grid gap-3 xl:grid-cols-[minmax(0,1fr)_minmax(320px,0.9fr)]">
        <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">Shipment Notes</p>
          <p className="mt-3 whitespace-pre-line text-sm leading-6 text-text">{shipment.notes || "No notes recorded for this shipment."}</p>
        </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">Timing</p>
          <dl className="mt-5 grid gap-3">
            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Ship Date</dt><dd className="mt-1 text-sm text-text">{shipment.shipDate ? new Date(shipment.shipDate).toLocaleDateString() : "Not set"}</dd></div>
            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Created</dt><dd className="mt-1 text-sm text-text">{new Date(shipment.createdAt).toLocaleString()}</dd></div>
            <div><dt className="text-xs font-semibold uppercase tracking-[0.18em] text-muted">Updated</dt><dd className="mt-1 text-sm text-text">{new Date(shipment.updatedAt).toLocaleString()}</dd></div>
          </dl>
        </article>
      </div>
      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-4 shadow-panel 2xl:p-5">
        <div className="flex items-center justify-between gap-3">
          <div>
            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Related Shipments</p>
            <p className="mt-2 text-sm text-muted">Other shipments already tied to this sales order.</p>
          </div>
          {canManage ? (
            <Link to={`/shipping/shipments/new?orderId=${shipment.salesOrderId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">Add another shipment</Link>
          ) : null}
        </div>
        {relatedShipments.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 additional shipments exist for this sales order.</div>
        ) : (
          <div className="mt-6 space-y-3">
            {relatedShipments.map((related) => (
              <Link key={related.id} to={`/shipping/shipments/${related.id}`} className="block rounded-3xl border border-line/70 bg-page/60 p-3 transition hover:bg-page/80">
                <div className="flex flex-wrap items-center justify-between gap-3">
                  <div>
                    <div className="font-semibold text-text">{related.shipmentNumber}</div>
                    <div className="mt-1 text-xs text-muted">{related.carrier || "Carrier not set"} · {related.trackingNumber || "No tracking"}</div>
                  </div>
                  <ShipmentStatusBadge status={related.status} />
                </div>
              </Link>
            ))}
          </div>
        )}
      </section>
    </section>
  );
}