"use client";

import { useEffect, useMemo, useState, type FormEvent } from "react";
import { useApiList } from "@/hooks/use-api-list";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

// Shape returned by GET /api/assets — snake_case per this repo's
// API-boundary convention (see src/lib/assets.ts's toRecord()).
interface AssetItemRecord {
  id: string;
  serial_number: string;
  asset_tag: string | null;
  model_id: string;
  purchase_date: string | null;
  warranty_end_date: string | null;
  status: "in_stock" | "assigned" | "repair" | "retired" | "lost";
  cost: number | null;
  cost_currency: string | null;
  area_id: string | null;
  purchase_order_id: string | null;
  external_po_number: string | null;
  created_at: string;
}

// Shape returned by GET /api/areas — reused from the office-move feature
// (see src/lib/areas.ts). Only id/name needed here.
interface AreaRecord {
  id: string;
  name: string;
}

// Shape returned by GET /api/employees — only id/name needed to resolve
// the "Assigned To" column/search below.
interface EmployeeRecord {
  id: string;
  name: string;
}

// Shape returned by GET /api/assignments — only the fields needed to find
// each AssetItem's current (non-returned) assignee.
interface AssignmentRecord {
  employee_id: string;
  asset_item_id: string | null;
  returned_at: string | null;
}

// Shape returned by GET /api/asset-models — only the fields used to populate
// the modelId <Select> here (see src/app/asset-models/page.tsx's
// AssetModelRecord for the full shape). category_id added 2026-08-25, used
// to narrow the Model filter dropdown once a Category is picked -- with
// 135 models after the 2026-08-24 real-data import, an unfiltered list is
// unwieldy.
interface AssetModelRecord {
  id: string;
  category_id: string;
  manufacturer: string;
  name: string;
}

// Shape returned by GET /api/asset-categories — only id/name, used to
// populate the Category filter <Select> here.
interface AssetCategoryRecord {
  id: string;
  name: string;
}

// Shape returned by GET /api/purchase-orders — only the id, used to populate
// the purchaseOrderId <Select> here. PurchaseOrder has no obviously
// human-readable name field (see src/app/purchase-orders/page.tsx's
// PurchaseOrderRecord for the full shape), so the id itself is shown as the
// label.
interface PurchaseOrderRecord {
  id: string;
}

// Radix <Select.Item> can't take an empty-string value, so "no purchase
// order" is represented by this sentinel in the form state and translated to
// "omit the key" on submit — same pattern as purchase-orders page's
// NOT_RECEIVED_VALUE / employees page's NO_MANAGER_VALUE.
const NO_PURCHASE_ORDER_VALUE = "none";

// Same sentinel pattern as NO_PURCHASE_ORDER_VALUE above, for the optional
// Area <Select> in the create form.
const NO_AREA_VALUE = "none";

// Renders an ISO date(-time) string as mm/dd/yyyy, or "-" if absent.
// UTC-based (not local time) to match how purchaseDate/warrantyEndDate are
// actually stored -- see src/lib/assets.ts's dateString()/addMonthsClamped()
// comments on why this app treats these as UTC-midnight values throughout,
// not local-timezone dates.
function formatDateMMDDYYYY(isoString: string | null): string {
  if (!isoString) return "-";
  const date = new Date(isoString);
  const mm = String(date.getUTCMonth() + 1).padStart(2, "0");
  const dd = String(date.getUTCDate()).padStart(2, "0");
  const yyyy = date.getUTCFullYear();
  return `${mm}/${dd}/${yyyy}`;
}

// "Manufacturer Name" for display -- except a chunk of AssetModel rows
// from the 2026-08-24 real-data import already have the manufacturer
// baked into `name` (the source file's own "Model" column did this for
// some rows, e.g. name="Logitech Group" with manufacturer="Logitech"),
// which without this check renders as "Logitech Logitech Group". Skip the
// manufacturer prefix when `name` already starts with it, case-insensitive.
function formatModelLabel(manufacturer: string, name: string): string {
  const normalizedName = name.trim().toLowerCase();
  const normalizedManufacturer = manufacturer.trim().toLowerCase();
  if (normalizedManufacturer && normalizedName.startsWith(normalizedManufacturer)) {
    return name;
  }
  return `${manufacturer} ${name}`;
}

const ASSET_ITEMS_PAGE_SIZE = 50;

