// Auth-Screen: Registrierung & Login (async API)

function AuthScreen({ onAuthenticated }) {
  const [mode, setMode] = React.useState('login'); // 'login' | 'register'
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [error, setError] = React.useState('');
  const [loading, setLoading] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    try {
      if (mode === 'register') {
        if (!name.trim()) { setError('Bitte gib deinen Namen ein.'); setLoading(false); return; }
        const res = await window.apiRegister({ name: name.trim(), email: email.trim(), password });
        if (!res.ok) { setError(res.error); setLoading(false); return; }
        onAuthenticated(res.user);
      } else {
        const res = await window.apiLogin({ email: email.trim(), password });
        if (!res.ok) { setError(res.error); setLoading(false); return; }
        onAuthenticated(res.user);
      }
    } catch (err) {
      setError('Verbindung zum Server fehlgeschlagen.');
      setLoading(false);
    }
  };

  return (
    <div className="auth-screen">
      <div className="auth-side">
        <div className="auth-brand">
          <a href="https://kalikoer.com" target="_blank" rel="noopener noreferrer"><img src="kalikoer-logo.png" alt="Kalikoer" className="topbar-logo" /></a>
        </div>
        <div className="auth-hero">
          <h1>Probenarbeit nach<br/>der Vier-V Methode.</h1>
          <p>Lade Chornoten als PDF hoch, markiere Stellen und verknüpfe deine Kommentare mit den Phasen Vorüberlegung, Vorbereitung, Vermittlung und Vertiefung.</p>
          <div className="auth-phase-grid">
            {window.PHASE_ORDER.map(p => {
              const meta = window.PHASES[p];
              return (
                <div key={p} className="auth-phase-tile">
                  <div className="auth-phase-tile-head">
                    <div className="auth-phase-tile-dot" style={{ background: meta.color }}>{p}</div>
                    {meta.name}
                  </div>
                  <div className="auth-phase-tile-desc">{meta.description}</div>
                </div>
              );
            })}
          </div>
        </div>
      </div>

      <div className="auth-form-side">
        <form className="auth-form" onSubmit={submit}>
          <h2>{mode === 'login' ? 'Willkommen zurück' : 'Account erstellen'}</h2>
          <p className="auth-form-sub">
            {mode === 'login' ? 'Melde dich an, um zu deinen Stücken zurückzukehren.' : 'Erstelle einen Account, um Stücke und Kommentare zu speichern.'}
          </p>

          {error && <div className="auth-error">{error}</div>}

          {mode === 'register' && (
            <div className="auth-field">
              <label>Name</label>
              <input type="text" value={name} onChange={e => setName(e.target.value)} placeholder="z.B. Anna Müller" autoFocus />
            </div>
          )}
          <div className="auth-field">
            <label>E-Mail</label>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="du@beispiel.de" required autoFocus={mode === 'login'} />
          </div>
          <div className="auth-field">
            <label>Passwort</label>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="Mindestens 8 Zeichen" required />
          </div>

          <button type="submit" className="auth-submit" disabled={loading}>
            {loading ? 'Bitte warten…' : (mode === 'login' ? 'Anmelden' : 'Account erstellen')}
          </button>

          <div className="auth-switch">
            {mode === 'login' ? (
              <>Noch kein Account?<button type="button" onClick={() => { setMode('register'); setError(''); }}>Jetzt registrieren</button></>
            ) : (
              <>Schon registriert?<button type="button" onClick={() => { setMode('login'); setError(''); }}>Anmelden</button></>
            )}
          </div>

          <div style={{ marginTop: 24, padding: 12, background: 'var(--bg-soft)', borderRadius: 8, fontSize: 11, color: 'var(--text-soft)', lineHeight: 1.5 }}>
            <b>Hinweis:</b> Daten werden sicher auf dem Server gespeichert. Passwörter werden verschlüsselt (bcrypt).
          </div>
        </form>
      </div>
    </div>
  );
}

window.AuthScreen = AuthScreen;