// Login page — Google SSO (SER staff) + Client login (username/password)

const { useState } = React;

function LoginPage({ onLogin }) {
  const [mode, setMode] = useState('main'); // 'main' | 'client'
  const [u, setU] = useState('');
  const [pw, setPw] = useState('');
  const [showPw, setShowPw] = useState(false);
  const [err, setErr] = useState('');
  const [loading, setLoading] = useState(false);

  const handleGoogle = () => {
    setLoading(true);
    setTimeout(() => {
      onLogin({ kind: 'staff', email: 'joost@searchengineresults.nl', name: 'Joost van Dijk' });
    }, 700);
  };

  const handleClient = (e) => {
    e.preventDefault();
    if (!u || !pw) { setErr('Vul gebruikersnaam en wachtwoord in.'); return; }
    setErr(''); setLoading(true);
    setTimeout(() => {
      // Demo: map to known client; otherwise generic
      const known = (window.SER_CLIENTS || []).find(c => c.username.toLowerCase() === u.toLowerCase());
      onLogin({ kind: 'client', clientId: known ? known.id : 'demo', name: known ? known.name : u });
    }, 600);
  };

  return (
    <div className="login-wrap">
      <div className="login-visual">
        <div className="brand">
          <img src="assets/logo-white.svg" alt="SER" style={{width:48, height:'auto', display:'block'}} />
          <div>
            <div className="name">SearchEngineResults</div>
            <div className="sub">Automation Platform</div>
          </div>
        </div>

        <div className="login-hero">
          <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'5px 12px', background:'rgba(0,180,160,0.15)', border:'1px solid rgba(0,180,160,0.35)', borderRadius:999, fontSize:11, color:'#67e8d8', textTransform:'uppercase', letterSpacing:'0.10em', fontWeight:700, marginBottom:24}}>
            <span style={{width:6, height:6, borderRadius:'50%', background:'#67e8d8'}}></span>
            Internal · v2.4
          </div>
          <h1>Sneller werken,<br/>met onze eigen <em>tools.</em></h1>
          <p>Eén plek voor alle SEO-, SEA-, Content- en AI-automations. Voor het team én geselecteerde klanten.</p>

          <div className="login-tools-preview">
            <div className="mini">
              <span className="tag">SEO</span>
              <span style={{fontWeight:600}}>A/B Test Platform</span>
              <span style={{color:'rgba(255,255,255,0.5)'}}>Causal Impact</span>
            </div>
            <div className="mini">
              <span className="tag" style={{color:'#fbbf24'}}>SEA · DATA</span>
              <span style={{fontWeight:600}}>Multi-API Harvester</span>
              <span style={{color:'rgba(255,255,255,0.5)'}}>Ahrefs / Semrush</span>
            </div>
            <div className="mini">
              <span className="tag" style={{color:'#c4b5fd'}}>CONTENT</span>
              <span style={{fontWeight:600}}>Bulk Generator</span>
              <span style={{color:'rgba(255,255,255,0.5)'}}>Gemini · GPT · Claude</span>
            </div>
          </div>
        </div>

        <div className="login-foot">
          <span>© 2026 searchengineresults.nl</span>
          <span>automation.searchengineresults.nl</span>
        </div>
      </div>

      <div className="login-form-wrap">
        <div className="login-form">
          {mode === 'main' && (
            <>
              <h2>Welkom terug.</h2>
              <p className="lead">Kies hoe je wilt inloggen.</p>

              <button
                type="button"
                onClick={handleGoogle}
                disabled={loading}
                style={{
                  width:'100%', padding:'12px 16px', borderRadius:10,
                  border:'1px solid var(--ink-200)', background:'white',
                  display:'flex', alignItems:'center', justifyContent:'center', gap:10,
                  fontWeight:600, fontSize:14, color:'var(--ink-900)',
                  transition:'0.15s', cursor: loading ? 'wait' : 'pointer',
                }}
                onMouseEnter={e => e.currentTarget.style.background = 'var(--ink-25)'}
                onMouseLeave={e => e.currentTarget.style.background = 'white'}
              >
                <svg width="18" height="18" viewBox="0 0 48 48"><path fill="#FFC107" d="M43.6 20.5H42V20.4H24v7.2h11.3c-1.6 4.7-6 8.1-11.3 8.1-6.6 0-12-5.4-12-12s5.4-12 12-12c3.1 0 5.8 1.2 7.9 3l5.1-5.1C33.6 6.7 29 4.8 24 4.8 13.4 4.8 4.8 13.4 4.8 24S13.4 43.2 24 43.2 43.2 34.6 43.2 24c0-1.2-.1-2.4-.4-3.5z"/><path fill="#FF3D00" d="M7.3 14.7l5.9 4.3c1.6-3.9 5.4-6.6 9.8-6.6 3.1 0 5.8 1.2 7.9 3l5.1-5.1C33.6 6.7 29 4.8 24 4.8 16.7 4.8 10.4 9 7.3 14.7z"/><path fill="#4CAF50" d="M24 43.2c4.8 0 9.2-1.8 12.5-4.8l-5.8-4.9c-1.9 1.4-4.3 2.3-6.7 2.3-5.2 0-9.6-3.3-11.3-8l-5.9 4.5c3.1 6 9.3 10 13.8 10z"/><path fill="#1976D2" d="M43.6 20.5H42V20.4H24v7.2h11.3c-.8 2.3-2.3 4.3-4.3 5.7l5.8 4.9c4.1-3.8 6.6-9.4 6.6-15.7 0-1.2-.1-2.4-.4-3.5z"/></svg>
                {loading ? 'Bezig…' : 'Doorgaan met Google'}
              </button>

              <div style={{textAlign:'center', fontSize:11, color:'var(--ink-400)', marginTop:8}}>
                Alleen <strong style={{color:'var(--ink-700)'}}>@searchengineresults.nl</strong> adressen krijgen toegang.
              </div>

              <div style={{display:'flex', alignItems:'center', gap:12, margin:'28px 0 20px', color:'var(--ink-300)', fontSize:11, textTransform:'uppercase', letterSpacing:'0.10em', fontWeight:600}}>
                <div style={{flex:1, height:1, background:'var(--ink-100)'}}></div>
                of
                <div style={{flex:1, height:1, background:'var(--ink-100)'}}></div>
              </div>

              <button
                type="button"
                onClick={() => setMode('client')}
                style={{
                  width:'100%', padding:'10px 16px', borderRadius:10,
                  border:'1px solid var(--ink-200)', background:'transparent',
                  display:'flex', alignItems:'center', justifyContent:'center', gap:8,
                  fontWeight:600, fontSize:13, color:'var(--ink-700)',
                }}
              >
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                Klant login (gebruikersnaam + wachtwoord)
              </button>

              <div className="helper">
                Hulp nodig? Vraag het in <code style={{fontFamily:'var(--font-mono)', background:'var(--ink-100)', padding:'1px 6px', borderRadius:4, fontSize:11}}>#automation</code>.
              </div>
            </>
          )}

          {mode === 'client' && (
            <>
              <button
                type="button"
                onClick={() => setMode('main')}
                style={{background:'transparent', border:'none', color:'var(--ink-500)', fontSize:12, padding:0, marginBottom:12, display:'inline-flex', alignItems:'center', gap:4}}
              >
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
                terug
              </button>
              <h2>Klant login</h2>
              <p className="lead">Log in met de gegevens die je van je SER-contact hebt ontvangen.</p>

              {err && (
                <div className="err">
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
                  {err}
                </div>
              )}

              <form onSubmit={handleClient}>
                <div className="field">
                  <label className="field-label">Gebruikersnaam</label>
                  <input className="input" autoFocus value={u} onChange={e => setU(e.target.value)} placeholder="bv. intratuin"/>
                </div>
                <div className="field">
                  <label className="field-label">Wachtwoord</label>
                  <div className="pw-input">
                    <input
                      type={showPw ? 'text' : 'password'}
                      className="input"
                      placeholder="••••••••••"
                      value={pw}
                      onChange={(e) => setPw(e.target.value)}
                      style={{paddingRight: 38}}
                    />
                    <button type="button" className="toggle" onClick={() => setShowPw(!showPw)}>
                      {showPw ? (
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
                      ) : (
                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                      )}
                    </button>
                  </div>
                  <div className="field-hint">Demo: probeer <code style={{background:'var(--ink-100)', padding:'1px 5px', borderRadius:3, fontFamily:'var(--font-mono)'}}>intratuin</code> / iets.</div>
                </div>

                <button type="submit" className="submit-btn" disabled={loading}>
                  {loading ? 'Inloggen…' : <>Log in <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg></>}
                </button>
              </form>

              <div className="helper">
                Wachtwoord kwijt? Neem contact op met je SER-contactpersoon.
              </div>
            </>
          )}
        </div>
      </div>

      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

window.LoginPage = LoginPage;