export default function AssetsPage() {
  const { data: assetModels } = useApiList<AssetModelRecord>("/api/asset-models");
  const { data: assetCategories } = useApiList<AssetCategoryRecord>("/api/asset-categories");
  const { data: purchaseOrders } = useApiList<PurchaseOrderRecord>("/api/purchase-orders");
  const { data: areas } = useApiList<AreaRecord>("/api/areas");
  const { data: employees } = useApiList<EmployeeRecord>("/api/employees");
  const { data: assignments } = useApiList<AssignmentRecord>("/api/assignments");

  const [serialNumber, setSerialNumber] = useState("");
  const [assetTag, setAssetTag] = useState("");
  const [modelId, setModelId] = useState("");
  const [purchaseDate, setPurchaseDate] = useState("");
  const [warrantyEndDate, setWarrantyEndDate] = useState("");
  const [purchaseOrderId, setPurchaseOrderId] = useState(NO_PURCHASE_ORDER_VALUE);
  const [areaId, setAreaId] = useState(NO_AREA_VALUE);
  const [cost, setCost] = useState("");
  const [costCurrency, setCostCurrency] = useState("");
  const [externalPoNumber, setExternalPoNumber] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [submitError, setSubmitError] = useState<string | null>(null);

  // Filter/search + pagination state (2026-08-25 -- was client-side-only
  // filtering over the full ~600+-row table; moved server-side, see
  // src/lib/assets.ts's listAssetItems() doc comment for why). searchText
  // is debounced into debouncedSearchText so typing doesn't fire a
  // request per keystroke.
  const [searchText, setSearchText] = useState("");
  const [debouncedSearchText, setDebouncedSearchText] = useState("");
  const [filterStatus, setFilterStatus] = useState("all");
  const [filterCategoryId, setFilterCategoryId] = useState("all");
  const [filterModelId, setFilterModelId] = useState("all");
  const [filterAreaId, setFilterAreaId] = useState("all");
  const [page, setPage] = useState(1);

  const [assetItems, setAssetItems] = useState<AssetItemRecord[]>([]);
  const [assetItemsTotal, setAssetItemsTotal] = useState(0);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [refreshKey, setRefreshKey] = useState(0);

  function refetch() {
    setRefreshKey((k) => k + 1);
  }

  useEffect(() => {
    const timeout = setTimeout(() => setDebouncedSearchText(searchText.trim()), 300);
    return () => clearTimeout(timeout);
  }, [searchText]);

  // A filter changing invalidates whatever page we were on -- e.g. page 3
  // of an unfiltered list may not exist at all once a filter narrows the
  // result set. Reset to page 1 rather than showing an empty/stale page.
  useEffect(() => {
    setPage(1);
  }, [debouncedSearchText, filterStatus, filterCategoryId, filterModelId, filterAreaId]);

  useEffect(() => {
    let cancelled = false;

    async function load() {
      setLoading(true);
      setError(null);
      const params = new URLSearchParams();
      params.set("page", String(page));
      params.set("pageSize", String(ASSET_ITEMS_PAGE_SIZE));
      if (filterStatus !== "all") params.set("status", filterStatus);
      if (filterCategoryId !== "all") params.set("categoryId", filterCategoryId);
      if (filterModelId !== "all") params.set("modelId", filterModelId);
      if (filterAreaId !== "all") params.set("areaId", filterAreaId);
      if (debouncedSearchText) params.set("search", debouncedSearchText);

      try {
        const response = await fetch(`/api/assets?${params.toString()}`);
        let body: unknown;
        try {
          body = await response.json();
        } catch {
          body = null;
        }
        if (cancelled) return;
        if (!response.ok) {
          const message =
            body !== null &&
            typeof body === "object" &&
            "error" in body &&
            typeof (body as { error: unknown }).error === "string"
              ? (body as { error: string }).error
              : "Request failed";
          setError(message);
          setAssetItems([]);
          setAssetItemsTotal(0);
          return;
        }
        const parsed = body as { items?: AssetItemRecord[]; total?: number };
        setAssetItems(Array.isArray(parsed.items) ? parsed.items : []);
        setAssetItemsTotal(typeof parsed.total === "number" ? parsed.total : 0);
      } catch {
        if (!cancelled) {
          setError("Request failed");
          setAssetItems([]);
          setAssetItemsTotal(0);
        }
      } finally {
        if (!cancelled) setLoading(false);
      }
    }

    void load();
    return () => {
      cancelled = true;
    };
  }, [page, filterStatus, filterCategoryId, filterModelId, filterAreaId, debouncedSearchText, refreshKey]);

  const totalPages = Math.max(1, Math.ceil(assetItemsTotal / ASSET_ITEMS_PAGE_SIZE));

  // modelId -> "Manufacturer Name" -- avoids showing the raw model_id UUID
  // in the table (2026-08-25 -- was previously the literal FK value).
  const modelNameById = useMemo(() => {
    const map = new Map<string, string>();
    for (const m of assetModels) {
      map.set(m.id, formatModelLabel(m.manufacturer, m.name));
    }
    return map;
  }, [assetModels]);

  const modelCategoryById = useMemo(() => {
    const map = new Map<string, string>();
    for (const m of assetModels) {
      map.set(m.id, m.category_id);
    }
    return map;
  }, [assetModels]);

  // Model dropdown options narrow to the picked Category -- with 135
  // models after the 2026-08-24 real-data import, showing all of them
  // regardless of category is unwieldy.
  const modelsForCategoryFilter = useMemo(() => {
    if (filterCategoryId === "all") return assetModels;
    return assetModels.filter((m) => m.category_id === filterCategoryId);
  }, [assetModels, filterCategoryId]);

  function handleFilterCategoryChange(categoryId: string) {
    setFilterCategoryId(categoryId);
    // A previously-picked Model may not belong to the newly-picked
    // Category -- reset rather than silently keep filtering on a model
    // that's no longer shown in the (now-narrowed) dropdown.
    if (
      filterModelId !== "all" &&
      categoryId !== "all" &&
      modelCategoryById.get(filterModelId) !== categoryId
    ) {
      setFilterModelId("all");
    }
  }

  const areaNameById = useMemo(() => {
    const map = new Map<string, string>();
    for (const a of areas) {
      map.set(a.id, a.name);
    }
    return map;
  }, [areas]);

  const employeeNameById = useMemo(() => {
    const map = new Map<string, string>();
    for (const e of employees) {
      map.set(e.id, e.name);
    }
    return map;
  }, [employees]);

  // assetItemId -> employee name, current holder only (returned_at IS
  // NULL) -- an AssetItem can have multiple historical Assignment rows
  // over time (see Assignment model's comment), only the active one
  // matters for "who has this right now".
  const assigneeNameByAssetItemId = useMemo(() => {
    const map = new Map<string, string>();
    for (const a of assignments) {
      if (a.returned_at !== null || !a.asset_item_id) continue;
      const name = employeeNameById.get(a.employee_id);
      if (name) map.set(a.asset_item_id, name);
    }
    return map;
  }, [assignments, employeeNameById]);

  // Filtering + pagination both happen server-side now (see the effect
  // above) -- `assetItems` here is already exactly the current page's
  // rows for the active filters, nothing left to compute client-side.

  const [importStatus, setImportStatus] = useState<"idle" | "uploading" | "done" | "error">(
    "idle"
  );
  const [importMessage, setImportMessage] = useState<string | null>(null);

  async function handleImportChange(event: React.ChangeEvent<HTMLInputElement>) {
    const file = event.target.files?.[0];
    event.target.value = ""; // allow re-selecting the same file name after an error
    if (!file) return;

    setImportStatus("uploading");
    setImportMessage(null);
    try {
      const text = await file.text();
      const res = await fetch("/api/assets/import", {
        method: "POST",
        headers: { "Content-Type": "text/csv" },
        body: text,
      });
      const body = await res.json();
      if (!res.ok) {
        setImportStatus("error");
        setImportMessage(body.error ?? "Import thất bại");
        return;
      }
      const errorCount = (body.errors as unknown[] | undefined)?.length ?? 0;
      setImportStatus(errorCount > 0 ? "error" : "done");
      const errorSummary =
        errorCount > 0
          ? " Lỗi: " +
            (body.errors as { row: number; serialNumber: string; error: string }[])
              .slice(0, 5)
              .map((e) => `dòng ${e.row} (${e.serialNumber || "?"}): ${e.error}`)
              .join("; ") +
            (errorCount > 5 ? ` (+${errorCount - 5} lỗi khác)` : "")
          : "";
      setImportMessage(`Tạo mới ${body.created}, cập nhật ${body.updated} asset.` + errorSummary);
      refetch();
    } catch {
      setImportStatus("error");
      setImportMessage("Không đọc được file -- kiểm tra lại định dạng CSV.");
    }
  }

  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setSubmitting(true);
    setSubmitError(null);

    const hasAssetTag = assetTag.trim() !== "";
    const hasWarrantyEndDate = warrantyEndDate.trim() !== "";
    const hasPurchaseOrderId = purchaseOrderId !== NO_PURCHASE_ORDER_VALUE;
    const hasAreaId = areaId !== NO_AREA_VALUE;
    const hasCost = cost.trim() !== "";
    const hasCostCurrency = costCurrency.trim() !== "";
    const hasExternalPoNumber = externalPoNumber.trim() !== "";

    if (hasCost && Number.isNaN(Number(cost))) {
      setSubmitError("Cost must be a number");
      setSubmitting(false);
      return;
    }

    try {
      const response = await fetch("/api/assets", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          serialNumber,
          modelId,
          purchaseDate,
          // Omit optional keys entirely when left blank, rather than
          // sending null — matches the create-form pattern used on other
          // pages (e.g. purchase-orders page's receivedAt/receivedById).
          ...(hasAssetTag ? { assetTag } : {}),
          ...(hasWarrantyEndDate ? { warrantyEndDate } : {}),
          ...(hasPurchaseOrderId ? { purchaseOrderId } : {}),
          ...(hasAreaId ? { areaId } : {}),
          ...(hasCost ? { cost: Number(cost) } : {}),
          ...(hasCostCurrency ? { costCurrency } : {}),
          ...(hasExternalPoNumber ? { externalPoNumber } : {}),
        }),
      });

      let body: unknown;
      try {
        body = await response.json();
      } catch {
        body = null;
      }

      if (!response.ok) {
        const message =
          body !== null &&
          typeof body === "object" &&
          "error" in body &&
          typeof (body as { error: unknown }).error === "string"
            ? (body as { error: string }).error
            : "Request failed";
        setSubmitError(message);
        return;
      }

      setSerialNumber("");
      setAssetTag("");
      setModelId("");
      setPurchaseDate("");
      setWarrantyEndDate("");
      setPurchaseOrderId(NO_PURCHASE_ORDER_VALUE);
      setAreaId(NO_AREA_VALUE);
      setCost("");
      setCostCurrency("");
      setExternalPoNumber("");
      refetch();
    } catch {
      setSubmitError("Request failed");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <div className="flex flex-col gap-8 p-6">
      <h1 className="text-xl font-semibold">Assets</h1>

      <section className="flex flex-col gap-3">
        <div className="flex flex-wrap items-end gap-3">
          <div className="flex flex-col gap-2">
            <Label htmlFor="search">Search (serial / asset tag / assigned to)</Label>
            <Input
              id="search"
              value={searchText}
              onChange={(event) => setSearchText(event.target.value)}
              placeholder="e.g. DANLAP001"
              className="w-64"
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="filterStatus">Status</Label>
            <Select value={filterStatus} onValueChange={setFilterStatus}>
              <SelectTrigger id="filterStatus" className="w-40">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All</SelectItem>
                <SelectItem value="in_stock">in_stock</SelectItem>
                <SelectItem value="assigned">assigned</SelectItem>
                <SelectItem value="repair">repair</SelectItem>
                <SelectItem value="retired">retired</SelectItem>
                <SelectItem value="lost">lost</SelectItem>
              </SelectContent>
            </Select>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="filterCategory">Category</Label>
            <Select value={filterCategoryId} onValueChange={handleFilterCategoryChange}>
              <SelectTrigger id="filterCategory" className="w-52">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All</SelectItem>
                {assetCategories.map((assetCategory) => (
                  <SelectItem key={assetCategory.id} value={assetCategory.id}>
                    {assetCategory.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="filterModel">Model</Label>
            <Select value={filterModelId} onValueChange={setFilterModelId}>
              <SelectTrigger id="filterModel" className="w-64">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All</SelectItem>
                {modelsForCategoryFilter.map((assetModel) => (
                  <SelectItem key={assetModel.id} value={assetModel.id}>
                    {formatModelLabel(assetModel.manufacturer, assetModel.name)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="filterArea">Area</Label>
            <Select value={filterAreaId} onValueChange={setFilterAreaId}>
              <SelectTrigger id="filterArea" className="w-48">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value="all">All</SelectItem>
                {areas.map((area) => (
                  <SelectItem key={area.id} value={area.id}>
                    {area.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <p className="pb-2 text-sm text-muted-foreground">
            {assetItemsTotal === 0
              ? "0 assets"
              : `${(page - 1) * ASSET_ITEMS_PAGE_SIZE + 1}-${Math.min(
                  page * ASSET_ITEMS_PAGE_SIZE,
                  assetItemsTotal
                )} / ${assetItemsTotal} assets`}
          </p>
        </div>

        {loading ? (
          <p className="text-sm text-muted-foreground">Loading...</p>
        ) : error ? (
          <p className="text-sm text-destructive">{error}</p>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>#</TableHead>
                <TableHead>Serial Number</TableHead>
                <TableHead>Asset Tag</TableHead>
                <TableHead>Model</TableHead>
                <TableHead>Area</TableHead>
                <TableHead>Assigned To</TableHead>
                <TableHead>Purchase Date</TableHead>
                <TableHead>Warranty End Date</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Cost</TableHead>
                <TableHead>Purchase Order ID</TableHead>
                <TableHead>External PO Number</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {assetItems.map((assetItem, index) => (
                <TableRow key={assetItem.id}>
                  <TableCell>{(page - 1) * ASSET_ITEMS_PAGE_SIZE + index + 1}</TableCell>
                  <TableCell>{assetItem.serial_number}</TableCell>
                  <TableCell>{assetItem.asset_tag ?? "-"}</TableCell>
                  <TableCell>{modelNameById.get(assetItem.model_id) ?? assetItem.model_id}</TableCell>
                  <TableCell>
                    {assetItem.area_id ? (areaNameById.get(assetItem.area_id) ?? "-") : "-"}
                  </TableCell>
                  <TableCell>{assigneeNameByAssetItemId.get(assetItem.id) ?? "-"}</TableCell>
                  <TableCell>{formatDateMMDDYYYY(assetItem.purchase_date)}</TableCell>
                  <TableCell>{formatDateMMDDYYYY(assetItem.warranty_end_date)}</TableCell>
                  <TableCell>{assetItem.status}</TableCell>
                  <TableCell>
                    {assetItem.cost !== null
                      ? `${assetItem.cost}${assetItem.cost_currency ? " " + assetItem.cost_currency : ""}`
                      : "-"}
                  </TableCell>
                  <TableCell>{assetItem.purchase_order_id ?? "-"}</TableCell>
                  <TableCell>{assetItem.external_po_number ?? "-"}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}

        {!loading && !error && assetItemsTotal > 0 ? (
          <div className="flex items-center gap-3">
            <Button
              type="button"
              variant="outline"
              size="sm"
              disabled={page <= 1}
              onClick={() => setPage((p) => Math.max(1, p - 1))}
            >
              Previous
            </Button>
            <p className="text-sm text-muted-foreground">
              Page {page} / {totalPages}
            </p>
            <Button
              type="button"
              variant="outline"
              size="sm"
              disabled={page >= totalPages}
              onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
            >
              Next
            </Button>
          </div>
        ) : null}
      </section>

      <section className="flex max-w-2xl flex-col gap-3">
        <h2 className="text-lg font-semibold">Import / Export CSV</h2>
        <p className="text-sm text-muted-foreground">
          Cột nhận diện theo tên (không phân biệt hoa/thường): <code>serial number</code>,{" "}
          <code>manufacturer</code>, <code>model</code> (phải khớp Asset Model đã có sẵn ở{" "}
          <a href="/asset-models" className="underline">
            /asset-models
          </a>
          ), <code>purchase date</code> (không bắt buộc -- cũng nhận <code>order received</code>).
          Tuỳ chọn: <code>asset tag</code>, <code>warranty end date</code> (bỏ trống thì tự tính
          từ warranty của model), <code>status</code>/<code>state</code> (nhận{" "}
          <code>In use</code> → assigned, <code>In stock</code> → in_stock, bỏ trống thì mặc định
          in_stock), <code>cost</code>, <code>cost currency</code>,{" "}
          <code>po number</code> (text tự do, khác <code>purchase order id</code> là UUID trong
          hệ thống), <code>area</code> (tên khu vực -- tự tạo mới nếu chưa có, cũng nhận{" "}
          <code>stockroom</code>). Dòng có <code>asset tag</code> hoặc <code>serial number</code>{" "}
          đã tồn tại sẽ <b>cập nhật</b> thay vì báo lỗi trùng -- import lại file mới để đồng bộ dữ
          liệu.
        </p>
        <div className="flex flex-wrap items-center gap-3">
          <a href="/api/assets/export">
            <Button type="button" variant="outline">
              Export CSV
            </Button>
          </a>

          <input
            type="file"
            accept=".csv,text/csv"
            onChange={handleImportChange}
            disabled={importStatus === "uploading"}
            className="hidden"
            id="assets-csv-input"
          />
          <Button asChild>
            <label htmlFor="assets-csv-input" className="cursor-pointer">
              {importStatus === "uploading" ? "Đang import..." : "Import CSV"}
            </label>
          </Button>
        </div>
        {importMessage ? (
          <p
            className={
              importStatus === "error" ? "text-sm text-destructive" : "text-sm text-foreground"
            }
          >
            {importMessage}
          </p>
        ) : null}
      </section>

      <section className="flex max-w-sm flex-col gap-4">
        <h2 className="text-lg font-semibold">New Asset</h2>

        <form className="flex flex-col gap-4" onSubmit={handleSubmit}>
          <div className="flex flex-col gap-2">
            <Label htmlFor="serialNumber">Serial Number</Label>
            <Input
              id="serialNumber"
              value={serialNumber}
              onChange={(event) => setSerialNumber(event.target.value)}
              required
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="assetTag">Asset Tag (optional)</Label>
            <Input
              id="assetTag"
              value={assetTag}
              onChange={(event) => setAssetTag(event.target.value)}
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="modelId">Model</Label>
            <Select value={modelId} onValueChange={setModelId} required>
              <SelectTrigger id="modelId" className="w-full">
                <SelectValue placeholder="Select a model" />
              </SelectTrigger>
              <SelectContent>
                {assetModels.map((assetModel) => (
                  <SelectItem key={assetModel.id} value={assetModel.id}>
                    {formatModelLabel(assetModel.manufacturer, assetModel.name)}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="purchaseDate">Purchase Date</Label>
            <Input
              id="purchaseDate"
              type="date"
              value={purchaseDate}
              onChange={(event) => setPurchaseDate(event.target.value)}
              required
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="warrantyEndDate">Warranty End Date (optional)</Label>
            <Input
              id="warrantyEndDate"
              type="date"
              value={warrantyEndDate}
              onChange={(event) => setWarrantyEndDate(event.target.value)}
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="purchaseOrderId">Purchase Order (optional)</Label>
            <Select value={purchaseOrderId} onValueChange={setPurchaseOrderId}>
              <SelectTrigger id="purchaseOrderId" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NO_PURCHASE_ORDER_VALUE}>None</SelectItem>
                {purchaseOrders.map((purchaseOrder) => (
                  <SelectItem key={purchaseOrder.id} value={purchaseOrder.id}>
                    {purchaseOrder.id}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="areaId">Area (optional)</Label>
            <Select value={areaId} onValueChange={setAreaId}>
              <SelectTrigger id="areaId" className="w-full">
                <SelectValue />
              </SelectTrigger>
              <SelectContent>
                <SelectItem value={NO_AREA_VALUE}>None</SelectItem>
                {areas.map((area) => (
                  <SelectItem key={area.id} value={area.id}>
                    {area.name}
                  </SelectItem>
                ))}
              </SelectContent>
            </Select>
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="cost">Cost (optional)</Label>
            <Input
              id="cost"
              type="number"
              min={0}
              step="0.01"
              value={cost}
              onChange={(event) => setCost(event.target.value)}
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="costCurrency">Cost Currency (optional)</Label>
            <Input
              id="costCurrency"
              value={costCurrency}
              onChange={(event) => setCostCurrency(event.target.value)}
              placeholder="e.g. VND, USD"
            />
          </div>

          <div className="flex flex-col gap-2">
            <Label htmlFor="externalPoNumber">External PO Number (optional)</Label>
            <Input
              id="externalPoNumber"
              value={externalPoNumber}
              onChange={(event) => setExternalPoNumber(event.target.value)}
              placeholder="PO number from an external system, if any"
            />
          </div>

          {submitError ? <p className="text-sm text-destructive">{submitError}</p> : null}

          <Button type="submit" disabled={submitting}>
            {submitting ? "Creating..." : "Create Asset"}
          </Button>
        </form>
      </section>
    </div>
  );
}