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

/**
 * Server-side Web Push (V2) config (`notifications.push.*`): VAPID identity +
 * delivery tuning. This is the ADMIN counterpart to the per-user browser
 * subscription UI in NotificationsForm (which only manages this device's
 * subscription, not whether the server feature is enabled at all).
 */
export function PushNotificationsForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const push = config.notifications?.push ?? {};

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

      <div>
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input
            type="checkbox"
            checked={push.enabled === true}
            onChange={e => onChange('notifications.push.enabled', e.target.checked)}
            className="rounded"
          />
          {t('pushNotifications.enableLabel')}
        </label>
        <HelpText>{t('pushNotifications.enableHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('pushNotifications.subjectLabel')}</FieldLabel>
        <FieldInput value={push.vapidSubject ?? ''} placeholder="https://example.com/"
          onChange={v => onChange('notifications.push.vapidSubject', v || undefined)} />
        <HelpText>{t('pushNotifications.subjectHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('pushNotifications.currentPathLabel')}</FieldLabel>
        <FieldInput value={push.vapidCurrentPath ?? ''} placeholder="./data/secrets/vapid.json"
          onChange={v => onChange('notifications.push.vapidCurrentPath', v || undefined)} />
        <HelpText>{t('pushNotifications.currentPathHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('pushNotifications.historyDirLabel')}</FieldLabel>
        <FieldInput value={push.vapidHistoryDir ?? ''} placeholder="./data/secrets/vapid-history"
          onChange={v => onChange('notifications.push.vapidHistoryDir', v || undefined)} />
        <HelpText>{t('pushNotifications.historyDirHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('pushNotifications.payloadMaxLabel')}</FieldLabel>
        <FieldInput type="number" value={push.payloadMaxBytes ?? ''}
          onChange={v => onChange('notifications.push.payloadMaxBytes', v ? Number(v) : undefined)} />
        <HelpText>{t('pushNotifications.payloadMaxHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('pushNotifications.queueConcurrencyLabel')}</FieldLabel>
        <FieldInput type="number" value={push.queueConcurrency ?? ''}
          onChange={v => onChange('notifications.push.queueConcurrency', v ? Number(v) : undefined)} />
        <HelpText>{t('pushNotifications.queueConcurrencyHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('pushNotifications.perSendTimeoutLabel')}</FieldLabel>
        <FieldInput type="number" value={push.perSendTimeoutMs ?? ''}
          onChange={v => onChange('notifications.push.perSendTimeoutMs', v ? Number(v) : undefined)} />
        <HelpText>{t('pushNotifications.perSendTimeoutHelp')}</HelpText>
      </div>
    </div>
  );
}
