// Login screen — editorial, split-field composition

function LoginScreen({ onLogin }) {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [err, setErr] = React.useState('');
  const [busy, setBusy] = React.useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr(''); setBusy(true);
    try {
      const r = await fetch('/api/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password }),
      });
      if (!r.ok) { setErr('Wrong username or password.'); return; }
      onLogin();
    } catch (e) {
      setErr('Could not reach server.');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div style={{
      minHeight: '100vh', background: 'var(--paper)',
      display: 'grid', gridTemplateColumns: '1.1fr 1fr', color: 'var(--ink)',
    }}>
      <div style={{
        position: 'relative', padding: '48px 56px',
        borderRight: '1px solid var(--line)',
        display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
        minHeight: 720, overflow: 'hidden',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span className="dot dot-red" />
          <Eyebrow>Surveys · Administration</Eyebrow>
        </div>

        <div>
          <Wordmark size={148} style={{ display: 'block', lineHeight: 0.82 }} />
          <div style={{
            marginTop: 28, fontFamily: 'var(--font-display)', fontStyle: 'italic',
            fontWeight: 400, fontSize: 28, lineHeight: 1.25, color: 'var(--muted)', maxWidth: 460,
          }}>
            A quieter way to ask the questions<br />
            that matter to our creators,<br />
            partners & community.
          </div>
        </div>

        <div style={{ display: 'flex', gap: 40, alignItems: 'baseline' }}>
          <div>
            <Eyebrow>Version</Eyebrow>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 6 }}>2026.04</div>
          </div>
          <div>
            <Eyebrow>Host</Eyebrow>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, marginTop: 6 }}>surveys.belladata.org</div>
          </div>
        </div>

        <div style={{
          position: 'absolute', right: -40, top: 60, fontFamily: 'var(--font-display)',
          fontSize: 420, color: 'var(--paper-3)', lineHeight: 1, pointerEvents: 'none',
          userSelect: 'none', fontStyle: 'italic', letterSpacing: '-0.04em',
        }}>E</div>
      </div>

      <div style={{
        padding: '48px 56px', display: 'flex', flexDirection: 'column',
        justifyContent: 'center', background: 'var(--paper-2)',
      }}>
        <div style={{ maxWidth: 380, width: '100%', margin: '0 auto' }}>
          <Eyebrow>01 — Sign in</Eyebrow>
          <h1 style={{
            fontFamily: 'var(--font-display)', fontWeight: 400,
            fontSize: 48, lineHeight: 1.05, margin: '12px 0 8px',
          }}>Welcome back.</h1>
          <div style={{ color: 'var(--muted)', fontSize: 14, marginBottom: 36 }}>
            Sign in to build, publish and review Erobella surveys.
          </div>

          <form onSubmit={submit}>
            <div style={{ marginBottom: 22 }}>
              <label className="label">Username</label>
              <input className="input" autoFocus value={username} onChange={e => setUsername(e.target.value)} autoComplete="username" />
            </div>

            <div style={{ marginBottom: 8 }}>
              <label className="label">Password</label>
              <input className="input" type="password" value={password} onChange={e => setPassword(e.target.value)} autoComplete="current-password" />
            </div>

            {err && (
              <div style={{ marginTop: 12, fontSize: 12, color: 'var(--red)', display: 'flex', alignItems: 'center', gap: 6 }}>
                <span className="dot dot-red" /> {err}
              </div>
            )}

            <button type="submit" disabled={busy} className="btn btn-primary" style={{ width: '100%', justifyContent: 'center', padding: '14px', marginTop: 22, opacity: busy ? 0.6 : 1 }}>
              {busy ? 'Signing in…' : <>Sign in {Icon.arrow(14)}</>}
            </button>

            <div style={{ marginTop: 18, padding: '12px 14px', background: 'var(--paper)', border: '1px solid var(--line)', borderRadius: 2, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--muted)', display: 'flex', alignItems: 'center', gap: 10, lineHeight: 1.5 }}>
              {Icon.link(12)}
              <span>surveys.belladata.org/admin/</span>
            </div>
          </form>

          <div style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', fontSize: 12, color: 'var(--muted)', lineHeight: 1.6 }}>
            Staff only. Participant surveys are at <span style={{ fontFamily: 'var(--font-mono)', color: 'var(--ink)' }}>erobella.com/surveys/&lt;slug&gt;</span> — no account needed.
          </div>
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;