// ============================================================
// SocialPulse — Auth Page (Google OAuth + Email/Password fallback)
// ============================================================

const GOOGLE_CLIENT_ID = '604254793715-7tpvl3miadr9e2suuvlesbbh6ta3ct8f.apps.googleusercontent.com';

function isInAppBrowser() {
  const ua = (typeof navigator !== 'undefined' && navigator.userAgent) || '';
  return /FBAN|FBAV|Instagram|Line\/|Twitter|Discord|Snapchat|WeChat|MicroMessenger/i.test(ua);
}

function AuthPage({ onSuccess }) {
  // 'google' | 'login' | 'register' | 'forgot' | 'reset'
  const [mode, setMode] = useState(() => {
    const m = (typeof location !== 'undefined' && location.hash || '').match(/reset-password\?token=([A-Za-z0-9]+)/);
    return m ? 'reset' : 'google';
  });
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [name, setName] = useState('');
  const [err, setErr] = useState('');
  const [loading, setLoading] = useState(false);
  const googleBtnRef = useRef(null);
  const inApp = isInAppBrowser();

  // Google callback — registered once, reads latest onSuccess via ref.
  const onSuccessRef = useRef(onSuccess);
  useEffect(() => { onSuccessRef.current = onSuccess; }, [onSuccess]);

  useEffect(() => {
    if (mode !== 'google' || inApp) return;
    let cancelled = false;
    const handleCredential = async (resp) => {
      try {
        await spGoogleLogin(resp.credential);
        if (!cancelled) onSuccessRef.current && onSuccessRef.current();
      } catch (e) { if (!cancelled) setErr(e.message || 'Google 登入失敗'); }
    };

    const init = () => {
      if (!window.google?.accounts?.id || !googleBtnRef.current) return false;
      window.google.accounts.id.initialize({
        client_id: GOOGLE_CLIENT_ID,
        callback: handleCredential,
        auto_select: false,
      });
      window.google.accounts.id.renderButton(googleBtnRef.current, {
        theme: 'filled_black', size: 'large', text: 'signin_with',
        shape: 'rectangular', logo_alignment: 'left', width: 320,
      });
      return true;
    };

    if (init()) return () => { cancelled = true; };
    // GSI script still loading — poll briefly.
    const tid = setInterval(() => { if (init()) clearInterval(tid); }, 200);
    return () => { cancelled = true; clearInterval(tid); };
  }, [mode, inApp]);

  const submit = async (e) => {
    e.preventDefault();
    setErr(''); setLoading(true);
    try {
      if (mode === 'login') await spLogin(email, password);
      else await spRegister(email, password, name);
      onSuccess && onSuccess();
    } catch (ex) { setErr(ex.message); }
    finally { setLoading(false); }
  };

  return (
    <div style={{
      minHeight:'100vh', display:'flex', alignItems:'center', justifyContent:'center',
      background:'radial-gradient(circle at 30% 20%, rgba(99,102,241,.08), transparent 50%), var(--bg)',
      padding:20,
    }}>
      <div style={{
        background:'var(--panel)', border:'1px solid var(--line)',
        borderRadius:'var(--r-2xl)', padding:'36px 32px',
        width:'100%', maxWidth:380, boxShadow:'var(--shadow-lg)',
      }}>
        <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:24}}>
          <div style={{width:32,height:32,borderRadius:'var(--r-md)',background:'linear-gradient(135deg,var(--indigo),var(--purple))',display:'grid',placeItems:'center'}}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="#fff"><path d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>
          </div>
          <span style={{fontWeight:700,fontSize:18,background:'linear-gradient(135deg,var(--indigo2),var(--purple))',WebkitBackgroundClip:'text',WebkitTextFillColor:'transparent'}}>SocialPulse</span>
        </div>

        <h1 style={{fontSize:22,fontWeight:800,marginBottom:6,letterSpacing:'-.02em'}}>
          {mode === 'register' ? '建立帳號' :
           mode === 'login' ? '登入' :
           mode === 'forgot' ? '忘記密碼' :
           mode === 'reset' ? '重設密碼' :
           '歡迎回來'}
        </h1>
        <p style={{color:'var(--text2)',fontSize:13,marginBottom:24}}>
          {mode === 'register' ? '30 秒開始追蹤競品' :
           mode === 'login' ? 'Welcome back' :
           mode === 'forgot' ? '輸入註冊用 Email，我們會寄出重設連結' :
           mode === 'reset' ? '請設定新密碼' :
           '社群脈動 · 競品分析 · AI 洞察'}
        </p>

        {mode === 'forgot' ? (
          <ForgotPasswordView onBack={() => { setMode('login'); setErr(''); }} />
        ) : mode === 'reset' ? (
          <ResetPasswordView onDone={() => { setMode('login'); setErr(''); }} />
        ) : mode === 'google' ? (
          <>
            {inApp ? (
              <div style={{padding:'12px 14px',background:'var(--amber-soft)',border:'1px solid rgba(245,179,36,.3)',borderRadius:'var(--r-md)',fontSize:13,marginBottom:16,display:'flex',gap:10}}>
                <span style={{fontSize:16}}>⚠️</span>
                <div>
                  <strong style={{color:'var(--amber)'}}>請用 Safari 或 Chrome 開啟</strong>
                  <div style={{fontSize:12,color:'var(--text2)',marginTop:4}}>Google 登入不支援 App 內建瀏覽器（Discord、LINE、Threads 等）</div>
                </div>
              </div>
            ) : (
              <div ref={googleBtnRef} style={{minHeight:44,display:'flex',justifyContent:'center',marginBottom:10}}/>
            )}
            <div style={{textAlign:'center',fontSize:11,color:'var(--text3)',margin:'16px 0 12px',textTransform:'uppercase',letterSpacing:'.12em',fontFamily:'var(--font-mono)'}}>或</div>
            <button onClick={()=>{setMode('login');setErr('');}} className="btn btn-ghost" style={{width:'100%',justifyContent:'center',padding:'10px',fontSize:14,marginBottom:8}}>
              用 Email 登入
            </button>
            <div style={{textAlign:'center',marginTop:14,fontSize:12,color:'var(--text3)'}}>
              首次使用？<a href="#" onClick={e=>{e.preventDefault();setMode('register');setErr('');}} style={{color:'var(--indigo2)'}}>建立帳號</a>
            </div>
            {err && <div style={{fontSize:12,color:'var(--red)',background:'var(--red-soft)',border:'1px solid rgba(255,85,119,.3)',padding:'8px 12px',borderRadius:'var(--r-md)',marginTop:12}}>{err}</div>}
          </>
        ) : (
          <form onSubmit={submit}>
            {mode === 'register' && (
              <Field label="姓名" value={name} onChange={setName} required/>
            )}
            <Field label="Email" type="email" value={email} onChange={setEmail} required/>
            <Field label="密碼" type="password" value={password} onChange={setPassword} required/>

            {err && <div style={{fontSize:12,color:'var(--red)',background:'var(--red-soft)',border:'1px solid rgba(255,85,119,.3)',padding:'8px 12px',borderRadius:'var(--r-md)',marginBottom:14}}>{err}</div>}

            <button type="submit" disabled={loading} className="btn btn-primary" style={{width:'100%',justifyContent:'center',padding:'10px',fontSize:14,opacity:loading?0.6:1}}>
              {loading ? '...' : (mode === 'login' ? '登入 →' : '建立帳號 →')}
            </button>

            <div style={{textAlign:'center',marginTop:16,fontSize:13,color:'var(--text2)'}}>
              {mode === 'login' ? (
                <>還沒有帳號？<a href="#" onClick={e=>{e.preventDefault();setMode('register');setErr('');}} style={{color:'var(--indigo2)'}}>註冊</a></>
              ) : (
                <>已經有帳號？<a href="#" onClick={e=>{e.preventDefault();setMode('login');setErr('');}} style={{color:'var(--indigo2)'}}>登入</a></>
              )}
              <span style={{margin:'0 8px',color:'var(--text3)'}}>·</span>
              <a href="#" onClick={e=>{e.preventDefault();setMode('google');setErr('');}} style={{color:'var(--text3)'}}>← 用 Google 登入</a>
            </div>
            {mode === 'login' && (
              <div style={{textAlign:'center',marginTop:8,fontSize:12}}>
                <a href="#" onClick={e=>{e.preventDefault();setMode('forgot');setErr('');}} style={{color:'var(--text3)'}}>忘記密碼？</a>
              </div>
            )}
          </form>
        )}
      </div>
    </div>
  );
}

