/* ============================================================
   auth-screen.jsx — login / signup scherm
   ============================================================ */

function AuthScreen() {
  const [mode, setMode] = useState('signin');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [orgName, setOrgName] = useState('');
  const [busy, setBusy] = useState(false);
  const [error, setError] = useState(null);

  const submit = async (e) => {
    e.preventDefault();
    setError(null); setBusy(true);
    try {
      if (mode === 'signin') {
        await authSignIn(email, password);
      } else {
        if (password.length < 6) throw new Error('Wachtwoord moet minimaal 6 tekens zijn');
        await authSignUp(email, password, orgName || 'Mijn organisatie');
        await authSignIn(email, password);
      }
    } catch (err) {
      setError(translateAuthError(err));
      setBusy(false);
    }
  };

  return (
    <div className="auth-wrap">
      <div className="auth-panel">
        <div className="auth-brand">
          <div className="auth-logo">TS</div>
          <div>
            <div className="auth-brand-title">Tender Studio</div>
            <div className="auth-brand-sub">Schrijf en review aanbestedingen</div>
          </div>
        </div>

        <div className="auth-tabs">
          <button type="button"
                  className={'auth-tab' + (mode === 'signin' ? ' active' : '')}
                  onClick={() => { setMode('signin'); setError(null); }}>Inloggen</button>
          <button type="button"
                  className={'auth-tab' + (mode === 'signup' ? ' active' : '')}
                  onClick={() => { setMode('signup'); setError(null); }}>Account aanmaken</button>
        </div>

        <form onSubmit={submit} className="auth-form">
          {mode === 'signup' && (
            <label className="auth-field">
              <span>Naam van je organisatie</span>
              <input type="text" value={orgName} onChange={e => setOrgName(e.target.value)}
                     placeholder="bv. Welten Groep" autoFocus/>
            </label>
          )}
          <label className="auth-field">
            <span>E-mailadres</span>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)}
                   required autoFocus={mode === 'signin'} placeholder="naam@organisatie.nl"/>
          </label>
          <label className="auth-field">
            <span>Wachtwoord</span>
            <input type="password" value={password} onChange={e => setPassword(e.target.value)}
                   required minLength={6}
                   placeholder={mode === 'signup' ? 'Minimaal 6 tekens' : '••••••••'}/>
          </label>

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

          <button type="submit" className="btn btn-primary auth-submit" disabled={busy}>
            {busy ? 'Even geduld…' : mode === 'signin' ? 'Inloggen' : 'Account aanmaken'}
          </button>
        </form>

        <div className="auth-foot">
          {mode === 'signin'
            ? 'Nog geen account? Klik op "Account aanmaken" hierboven.'
            : 'Je krijgt automatisch een eigen werkruimte voor je organisatie.'}
        </div>
      </div>
      <div className="auth-note">
        Door in te loggen ga je akkoord met verwerking via Supabase (Frankfurt, EU).
      </div>
    </div>
  );
}

function translateAuthError(err) {
  const msg = err?.message || String(err);
  if (/invalid login credentials/i.test(msg)) return 'E-mail of wachtwoord klopt niet.';
  if (/already registered/i.test(msg)) return 'Dit e-mailadres heeft al een account — log in.';
  if (/user not found/i.test(msg)) return 'Geen account gevonden.';
  if (/rate limit/i.test(msg)) return 'Te veel pogingen — wacht even.';
  if (/weak password/i.test(msg)) return 'Wachtwoord te zwak.';
  return msg;
}

Object.assign(window, { AuthScreen });