/* Sprig — login screen shown when no valid session cookie is present. */
const { useState: useAuthState } = React;

function checkAuth() {
  return fetch('/api/auth/me').then(r => r.ok);
}

function LoginScreen({ onLoggedIn }) {
  const [email, setEmail] = useAuthState('');
  const [password, setPassword] = useAuthState('');
  const [error, setError] = useAuthState('');
  const [busy, setBusy] = useAuthState(false);

  function submit(e) {
    e.preventDefault();
    if (busy) return;
    setError('');
    setBusy(true);
    fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    })
      .then(async r => {
        const data = await r.json().catch(() => ({}));
        if (!r.ok) throw new Error(data.error || 'Login failed');
        onLoggedIn();
      })
      .catch(err => setError(err.message))
      .finally(() => setBusy(false));
  }

  const bg = '#1f242e', panel = '#2a313d', line = '#3a4250', text = '#e8ebf0', muted = '#98a0ad', accent = '#2A6FDB', bad = '#F0688A';

  return React.createElement('div', { style: {
    position: 'absolute', inset: 0, background: bg, color: text, fontFamily: "'Hanken Grotesk', sans-serif",
    display: 'flex', alignItems: 'center', justifyContent: 'center' } },
    React.createElement('form', { onSubmit: submit, style: {
      width: 320, padding: 28, borderRadius: 14, background: panel, border: `1px solid ${line}`,
      boxShadow: '0 16px 50px rgba(0,0,0,.45)', display: 'flex', flexDirection: 'column', gap: 14 } },
      React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 9, marginBottom: 6 } },
        React.createElement('div', { style: { width: 28, height: 28, borderRadius: 8, background: accent,
          display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 16 } }, '🌱'),
        React.createElement('span', { style: { fontWeight: 700, fontSize: 16, letterSpacing: '-0.01em' } }, 'Cody - Life map')),
      React.createElement('input', {
        type: 'email', required: true, autoFocus: true, placeholder: 'Email', value: email,
        onChange: e => setEmail(e.target.value),
        style: inputStyle(line, text) }),
      React.createElement('input', {
        type: 'password', required: true, placeholder: 'Password', value: password,
        onChange: e => setPassword(e.target.value),
        style: inputStyle(line, text) }),
      error && React.createElement('div', { style: { fontSize: 12.5, color: bad } }, error),
      React.createElement('button', { type: 'submit', disabled: busy, style: {
        padding: '10px 14px', borderRadius: 9, border: 'none', cursor: busy ? 'default' : 'pointer',
        background: accent, color: '#fff', fontSize: 14, fontWeight: 600, opacity: busy ? 0.7 : 1 } },
        busy ? 'Signing in…' : 'Sign in')));
}

function inputStyle(line, text) {
  return {
    padding: '10px 12px', borderRadius: 9, border: `1px solid ${line}`, background: 'transparent',
    color: text, fontSize: 14, outline: 'none', fontFamily: "'Hanken Grotesk', sans-serif",
  };
}

Object.assign(window, { SprigAuth: { LoginScreen, checkAuth } });