function Field({ label, type='text', value, onChange, required, placeholder }) {
  return (
    <div style={{marginBottom:14}}>
      <label style={{display:'block',fontSize:12,color:'var(--text2)',marginBottom:4,fontWeight:500}}>{label}{required && ' *'}</label>
      <input type={type} value={value} onChange={e=>onChange(e.target.value)} required={required} placeholder={placeholder}
        style={{
          width:'100%',padding:'10px 12px',background:'var(--bg)',
          border:'1px solid var(--line)',borderRadius:'var(--r-md)',
          color:'var(--text)',fontSize:14,fontFamily:'var(--font-ui)',outline:'none',
          transition:'border-color .15s',
        }}
        onFocus={e=>e.target.style.borderColor='var(--indigo)'}
        onBlur={e=>e.target.style.borderColor='var(--line)'}/>
    </div>
  );
}

// ---- Shared Loading/Error ----
function LoadingState({ label='Loading…' }) {
  return (
    <div style={{padding:'60px 20px',textAlign:'center',color:'var(--text2)'}}>
      <div style={{
        width:28,height:28,border:'2.5px solid var(--line)',
        borderTopColor:'var(--indigo)',borderRadius:'50%',
        margin:'0 auto 12px',animation:'spin .8s linear infinite',
      }}/>
      <div style={{fontSize:13}}>{label}</div>
      <style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
    </div>
  );
}

