/* auth.jsx — sign-in screen + auth gate.
   The app gates on a Supabase auth session. Sign-in is passwordless via
   magic link (Supabase signInWithOtp). When a session lands, the rest of
   the app is mounted. */
/* global React, Eyebrow, Button, Input */
const { useState, useEffect } = React;

// ============================================================================
// SignInScreen — email input → magic link
// ============================================================================
function SignInScreen({ onSent }) {
  const [email, setEmail] = useState('');
  const [busy, setBusy] = useState(false);
  const [sent, setSent] = useState(false);
  const [error, setError] = useState(null);

  const submit = async (e) => {
    e?.preventDefault();
    const v = email.trim().toLowerCase();
    if (!v) return;
    setBusy(true);
    setError(null);
    const { error } = await window.sb.auth.signInWithOtp({
      email: v,
      options: {
        emailRedirectTo: window.location.origin + window.location.pathname,
      },
    });
    setBusy(false);
    if (error) {
      setError(error.message);
    } else {
      setSent(true);
      onSent && onSent(v);
    }
  };

  return (
    <div style={shellStyle}>
      <div style={cardStyle}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>
          Familjeträning
        </div>
        <h1 style={{ margin: '6px 0 18px', fontSize: 28, fontWeight: 500, letterSpacing: '-0.02em' }}>
          {sent ? 'Kolla din inkorg' : 'Logga in'}
        </h1>

        {!sent && (
          <form onSubmit={submit}>
            <div style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.55, marginBottom: 16 }}>
              Ange din e-postadress så skickar vi en inloggningslänk. Inget lösenord behövs.
            </div>
            <input
              type="email"
              required
              autoFocus
              value={email}
              onChange={e => setEmail(e.target.value)}
              placeholder="namn@exempel.se"
              style={emailInputStyle}
            />
            {error && (
              <div style={{ fontSize: 12, color: 'var(--danger)', marginTop: 10, lineHeight: 1.5 }}>
                {error}
              </div>
            )}
            <div style={{ marginTop: 16, display: 'flex', justifyContent: 'flex-end' }}>
              <Button kind="primary" size="lg" disabled={busy || !email.trim()}>
                {busy ? 'Skickar…' : 'Skicka inloggningslänk'}
              </Button>
            </div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-subtle)', letterSpacing: '0.06em', marginTop: 20, textAlign: 'center' }}>
              Bara inbjudna kan logga in
            </div>
          </form>
        )}

        {sent && (
          <div>
            <p style={{ fontSize: 14, color: 'var(--fg)', lineHeight: 1.55, margin: '0 0 12px' }}>
              En inloggningslänk är skickad till <strong>{email}</strong>.
            </p>
            <p style={{ fontSize: 13, color: 'var(--fg-muted)', lineHeight: 1.55, margin: '0 0 18px' }}>
              Öppna mailet och klicka på länken — du loggas in automatiskt och kommer tillbaka hit.
            </p>
            <button
              onClick={() => { setSent(false); setEmail(''); }}
              style={{ background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-muted)', textTransform: 'uppercase', letterSpacing: '0.06em', padding: 0 }}
            >
              ← Logga in med annan adress
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// ============================================================================
// AuthGate — manages the session lifecycle and decides what to render.
// Renders: <SignInScreen> if no session, children(session) if session exists,
// or a loading splash while we figure it out.
// ============================================================================
function AuthGate({ children }) {
  const [state, setState] = useState({ status: 'loading', session: null });

  useEffect(() => {
    // Initial session check (handles both fresh visits and magic-link redirects)
    window.sb.auth.getSession().then(({ data, error }) => {
      if (error) {
        console.error('[auth] getSession error:', error);
      }
      setState({ status: data?.session ? 'authed' : 'signed_out', session: data?.session || null });
    });

    // Subscribe to changes
    const { data: sub } = window.sb.auth.onAuthStateChange((event, session) => {
      if (event === 'SIGNED_OUT' || !session) {
        setState({ status: 'signed_out', session: null });
      } else {
        setState({ status: 'authed', session });
      }
    });

    return () => { sub.subscription.unsubscribe(); };
  }, []);

  if (state.status === 'loading') {
    return (
      <div style={shellStyle}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--fg-subtle)' }}>
          Familjeträning · laddar
        </div>
      </div>
    );
  }

  if (state.status === 'signed_out') {
    return <SignInScreen />;
  }

  return children(state.session);
}

// ============================================================================
// Styles
// ============================================================================
const shellStyle = {
  minHeight: '100vh',
  background: 'var(--paper)',
  color: 'var(--fg)',
  fontFamily: 'var(--font-sans)',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  padding: 24,
};

const cardStyle = {
  width: '100%',
  maxWidth: 420,
  background: 'var(--bg-raised)',
  border: '1px solid var(--border)',
  borderRadius: 'var(--radius-2)',
  padding: 28,
  boxShadow: '0 24px 60px -20px rgba(0,0,0,0.10)',
};

const emailInputStyle = {
  width: '100%',
  padding: '12px 14px',
  fontFamily: 'var(--font-mono)',
  fontSize: 14,
  color: 'var(--fg)',
  background: 'var(--bg)',
  border: '1px solid var(--border-strong)',
  borderRadius: 4,
  outline: 'none',
  boxSizing: 'border-box',
};

window.AuthGate = AuthGate;
window.SignInScreen = SignInScreen;