const ForgotPasswordScreen = ({ onBack }) => {
  const [email, setEmail] = React.useState('');
  const [loading, setLoading] = React.useState(false);
  const [sent, setSent] = React.useState(false);
  const [error, setError] = React.useState('');

  const submit = async (e) => {
    e?.preventDefault();
    setError('');
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.trim())) {
      setError('Введите корректный email');
      return;
    }
    setLoading(true);
    try {
      await api.forgotPassword(email.trim());
      setSent(true);
    } catch (e) {
      setError('Не удалось отправить: ' + (e?.message || e?.status));
    }
    setLoading(false);
  };

  return (
    <AuthLayout title="Восстановление пароля" subtitle="Укажите email, привязанный к аккаунту. Мы отправим ссылку для сброса." side={<AuthSidePanel/>}>
      {!sent ? (
        <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>Email</Label>
            <Input leading={<IconMail size={16}/>} type="email" placeholder="name@example.com" value={email} onChange={e=> setEmail(e.target.value)} autoComplete="email"/>
          </div>
          <div style={{ display:'flex', gap: 8, marginTop: 6 }}>
            <Button variant="ghost" size="lg" type="button" onClick={onBack}>Назад</Button>
            <Button variant="primary" size="lg" full type="submit" disabled={loading} trailing={<IconArrow size={16}/>}>
              {loading ? 'Отправляем…' : 'Отправить ссылку'}
            </Button>
          </div>
        </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> Если email привязан к аккаунту — мы отправили письмо со ссылкой на сброс пароля. Ссылка работает 1 час.
          </div>
          <div style={{ fontSize: 13, color:'var(--fg-muted)', lineHeight: 1.5 }}>
            Не видите письмо? Проверьте папку «Спам». Если SMTP на сервере ещё не настроен администратором, письмо не придёт — в этом случае обратитесь к другому родителю семьи.
          </div>
          <Button variant="primary" size="lg" full type="button" onClick={onBack}>Назад ко входу</Button>
        </div>
      )}
    </AuthLayout>
  );
};

Object.assign(window, { ForgotPasswordScreen });