shoc-frontend-new/src/app/(protected)/completion-docs/_components/completion-template-form.tsx

import { Controller, type UseFormReturn } from "react-hook-form";
import { FormField } from "@/components/ui/form-field";
import { TextField } from "@/components/ui/text-field";
import type { CompletionTemplateFormValues } from "@/domain/completion-templates/schemas/completion-template-schema";
import { CompletionTemplateProceduresEditor } from "./completion-template-procedures-editor";
import { CompletionTemplateSafetyNoteField } from "./completion-template-safety-note-field";
import {
  AutoPopulatedFields,
  FieldLabel,
  SectionTitle,
  StandardSafetyBullets,
} from "./completion-template-sections";

type CompletionTemplateFormProps = {
  form: UseFormReturn<CompletionTemplateFormValues>;
};

function TitleField({ form }: CompletionTemplateFormProps) {
  return (
    <Controller
      control={form.control}
      name="name"
      render={({ field, fieldState }) => (
        <FormField
          label="Document Title"
          htmlFor="completion-template-title"
          required
          error={fieldState.error !== undefined}
          helperText={fieldState.error?.message}
        >
          <TextField
            id="completion-template-title"
            value={field.value}
            onChange={field.onChange}
            onBlur={field.onBlur}
            inputRef={field.ref}
            placeholder="Completion document title"
            error={fieldState.error !== undefined}
          />
        </FormField>
      )}
    />
  );
}

/** The editable template: title, fixed references, the optional note and procedures. */
export function CompletionTemplateForm({ form }: CompletionTemplateFormProps) {
  return (
    <div className="grid gap-3.5">
      <SectionTitle>Completion Document</SectionTitle>
      <TitleField form={form} />
      <AutoPopulatedFields />
      <div className="grid gap-1">
        <FieldLabel>Safety Notes</FieldLabel>
        <StandardSafetyBullets />
        <CompletionTemplateSafetyNoteField form={form} />
      </div>
      <div>
        <FieldLabel hint="(optional)">Procedures</FieldLabel>
        <CompletionTemplateProceduresEditor form={form} />
      </div>
    </div>
  );
}