{field.help && <Help id={helpId!}>{field.help}</Help>}
        {errorMsg && <ErrorText id={errorId!}>{errorMsg}</ErrorText>}
      </div>
    );
  }

// ── Select ──────────────────────────────────────────────────────────────
  if (field.type === "select") {
    return (
      <div className="space-y-1">
        <Label id={id} field={field} />
        <select
          id={id}
          aria-describedby={describedBy}
          aria-invalid={errorMsg ? true : undefined}
          aria-required={field.required || undefined}
          {...register(field.name, { required: requiredOpt })}
          className={baseInputClass}
          defaultValue=""
        >
          <option value="" disabled>
            Select…
          </option>
          {effectiveOptions.map((o) => (
            <option key={o.value} value={o.value}>
              {o.label}
            </option>
          ))}
        </select>
        {field.help && <Help id={helpId!}>{field.help}</Help>}
        {errorMsg && <ErrorText id={errorId!}>{errorMsg}</ErrorText>}
      </div>
    );
  }

// ── Multiselect (rendered as a checkbox group) ─────────────────────────
  if (field.type === "multiselect") {
    return (
      <fieldset
        aria-describedby={describedBy}
        aria-invalid={errorMsg ? true : undefined}
        className="space-y-2"
      >
        <legend className="block text-sm font-medium text-ink">
          {field.label}
          {field.required && <RequiredMark />}
        </legend>
        <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
          {effectiveOptions.map((o, idx) => {
            const optId = `${id}-${idx}`;
            return (
              <label
                key={o.value}
                htmlFor={optId}
                className="flex items-start gap-2 rounded border border-rule bg-paper px-3 py-2 hover:bg-paper-2/60 cursor-pointer transition-colors"
              >
                <input
                  id={optId}
                  type="checkbox"
                  value={o.value}
                  {...register(field.name)}
                  className="mt-0.5 h-4 w-4 rounded border-rule text-leaf-700 focus:ring-2 focus:ring-leaf-500/40"
                />
                <span className="text-sm text-ink-soft">{o.label}</span>
              </label>
            );
          })}
        </div>
        {field.help && <Help id={helpId!}>{field.help}</Help>}
        {errorMsg && <ErrorText id={errorId!}>{errorMsg}</ErrorText>}
      </fieldset>
    );
  }

// ── File ────────────────────────────────────────────────────────────────
  if (field.type === "file") {
    return (
      <FileField
        field={field}
        id={id}
        helpId={helpId}
        errorId={errorId}
        errorMsg={errorMsg}
        describedBy={describedBy}
        control={control}
        setValue={setValue}
        cid={cid}
        cs={cs}
        onUploadStateChange={onUploadStateChange}
        register={register}
        requiredOpt={requiredOpt}
      />
    );
  }

// ── Numeric family: number / currency / percent ─────────────────────────
  if (field.type === "number" || field.type === "currency" || field.type === "percent") {
    const prefix = field.type === "currency" ? "$" : null;
    const suffix = field.type === "percent" ? "%" : null;
    return (
      <div className="space-y-1">
        <Label id={id} field={field} />
        <div className="relative">
          {prefix && (
            <span
              aria-hidden
              className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-ink-mute"
            >
              {prefix}
            </span>
          )}
          <input
            id={id}
            type="number"
            inputMode="decimal"
            aria-describedby={describedBy}
            aria-invalid={errorMsg ? true : undefined}
            aria-required={field.required || undefined}
            placeholder={field.placeholder}
            step={field.step ?? (field.type === "number" ? 1 : 0.01)}
            min={field.min}
            max={field.max}
            {...register(field.name, {
              required: requiredOpt,
              valueAsNumber: true,
            })}
            className={
              baseInputClass +
              " tabular-nums" +
              (prefix ? " pl-7" : "") +
              (suffix ? " pr-8" : "")
            }
          />
          {suffix && (
            <span
              aria-hidden
              className="pointer-events-none absolute right-3 top-1/2 -translate-y-1/2 text-ink-mute"
            >
              {suffix}
            </span>
          )}
        </div>
        {field.type === "currency" && (
          <CurrencyPreview control={control} name={field.name} />
        )}
        {field.help && <Help id={helpId!}>{field.help}</Help>}
        {errorMsg && <ErrorText id={errorId!}>{errorMsg}</ErrorText>}
      </div>
    );
  }

