"use client";

import { useEffect, useState, Suspense } from "react";
import { useRouter, useSearchParams } from "next/navigation";
import Link from "next/link";
import { ArrowLeft } from "lucide-react";
import { catalogApi } from "@/lib/api/catalog";
import { customerApi } from "@/lib/api/customer";
import { useToken } from "@/lib/auth/useToken";
import type { ApiAddress, ApiBrand, ApiProduct, ApiProductUnit } from "@/lib/api/types";
import { clearRfqDraft, readRfqDraft, type RfqDraft } from "@/lib/rfq/draft";
import { formatAmount } from "@/lib/pricing/forPrice";
import { PRICE_OPTIONS } from "@/lib/rfq/priceOption";
import { formatUnit } from "@/lib/utils";
import SafeImage from "@/components/ui/SafeImage";
import Loader from "@/components/ui/Loader";
import RateFinderForm from "@/components/rfq/RateFinderForm";
import PriceOptionBadge from "@/components/rfq/PriceOptionBadge";
import CustomRequirementForm from "@/components/rfq/CustomRequirementForm";
import AddressFormModal from "@/components/addresses/AddressFormModal";

/** Legacy buying-purpose list (biznie-app/src/View/Rfq/CreateRfq.js). */
const PURPOSES = [
  "Trading",
  "Retail",
  "Wholesale",
  "Personal Use",
  "For Government/Private Projects",
  "Other",
];

function variantLabel(entry: RfqDraft["variations"][number]): string {
  const first = entry.value?.[0];
  if (!first) return `#${entry.id}`;
  return first.unit?.short_name ? `${first.value} ${first.unit.short_name}` : String(first.value);
}

