/* ============================================================
   AUTH UI — guest / login / sign-up gate + account chip.
   Sits between the entry pendant and the room landing. Talks to
   window.Auth + window.sb (see src/backend.jsx). No-build: loaded
   as a text/babel script AFTER backend.jsx + room.jsx, so it can
   reuse window.Auth, RoomForm, PassField, Embers and Icon. Hooks
   are aliased to avoid the shared-scope redeclaration collision.
   ============================================================ */
const { useState: useS_auth, useEffect: useE_auth } = React;

/* live Supabase user — { user, loading }. Resilient if the CDN client
   never loaded: treats the visitor as signed-out rather than crashing. */
function useAuthUser(){
  const [st, setSt] = useS_auth({ user:null, loading:true });
  useE_auth(()=>{
    if(!window.sb || !window.sb.auth){ setSt({ user:null, loading:false }); return; }
    let sub;
    sb.auth.getSession()
      .then(({ data })=> setSt({ user:(data.session && data.session.user) || null, loading:false }))
      .catch(()=> setSt({ user:null, loading:false }));
    try{
      sub = sb.auth.onAuthStateChange((_e, session)=>
        setSt({ user:(session && session.user) || null, loading:false })
      ).data.subscription;
    }catch(_){}
    return ()=>{ try{ sub && sub.unsubscribe(); }catch(_){} };
  }, []);
  return st;
}
window.useAuthUser = useAuthUser;

/* an anonymous Supabase user (no email) is a "guest" */
function isGuestUser(u){ return !!u && (u.is_anonymous || !u.email); }
window.isGuestUser = isGuestUser;

/* friendlier copy for the handful of auth errors players actually hit */
function authMsg(error){
  const m = (error && (error.message || error.error_description)) || 'Something went wrong.';
  if(/anonymous.*disabled|anonymous_provider_disabled|signups? not allowed/i.test(m))
    return 'Guest play isn’t enabled on the server yet.';
  if(/invalid login credentials/i.test(m))  return 'Wrong email or password.';
  if(/user already registered/i.test(m))    return 'That email already has an account — log in instead.';
  if(/email.*not confirmed/i.test(m))        return 'Confirm your email first (check your inbox).';
  if(/password should be at least/i.test(m)) return 'Password is too short.';
  return m;
}

/* ============================================================
   AUTH GATE — guest vs account, then the email/password form.
   On success, onAuthStateChange flips the app to the room landing,
   so this component just unmounts; no onDone callback needed.
   onSkip lets a player proceed if the account service is down.
   ============================================================ */
function AuthGate({ onSkip }){
  const [view, setView]   = useS_auth('paths');   // paths | login | signup
  const [email, setEmail] = useS_auth('');
  const [pass, setPass]   = useS_auth('');
  const [busy, setBusy]   = useS_auth('');         // '' | guest | login | signup | google
  const [err, setErr]     = useS_auth('');
  const [msg, setMsg]     = useS_auth('');
  const ready = !!(window.sb && window.Auth);

  const reset = (v)=>{ setErr(''); setMsg(''); setView(v); };

  const guest = async ()=>{
    setErr(''); setMsg(''); setBusy('guest');
    try{ const { error } = (await Auth.guest()) || {}; if(error) setErr(authMsg(error)); }
    catch(e){ setErr(authMsg(e)); }
    finally{ setBusy(''); }
  };
  const login = async ()=>{
    if(!email.trim() || !pass) return setErr('Enter your email and password.');
    setErr(''); setMsg(''); setBusy('login');
    try{ const { error } = (await Auth.login(email.trim(), pass)) || {}; if(error) setErr(authMsg(error)); }
    catch(e){ setErr(authMsg(e)); }
    finally{ setBusy(''); }
  };
  const google = async ()=>{
    setErr(''); setMsg(''); setBusy('google');
    try{ const { error } = (await Auth.google()) || {}; if(error){ setErr(authMsg(error)); setBusy(''); } }
    catch(e){ setErr(authMsg(e)); setBusy(''); }
    // success → browser redirects to Google, so leave busy on.
  };
  const signup = async ()=>{
    if(!email.trim() || pass.length < 6) return setErr('Enter an email and a password (6+ characters).');
    setErr(''); setMsg(''); setBusy('signup');
    try{
      const { data, error } = (await Auth.signup(email.trim(), pass)) || {};
      if(error) setErr(authMsg(error));
      else if(!(data && data.session)){
        // email confirmation is on — no session yet
        setMsg('Account created. Confirm via the email we sent, then log in.');
        setView('login');
      }
    }catch(e){ setErr(authMsg(e)); }
    finally{ setBusy(''); }
  };

  /* ---- choice: guest vs account ---- */
  if(view==='paths') return (
    <div className="room-scene">
      <div className="room-veil-bg"></div>
      {window.Embers && <Embers count={18}/>}
      <div className="room-head">
        <h1 className="display flicker">Torchlit</h1>
        <p className="room-sub">Step into the realm — as a guest, or with your account</p>
      </div>
      <div className="room-paths auth-paths">
        <button className="room-path liquid-glass" disabled={!!busy} onClick={guest}>
          <span className="rp-ico"><Icon name="moon" size={30}/></span>
          <span className="rp-t display">{busy==='guest' ? 'Entering…' : 'Play as Guest'}</span>
          <span className="rp-s">Jump in now — no email needed</span>
        </button>
        <button className="room-path liquid-glass" disabled={!!busy} onClick={()=>reset('login')}>
          <span className="rp-ico"><Icon name="key" size={30}/></span>
          <span className="rp-t display">Log In / Sign Up</span>
          <span className="rp-s">Keep your campaigns &amp; uploads</span>
        </button>
      </div>
      {!ready && <div className="rm-err auth-note">Account service unavailable — you can still continue.</div>}
      {err && <div className="rm-err auth-note">{err}</div>}
      <button className="auth-skip" onClick={onSkip}>Continue without an account →</button>
    </div>
  );

  /* ---- login / signup form ---- */
  const signing = view==='signup';
  return (
    <RoomForm
      title={signing ? 'Create Account' : 'Welcome Back'}
      sub={signing ? 'Save your campaigns, uploads & progress.' : 'Log in to pick up where you left off.'}
      onBack={()=>reset('paths')}>
      <label className="rm-label">Email
        <input className="rm-input" type="email" autoComplete="email" placeholder="you@example.com"
          value={email} onChange={e=>setEmail(e.target.value)}/>
      </label>
      <label className="rm-label">Password
        <PassField value={pass} onChange={setPass}
          placeholder={signing ? 'Choose a password (6+)' : 'Your password'}
          onEnter={signing ? signup : login}/>
      </label>
      {err && <div className="rm-err">{err}</div>}
      {msg && <div className="auth-msg">{msg}</div>}
      <button className="rm-go" disabled={!!busy} onClick={signing ? signup : login}>
        {busy ? (signing ? 'Creating…' : 'Logging in…') : (signing ? 'Create Account →' : 'Log In →')}
      </button>
      <button className="rm-go ghost" disabled={!!busy} onClick={google}>
        {busy==='google' ? 'Redirecting…' : 'Continue with Google'}
      </button>
      <div className="rm-or"><span>{signing ? 'already have an account?' : 'new here?'}</span></div>
      <button className="auth-switch" onClick={()=>reset(signing ? 'login' : 'signup')}>
        {signing ? 'Log in instead' : 'Create an account'}
      </button>
    </RoomForm>
  );
}
window.AuthGate = AuthGate;

