const { Button, Card, CardContent, Input, Label, Icon, Alert } = window.BeyonddoDesignSystem_2c6c3a;

function ForgotScreen({ onNavigate, t }) {
  const f = t.forgotPage;
  const a = t.auth;
  const [sent, setSent] = React.useState(false);
  const [email, setEmail] = React.useState('');

  return (
    <main style={{ minHeight: 'calc(100vh - var(--header-height))', background: 'var(--wash-hero)', display: 'grid', placeItems: 'center', padding: 'var(--space-16) clamp(1rem, 4vw, 5rem)' }}>
      <div style={{ width: 460, maxWidth: '100%', display: 'flex', flexDirection: 'column', gap: 'var(--space-6)' }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-2)', textAlign: 'center' }}>
          <h1 style={{ fontSize: 'var(--text-h1)' }}>{sent ? f.sentTitle : f.title}</h1>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)', lineHeight: 'var(--leading-relaxed)' }}>
            {sent ? f.sentBody : f.sub}
          </p>
        </div>

        <Card>
          <CardContent style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            {sent ? (
              <React.Fragment>
                <Alert tone="success" title={email}>{f.sentHint}</Alert>
                <Button variant="outline" fullWidth size="md" onClick={() => { setSent(false); setEmail(''); }}>
                  {f.retry}
                </Button>
              </React.Fragment>
            ) : (
              // Submitting always shows the same confirmation, whether or not the
              // address has an account: revealing which emails are registered
              // would let anyone enumerate Beyonddo's users.
              <form onSubmit={(e) => { e.preventDefault(); setSent(true); }}
                style={{ display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
                <div className="bd-field">
                  <Label htmlFor="fpw-email" required requiredText={a.required}>{a.email}</Label>
                  <Input id="fpw-email" type="email" required placeholder="name@beispiel.de"
                    value={email} onChange={(e) => setEmail(e.target.value)} />
                </div>
                <Button type="submit" fullWidth size="md">{f.submit}</Button>
              </form>
            )}
          </CardContent>
        </Card>

        <a href="#/login" onClick={(e) => { e.preventDefault(); onNavigate('login'); }}
          style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, fontSize: 'var(--text-sm)' }}>
          <Icon name="arrow-left" size={14} /> {f.back}
        </a>
      </div>
    </main>
  );
}

Object.assign(window, { ForgotScreen });