// Delte auth-UI-komponenter for Takt: AuthScreen (innloggingskort) og
// AuthPill (topbar-chip). Lastes med <script type="text/babel"
// src="shared/auth-ui.jsx">, etter shared/auth.js og shared/design-tokens.js
// (for PC-fargetokens).

function useAuthUser() {
  const [user, setUser] = React.useState(() => window.TaktAuth.getUser());
  React.useEffect(() => window.TaktAuth.onChange(setUser), []);
  return user;
}

function emailValid(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

function authErrorMessage(err, context) {
  const status = err && (err.status || err.code);
  const msg = ((err && err.message) || '').toLowerCase();
  if (status === 429 || msg.includes('rate limit') || msg.includes('too many requests')) {
    return 'For mange forsøk. Vent litt før du prøver igjen.';
  }
  if (context === 'verify') {
    return 'Koden er feil eller utløpt. Be om en ny.';
  }
  return 'Noe gikk galt. Prøv igjen.';
}

function userLabel(user) {
  if (!user) return '';
  const meta = user.user_metadata || {};
  return meta.full_name || meta.name || user.email || 'Innlogget';
}

// ─── AuthScreen ───────────────────────────────────────────────
// To likestilte innloggingsveier — Google og e-post. Rendres som et
// frittstående kort (ingen egen sideramme), så den kan settes inn både
// direkte i en side og inni en modal.
function AuthScreen({ onSuccess, compact }) {
  const [mode, setMode]   = React.useState('start'); // start | code
  const [email, setEmail] = React.useState('');
  const [code, setCode]   = React.useState('');
  const [busy, setBusy]   = React.useState(false);
  const [error, setError] = React.useState('');
  const [cooldown, setCooldown] = React.useState(0);

  React.useEffect(() => {
    if (cooldown <= 0) return;
    const t = setInterval(() => setCooldown(c => Math.max(0, c - 1)), 1000);
    return () => clearInterval(t);
  }, [cooldown > 0]);

  const handleGoogle = async () => {
    setError(''); setBusy(true);
    try {
      await window.TaktAuth.signInWithGoogle();
      // Siden navigerer bort til Google — ingen behov for å nullstille busy.
    } catch (err) {
      setError(authErrorMessage(err, 'google'));
      setBusy(false);
    }
  };

  const handleSendCode = async (e) => {
    e.preventDefault();
    if (!emailValid(email)) { setError('Skriv inn en gyldig e-postadresse.'); return; }
    setError(''); setBusy(true);
    try {
      await window.TaktAuth.sendEmailCode(email);
      setMode('code');
      setCooldown(60);
    } catch (err) {
      setError(authErrorMessage(err, 'send'));
    } finally {
      setBusy(false);
    }
  };

  const handleResend = async () => {
    if (cooldown > 0 || busy) return;
    setError(''); setBusy(true);
    try {
      await window.TaktAuth.sendEmailCode(email);
      setCooldown(60);
    } catch (err) {
      setError(authErrorMessage(err, 'send'));
    } finally {
      setBusy(false);
    }
  };

  const handleVerify = async (e) => {
    e.preventDefault();
    if (code.length !== 6) { setError('Koden er 6 siffer.'); return; }
    setError(''); setBusy(true);
    try {
      await window.TaktAuth.verifyEmailCode(email, code);
      onSuccess && onSuccess();
    } catch (err) {
      setError(authErrorMessage(err, 'verify'));
    } finally {
      setBusy(false);
    }
  };

  const labelStyle = { fontWeight:700, fontSize:10, letterSpacing:'0.22em', textTransform:'uppercase', color:PC.muted, display:'block', marginBottom:8 };
  const inputStyle = { width:'100%', padding:'14px 16px', borderRadius:8, border:`2px solid ${PC.line2}`, background:PC.paper, fontFamily:"'Archivo',sans-serif", fontSize:15, color:PC.ink, outline:'none', boxSizing:'border-box' };
  const primaryBtn = (bg) => ({ width:'100%', padding:'14px', borderRadius:8, border:'none', background:bg, color:'#fff', fontFamily:"'Archivo',sans-serif", fontWeight:800, fontSize:14, textTransform:'uppercase', letterSpacing:'0.1em', cursor:'pointer' });
  const ghostBtn = { padding:'10px', borderRadius:8, border:`1px solid ${PC.line2}`, background:'transparent', color:PC.ink2, fontFamily:"'Archivo',sans-serif", fontWeight:700, fontSize:12, textTransform:'uppercase', letterSpacing:'0.08em', cursor:'pointer' };

  return (
    <div style={{ width:'100%', maxWidth: compact ? 360 : 420, display:'flex', flexDirection:'column', gap:20 }}>
      <div>
        <div style={{ fontWeight:900, fontSize: compact?20:26, letterSpacing:'-0.02em', color:PC.ink }}>Logg inn på Takt</div>
        <div style={{ fontSize:13, color:PC.muted, marginTop:4 }}>Google eller e-post — begge gir tilgang til dine skyprogrammer.</div>
      </div>

      {mode === 'start' && (
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <button type="button" onClick={handleGoogle} disabled={busy} style={primaryBtn(PC.ink)}>
            Fortsett med Google
          </button>

          <div style={{ display:'flex', alignItems:'center', gap:10 }}>
            <div style={{ flex:1, height:1, background:PC.line }} />
            <span style={{ fontSize:11, color:PC.dim, fontWeight:700, letterSpacing:'0.1em', textTransform:'uppercase' }}>eller</span>
            <div style={{ flex:1, height:1, background:PC.line }} />
          </div>

          <form onSubmit={handleSendCode} style={{ display:'flex', flexDirection:'column', gap:10 }}>
            <div>
              <label style={labelStyle}>E-post</label>
              <input
                type="email"
                value={email}
                onChange={e => { setEmail(e.target.value); setError(''); }}
                placeholder="deg@eksempel.no"
                style={inputStyle}
              />
            </div>
            <button type="submit" disabled={busy} style={primaryBtn(PC.accent)}>
              Send kode
            </button>
          </form>
        </div>
      )}

      {mode === 'code' && (
        <div style={{ display:'flex', flexDirection:'column', gap:14 }}>
          <div style={{ fontSize:14, color:PC.ink2, lineHeight:1.6 }}>
            Vi sendte en e-post til <strong>{email}</strong>. Klikk lenka, eller skriv inn koden her.
          </div>
          <form onSubmit={handleVerify} style={{ display:'flex', flexDirection:'column', gap:10 }}>
            <div>
              <label style={labelStyle}>Kode</label>
              <input
                type="tel"
                inputMode="numeric"
                pattern="[0-9]*"
                maxLength={6}
                value={code}
                onChange={e => { setCode(e.target.value.replace(/\D/g,'')); setError(''); }}
                placeholder="123456"
                autoFocus
                style={{ ...inputStyle, fontFamily:"'Space Mono',monospace", fontSize:24, fontWeight:700, letterSpacing:'0.3em', textAlign:'center' }}
              />
            </div>
            <button type="submit" disabled={busy || code.length !== 6} style={primaryBtn(code.length===6 ? PC.accent : 'rgba(22,20,15,0.16)')}>
              Bekreft kode
            </button>
          </form>
          <button type="button" onClick={handleResend} disabled={cooldown > 0 || busy} style={{ ...ghostBtn, opacity: cooldown > 0 ? 0.5 : 1 }}>
            {cooldown > 0 ? `Send på nytt (${cooldown}s)` : 'Send på nytt'}
          </button>
          <button type="button" onClick={() => { setMode('start'); setCode(''); setError(''); }} style={{ background:'none', border:'none', color:PC.muted, fontFamily:"'Archivo',sans-serif", fontWeight:600, fontSize:12, cursor:'pointer', textAlign:'left', padding:0 }}>
            ← Bruk en annen e-postadresse
          </button>
        </div>
      )}

      {error && <div style={{ fontSize:13, color:PC.z5, fontWeight:600 }}>{error}</div>}
    </div>
  );
}

// ─── AuthPill ─────────────────────────────────────────────────
// Erstatter den falske «● Stian H.»-pillen i topbaren med reell status.
function AuthPill({ onLoginClick }) {
  const user = useAuthUser();
  const [busy, setBusy] = React.useState(false);

  if (!user) {
    return (
      <button type="button" onClick={onLoginClick} style={{ padding:'4px 12px', borderRadius:4, color:'#fff', background:PC.accent, border:'none', fontFamily:"'Archivo',sans-serif", fontWeight:700, fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', cursor:'pointer' }}>
        Logg inn
      </button>
    );
  }

  const handleSignOut = async () => {
    setBusy(true);
    try { await window.TaktAuth.signOut(); } finally { setBusy(false); }
  };

  return (
    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
      <span style={{ padding:'4px 12px', borderRadius:4, color:PC.z2, border:`1.5px solid ${PC.z2}`, fontFamily:"'Archivo',sans-serif", fontWeight:700, fontSize:10, letterSpacing:'0.12em', textTransform:'uppercase', maxWidth:180, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>
        ● {userLabel(user)}
      </span>
      <button type="button" onClick={handleSignOut} disabled={busy} style={{ background:'none', border:'none', color:PC.muted, fontFamily:"'Archivo',sans-serif", fontWeight:700, fontSize:10, letterSpacing:'0.1em', textTransform:'uppercase', cursor:'pointer', padding:0 }}>
        Logg ut
      </button>
    </div>
  );
}

Object.assign(window, { AuthScreen, AuthPill, useAuthUser });