// Login for analytics module — same SSO + client login as tools, gold variant

const { useState: useStateA } = React;

function AnalyticsLogin({ onLogin }) {
  const [mode, setMode] = useStateA('main');
  const [u, setU] = useStateA('');
  const [pw, setPw] = useStateA('');
  const [err, setErr] = useStateA('');
  const [loading, setLoading] = useStateA(false);

  const API = window.SER_ANALYTICS_API || 'https://ser-analytics-production.up.railway.app';

  const handleGoogle = () => {
    setLoading(true);
    window.location.href = `${API}/auth/google`;
  };

  const handleClient = async (e) => {
    e.preventDefault();
    if (!u || !pw) { setErr('Vul gebruikersnaam en wachtwoord in.'); return; }
    setErr(''); setLoading(true);
    try {
      const res = await fetch(`${API}/auth/client`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username: u, password: pw }),
      });
      const data = await res.json();
      if (!res.ok) { setErr(data.detail || 'Inloggen mislukt.'); setLoading(false); return; }
      localStorage.setItem('ser-analytics-token', data.token);
      onLogin({ kind: 'client', clientId: data.clientId, name: data.name, token: data.token, dashboards: data.dashboards });
    } catch {
      setErr('Verbindingsfout. Probeer opnieuw.');
    } finally { setLoading(false); }
  };

  return (
    <div className="login-wrap">
      <div className="login-visual analytics-bg">
        <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">Analytics Platform</div>
          </div>
        </div>
        <div className="login-hero">
          <div style={{display:'inline-flex', alignItems:'center', gap:8, padding:'5px 12px', background:'rgba(124,92,255,0.18)', border:'1px solid rgba(124,92,255,0.4)', borderRadius:999, fontSize:11, color:'#c4b5fd', textTransform:'uppercase', letterSpacing:'0.10em', fontWeight:700, marginBottom:24}}>
            <span style={{width:6, height:6, borderRadius:'50%', background:'#c4b5fd'}}></span>
            Business intelligence · v1.0
          </div>
          <h1>Niet alleen <em>cijfers</em>.<br/>De <em>waarom</em> erbij.</h1>
          <p>Business-level dashboards die niet alleen tonen wát er gebeurt, maar ook waarom — en wat je eraan moet doen.</p>

          <div className="login-tools-preview">
            <div className="mini">
              <span className="tag" style={{color:'#67e8d8'}}>OMZET</span>
              <span style={{fontWeight:600}}>Root-cause attributie</span>
              <span style={{color:'rgba(255,255,255,0.5)'}}>7 oorzaak-categorieën</span>
            </div>
            <div className="mini">
              <span className="tag" style={{color:'#fbbf24'}}>CAMPAGNE</span>
              <span style={{fontWeight:600}}>Live radar</span>
              <span style={{color:'rgba(255,255,255,0.5)'}}>Drop / piek detectie</span>
            </div>
            <div className="mini">
              <span className="tag" style={{color:'#c4b5fd'}}>AI</span>
              <span style={{fontWeight:600}}>Next-best actions</span>
              <span style={{color:'rgba(255,255,255,0.5)'}}>Met impact-schatting</span>
            </div>
          </div>

          <div className="login-mod-tab">
            <a href="../index.html"><span className="dot tools"></span>Tools</a>
            <a className="active" href="#"><span className="dot analytics"></span>Analytics</a>
          </div>
        </div>
        <div className="login-foot">
          <span>© 2026 searchengineresults.nl</span>
          <span>analytics.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)', cursor: loading ? 'wait' : 'pointer'}}>
                <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
              </button>
              <div className="helper">Klantgegevens ontvangen van je SER-contact.</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 om je dashboards te bekijken.</p>
              {err && <div className="err">{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. bloemerij"/></div>
                <div className="field"><label className="field-label">Wachtwoord</label><input className="input" type="password" value={pw} onChange={e=>setPw(e.target.value)} placeholder="••••••••••"/>
                </div>
                <button type="submit" className="submit-btn">{loading ? 'Inloggen…' : 'Log in'}</button>
              </form>
            </>
          )}
        </div>
      </div>
    </div>
  );
}

window.AnalyticsLogin = AnalyticsLogin;