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

/**
 * Authentication config (`auth.*`): session policy, admin allowlist, and the
 * Google / Gitea OAuth providers. Secrets (session secret, client secrets) are
 * server-masked (config-manager SENSITIVE_PATHS) — they render as ******** and
 * saving without re-entering keeps the stored value.
 *
 * Leaving the whole `auth` block empty (no providers) keeps the app in no-auth
 * mode — every visitor is treated as a local admin.
 */
export function AuthForm({ config, onChange }: SectionFormProps) {
  const { t } = useTranslation('settings');
  const auth = config.auth ?? {};
  const providers = auth.providers ?? {};
  const google = providers.google ?? {};
  const gitea = providers.gitea ?? {};
  const local = auth.local ?? {};

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

      <div>
        <FieldLabel>{t('auth.primaryProvider')}</FieldLabel>
        <select
          value={auth.primaryProvider ?? ''}
          onChange={e => onChange('auth.primaryProvider', 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="">{t('auth.primaryNone')}</option>
          <option value="google">{t('auth.primaryGoogle')}</option>
          <option value="gitea">{t('auth.primaryGitea')}</option>
          <option value="local">{t('auth.primaryLocal')}</option>
        </select>
        <HelpText>{t('auth.primaryHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>{t('auth.adminEmails')}</FieldLabel>
        <StringArrayEditor
          value={auth.adminEmails ?? []}
          onChange={v => onChange('auth.adminEmails', v)}
          placeholder="admin@example.com"
        />
        <HelpText>{t('auth.adminEmailsHelp')}</HelpText>
      </div>

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

      <div>
        <FieldLabel>Session Max Age (ms)</FieldLabel>
        <FieldInput type="number" value={auth.sessionMaxAge ?? ''}
          onChange={v => onChange('auth.sessionMaxAge', v ? Number(v) : undefined)} />
        <HelpText>{t('auth.sessionMaxAgeHelp')}</HelpText>
      </div>

      <div>
        <FieldLabel>Session Secret</FieldLabel>
        <FieldInput type="password" value={auth.sessionSecret ?? ''}
          onChange={v => onChange('auth.sessionSecret', v)} />
        <HelpText>{t('auth.sessionSecretHelp')}</HelpText>
      </div>

      <h3 className="text-sm font-medium text-slate-600 mt-4 pt-3 border-t border-slate-200">{t('auth.localTitle')}</h3>
      <div>
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input type="checkbox" checked={local.enabled === true}
            onChange={e => onChange('auth.local.enabled', e.target.checked)} className="rounded" />
          {t('auth.localEnable')}
        </label>
        <HelpText>{t('auth.localEnableHelp')}</HelpText>
      </div>
      <div>
        <label className="flex items-center gap-2 text-sm text-slate-700">
          <input type="checkbox" checked={local.allowSignup === true}
            onChange={e => onChange('auth.local.allowSignup', e.target.checked)} className="rounded" />
          {t('auth.allowSignup')}
        </label>
        <HelpText>{t('auth.allowSignupHelp')}</HelpText>
      </div>
      <HelpText>
        {t('auth.bootstrapHelp')}
      </HelpText>

      <h3 className="text-sm font-medium text-slate-600 mt-4 pt-3 border-t border-slate-200">{t('auth.googleTitle')}</h3>
      <div>
        <FieldLabel>Client ID</FieldLabel>
        <FieldInput value={google.clientId ?? ''}
          onChange={v => onChange('auth.providers.google.clientId', v)} />
      </div>
      <div>
        <FieldLabel>Client Secret</FieldLabel>
        <FieldInput type="password" value={google.clientSecret ?? ''}
          onChange={v => onChange('auth.providers.google.clientSecret', v)} />
      </div>
      <div>
        <FieldLabel>Callback URL</FieldLabel>
        <FieldInput value={google.callbackUrl ?? ''} placeholder="https://example.com/auth/google/callback"
          onChange={v => onChange('auth.providers.google.callbackUrl', v)} />
      </div>

      <h3 className="text-sm font-medium text-slate-600 mt-4 pt-3 border-t border-slate-200">{t('auth.giteaTitle')}</h3>
      <div>
        <FieldLabel>Base URL</FieldLabel>
        <FieldInput value={gitea.baseUrl ?? ''} placeholder="https://gitea.example.com"
          onChange={v => onChange('auth.providers.gitea.baseUrl', v)} />
      </div>
      <div>
        <FieldLabel>Client ID</FieldLabel>
        <FieldInput value={gitea.clientId ?? ''}
          onChange={v => onChange('auth.providers.gitea.clientId', v)} />
      </div>
      <div>
        <FieldLabel>Client Secret</FieldLabel>
        <FieldInput type="password" value={gitea.clientSecret ?? ''}
          onChange={v => onChange('auth.providers.gitea.clientSecret', v)} />
      </div>
      <div>
        <FieldLabel>Callback URL</FieldLabel>
        <FieldInput value={gitea.callbackUrl ?? ''} placeholder="https://example.com/auth/gitea/callback"
          onChange={v => onChange('auth.providers.gitea.callbackUrl', v)} />
      </div>
    </div>
  );
}
