'use client';

import dynamic from 'next/dynamic';
import type { Control, FieldValues } from 'react-hook-form';

// Lazy-load @hookform/devtools only when actually rendered. The
// `process.env.NODE_ENV` guard below ensures we never hit this path in
// production, so Next.js' code splitter keeps the devtools chunk out of
// the prod bundle entirely.
const DevTool = dynamic(() => import('@hookform/devtools').then((m) => ({ default: m.DevTool })), {
  ssr: false,
});

/**
 * Floating react-hook-form state inspector. Shows live values, errors,
 * touched/dirty state. Rendered only in development.
 *
 * Usage in any form component:
 *
 *   const form = useForm({ resolver: zodResolver(schema) });
 *   ...
 *   <form onSubmit={form.handleSubmit(onSubmit)}>
 *     <FormDevtool control={form.control} />
 *     {fields}
 *   </form>
 */
export function FormDevtool<T extends FieldValues>({ control }: { control: Control<T> }) {
  if (process.env.NODE_ENV !== 'development') return null;
  // Cast: @hookform/devtools types Control as the v6 shape; ours is v7+.
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  return <DevTool control={control as any} placement="bottom-right" />;
}