const SecuritySection = () => {
  const { user, refresh } = useSession();
  const [pwOpen, setPwOpen] = React.useState(false);
  const [emailOpen, setEmailOpen] = React.useState(false);
  const [saved, setSaved] = React.useState('');

  const flash = (msg) => {
    setSaved(msg);
    setTimeout(() => setSaved(''), 2200);
  };
  const onPwSuccess = () => flash('Пароль обновлён');
  const onEmailSuccess = async () => { await refresh(); flash('Email сохранён'); };

  if (user?.role !== 'parent') return null;

  return (
    <Card>
      <SectionTitle eyebrow="БЕЗОПАСНОСТЬ" title="Аккаунт"/>
      {saved && (
        <div style={{ padding: 10, borderRadius: 10, background:'var(--good-1)', color:'#4A6E33', fontSize: 13, marginBottom: 14 }}>
          <IconCheck size={12} stroke={2.5}/> {saved}
        </div>
      )}

      <div style={{ display:'flex', alignItems:'center', gap: 14, padding:'12px 0', borderBottom:'1px solid var(--border)' }}>
        <div style={{ width: 44, height: 44, borderRadius: 14, background:'var(--surface-2)', border:'1px solid var(--border)', display:'grid', placeItems:'center', color:'var(--accent)' }}>
          <IconMail size={22}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 15 }}>Email для восстановления</div>
          <div style={{ fontSize: 13, color:'var(--fg-muted)', marginTop: 2 }}>
            {user?.email ? user.email : 'Не указан — восстановление пароля недоступно'}
          </div>
        </div>
        <Button variant="ghost" size="sm" onClick={()=> setEmailOpen(true)}>
          {user?.email ? 'Изменить' : 'Добавить'}
        </Button>
      </div>

      <div style={{ display:'flex', alignItems:'center', gap: 14, padding:'12px 0' }}>
        <div style={{ width: 44, height: 44, borderRadius: 14, background:'var(--surface-2)', border:'1px solid var(--border)', display:'grid', placeItems:'center', color:'var(--accent)' }}>
          <IconLock size={22}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontWeight: 600, fontSize: 15 }}>Пароль</div>
          <div style={{ fontSize: 13, color:'var(--fg-muted)', marginTop: 2 }}>
            Требуется текущий пароль для изменения.
          </div>
        </div>
        <Button variant="ghost" size="sm" onClick={()=> setPwOpen(true)}>Сменить</Button>
      </div>

      <ChangePasswordModal open={pwOpen} onClose={()=> setPwOpen(false)} onSuccess={onPwSuccess}/>
      <ChangeEmailModal open={emailOpen} onClose={()=> setEmailOpen(false)} onSuccess={onEmailSuccess} initialEmail={user?.email}/>
    </Card>
  );
};

Object.assign(window, { SecuritySection });