biggus-dickus/web/src/objects/object-detail.tsx

import type { ReactNode } from "react";
import { Link, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";

import type { components } from "../api/schema";
import { useObject, useFieldDefinitions } from "../api/queries";
import { useLang } from "../lib/use-lang";
import { groupDefinitions } from "../lib/group-fields";
import { formatDate } from "../lib/format-date";
import { useDocumentTitle } from "../lib/use-document-title";
import { useBreadcrumb } from "../shell/use-breadcrumb";
import { DeleteObjectDialog } from "./delete-object-dialog";
import { FlexibleFieldValue } from "./flexible-field-value";
import { PublishControl } from "./publish-control";
import { VisibilityBadge } from "./visibility-badge";
import { buttonVariants } from "@/components/ui/button";
import { Skeleton } from "@/components/ui/skeleton";

type AdminObjectView = components["schemas"]["AdminObjectView"];

function Field({ label, value }: { label: string; value: ReactNode }) {
  const empty = value === null || value === undefined || value === "";

  return (
    <div className="border-b py-2">
      <div className="label-caption">{label}</div>
      <div className="text-sm text-foreground">{empty ? "—" : value}</div>
    </div>
  );
}

export function ObjectDetail() {
  const { t } = useTranslation();
  const { id } = useParams();
  const { data: object, isLoading, isError } = useObject(id!);

  if (isLoading) {
    return (
      <div className="p-4">
        <Skeleton className="h-40 w-full" />
      </div>
    );
  }

  if (isError) return <p className="p-4 text-sm text-destructive">{t("objects.loadError")}</p>;

  if (!object) return <p className="p-4 text-sm text-muted-foreground">{t("objects.notFound")}</p>;

  return <ObjectDetailLoaded object={object} />;
}

function ObjectDetailLoaded({ object }: { object: AdminObjectView }) {
  const { t } = useTranslation();
  const { data: definitions } = useFieldDefinitions();

  useDocumentTitle(object.object_number);
  useBreadcrumb([{ label: t("nav.objects"), to: "/objects" }, { label: object.object_number }]);

  // Prefer the active locale's label, then English, then the raw key.
  const lang = useLang();
  const labelFor = (key: string) => {
    const labels = definitions?.find((d) => d.key === key)?.labels;
    const byLang = labels?.find((l) => l.lang === lang)?.label;
    const byEnglish = labels?.find((l) => l.lang === "en")?.label;

    return byLang ?? byEnglish ?? key;
  };

  // Iterate definitions (stable order) and keep only defs whose key has a
  // non-null value on this object, grouped by def.group. Ungrouped defs fall
  // into a trailing "Other" group.
  const other = t("fields.other");
  const present = (definitions ?? []).filter((d) => object.fields[d.key] != null);
  const groups = groupDefinitions(present, other);

  // Defensive: a key present in object.fields with no matching definition (e.g. a
  // definition removed after the value was set). Render it muted under "Other"
  // rather than silently dropping data; the raw key is the label.
  const definedKeys = new Set((definitions ?? []).map((d) => d.key));
  const orphans = Object.entries(object.fields).filter(
    ([key, value]) => !definedKeys.has(key) && value != null,
  );

  if (orphans.length > 0 && !groups.some((g) => g.group === other)) {
    groups.push({ group: other, defs: [] });
  }

  return (
    <div className="overflow-auto p-4">
      <div className="mb-4 flex items-center gap-3">
        <h2 className="text-xl font-semibold">{object.object_name}</h2>
        <VisibilityBadge visibility={object.visibility} />
        <div className="ml-auto flex items-center gap-2">
          <Link to={`/objects/${object.id}/edit`} className={buttonVariants({ size: "sm" })}>
            {t("actions.edit")}
          </Link>
          <DeleteObjectDialog id={object.id} />
        </div>
      </div>
      <Field label={t("fieldsLabels.objectNumber")} value={object.object_number} />
      <Field label={t("fieldsLabels.count")} value={object.number_of_objects} />
      <Field label={t("fieldsLabels.briefDescription")} value={object.brief_description} />
      <Field label={t("fieldsLabels.currentLocation")} value={object.current_location} />
      <Field label={t("fieldsLabels.currentOwner")} value={object.current_owner} />
      <Field label={t("fieldsLabels.recorder")} value={object.recorder} />
      <Field
        label={t("fieldsLabels.recordingDate")}
        value={object.recording_date ? formatDate(object.recording_date, lang) : null}
      />
      {groups.map((g) => (
        <div key={g.group} className="mt-4">
          <div className="mb-1 label-caption">{g.group}</div>
          {g.defs.map((d) => (
            <Field
              key={d.key}
              label={labelFor(d.key)}
              value={<FlexibleFieldValue def={d} value={object.fields[d.key]} lang={lang} />}
            />
          ))}
          {g.group === other &&
            orphans.map(([key, value]) => (
              <Field
                key={key}
                label={key}
                value={
                  <span className="text-muted-foreground">
                    {typeof value === "object" ? JSON.stringify(value) : String(value)}
                  </span>
                }
              />
            ))}
        </div>
      ))}
      <PublishControl object={object} />
    </div>
  );
}