// Login / stub auth screen
function Login({ onLogin }) {
  const [tab, setTab] = React.useState('login');
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [name, setName] = React.useState('');
  const [error, setError] = React.useState('');

  function handleSubmit(e) {
    e.preventDefault();
    if (!email || !password) { setError('Please fill in all fields.'); return; }
    if (tab === 'register' && !name) { setError('Please enter your name.'); return; }
    const user = { email, name: name || email.split('@')[0], joinedAt: Date.now() };
    saveUser(user);
    onLogin(user);
  }

  return (
    <div style={loginStyles.overlay}>
      <div style={loginStyles.card}>
        <div style={loginStyles.logo}>
          <span style={loginStyles.logoIcon}>⬛</span>
          <span style={loginStyles.logoText}>blindth</span>
        </div>
        <p style={loginStyles.tagline}>Blind solving, tracked.</p>

        <div style={loginStyles.tabs}>
          {['login','register'].map(t => (
            <button key={t} style={{...loginStyles.tab, ...(tab===t ? loginStyles.tabActive : {})}}
              onClick={() => { setTab(t); setError(''); }}>
              {t === 'login' ? 'Sign In' : 'Register'}
            </button>
          ))}
        </div>

        <form onSubmit={handleSubmit} style={loginStyles.form}>
          {tab === 'register' && (
            <div style={loginStyles.field}>
              <label style={loginStyles.label}>Name</label>
              <input style={loginStyles.input} type="text" value={name}
                onChange={e => setName(e.target.value)} placeholder="Your name" autoFocus />
            </div>
          )}
          <div style={loginStyles.field}>
            <label style={loginStyles.label}>Email</label>
            <input style={loginStyles.input} type="email" value={email}
              onChange={e => setEmail(e.target.value)} placeholder="you@example.com"
              autoFocus={tab === 'login'} />
          </div>
          <div style={loginStyles.field}>
            <label style={loginStyles.label}>Password</label>
            <input style={loginStyles.input} type="password" value={password}
              onChange={e => setPassword(e.target.value)} placeholder="••••••••" />
          </div>
          {error && <p style={loginStyles.error}>{error}</p>}
          <button type="submit" style={loginStyles.submitBtn}>
            {tab === 'login' ? 'Sign In' : 'Create Account'}
          </button>
        </form>

        <p style={loginStyles.demoNote}>
          Demo mode — no real backend. Data stored in your browser.
        </p>
      </div>
    </div>
  );
}

const loginStyles = {
  overlay: {
    position: 'fixed', inset: 0,
    background: 'oklch(10% 0.01 250)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    fontFamily: "'Inter', sans-serif",
  },
  card: {
    background: 'oklch(14% 0.01 250)',
    border: '1px solid oklch(22% 0.01 250)',
    borderRadius: '12px',
    padding: '40px',
    width: '360px',
    display: 'flex', flexDirection: 'column', gap: '20px',
  },
  logo: { display: 'flex', alignItems: 'center', gap: '10px' },
  logoIcon: { fontSize: '22px' },
  logoText: {
    fontFamily: "'JetBrains Mono', monospace",
    fontSize: '22px', fontWeight: '700',
    color: 'oklch(90% 0.01 250)', letterSpacing: '-0.5px',
  },
  tagline: { margin: 0, fontSize: '13px', color: 'oklch(55% 0.01 250)' },
  tabs: { display: 'flex', gap: '4px', background: 'oklch(10% 0.01 250)', borderRadius: '8px', padding: '4px' },
  tab: {
    flex: 1, padding: '8px 0', border: 'none', borderRadius: '6px',
    background: 'transparent', color: 'oklch(55% 0.01 250)',
    fontSize: '13px', fontWeight: '500', cursor: 'pointer', fontFamily: 'inherit',
    transition: 'all 0.15s',
  },
  tabActive: {
    background: 'oklch(20% 0.01 250)', color: 'oklch(90% 0.01 250)',
  },
  form: { display: 'flex', flexDirection: 'column', gap: '14px' },
  field: { display: 'flex', flexDirection: 'column', gap: '6px' },
  label: { fontSize: '12px', color: 'oklch(55% 0.01 250)', fontWeight: '500', letterSpacing: '0.05em' },
  input: {
    padding: '10px 12px', borderRadius: '8px',
    background: 'oklch(10% 0.01 250)',
    border: '1px solid oklch(22% 0.01 250)',
    color: 'oklch(90% 0.01 250)', fontSize: '14px', fontFamily: 'inherit',
    outline: 'none', transition: 'border-color 0.15s',
  },
  error: { margin: 0, fontSize: '13px', color: 'oklch(65% 0.18 25)' },
  submitBtn: {
    padding: '11px', borderRadius: '8px', border: 'none',
    background: 'oklch(65% 0.18 165)', color: 'oklch(10% 0.01 250)',
    fontSize: '14px', fontWeight: '600', cursor: 'pointer',
    fontFamily: 'inherit', transition: 'opacity 0.15s', marginTop: '4px',
  },
  demoNote: {
    margin: 0, fontSize: '11px', color: 'oklch(38% 0.01 250)',
    textAlign: 'center',
  },
};

Object.assign(window, { Login });