import { useState } from 'react';
import { useTranslation } from 'react-i18next';

import { PasswordSection } from '@/pages/settings/PasswordSection';
import { SessionsSection } from '@/pages/settings/SessionsSection';
import { TwoFactorSection } from '@/pages/settings/TwoFactorSection';

/**
 * Безопасность: смена пароля со step-up, список сессий с выходом на всех
 * устройствах и включение 2FA с показом секрета и кодов восстановления.
 *
 * Контракт Фазы 1 не отдаёт флаг включённой 2FA в `GET /users/@me`, поэтому
 * состояние «2FA включена» ведём локально: после успешного `2fa/enable`
 * формы запрашивают код подтверждения.
 */
export default function SecuritySettingsPage() {
  const { t } = useTranslation();
  const [twoFactorEnabled, setTwoFactorEnabled] = useState(false);

  return (
    <div className="flex flex-col gap-5">
      <header>
        <h2 className="text-lg font-semibold">{t('settings.security.title')}</h2>
        <p className="mt-1 text-sm text-fg-muted">{t('settings.security.description')}</p>
      </header>
      <PasswordSection twoFactorEnabled={twoFactorEnabled} />
      <SessionsSection />
      <TwoFactorSection enabled={twoFactorEnabled} onEnabled={() => setTwoFactorEnabled(true)} />
    </div>
  );
}