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

function AuthScreen({ mode, onNavigate, onSignIn, t }) {
  const a = t.auth;
  const register = mode === 'register';
  const [account, setAccount] = React.useState(0);
  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)' }}>{register ? a.registerTitle : a.loginTitle}</h1>
          <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>
            {register ? a.registerSub : a.loginSub}
          </p>
        </div>
        <Card>
          <CardContent style={{ padding: 'var(--space-6)', display: 'flex', flexDirection: 'column', gap: 'var(--space-5)' }}>
            {register ? (
              <fieldset style={{ border: 0, margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: 'var(--space-3)' }}>
                <legend className="bd-label" style={{ marginBottom: 'var(--space-2)' }}>{a.accountType}</legend>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-2)' }}>
                  {a.types.map((label, i) => (
                    <label key={label} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '11px 14px', borderRadius: 'var(--radius-md)', border: '1px solid ' + (account === i ? 'var(--primary)' : 'var(--border-default)'), background: account === i ? 'var(--primary-tint)' : 'var(--surface)', cursor: 'pointer', fontSize: 'var(--text-sm)', fontWeight: account === i ? 600 : 400, color: 'var(--text-heading)' }}>
                      <input type="radio" name="acct" checked={account === i} onChange={() => setAccount(i)} style={{ accentColor: 'var(--primary)', width: 16, height: 16 }} />
                      {label}
                    </label>
                  ))}
                </div>
              </fieldset>
            ) : null}
            <div className="bd-field"><Label htmlFor="em" required requiredText={a.required}>{a.email}</Label><Input id="em" type="email" placeholder="name@beispiel.de" /></div>
            <div className="bd-field">
              <Label htmlFor="pw" required requiredText={a.required}>{a.password}</Label>
              <Input id="pw" type="password" describedBy="pwh" defaultValue="••••••••••" />
              <span className="bd-field__hint" id="pwh">{a.pwHint}</span>
            </div>
            {register ? (
              <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 'var(--text-xs)', color: 'var(--text-body)', lineHeight: 'var(--leading-normal)' }}>
                <input type="checkbox" defaultChecked style={{ marginTop: 2, width: 18, height: 18, accentColor: 'var(--primary)' }} />
                <span>{a.consent}</span>
              </label>
            ) : null}
            <Button fullWidth size="md" onClick={onSignIn}>{register ? a.registerTitle : t.nav.login}</Button>
            {!register ? <a href="#" onClick={(e) => e.preventDefault()} style={{ fontSize: 'var(--text-sm)', textAlign: 'center' }}>{a.forgot}</a> : null}
          </CardContent>
        </Card>
        <div style={{ textAlign: 'center', fontSize: 'var(--text-sm)', color: 'var(--text-muted)' }}>
          {register ? a.haveAccount : a.noAccount}
          <a href="#" onClick={(e) => { e.preventDefault(); onNavigate(register ? 'login' : 'register'); }}>{register ? t.nav.login : t.nav.register}</a>
        </div>
        <span style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontSize: 'var(--text-xs)', color: 'var(--text-muted)' }}>
          <Icon name="shield-check" size={14} style={{ color: 'var(--verified-500)' }} />{a.note}
        </span>
      </div>
    </main>
  );
}

Object.assign(window, { AuthScreen });