// Loginscherm — enige route zonder sessie. Eén Google-knop die de hele
// OAuth-flow start (Supabase → Google → terug naar /). Health-scopes
// worden meegevraagd, dus na 1x toestaan is de Google Health koppeling
// meteen geregeld.

function LoginScreen({ error }) {
  const [busy, setBusy] = React.useState(false);
  const [localError, setLocalError] = React.useState(null);

  const onLogin = async () => {
    setBusy(true);
    setLocalError(null);
    try {
      await window.moderisAuth.signIn();
      // Bij succes redirect de browser — deze regel wordt nooit bereikt.
    } catch (err) {
      setBusy(false);
      setLocalError(err.message || 'Inloggen mislukt');
    }
  };

  const shownError = localError || error;

  return (
    <div style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'var(--m-bg, #faf7f1)', padding: 24,
    }}>
      <div style={{
        width: '100%', maxWidth: 380, background: 'var(--m-card, #fff)',
        border: '1px solid var(--m-line, #e8e2d2)', borderRadius: 22,
        padding: '32px 28px', boxShadow: '0 8px 32px rgba(30,40,25,0.06)',
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', marginBottom: 22 }}>
          <div style={{
            width: 56, height: 56, borderRadius: 18,
            background: 'var(--forest-100, #e5efe1)',
            display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 14,
          }}>
            <MIcon name="leaf" size={26} color="var(--forest-600, #3d6b3a)" />
          </div>
          <h1 style={{ fontSize: 22, fontWeight: 700, margin: 0, color: 'var(--ink, #1d231a)' }}>
            Moderis
          </h1>
          <div style={{ fontSize: 13, color: 'var(--ink-3, #7a8276)', marginTop: 4 }}>
            Je persoonlijke voedingscoach
          </div>
        </div>

        <p style={{ fontSize: 13.5, color: 'var(--ink-2, #4b5347)', lineHeight: 1.5, marginBottom: 22 }}>
          Log in met Google om je dagdoelen, voedingslogs en Google Health-data
          (stappen, hartslag, slaap) op één plek te brengen.
        </p>

        <button onClick={onLogin} disabled={busy} style={{
          width: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 10,
          padding: '13px 16px', borderRadius: 14, border: '1px solid var(--m-line, #e8e2d2)',
          background: '#fff', cursor: busy ? 'wait' : 'pointer', fontSize: 14.5, fontWeight: 600,
          color: 'var(--ink, #1d231a)', opacity: busy ? 0.6 : 1,
        }}>
          <svg width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
            <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.49h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.91c1.7-1.57 2.69-3.88 2.69-6.63z"/>
            <path fill="#34A853" d="M9 18c2.43 0 4.47-.81 5.95-2.18l-2.91-2.26c-.8.54-1.83.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.95v2.33A9 9 0 0 0 9 18z"/>
            <path fill="#FBBC05" d="M3.97 10.71A5.4 5.4 0 0 1 3.68 9c0-.6.1-1.17.29-1.71V4.96H.95A9 9 0 0 0 0 9c0 1.45.35 2.83.95 4.04l3.02-2.33z"/>
            <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.34l2.58-2.58A9 9 0 0 0 9 0 9 9 0 0 0 .95 4.96l3.02 2.33C4.68 5.16 6.66 3.58 9 3.58z"/>
          </svg>
          {busy ? 'Doorgaan met Google…' : 'Inloggen met Google'}
        </button>

        {shownError && (
          <div style={{
            marginTop: 14, padding: '10px 12px', borderRadius: 10,
            background: '#fef0ee', border: '1px solid #f5c6c0',
            fontSize: 12.5, color: '#9b2c1c',
          }}>
            {shownError}
          </div>
        )}

        <div style={{ marginTop: 18, fontSize: 11.5, color: 'var(--ink-3, #7a8276)', textAlign: 'center', lineHeight: 1.5 }}>
          Door in te loggen geef je Moderis toestemming om je Google Health-data
          (stappen, hartslag, slaap) te lezen.
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;