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 auth = config.auth ?? {};
  const providers = auth.providers ?? {};
  const google = providers.google ?? {};
  const gitea = providers.gitea ?? {};

  return (
    <div className="space-y-5">
      <h2 className="text-base font-semibold text-slate-800">Authentication</h2>
      <p className="text-[13px] text-slate-500">
        ログイン認証。providers を未設定にすると <strong>認証なし（全員ローカル admin）</strong>で動作する。
        変更後はサーバ再起動が必要。
      </p>

      <div>
        <FieldLabel>Primary Provider</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="">（指定なし・両方有効）</option>
          <option value="google">google のみ</option>
          <option value="gitea">gitea のみ</option>
        </select>
        <HelpText>単一プロバイダーに限定する場合に指定。未指定なら設定済みの全プロバイダーでログイン可</HelpText>
      </div>

      <div>
        <FieldLabel>Admin Emails</FieldLabel>
        <StringArrayEditor
          value={auth.adminEmails ?? []}
          onChange={v => onChange('auth.adminEmails', v)}
          placeholder="admin@example.com"
        />
        <HelpText>admin ロールを付与するメールアドレス</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" />
          Secure Cookie（HTTPS のみで Cookie 送信）
        </label>
        <HelpText>本番（HTTPS）では有効推奨。HTTP のローカル開発では無効</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>セッションの有効期間（ミリ秒）</HelpText>
      </div>

      <div>
        <FieldLabel>Session Secret</FieldLabel>
        <FieldInput type="password" value={auth.sessionSecret ?? ''}
          onChange={v => onChange('auth.sessionSecret', v)} />
        <HelpText>セッション署名鍵。十分長いランダム文字列を設定（保存後はマスク表示）</HelpText>
      </div>

      <h3 className="text-sm font-medium text-slate-600 mt-4 pt-3 border-t border-slate-200">Google OAuth</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">Gitea OAuth</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>
  );
}
