import { useTranslation } from 'react-i18next';
import { HelpText } from './HelpText';
import { FieldLabel, FieldInput } from './formUtils';
import type { SectionFormProps } from './types';

/**
 * Shared Knowledge Notes injection budget (`notes.inject.*`). Controls how much
 * of a subscribed note is injected into the agent's context per job.
 */
export function NotesForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const inject = config.notes?.inject ?? {};

  return (
    <div className="space-y-5">
      <h2 className="text-base font-semibold text-slate-800">Notes Injection</h2>
      <p className="text-[13px] text-slate-500">
        {t('notes.intro')}
      </p>

      <div>
        <FieldLabel>Per-Note Max (KB)</FieldLabel>
        <FieldInput type="number" value={inject.perNoteMaxKb ?? ''}
          onChange={v => onChange('notes.inject.perNoteMaxKb', v ? Number(v) : undefined)} />
        <HelpText>{t('notes.perNoteHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Total Max (KB)</FieldLabel>
        <FieldInput type="number" value={inject.totalMaxKb ?? ''}
          onChange={v => onChange('notes.inject.totalMaxKb', v ? Number(v) : undefined)} />
        <HelpText>{t('notes.totalHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('notes.overBudgetLabel')}</FieldLabel>
        <select
          value={inject.overBudgetStrategy ?? 'skip_remaining'}
          onChange={e => onChange('notes.inject.overBudgetStrategy', e.target.value)}
          className="w-full h-8 px-2 text-[13px] border border-hairline rounded-md bg-canvas focus:ring-2 focus:ring-accent-ring focus:border-accent outline-none transition-shadow"
        >
          <option value="skip_remaining">{t('notes.skipRemaining')}</option>
          <option value="truncate_last">{t('notes.truncateLast')}</option>
          <option value="degrade_to_search">{t('notes.degradeToSearch')}</option>
        </select>
        <HelpText>{t('notes.overBudgetHelp')}</HelpText>
      </div>
    </div>
  );
}