// ── Date ────────────────────────────────────────────────────────────────
  if (field.type === "date") {
    const dateMin = typeof field.min === "string" ? field.min : DATE_MIN_DEFAULT;
    const dateMax = typeof field.max === "string" ? field.max : DATE_MAX_DEFAULT;
    return (
      <div className="space-y-1">
        <Label id={id} field={field} />
        <input
          id={id}
          type="date"
          aria-describedby={describedBy}
          aria-invalid={errorMsg ? true : undefined}
          aria-required={field.required || undefined}
          min={dateMin}
          max={dateMax}
          {...register(field.name, { required: requiredOpt })}
          className={baseInputClass}
        />
        {field.help && <Help id={helpId!}>{field.help}</Help>}
        {errorMsg && <ErrorText id={errorId!}>{errorMsg}</ErrorText>}
      </div>
    );
  }

// ── Default: text-like (text / email / phone) ───────────────────────────
  const inputType =
    field.type === "email" ? "email" :
    field.type === "phone" ? "tel" :
    "text";

return (
    <div className="space-y-1">
      <Label id={id} field={field} />
      <input
        id={id}
        type={inputType}
        aria-describedby={describedBy}
        aria-invalid={errorMsg ? true : undefined}
        aria-required={field.required || undefined}
        placeholder={field.placeholder}
        maxLength={field.maxLength}
        autoComplete={
          field.type === "email" ? "email" :
          field.type === "phone" ? "tel" :
          undefined
        }
        {...register(field.name, { required: requiredOpt })}
        className={baseInputClass}
      />
      {field.help && <Help id={helpId!}>{field.help}</Help>}
      {errorMsg && <ErrorText id={errorId!}>{errorMsg}</ErrorText>}
    </div>
  );
}

const currencyFmt = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
  maximumFractionDigits: 2,
});

/**
 * For file fields: detects whether a previously-uploaded attachment is
 * carried in this field's prefill value (RHF state) and surfaces a small
 * banner with a paperclip glyph. Falls silent once the user picks a new
 * file (RHF value becomes a FileList) so it doesn't contradict their
 * fresh upload. Filename is derived from whatever shape Civi returned —
 * a bare string filename, an object with `file_name`/`name`/`label`, or
 * a numeric file id (in which case we render a generic message).
 */
function FilePriorIndicator({
  control,
  name,
}: {
  control: Control<FieldValues>;
  name: string;
}) {
  const value = useWatch({ control, name });
  if (value === null || value === undefined || value === "") return null;
  // A FileList means the user has just picked a new file — they don't
  // need a reminder about what *used* to be on file.
  if (typeof FileList !== "undefined" && value instanceof FileList) return null;

let filename: string | null = null;
  if (typeof value === "string") {
    filename = value;
  } else if (typeof value === "object" && value !== null) {
    const o = value as Record<string, unknown>;
    const cand = o.file_name ?? o.name ?? o.label ?? o.filename;
    if (typeof cand === "string") filename = cand;
  }

return (
    <div
      role="status"
      aria-live="polite"
      className="flex items-start gap-2 rounded-md border border-rule-soft bg-leaf-50/60 px-3 py-2 text-xs"
    >
      <svg
        aria-hidden
        viewBox="0 0 16 16"
        fill="none"
        stroke="currentColor"
        strokeWidth="1.5"
        strokeLinecap="round"
        strokeLinejoin="round"
        className="mt-[1px] h-3.5 w-3.5 flex-shrink-0 text-leaf-700"
      >
        <path d="M11.5 4.5 L6 10 a2 2 0 1 0 2.83 2.83 L13.5 7.5 a3.5 3.5 0 0 0 -4.95 -4.95 L3.5 7.5" />
      </svg>
      <span className="text-ink-soft leading-snug">
        Attachment on file
        {filename ? (
          <>
            : <span className="font-medium text-ink break-all">{filename}</span>
          </>
        ) : null}
        . Choose a new file below to replace it, or leave blank to keep it.
      </span>
    </div>
  );
}