function NewRfqForm() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const [mode, setMode] = useState<"catalog" | "other">(searchParams.get("mode") === "other" ? "other" : "catalog");
  const { token, ready } = useToken();

  /**
   * The variant selection carried over from the product detail page. `null`
   * means the buyer came here directly, and the manual product picker below
   * takes over — the legacy app only ever had the draft path.
   *
   * `undefined` is "not read yet": sessionStorage is unavailable during SSR, so
   * the first paint must not commit to either mode.
   */
  const [draft, setDraft] = useState<RfqDraft | null | undefined>(undefined);

  const [products, setProducts] = useState<ApiProduct[]>([]);
  const [brands, setBrands] = useState<ApiBrand[]>([]);
  const [addresses, setAddresses] = useState<ApiAddress[]>([]);
  // Inline "Add new" (B26): leaving for /profile/addresses lost the RFQ draft.
  const [addingAddress, setAddingAddress] = useState(false);
  const [units, setUnits] = useState<ApiProductUnit[]>([]);

  const [productId, setProductId] = useState<string>(searchParams.get("product_id") ?? "");
  const [brandId, setBrandId] = useState<string>(searchParams.get("brand_id") ?? "");
  const [originCity, setOriginCity] = useState("");
  // Seeded from the product page's "book the total quantity" action.
  const [quantity, setQuantity] = useState(searchParams.get("qty") ?? "");
  const [purpose, setPurpose] = useState("");
  const [description, setDescription] = useState("");
  const [paymentMode, setPaymentMode] = useState("");
  const [creditDay, setCreditDay] = useState("");
  const [billingAddressId, setBillingAddressId] = useState<string>("");
  const [consigneeAddressId, setConsigneeAddressId] = useState<string>("");
  const [sameAsBilling, setSameAsBilling] = useState(false);

  const [submitting, setSubmitting] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const [productSearch, setProductSearch] = useState("");

  useEffect(() => {
    const stored = readRfqDraft();
    /*
      An explicit `?product_id=` is the buyer naming a product here and now —
      it wins over a draft left in the tab by an earlier selection, unless the
      two agree.
    */
    const requested = searchParams.get("product_id");
    if (stored && requested && String(stored.product.id) !== requested) {
      clearRfqDraft();
      setDraft(null);
      return;
    }
    setDraft(stored);
  }, [searchParams]);

  // The manual picker's option lists are dead weight in draft mode — the
  // product and brand are already decided.
  useEffect(() => {
    if (!ready || draft) return;
    catalogApi
      .products({ per_page: 50, search: productSearch || undefined })
      .then((r) => setProducts(r.data))
      .catch(() => setProducts([]));
  }, [ready, draft, productSearch]);

  useEffect(() => {
    if (!ready || draft) return;
    catalogApi.brands({ per_page: 100 }).then((r) => setBrands(r.data)).catch(() => setBrands([]));
  }, [ready, draft]);

  // Only the Rate Finder needs units; the draft flow carries the unit on each
  // variant it was seeded with.
  useEffect(() => {
    if (!ready || draft) return;
    catalogApi.units().then((r) => setUnits(r.data)).catch(() => setUnits([]));
  }, [ready, draft]);

  useEffect(() => {
    if (!ready || !token) return;
    customerApi
      .addresses(token)
      .then((r) => setAddresses(r.data))
      .catch(() => setAddresses([]));
  }, [ready, token]);

  function findAddress(id: string): ApiAddress | undefined {
    return addresses.find((a) => String(a.id) === id);
  }

  function selectBilling(id: string) {
    setBillingAddressId(id);
    if (sameAsBilling) setConsigneeAddressId(id);
  }

  function toggleSameAsBilling(checked: boolean) {
    setSameAsBilling(checked);
    setConsigneeAddressId(checked ? billingAddressId : "");
  }

  async function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
    if (!token) return;

    const billing = findAddress(billingAddressId);
    const consignee = findAddress(consigneeAddressId);

    if (!draft && !productId) {
      setErr("Please select a product");
      return;
    }
    /*
      Addresses are mandatory on the variant flow, matching the legacy
      `validateSubmit`. The manual form predates that flow and has always
      accepted an enquiry without them, so it is left alone.
    */
    if (draft && !billing) {
      setErr("Please select a billing address");
      return;
    }
    if (draft && !consignee) {
      setErr("Please select consignee details");
      return;
    }

    setErr(null);
    setSubmitting(true);

    const payload: Record<string, unknown> = draft
      ? {
          commodity_product_id: draft.product.id,
          brand_id: draft.brand?.id ?? null,
          origin_city: draft.origin_city,
          variation: draft.variations,
          quality: draft.quality,
          packaging_charge: draft.packaging,
          price_option: draft.price_option ?? "ex_works",
          // "MT", not the product's long name; without it sellers read "Unit".
          unit_label: formatUnit(draft.product.unit),
          purpose: purpose || null,
          description: description || null,
          payment_mode: paymentMode || null,
          credit_day: creditDay ? Number(creditDay) : null,
          billing_address: billing ?? null,
          // The seller surface reads `delivery_address`; the legacy payload
          // called the same object `consignee_detail`. Both are sent so either
          // reader finds it.
          delivery_address: consignee ?? null,
          consignee_detail: consignee ?? null,
        }
      : {
          commodity_product_id: Number(productId),
          brand_id: brandId ? Number(brandId) : null,
          origin_city: originCity || null,
          purpose: purpose || null,
          description: description || null,
          payment_mode: paymentMode || null,
          credit_day: creditDay ? Number(creditDay) : null,
          quantity: quantity || null,
          billing_address: billing ?? null,
          delivery_address: consignee ?? null,
          consignee_detail: consignee ?? null,
        };

    try {
      const r = await customerApi.createEnquiry(token, payload);
      clearRfqDraft();
      router.push(`/rfq/${r.data.id}`);
    } catch (e) {
      setErr(e instanceof Error ? e.message : "Failed to submit RFQ");
      setSubmitting(false);
    }
  }

  if (draft === undefined) {
    return (
      <div className="rounded-xl bg-white p-10 shadow-sm ring-1 ring-gray-100">
        <Loader label="Loading enquiry form…" />
      </div>
    );
  }

  const balanceIssue = err ? /balance|insufficient/i.test(err) : false;

  /*
    Two entry points, two forms.

    Arriving from a product page carries a draft: the product, brand and variant
    quantities are already chosen, and the detailed form below collects the
    addresses that flow go has always collected.

    Arriving cold, there is nothing to preserve — so the buyer gets the Rate
    Finder instead of a full RFQ form. Asking for two addresses before anyone
    has quoted is a lot of typing for information that does not affect the
    price; it is collected at order confirmation instead.
  */
  if (!draft) {
    return (
      <div className="space-y-4">
        <Link href="/rfq" className="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-[#CC1414]">
          <ArrowLeft className="h-4 w-4" /> Back to my requirements
        </Link>

        <div>
          <h1 className="text-2xl font-bold text-gray-900">Post Requirement</h1>
          <p className="text-sm text-gray-600">
            One place for every requirement: live seller bids on catalog products, or tell us about anything else.
          </p>
        </div>

        {/* Rate Finder and New Enquiry were two menu items for one job (4.5). */}
        <div role="tablist" aria-label="Requirement type" className="inline-flex rounded-xl bg-gray-100 p-1">
          {([
            ["catalog", "Catalog product · live quotes"],
            ["other", "Something else"],
          ] as const).map(([value, label]) => (
            <button
              key={value}
              type="button"
              role="tab"
              aria-selected={mode === value}
              onClick={() => {
                setMode(value);
                router.replace(value === "other" ? "/rfq/new?mode=other" : "/rfq/new", { scroll: false });
              }}
              className={`rounded-lg px-4 py-2 text-sm font-medium transition ${
                mode === value ? "bg-white text-[#CC1414] shadow-sm" : "text-gray-600 hover:text-gray-900"
              }`}
            >
              {label}
            </button>
          ))}
        </div>

        {mode === "other" ? (
          <CustomRequirementForm />
        ) : ready && token ? (
          <RateFinderForm
            token={token}
            units={units}
            initial={{
              productId: searchParams.get("product_id") ?? undefined,
              quantity: searchParams.get("qty") ?? undefined,
              city: searchParams.get("city") ?? undefined,
            }}
          />
        ) : (
          <div className="rounded-xl bg-white p-10 shadow-sm ring-1 ring-gray-100">
            <Loader label="Loading…" />
          </div>
        )}
      </div>
    );
  }

  return (
    <div className="space-y-4">
      <Link href="/rfq" className="inline-flex items-center gap-1 text-sm text-gray-600 hover:text-[#CC1414]">
        <ArrowLeft className="h-4 w-4" /> Back to my requirements
      </Link>

      <h1 className="text-2xl font-bold text-gray-900">Post Requirement</h1>
      <p className="text-sm text-gray-600">
        Submit your requirement and get quotations from verified sellers across India.
      </p>

      <form onSubmit={handleSubmit} className="space-y-4">
        {draft ? (
          <DraftSummary draft={draft} />
        ) : (
          <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
            <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">Product Details</h2>
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div className="sm:col-span-2">
                <label className="mb-1 block text-sm font-medium text-gray-700">
                  Product / Commodity <span className="text-[#CC1414]">*</span>
                </label>
                <input
                  type="text"
                  value={productSearch}
                  onChange={(e) => setProductSearch(e.target.value)}
                  placeholder="Search product…"
                  className="mb-2 w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
                />
                <select
                  value={productId}
                  onChange={(e) => setProductId(e.target.value)}
                  required
                  className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
                >
                  <option value="">Select a product…</option>
                  {products.map((p) => (
                    <option key={p.id} value={p.id}>
                      {p.name}
                      {p.category?.name ? ` — ${p.category.name}` : ""}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium text-gray-700">Preferred Brand</label>
                <select
                  value={brandId}
                  onChange={(e) => setBrandId(e.target.value)}
                  className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
                >
                  <option value="">Any brand</option>
                  {brands.map((b) => (
                    <option key={b.id} value={b.id}>
                      {b.name}
                    </option>
                  ))}
                </select>
              </div>

              <div>
                <label className="mb-1 block text-sm font-medium text-gray-700">Origin City</label>
                <input
                  type="text"
                  value={originCity}
                  onChange={(e) => setOriginCity(e.target.value)}
                  placeholder="e.g., Mumbai"
                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
                />
              </div>

              <div className="sm:col-span-2">
                <label className="mb-1 block text-sm font-medium text-gray-700">Quantity / Specs</label>
                <input
                  type="text"
                  value={quantity}
                  onChange={(e) => setQuantity(e.target.value)}
                  placeholder="e.g., 100 MT, 50 kg/bag"
                  className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
                />
              </div>
            </div>
          </div>
        )}

        {/* Billing address */}
        <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
          <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
            <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
              Billing Address (Bill To) {draft && <span className="text-[#CC1414]">*</span>}
            </h2>
            <button
              type="button"
              onClick={() => setAddingAddress(true)}
              className="rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-700 hover:bg-gray-50"
            >
              Add New
            </button>
          </div>
          <AddressPicker
            addresses={addresses}
            selectedId={billingAddressId}
            onSelect={selectBilling}
            name="billing"
          />
        </div>

        {addingAddress && token && (
          <AddressFormModal
            token={token}
            onClose={() => setAddingAddress(false)}
            onSaved={(address) => {
              setAddresses((list) => [address, ...list]);
              selectBilling(String(address.id));
              setAddingAddress(false);
            }}
          />
        )}

        {/* Consignee */}
        <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
          <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
            <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
              Consignee Details (Ship To) {draft && <span className="text-[#CC1414]">*</span>}
            </h2>
            {addresses.length > 0 && (
              <label className="flex items-center gap-2 text-xs font-medium text-gray-700">
                <input
                  type="checkbox"
                  checked={sameAsBilling}
                  onChange={(e) => toggleSameAsBilling(e.target.checked)}
                  className="h-4 w-4 accent-[#CC1414]"
                />
                Same as billing address
              </label>
            )}
          </div>
          <AddressPicker
            addresses={addresses}
            selectedId={consigneeAddressId}
            onSelect={setConsigneeAddressId}
            name="consignee"
            disabled={sameAsBilling}
          />
        </div>

        {/* Other details */}
        <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
          <h2 className="mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500">Other Details</h2>
          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
            <div>
              <label className="mb-1 block text-sm font-medium text-gray-700">Buying Purpose</label>
              <select
                value={purpose}
                onChange={(e) => setPurpose(e.target.value)}
                className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
              >
                <option value="">Select buying purpose…</option>
                {PURPOSES.map((option) => (
                  <option key={option} value={option}>
                    {option}
                  </option>
                ))}
              </select>
            </div>
            <div>
              <label className="mb-1 block text-sm font-medium text-gray-700">Payment Mode</label>
              <select
                value={paymentMode}
                onChange={(e) => setPaymentMode(e.target.value)}
                className="w-full rounded-lg border border-gray-200 bg-white px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
              >
                <option value="">Select…</option>
                <option value="advance">Advance</option>
                <option value="credit">Credit</option>
                <option value="lc">Letter of Credit</option>
              </select>
            </div>
            <div>
              <label className="mb-1 block text-sm font-medium text-gray-700">Credit Days</label>
              <input
                type="number"
                value={creditDay}
                onChange={(e) => setCreditDay(e.target.value)}
                min={0}
                placeholder="e.g., 30"
                className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
              />
            </div>
            <div className="sm:col-span-2">
              <label className="mb-1 block text-sm font-medium text-gray-700">Your Message</label>
              <textarea
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                rows={3}
                placeholder="Any additional requirements, packaging, delivery timeline…"
                className="w-full rounded-lg border border-gray-200 px-3 py-2 text-sm focus:border-[#CC1414] focus:outline-none"
              />
            </div>
          </div>
        </div>

        {err && (
          <div className="rounded-lg bg-red-50 p-3 text-sm text-red-700 ring-1 ring-red-100">
            <p>{err}</p>
            {/* The legacy form popped a modal here offering the un-priced
                enquiry route when the wallet could not cover the RFQ. */}
            {balanceIssue && (
              <Link href="/rfq/new?mode=other" className="mt-1 inline-block font-semibold underline">
                Send it as a general requirement instead
              </Link>
            )}
          </div>
        )}

        <div className="flex items-center gap-3">
          <button
            type="submit"
            disabled={submitting}
            className="rounded-lg bg-[#CC1414] px-6 py-2.5 text-sm font-medium text-white hover:bg-[#a30f0f] disabled:opacity-50"
          >
            {submitting ? "Submitting…" : "Submit RFQ"}
          </button>
          <Link
            href="/rfq"
            className="rounded-lg border border-gray-200 px-6 py-2.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
          >
            Cancel
          </Link>
        </div>
      </form>
    </div>
  );
}

/** Read-only recap of the selection made on the product detail page. */
function DraftSummary({ draft }: { draft: RfqDraft }) {
  // Each row's total is priced on the chosen option, so the price column and
  // the footer follow it too (they used to read Ex-Works whatever was chosen).
  const option = draft.price_option ?? "ex_works";
  const optionLabel = PRICE_OPTIONS[option].label;
  const total = draft.variations.reduce((sum, entry) => sum + (Number(entry.line_total) || 0), 0);

  return (
    <div className="rounded-xl bg-white p-5 shadow-sm ring-1 ring-gray-100">
      <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
        <h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Your Selection</h2>
        <Link
          href={`/products/${draft.product.slug}#variants`}
          className="text-xs font-medium text-[#CC1414] hover:underline"
        >
          Change selection
        </Link>
      </div>

      <div className="flex gap-4">
        <div className="relative hidden h-20 w-20 shrink-0 overflow-hidden rounded-xl bg-gray-50 sm:block">
          <SafeImage
            src={draft.product.thumbnail || "/logo.png"}
            alt={draft.product.name}
            fill
            sizes="80px"
            className="object-cover"
          />
        </div>

        <dl className="min-w-0 flex-1 space-y-1.5 text-sm">
          <Row label="Product">{draft.product.name}</Row>
          <Row label="Brand">{draft.brand?.name ?? "—"}</Row>
          <Row label="Location">{draft.origin_city ? `Ex-${draft.origin_city}` : "—"}</Row>
          {draft.quality && <Row label="Quality">{draft.quality.name}</Row>}
          {draft.packaging && <Row label="Packaging">{draft.packaging.name}</Row>}
          <Row label="Price Option">
            <PriceOptionBadge value={option} showHint />
          </Row>
        </dl>
      </div>

      <div className="mt-4 overflow-x-auto">
        <table className="w-full min-w-[420px] text-left text-xs">
          <thead>
            <tr className="border-b border-gray-200 text-gray-500">
              <th className="py-2 pr-3 font-medium">Size</th>
              <th className="py-2 pr-3 font-medium">{optionLabel} Price</th>
              <th className="py-2 pr-3 font-medium">Quantity ({draft.product.unit})</th>
              <th className="py-2 font-medium">Total</th>
            </tr>
          </thead>
          <tbody>
            {draft.variations.map((entry) => (
              <tr key={entry.id} className="border-b border-gray-100 last:border-0">
                <td className="py-2 pr-3 text-gray-900">{variantLabel(entry)}</td>
                <td className="py-2 pr-3 text-gray-700">
                  {formatAmount(Number(entry.quantity) > 0 ? entry.line_total / Number(entry.quantity) : entry.ex_price)}
                </td>
                <td className="py-2 pr-3 text-gray-700">{entry.quantity}</td>
                <td className="py-2 font-semibold text-gray-900">{formatAmount(entry.line_total)}</td>
              </tr>
            ))}
          </tbody>
          <tfoot>
            <tr>
              <td colSpan={2} className="pt-2 text-xs font-medium text-gray-500">
                Total
              </td>
              <td className="pt-2 text-xs font-medium text-gray-700">
                {draft.totals.quantity} {draft.product.unit}
              </td>
              <td className="pt-2 text-sm font-bold text-gray-900">
                {formatAmount(total)}
              </td>
            </tr>
          </tfoot>
        </table>
      </div>

      <p className="mt-2 text-[11px] text-gray-400">
        Indicative {optionLabel} total. Sellers quote the final price against this requirement.
      </p>
    </div>
  );
}

function Row({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex gap-2">
      <dt className="w-24 shrink-0 text-gray-500">{label}</dt>
      <dd className="min-w-0 font-medium text-gray-900">{children}</dd>
    </div>
  );
}

/**
 * Saved addresses as selectable cards, mirroring the legacy create-RFQ screen —
 * a plain `<select>` hides the GST number and company name, which is exactly
 * what buyers check before sending an enquiry.
 */
function AddressPicker({
  addresses,
  selectedId,
  onSelect,
  name,
  disabled = false,
}: {
  addresses: ApiAddress[];
  selectedId: string;
  onSelect: (id: string) => void;
  name: string;
  disabled?: boolean;
}) {
  if (addresses.length === 0) {
    return (
      <p className="text-sm text-gray-500">
        No saved addresses.{" "}
        <Link href="/profile/addresses" className="text-[#CC1414] hover:underline">
          Add an address
        </Link>{" "}
        first to attach it to your enquiry.
      </p>
    );
  }

  return (
    <div className={`grid grid-cols-1 gap-3 sm:grid-cols-2 ${disabled ? "opacity-60" : ""}`}>
      {addresses.map((address) => {
        const id = String(address.id);
        const active = selectedId === id;
        return (
          <label
            key={address.id}
            className={`cursor-pointer rounded-xl border p-3 text-xs transition ${
              active ? "border-[#CC1414] bg-red-50/40" : "border-gray-200 hover:border-gray-300"
            } ${disabled ? "pointer-events-none" : ""}`}
          >
            <div className="mb-2 flex items-center justify-between gap-2">
              <span className="truncate font-semibold text-gray-900">
                {address.company_name || address.city}
              </span>
              <input
                type="radio"
                name={name}
                checked={active}
                onChange={() => onSelect(id)}
                disabled={disabled}
                className="h-4 w-4 shrink-0 accent-[#CC1414]"
              />
            </div>
            <dl className="space-y-0.5 text-gray-600">
              <Field label="Phone">{address.phone || "—"}</Field>
              <Field label="GST">{address.gst || "—"}</Field>
              <Field label="Address">
                {[address.address_line_one, address.address_line_two].filter(Boolean).join(", ")}
              </Field>
              <Field label="City">
                {address.city}, {address.state} — {address.pincode}
              </Field>
            </dl>
          </label>
        );
      })}
    </div>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex gap-2">
      <dt className="w-16 shrink-0 text-gray-400">{label}</dt>
      <dd className="min-w-0 break-words">{children}</dd>
    </div>
  );
}

export default function NewRfqPage() {
  return (
    <Suspense
      fallback={
        <div className="rounded-xl bg-white p-10 shadow-sm ring-1 ring-gray-100">
          <Loader label="Loading enquiry form…" />
        </div>
      }
    >
      <NewRfqForm />
    </Suspense>
  );
}