const ResetPasswordScreen = ({ token, onDone }) => {
  const [pw, setPw] = React.useState('');
  const [confirm, setConfirm] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [done, setDone] = React.useState(false);
  const [error, setError] = React.useState('');

  const submit = async (e) => {
    e?.preventDefault();
    setError('');
    if (pw.length < 6) { setError('Пароль: минимум 6 символов'); return; }
    if (pw !== confirm) { setError('Пароли не совпадают'); return; }
    setLoading(true);
    try {
      await api.resetPassword(token, pw);
      setDone(true);
    } catch (e) {
      setLoading(false);
      if (e.status === 410) setError('Ссылка недействительна или истекла. Запросите новую.');
      else if (e.status === 400) setError('Неверные данные');
      else setError('Ошибка: ' + (e?.message || e?.status));
    }
  };

  return (
    <AuthLayout title="Новый пароль" subtitle="Задайте новый пароль и войдите с ним." side={<AuthSidePanel/>}>
      {!done ? (
        <form onSubmit={submit} style={{ display:'flex', flexDirection:'column', gap: 12 }}>
          {error && <div style={{ padding: 10, borderRadius: 10, background:'#FBE1DA', color:'#9A3218', fontSize: 13 }}>{error}</div>}
          <div>
            <Label>Новый пароль (мин. 6 символов)</Label>
            <Input leading={<IconLock size={16}/>} type="password" value={pw} onChange={e=> setPw(e.target.value)} autoComplete="new-password"/>
          </div>
          <div>
            <Label>Повторите</Label>
            <Input leading={<IconLock size={16}/>} type="password" value={confirm} onChange={e=> setConfirm(e.target.value)} autoComplete="new-password"/>
          </div>
          <Button variant="primary" size="lg" full type="submit" disabled={loading} trailing={<IconArrow size={16}/>}>
            {loading ? 'Сохраняем…' : 'Сохранить'}
          </Button>
        </form>
      ) : (
        <div style={{ display:'flex', flexDirection:'column', gap: 14 }}>
          <div style={{ padding: 16, borderRadius: 12, background:'var(--good-1)', color:'#4A6E33', fontSize: 14, lineHeight: 1.5 }}>
            <b>Пароль обновлён.</b> Теперь можно войти с новым паролем.
          </div>
          <Button variant="primary" size="lg" full type="button" onClick={onDone}>Войти</Button>
        </div>
      )}
    </AuthLayout>
  );
};

Object.assign(window, { ResetPasswordScreen });