/* ============================================================
   ACCOUNT CHIP — top-left on the landing: shows who you are and,
   for guests, a "Save your progress" upgrade (link an email so the
   anonymous user's games & uploads survive). Sign out too.
   ============================================================ */
function AccountMenu(){
  const { user } = useAuthUser();
  const [open, setOpen]   = useS_auth(false);
  const [mode, setMode]   = useS_auth('');         // '' | upgrade
  const [email, setEmail] = useS_auth('');
  const [pass, setPass]   = useS_auth('');
  const [busy, setBusy]   = useS_auth(false);
  const [err, setErr]     = useS_auth('');
  const [msg, setMsg]     = useS_auth('');
  if(!user) return null;
  const guest = isGuestUser(user);
  const label = guest ? 'Guest' : (user.email || 'Account');

  const upgrade = async ()=>{
    if(!email.trim() || pass.length < 6) return setErr('Enter an email and a password (6+ characters).');
    setBusy(true); setErr(''); setMsg('');
    try{
      const { error } = (await Auth.upgrade(email.trim(), pass)) || {};
      if(error) setErr(authMsg(error));
      else { setMsg('Saved! Confirm the address via the email we sent.'); setMode(''); }
    }catch(e){ setErr(authMsg(e)); }
    finally{ setBusy(false); }
  };
  const signOut = async ()=>{ try{ await Auth.signOut(); }catch(_){} setOpen(false); };

  return (
    <div className="acct-wrap">
      <button className="acct-chip glass-btn" onClick={()=>setOpen(o=>!o)} title="Account">
        <span className={`acct-dot ${guest ? 'guest' : 'full'}`}></span>
        <span className="acct-label">{label}</span>
      </button>
      {open && (
        <div className="acct-menu liquid-glass">
          <div className="acct-head">
            <span className={`acct-dot ${guest ? 'guest' : 'full'}`}></span>
            <div>
              <div className="acct-name">{label}</div>
              <div className="acct-kind">{guest ? 'Guest — progress not saved' : 'Signed in'}</div>
            </div>
          </div>
          {guest && mode!=='upgrade' && (
            <button className="rm-go" onClick={()=>{ setErr(''); setMsg(''); setMode('upgrade'); }}>Save your progress</button>
          )}
          {guest && mode==='upgrade' && (
            <div className="acct-form">
              <label className="rm-label">Email
                <input className="rm-input" type="email" placeholder="you@example.com"
                  value={email} onChange={e=>setEmail(e.target.value)}/>
              </label>
              <label className="rm-label">Password
                <PassField value={pass} onChange={setPass} placeholder="Choose a password (6+)" onEnter={upgrade}/>
              </label>
              {err && <div className="rm-err">{err}</div>}
              <button className="rm-go" disabled={busy} onClick={upgrade}>{busy ? 'Saving…' : 'Link account →'}</button>
            </div>
          )}
          {msg && <div className="auth-msg">{msg}</div>}
          {err && mode!=='upgrade' && <div className="rm-err">{err}</div>}
          <button className="acct-signout" onClick={signOut}>{guest ? 'Discard guest & sign out' : 'Sign out'}</button>
        </div>
      )}
    </div>
  );
}
window.AccountMenu = AccountMenu;