/**
 * Base form component for {{ model_name }}.
 *
 * ⚠️ AUTO-GENERATED BY PRISM - DO NOT EDIT
 */

import { type ReactElement } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { useWidgetRegistry } from '../../prism/widgets';
import type { FieldSpec } from '../../prism/widgets/types';
import type { {{ model_name }}Create } from '../../types/generated';

/** Field specifications for {{ model_name }} form */
export const {{ model_name_upper }}_FIELD_SPECS: FieldSpec[] = {{ field_specs }};

export interface {{ model_name }}FormBaseProps {
  /** Form submission handler */
  onSubmit: (data: {{ model_name }}Create) => void | Promise<void>;
  /** Default values for the form */
  defaultValues?: Partial<{{ model_name }}Create>;
  /** Loading state */
  loading?: boolean;
  /** Submit button text */
  submitLabel?: string;
  /** Cancel handler */
  onCancel?: () => void;
}

/**
 * Base form component for creating/editing {{ model_name }}.
 * Extend this in components/{{ kebab_name }}/{{ model_name }}Form.tsx
 */
export function {{ model_name }}FormBase({
  onSubmit,
  defaultValues,
  loading = false,
  submitLabel = 'Save',
  onCancel,
}: {{ model_name }}FormBaseProps): ReactElement {
  const registry = useWidgetRegistry();
  const {
    control,
    handleSubmit,
    formState: { errors },
  } = useForm<{{ model_name }}Create>({ defaultValues });

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
      {{ "{" }}{{ model_name_upper }}_FIELD_SPECS.map((field) => {
        const Widget = registry.resolve(
          '{{ model_name }}',
          field.name,
          field.type,
          field.uiWidget
        );

        return (
          <Controller
            key={field.name}
            name={field.name as keyof {{ model_name }}Create}
            control={control}
            rules={{ "{{" }} required: field.required {{ "}}" }}
            render={({ field: { onChange, value } }) => (
              <Widget
                name={field.name}
                value={value}
                onChange={onChange}
                label={field.displayName ?? field.name}
                description={field.description}
                placeholder={field.placeholder}
                required={field.required}
                disabled={loading}
                error={errors[field.name as keyof {{ model_name }}Create]?.message as string | undefined}
                options={field.enumValues}
                references={field.references}
                {...field.widgetProps}
              />
            )}
          />
        );
      })}

      <div className="flex items-center justify-end gap-3 pt-4 border-t border-nordic-100">
        {onCancel && (
          <button
            type="button"
            onClick={onCancel}
            disabled={loading}
            className="btn-secondary"
          >
            Cancel
          </button>
        )}
        <button type="submit" disabled={loading} className="btn-primary">
          {loading ? (
            <span className="flex items-center gap-2">
              <svg className="animate-spin w-4 h-4" fill="none" viewBox="0 0 24 24">
                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
              </svg>
              Saving...
            </span>
          ) : submitLabel}
        </button>
      </div>
    </form>
  );
}