/**
 * Upload-on-pick file field. The moment the user selects a file the
 * browser sends it to /api/upload; on success we replace RHF state with
 * the returned {id, file_name}. That same shape is what submit serializes
 * and what the prefill path produces for prior attachments — so the rest
 * of the pipeline doesn't care whether the value originated as prefill
 * or as a fresh upload.
 *
 * The native <input type="file"> is intentionally NOT register()'d here:
 * its `value` is a FileList that doesn't survive JSON.stringify, which is
 * the whole bug we're closing. We manage state manually via setValue.
 */
function FileField({
  field,
  id,
  helpId,
  errorId,
  errorMsg,
  describedBy,
  control,
  setValue,
  cid,
  cs,
  onUploadStateChange,
}: {
  field: FieldConfig;
  id: string;
  helpId?: string;
  errorId?: string;
  errorMsg?: string;
  describedBy?: string;
  control: Control<FieldValues>;
  setValue: UseFormSetValue<FieldValues>;
  cid: string;
  cs: string;
  onUploadStateChange?: (delta: 1 | -1) => void;
  register: UseFormRegister<FieldValues>;
  requiredOpt: string | false;
}) {
  const [uploading, setUploading] = useState(false);
  const [uploadError, setUploadError] = useState<string | null>(null);
  // Target Civi field reference — whichever side this field maps to.
  const fieldRef = field.civiField ?? field.civiContactField ?? "";

async function handlePick(e: React.ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (!file) return;

setUploadError(null);
    setUploading(true);
    onUploadStateChange?.(1);

const fd = new FormData();
    fd.set("file", file);
    fd.set("cid", cid);
    fd.set("cs", cs);
    fd.set("fieldRef", fieldRef);

try {
      const res = await fetch("/api/upload", { method: "POST", body: fd });
      const json = (await res.json().catch(() => ({}))) as {
        id?: number;
        file_name?: string;
        error?: string;
      };
      if (!res.ok) {
        setUploadError(json.error ?? `Upload failed (HTTP ${res.status}).`);
        // Reset the file input so the user can retry the same file.
        e.target.value = "";
      } else if (json.id != null && json.file_name) {
        setValue(field.name, { id: json.id, file_name: json.file_name }, {
          shouldDirty: true,
          shouldValidate: true,
        });
      } else {
        setUploadError("Upload succeeded but no file id was returned.");
      }
    } catch (err) {
      setUploadError(err instanceof Error ? err.message : "Upload network error.");
      e.target.value = "";
    } finally {
      setUploading(false);
      onUploadStateChange?.(-1);
    }
  }

return (
    <div className="space-y-1.5">
      <Label id={id} field={field} />
      <FilePriorIndicator control={control} name={field.name} />
      <input
        id={id}
        type="file"
        disabled={uploading}
        aria-describedby={describedBy}
        aria-invalid={errorMsg || uploadError ? true : undefined}
        aria-required={field.required || undefined}
        onChange={handlePick}
        className="block w-full text-sm text-ink-soft file:mr-3 file:rounded-md file:border-0 file:bg-leaf-100 file:px-3 file:py-2 file:text-leaf-800 file:text-sm file:font-medium hover:file:bg-leaf-200 cursor-pointer transition disabled:cursor-wait disabled:opacity-60"
      />
      {uploading && (
        <p role="status" aria-live="polite" className="text-xs text-ink-soft">
          Uploading…
        </p>
      )}
      {field.help && <Help id={helpId!}>{field.help}</Help>}
      {uploadError && <ErrorText id={errorId ?? `${id}-error`}>{uploadError}</ErrorText>}
      {!uploadError && errorMsg && <ErrorText id={errorId!}>{errorMsg}</ErrorText>}
    </div>
  );
}

function Label({ id, field }: { id: string; field: FieldConfig }) {
  return (
    <label htmlFor={id} className="block text-sm font-medium text-ink">
      {field.label}
      {field.required && <RequiredMark />}
    </label>
  );
}

function RequiredMark() {
  return (
    <span aria-label="required" className="ml-1 text-clay-700">
      *
    </span>
  );
}

function Help({ id, children }: { id: string; children: React.ReactNode }) {
  return (
    <p id={id} className="text-xs text-ink-mute leading-relaxed">
      {children}
    </p>
  );
}

function ErrorText({ id, children }: { id: string; children: React.ReactNode }) {
  return (
    <p id={id} role="alert" className="text-xs font-medium text-clay-700">
      {children}
    </p>
  );
}