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

/**
 * Skill Quotas — per-user skill store limits (`skills.*`).
 *
 * These caps bound how many skills a user can install and how large the
 * store may grow. They exist in the config schema (SkillsConfig) but were
 * previously only editable via config.yaml. (Distinct from the SkillsForm
 * panel under User Folder, which is the skill *store* browser/editor.)
 */
export function SkillsQuotaForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const skills = config.skills ?? {};

  return (
    <div className="space-y-5">
      <h2 className="text-base font-semibold text-slate-800">{t('skillsQuota.title')}</h2>
      <HelpText>{t('skillsQuota.intro')}</HelpText>

      <div>
        <FieldLabel>Max Per User</FieldLabel>
        <FieldInput type="number" value={skills.maxPerUser ?? 50}
          onChange={v => onChange('skills.maxPerUser', v === '' ? undefined : Number(v))} />
        <HelpText>{t('skillsQuota.maxPerUserHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Max Skill Size (KB)</FieldLabel>
        <FieldInput type="number" value={skills.maxSkillSizeKb ?? 64}
          onChange={v => onChange('skills.maxSkillSizeKb', v === '' ? undefined : Number(v))} />
        <HelpText>{t('skillsQuota.maxSkillSizeHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Max Total Size (MB)</FieldLabel>
        <FieldInput type="number" value={skills.maxTotalSizeMb ?? 5}
          onChange={v => onChange('skills.maxTotalSizeMb', v === '' ? undefined : Number(v))} />
        <HelpText>{t('skillsQuota.maxTotalSizeHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Max System Skills</FieldLabel>
        <FieldInput type="number" value={skills.maxSystemSkills ?? 100}
          onChange={v => onChange('skills.maxSystemSkills', v === '' ? undefined : Number(v))} />
        <HelpText>{t('skillsQuota.maxSystemSkillsHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Max Index Chars</FieldLabel>
        <FieldInput type="number" value={skills.maxIndexChars ?? 2000}
          onChange={v => onChange('skills.maxIndexChars', v === '' ? undefined : Number(v))} />
        <HelpText>{t('skillsQuota.maxIndexCharsHelp')}</HelpText>
      </div>
    </div>
  );
}