function ErrorState({ error, onRetry }) {
  return (
    <div style={{padding:'40px 20px',textAlign:'center'}}>
      <div style={{fontSize:14,color:'var(--red)',marginBottom:12}}>⚠ {error}</div>
      {onRetry && <button className="btn btn-ghost btn-sm" onClick={onRetry}>Retry</button>}
    </div>
  );
}

function ForgotPasswordView({ onBack }) {
  const [email, setEmail] = useState('');
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);
  const [err, setErr] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    setErr(''); setLoading(true);
    try { await spForgotPassword(email); setDone(true); }
    catch (ex) { setErr(ex.message); }
    finally { setLoading(false); }
  };

  if (done) {
    return (
      <div>
        <div style={{padding:'12px 14px',background:'var(--green-soft, rgba(34,197,94,.1))',border:'1px solid rgba(34,197,94,.3)',borderRadius:'var(--r-md)',fontSize:13,marginBottom:16}}>
          ✓ 若該 Email 已註冊，重設連結將會送出。請查收 Email（目前測試期間，如未收到請聯絡管理員）。
        </div>
        <button onClick={onBack} className="btn btn-ghost" style={{width:'100%',justifyContent:'center',padding:'10px',fontSize:14}}>← 回登入</button>
      </div>
    );
  }

  return (
    <form onSubmit={submit}>
      <Field label="Email" type="email" value={email} onChange={setEmail} required/>
      {err && <div style={{fontSize:12,color:'var(--red)',background:'var(--red-soft)',border:'1px solid rgba(255,85,119,.3)',padding:'8px 12px',borderRadius:'var(--r-md)',marginBottom:14}}>{err}</div>}
      <button type="submit" disabled={loading} className="btn btn-primary" style={{width:'100%',justifyContent:'center',padding:'10px',fontSize:14,opacity:loading?0.6:1}}>
        {loading ? '...' : '送出重設連結'}
      </button>
      <div style={{textAlign:'center',marginTop:14,fontSize:13}}>
        <a href="#" onClick={e=>{e.preventDefault();onBack();}} style={{color:'var(--text3)'}}>← 回登入</a>
      </div>
    </form>
  );
}

function ResetPasswordView({ onDone }) {
  const token = (() => {
    const m = (location.hash || '').match(/reset-password\?token=([A-Za-z0-9]+)/);
    return m ? m[1] : '';
  })();
  const [password, setPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [loading, setLoading] = useState(false);
  const [done, setDone] = useState(false);
  const [err, setErr] = useState('');

  const submit = async (e) => {
    e.preventDefault();
    if (password !== confirm) { setErr('兩次密碼不一致'); return; }
    if (password.length < 8) { setErr('密碼至少 8 個字元'); return; }
    setErr(''); setLoading(true);
    try {
      await spResetPassword(token, password);
      setDone(true);
      // Clear hash so refresh doesn't reopen reset view
      try { history.replaceState(null, '', location.pathname + location.search); } catch {}
    } catch (ex) { setErr(ex.message); }
    finally { setLoading(false); }
  };

  if (!token) {
    return <div style={{fontSize:13,color:'var(--red)'}}>連結無效或缺少 token。</div>;
  }

  if (done) {
    return (
      <div>
        <div style={{padding:'12px 14px',background:'var(--green-soft, rgba(34,197,94,.1))',border:'1px solid rgba(34,197,94,.3)',borderRadius:'var(--r-md)',fontSize:13,marginBottom:16}}>
          ✓ 密碼已重設，請用新密碼登入。所有舊登入 Session 已自動登出。
        </div>
        <button onClick={onDone} className="btn btn-primary" style={{width:'100%',justifyContent:'center',padding:'10px',fontSize:14}}>前往登入 →</button>
      </div>
    );
  }

  return (
    <form onSubmit={submit}>
      <Field label="新密碼" type="password" value={password} onChange={setPassword} required/>
      <Field label="再次輸入新密碼" type="password" value={confirm} onChange={setConfirm} required/>
      {err && <div style={{fontSize:12,color:'var(--red)',background:'var(--red-soft)',border:'1px solid rgba(255,85,119,.3)',padding:'8px 12px',borderRadius:'var(--r-md)',marginBottom:14}}>{err}</div>}
      <button type="submit" disabled={loading} className="btn btn-primary" style={{width:'100%',justifyContent:'center',padding:'10px',fontSize:14,opacity:loading?0.6:1}}>
        {loading ? '...' : '重設密碼 →'}
      </button>
    </form>
  );
}

Object.assign(window, { AuthPage, ForgotPasswordView, ResetPasswordView, Field, LoadingState, ErrorState, GOOGLE_CLIENT_ID, isInAppBrowser });