mrp/client/src/modules/projects/ProjectFormPage.tsx

import type {
  ProjectCustomerOptionDto,
  ProjectDocumentOptionDto,
  ProjectInput,
  ProjectMilestoneInput,
  ProjectOwnerOptionDto,
  ProjectShipmentOptionDto,
} from "@mrp/shared/dist/projects/types.js";
import { useEffect, useState } from "react";
import { Link, useNavigate, useParams } from "react-router-dom";

import { ConfirmActionDialog } from "../../components/ConfirmActionDialog";
import { useAuth } from "../../auth/AuthProvider";
import { api, ApiError } from "../../lib/api";
import { emptyProjectInput, projectMilestoneStatusOptions, projectPriorityOptions, projectStatusOptions } from "./config";

type ProjectPendingConfirmation =
  | { kind: "change-customer"; customerId: string; customerName: string }
  | { kind: "unlink-quote" }
  | { kind: "unlink-order" }
  | { kind: "unlink-shipment" };

export function ProjectFormPage({ mode }: { mode: "create" | "edit" }) {
  const { token, user } = useAuth();
  const navigate = useNavigate();
  const { projectId } = useParams();
  const [form, setForm] = useState<ProjectInput>(() => ({ ...emptyProjectInput, ownerId: user?.id ?? null }));
  const [customerOptions, setCustomerOptions] = useState<ProjectCustomerOptionDto[]>([]);
  const [ownerOptions, setOwnerOptions] = useState<ProjectOwnerOptionDto[]>([]);
  const [quoteOptions, setQuoteOptions] = useState<ProjectDocumentOptionDto[]>([]);
  const [orderOptions, setOrderOptions] = useState<ProjectDocumentOptionDto[]>([]);
  const [shipmentOptions, setShipmentOptions] = useState<ProjectShipmentOptionDto[]>([]);
  const [customerSearchTerm, setCustomerSearchTerm] = useState("");
  const [ownerSearchTerm, setOwnerSearchTerm] = useState("");
  const [quoteSearchTerm, setQuoteSearchTerm] = useState("");
  const [orderSearchTerm, setOrderSearchTerm] = useState("");
  const [shipmentSearchTerm, setShipmentSearchTerm] = useState("");
  const [customerPickerOpen, setCustomerPickerOpen] = useState(false);
  const [ownerPickerOpen, setOwnerPickerOpen] = useState(false);
  const [quotePickerOpen, setQuotePickerOpen] = useState(false);
  const [orderPickerOpen, setOrderPickerOpen] = useState(false);
  const [shipmentPickerOpen, setShipmentPickerOpen] = useState(false);
  const [status, setStatus] = useState(mode === "create" ? "Create a new project." : "Loading project...");
  const [isSaving, setIsSaving] = useState(false);
  const [pendingConfirmation, setPendingConfirmation] = useState<ProjectPendingConfirmation | null>(null);

  function reindexMilestones(milestones: ProjectMilestoneInput[]) {
    return milestones.map((milestone, index) => ({
      ...milestone,
      sortOrder: index * 10,
    }));
  }

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

    api.getProjectCustomerOptions(token).then(setCustomerOptions).catch(() => setCustomerOptions([]));
    api.getProjectOwnerOptions(token).then(setOwnerOptions).catch(() => setOwnerOptions([]));
  }, [token]);

  useEffect(() => {
    if (!token || !form.customerId) {
      setQuoteOptions([]);
      setOrderOptions([]);
      setShipmentOptions([]);
      return;
    }

    api.getProjectQuoteOptions(token, form.customerId).then(setQuoteOptions).catch(() => setQuoteOptions([]));
    api.getProjectOrderOptions(token, form.customerId).then(setOrderOptions).catch(() => setOrderOptions([]));
    api.getProjectShipmentOptions(token, form.customerId).then(setShipmentOptions).catch(() => setShipmentOptions([]));
  }, [form.customerId, token]);

  useEffect(() => {
    if (!token || mode !== "edit" || !projectId) {
      return;
    }

    api.getProject(token, projectId)
      .then((project) => {
        setForm({
          name: project.name,
          status: project.status,
          priority: project.priority,
          customerId: project.customerId,
          salesQuoteId: project.salesQuoteId,
          salesOrderId: project.salesOrderId,
          shipmentId: project.shipmentId,
          ownerId: project.ownerId,
          dueDate: project.dueDate,
          notes: project.notes,
          milestones: project.milestones.map((milestone) => ({
            id: milestone.id,
            title: milestone.title,
            status: milestone.status,
            dueDate: milestone.dueDate,
            notes: milestone.notes,
            sortOrder: milestone.sortOrder,
          })),
        });
        setCustomerSearchTerm(project.customerName);
        setOwnerSearchTerm(project.ownerName ?? "");
        setQuoteSearchTerm(project.salesQuoteNumber ?? "");
        setOrderSearchTerm(project.salesOrderNumber ?? "");
        setShipmentSearchTerm(project.shipmentNumber ?? "");
        setStatus("Project loaded.");
      })
      .catch((error: unknown) => {
        const message = error instanceof ApiError ? error.message : "Unable to load project.";
        setStatus(message);
      });
  }, [mode, projectId, token]);

  function updateField<Key extends keyof ProjectInput>(key: Key, value: ProjectInput[Key]) {
    setForm((current: ProjectInput) => ({
      ...current,
      [key]: value,
      ...(key === "customerId"
        ? {
            salesQuoteId: null,
            salesOrderId: null,
            shipmentId: null,
          }
        : {}),
    }));
  }

  function hasLinkedCommercialRecords() {
    return Boolean(form.salesQuoteId || form.salesOrderId || form.shipmentId);
  }

  function applyCustomerSelection(customerId: string, customerName: string) {
    updateField("customerId", customerId);
    setCustomerSearchTerm(customerName);
    setCustomerPickerOpen(false);
  }

  function requestCustomerSelection(customerId: string, customerName: string) {
    if (form.customerId && form.customerId !== customerId && hasLinkedCommercialRecords()) {
      setPendingConfirmation({ kind: "change-customer", customerId, customerName });
      return;
    }

    applyCustomerSelection(customerId, customerName);
  }

  function unlinkQuote() {
    updateField("salesQuoteId", null);
    setQuoteSearchTerm("");
    setQuotePickerOpen(false);
  }

  function unlinkOrder() {
    updateField("salesOrderId", null);
    setOrderSearchTerm("");
    setOrderPickerOpen(false);
  }

  function unlinkShipment() {
    updateField("shipmentId", null);
    setShipmentSearchTerm("");
    setShipmentPickerOpen(false);
  }

  function restoreSearchTerms() {
    const selectedCustomer = customerOptions.find((customer) => customer.id === form.customerId);
    const selectedOwner = ownerOptions.find((owner) => owner.id === form.ownerId);
    const selectedQuote = quoteOptions.find((quote) => quote.id === form.salesQuoteId);
    const selectedOrder = orderOptions.find((order) => order.id === form.salesOrderId);
    const selectedShipment = shipmentOptions.find((shipment) => shipment.id === form.shipmentId);

    setCustomerSearchTerm(selectedCustomer?.name ?? "");
    setOwnerSearchTerm(selectedOwner?.fullName ?? "");
    setQuoteSearchTerm(selectedQuote?.documentNumber ?? "");
    setOrderSearchTerm(selectedOrder?.documentNumber ?? "");
    setShipmentSearchTerm(selectedShipment?.shipmentNumber ?? "");
  }

  function addMilestone() {
    setForm((current) => ({
      ...current,
      milestones: reindexMilestones([
        ...current.milestones,
        {
          id: null,
          title: "",
          status: "PLANNED",
          dueDate: current.dueDate,
          notes: "",
          sortOrder: current.milestones.length * 10,
        },
      ]),
    }));
  }

  function updateMilestone<Key extends keyof ProjectMilestoneInput>(index: number, key: Key, value: ProjectMilestoneInput[Key]) {
    setForm((current) => ({
      ...current,
      milestones: current.milestones.map((milestone, milestoneIndex) =>
        milestoneIndex === index
          ? {
              ...milestone,
              [key]: value,
            }
          : milestone
      ),
    }));
  }

  function removeMilestone(index: number) {
    setForm((current) => ({
      ...current,
      milestones: reindexMilestones(current.milestones.filter((_, milestoneIndex) => milestoneIndex !== index)),
    }));
  }

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

    setIsSaving(true);
    setStatus("Saving project...");
    try {
      const saved = mode === "create" ? await api.createProject(token, form) : await api.updateProject(token, projectId ?? "", form);
      navigate(`/projects/${saved.id}`);
    } catch (error: unknown) {
      const message = error instanceof ApiError ? error.message : "Unable to save project.";
      setStatus(message);
      setIsSaving(false);
    }
  }

  return (
    <form className="page-stack" onSubmit={handleSubmit}>
      <section className="surface-panel">
        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
          <div>
            <p className="section-kicker">PROJECTS EDITOR</p>
            <h3 className="module-title">{mode === "create" ? "New Project" : "Edit Project"}</h3>
          </div>
          <Link to={mode === "create" ? "/projects" : `/projects/${projectId}`} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
            Cancel
          </Link>
        </div>
      </section>
      <section className="space-y-3 surface-panel">
        <div className="grid gap-3 xl:grid-cols-2">
          <label className="block">
            <span className="mb-2 block text-sm font-semibold text-text">Project name</span>
            <input value={form.name} onChange={(event) => updateField("name", 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" />
          </label>
          <label className="block">
            <span className="mb-2 block text-sm font-semibold text-text">Customer</span>
            <div className="relative">
                <input
                  value={customerSearchTerm}
                  onChange={(event) => {
                    setCustomerSearchTerm(event.target.value);
                    setCustomerPickerOpen(true);
                  }}
                onFocus={() => setCustomerPickerOpen(true)}
                onBlur={() => window.setTimeout(() => {
                  setCustomerPickerOpen(false);
                  restoreSearchTerms();
                }, 120)}
                placeholder="Search customer"
                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
              />
              {customerPickerOpen ? (
                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
                  {customerOptions
                    .filter((customer) => {
                      const query = customerSearchTerm.trim().toLowerCase();
                      if (!query) {
                        return true;
                      }
                      return customer.name.toLowerCase().includes(query) || customer.email.toLowerCase().includes(query);
                    })
                    .slice(0, 12)
                    .map((customer) => (
                      <button key={customer.id} type="button" onMouseDown={(event) => {
                        event.preventDefault();
                        requestCustomerSelection(customer.id, customer.name);
                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
                        <div className="font-semibold text-text">{customer.name}</div>
                        <div className="mt-1 text-xs text-muted">{customer.email}</div>
                      </button>
                    ))}
                </div>
              ) : null}
            </div>
          </label>
        </div>
        <div className="grid gap-3 xl:grid-cols-4">
          <label className="block">
            <span className="mb-2 block text-sm font-semibold text-text">Status</span>
            <select value={form.status} onChange={(event) => updateField("status", event.target.value as ProjectInput["status"])} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
              {projectStatusOptions.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">Priority</span>
            <select value={form.priority} onChange={(event) => updateField("priority", event.target.value as ProjectInput["priority"])} className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand">
              {projectPriorityOptions.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">Owner</span>
            <div className="relative">
              <input
                value={ownerSearchTerm}
                onChange={(event) => {
                  setOwnerSearchTerm(event.target.value);
                  updateField("ownerId", null);
                  setOwnerPickerOpen(true);
                }}
                onFocus={() => setOwnerPickerOpen(true)}
                onBlur={() => window.setTimeout(() => {
                  setOwnerPickerOpen(false);
                  restoreSearchTerms();
                }, 120)}
                placeholder="Search owner"
                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
              />
              {ownerPickerOpen ? (
                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
                  <button type="button" onMouseDown={(event) => {
                    event.preventDefault();
                    updateField("ownerId", null);
                    setOwnerSearchTerm("");
                    setOwnerPickerOpen(false);
                  }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
                    <div className="font-semibold text-text">Unassigned</div>
                  </button>
                  {ownerOptions
                    .filter((owner) => {
                      const query = ownerSearchTerm.trim().toLowerCase();
                      if (!query) {
                        return true;
                      }
                      return owner.fullName.toLowerCase().includes(query) || owner.email.toLowerCase().includes(query);
                    })
                    .slice(0, 12)
                    .map((owner) => (
                      <button key={owner.id} type="button" onMouseDown={(event) => {
                        event.preventDefault();
                        updateField("ownerId", owner.id);
                        setOwnerSearchTerm(owner.fullName);
                        setOwnerPickerOpen(false);
                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
                        <div className="font-semibold text-text">{owner.fullName}</div>
                        <div className="mt-1 text-xs text-muted">{owner.email}</div>
                      </button>
                    ))}
                </div>
              ) : null}
            </div>
          </label>
          <label className="block">
            <span className="mb-2 block text-sm font-semibold text-text">Due date</span>
            <input type="date" value={form.dueDate ? form.dueDate.slice(0, 10) : ""} onChange={(event) => updateField("dueDate", event.target.value ? new Date(event.target.value).toISOString() : null)} 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>
        <div className="grid gap-3 xl:grid-cols-3">
          <label className="block">
            <span className="mb-2 block text-sm font-semibold text-text">Quote</span>
            <div className="relative">
                <input
                  value={quoteSearchTerm}
                  onChange={(event) => {
                    setQuoteSearchTerm(event.target.value);
                    setQuotePickerOpen(true);
                  }}
                onFocus={() => setQuotePickerOpen(true)}
                onBlur={() => window.setTimeout(() => {
                  setQuotePickerOpen(false);
                  restoreSearchTerms();
                }, 120)}
                placeholder="Search quote"
                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
              />
              {quotePickerOpen ? (
                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
                  <button type="button" onMouseDown={(event) => {
                    event.preventDefault();
                    if (form.salesQuoteId) {
                      setPendingConfirmation({ kind: "unlink-quote" });
                    } else {
                      unlinkQuote();
                    }
                  }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
                    <div className="font-semibold text-text">No linked quote</div>
                  </button>
                  {quoteOptions
                    .filter((quote) => {
                      const query = quoteSearchTerm.trim().toLowerCase();
                      if (!query) {
                        return true;
                      }
                      return quote.documentNumber.toLowerCase().includes(query) || quote.customerName.toLowerCase().includes(query) || quote.status.toLowerCase().includes(query);
                    })
                    .slice(0, 12)
                    .map((quote) => (
                      <button key={quote.id} type="button" onMouseDown={(event) => {
                        event.preventDefault();
                        updateField("salesQuoteId", quote.id);
                        setQuoteSearchTerm(quote.documentNumber);
                        setQuotePickerOpen(false);
                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
                        <div className="font-semibold text-text">{quote.documentNumber}</div>
                        <div className="mt-1 text-xs text-muted">{quote.customerName} · {quote.status}</div>
                      </button>
                    ))}
                </div>
              ) : null}
            </div>
          </label>
          <label className="block">
            <span className="mb-2 block text-sm font-semibold text-text">Sales order</span>
            <div className="relative">
                <input
                  value={orderSearchTerm}
                  onChange={(event) => {
                    setOrderSearchTerm(event.target.value);
                    setOrderPickerOpen(true);
                  }}
                onFocus={() => setOrderPickerOpen(true)}
                onBlur={() => window.setTimeout(() => {
                  setOrderPickerOpen(false);
                  restoreSearchTerms();
                }, 120)}
                placeholder="Search sales order"
                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
              />
              {orderPickerOpen ? (
                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
                  <button type="button" onMouseDown={(event) => {
                    event.preventDefault();
                    if (form.salesOrderId) {
                      setPendingConfirmation({ kind: "unlink-order" });
                    } else {
                      unlinkOrder();
                    }
                  }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
                    <div className="font-semibold text-text">No linked sales order</div>
                  </button>
                  {orderOptions
                    .filter((order) => {
                      const query = orderSearchTerm.trim().toLowerCase();
                      if (!query) {
                        return true;
                      }
                      return order.documentNumber.toLowerCase().includes(query) || order.customerName.toLowerCase().includes(query) || order.status.toLowerCase().includes(query);
                    })
                    .slice(0, 12)
                    .map((order) => (
                      <button key={order.id} type="button" onMouseDown={(event) => {
                        event.preventDefault();
                        updateField("salesOrderId", order.id);
                        setOrderSearchTerm(order.documentNumber);
                        setOrderPickerOpen(false);
                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
                        <div className="font-semibold text-text">{order.documentNumber}</div>
                        <div className="mt-1 text-xs text-muted">{order.customerName} · {order.status}</div>
                      </button>
                    ))}
                </div>
              ) : null}
            </div>
          </label>
          <label className="block">
            <span className="mb-2 block text-sm font-semibold text-text">Shipment</span>
            <div className="relative">
                <input
                  value={shipmentSearchTerm}
                  onChange={(event) => {
                    setShipmentSearchTerm(event.target.value);
                    setShipmentPickerOpen(true);
                  }}
                onFocus={() => setShipmentPickerOpen(true)}
                onBlur={() => window.setTimeout(() => {
                  setShipmentPickerOpen(false);
                  restoreSearchTerms();
                }, 120)}
                placeholder="Search shipment"
                className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
              />
              {shipmentPickerOpen ? (
                <div className="absolute z-20 mt-2 max-h-64 w-full overflow-y-auto rounded-2xl border border-line/70 bg-surface shadow-panel">
                  <button type="button" onMouseDown={(event) => {
                    event.preventDefault();
                    if (form.shipmentId) {
                      setPendingConfirmation({ kind: "unlink-shipment" });
                    } else {
                      unlinkShipment();
                    }
                  }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition hover:bg-page/70">
                    <div className="font-semibold text-text">No linked shipment</div>
                  </button>
                  {shipmentOptions
                    .filter((shipment) => {
                      const query = shipmentSearchTerm.trim().toLowerCase();
                      if (!query) {
                        return true;
                      }
                      return shipment.shipmentNumber.toLowerCase().includes(query) || shipment.salesOrderNumber.toLowerCase().includes(query) || shipment.customerName.toLowerCase().includes(query) || shipment.status.toLowerCase().includes(query);
                    })
                    .slice(0, 12)
                    .map((shipment) => (
                      <button key={shipment.id} type="button" onMouseDown={(event) => {
                        event.preventDefault();
                        updateField("shipmentId", shipment.id);
                        setShipmentSearchTerm(shipment.shipmentNumber);
                        setShipmentPickerOpen(false);
                      }} className="block w-full border-b border-line/50 px-2 py-2 text-left text-sm transition last:border-b-0 hover:bg-page/70">
                        <div className="font-semibold text-text">{shipment.shipmentNumber}</div>
                        <div className="mt-1 text-xs text-muted">{shipment.salesOrderNumber} · {shipment.status}</div>
                      </button>
                    ))}
                </div>
              ) : null}
            </div>
          </label>
        </div>
        <label className="block">
          <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
          <textarea value={form.notes} onChange={(event) => updateField("notes", event.target.value)} rows={5} 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="space-y-3 rounded-[18px] border border-line/70 bg-page/60 p-3">
          <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <div className="text-sm font-semibold text-text">Milestones</div>
              <div className="mt-1 text-xs text-muted">Track checkpoints, due dates, and blocked work inside the project record.</div>
            </div>
            <button type="button" onClick={addMilestone} className="rounded-2xl border border-line/70 px-2 py-2 text-sm font-semibold text-text">
              Add milestone
            </button>
          </div>
          {form.milestones.length === 0 ? (
            <div className="rounded-[18px] border border-dashed border-line/70 bg-surface/80 px-3 py-4 text-sm text-muted">
              No milestones added yet.
            </div>
          ) : (
            <div className="space-y-3">
              {form.milestones.map((milestone, milestoneIndex) => (
                <div key={milestone.id ?? `new-milestone-${milestoneIndex}`} className="rounded-[18px] border border-line/70 bg-surface/80 p-3">
                  <div className="grid gap-3 xl:grid-cols-[minmax(0,1.2fr)_180px_180px]">
                    <label className="block">
                      <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Milestone</span>
                      <input
                        value={milestone.title}
                        onChange={(event) => updateMilestone(milestoneIndex, "title", 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"
                      />
                    </label>
                    <label className="block">
                      <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Status</span>
                      <select
                        value={milestone.status}
                        onChange={(event) => updateMilestone(milestoneIndex, "status", event.target.value as ProjectMilestoneInput["status"])}
                        className="w-full rounded-2xl border border-line/70 bg-page px-2 py-2 text-text outline-none transition focus:border-brand"
                      >
                        {projectMilestoneStatusOptions.map((option) => (
                          <option key={option.value} value={option.value}>{option.label}</option>
                        ))}
                      </select>
                    </label>
                    <label className="block">
                      <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Due date</span>
                      <input
                        type="date"
                        value={milestone.dueDate ? milestone.dueDate.slice(0, 10) : ""}
                        onChange={(event) => updateMilestone(milestoneIndex, "dueDate", event.target.value ? new Date(event.target.value).toISOString() : null)}
                        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>
                  <div className="mt-3 grid gap-3 xl:grid-cols-[minmax(0,1fr)_120px]">
                    <label className="block">
                      <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Notes</span>
                      <textarea
                        value={milestone.notes}
                        onChange={(event) => updateMilestone(milestoneIndex, "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 items-end">
                      <button type="button" onClick={() => removeMilestone(milestoneIndex)} className="w-full rounded-2xl border border-rose-400/40 px-2 py-2 text-sm font-semibold text-rose-700 dark:text-rose-300">
                        Remove
                      </button>
                    </div>
                  </div>
                </div>
              ))}
            </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">{status}</span>
          <button type="submit" disabled={isSaving} className="rounded-2xl bg-brand px-2 py-2 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
            {isSaving ? "Saving..." : mode === "create" ? "Create project" : "Save changes"}
          </button>
        </div>
      </section>
      <ConfirmActionDialog
        open={pendingConfirmation != null}
        title={
          pendingConfirmation?.kind === "change-customer"
            ? "Change project customer"
            : pendingConfirmation?.kind === "unlink-quote"
              ? "Remove linked quote"
              : pendingConfirmation?.kind === "unlink-order"
                ? "Remove linked sales order"
                : "Remove linked shipment"
        }
        description={
          pendingConfirmation?.kind === "change-customer"
            ? `Switch this project to ${pendingConfirmation.customerName}. Existing quote, sales order, and shipment links will be cleared.`
            : pendingConfirmation?.kind === "unlink-quote"
              ? "Remove the currently linked quote from this project draft."
              : pendingConfirmation?.kind === "unlink-order"
                ? "Remove the currently linked sales order from this project draft."
                : "Remove the currently linked shipment from this project draft."
        }
        impact={
          pendingConfirmation?.kind === "change-customer"
            ? "Commercial and delivery linkage tied to the previous customer will be cleared immediately from the draft."
            : "The project will no longer point to that related record after you save this edit."
        }
        recovery={
          pendingConfirmation?.kind === "change-customer"
            ? "Re-link the correct quote, order, and shipment before saving if the customer change was accidental."
            : "Pick the related record again before saving if this unlink was a mistake."
        }
        confirmLabel={
          pendingConfirmation?.kind === "change-customer"
            ? "Change customer"
            : "Remove link"
        }
        onClose={() => setPendingConfirmation(null)}
        onConfirm={() => {
          if (!pendingConfirmation) {
            return;
          }

          if (pendingConfirmation.kind === "change-customer") {
            applyCustomerSelection(pendingConfirmation.customerId, pendingConfirmation.customerName);
          } else if (pendingConfirmation.kind === "unlink-quote") {
            unlinkQuote();
          } else if (pendingConfirmation.kind === "unlink-order") {
            unlinkOrder();
          } else if (pendingConfirmation.kind === "unlink-shipment") {
            unlinkShipment();
          }

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