// screen-login.jsx — login / register gate
const { useState: useLS } = React;

function LoginScreen({ onLogin }) {
  const [mode, setMode] = useLS('login'); // 'login' | 'register'
  const [email, setEmail] = useLS('heba@ideamint.io');
  const [password, setPassword] = useLS('password123');
  const [name, setName] = useLS('');
  const [role, setRole] = useLS('Employee');
  const [error, setError] = useLS('');
  const [loading, setLoading] = useLS(false);

  async function submit(e) {
    e.preventDefault();
    setError(''); setLoading(true);
    try {
      let result;
      if (mode === 'login') {
        result = await window.API.login(email, password);
      } else {
        result = await window.API.register(name, email, password, role);
      }
      localStorage.setItem('ims_token', result.token);
      onLogin(result.user, result.token);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div style={{
      minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'var(--bg)', padding: 24,
    }}>
      <div style={{
        background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 'var(--r-xl)',
        boxShadow: 'var(--sh-lg)', padding: '40px 36px', width: '100%', maxWidth: 400,
      }}>
        {/* Logo */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 32 }}>
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
            <rect width="32" height="32" rx="9" fill="var(--accent)"/>
            <path d="M10 22L16 10L22 22" stroke="white" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/>
            <path d="M12.5 18H19.5" stroke="white" strokeWidth="2.4" strokeLinecap="round"/>
          </svg>
          <span style={{ fontWeight: 800, fontSize: 20, color: 'var(--ink-900)', letterSpacing: '-0.5px' }}>IdeaMint</span>
        </div>

        <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--ink-900)', marginBottom: 6 }}>
          {mode === 'login' ? 'Welcome back' : 'Create account'}
        </div>
        <div style={{ fontSize: 13.5, color: 'var(--ink-400)', marginBottom: 28 }}>
          {mode === 'login' ? 'Sign in to your Ideas Management System' : 'Join the IdeaMint platform'}
        </div>

        <form onSubmit={submit}>
          {mode === 'register' && (
            <>
              <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--ink-500)', marginBottom: 6 }}>Full name</label>
              <input
                className="field" type="text" placeholder="Your name" value={name}
                onChange={e => setName(e.target.value)} required style={{ width: '100%', marginBottom: 16, boxSizing: 'border-box' }}
              />
              <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--ink-500)', marginBottom: 6 }}>Role</label>
              <input
                className="field" type="text" placeholder="e.g. Product Manager" value={role}
                onChange={e => setRole(e.target.value)} style={{ width: '100%', marginBottom: 16, boxSizing: 'border-box' }}
              />
            </>
          )}

          <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--ink-500)', marginBottom: 6 }}>Email</label>
          <input
            className="field" type="email" placeholder="you@example.com" value={email}
            onChange={e => setEmail(e.target.value)} required style={{ width: '100%', marginBottom: 16, boxSizing: 'border-box' }}
          />

          <label style={{ display: 'block', fontSize: 12.5, fontWeight: 700, color: 'var(--ink-500)', marginBottom: 6 }}>Password</label>
          <input
            className="field" type="password" placeholder="••••••••" value={password}
            onChange={e => setPassword(e.target.value)} required style={{ width: '100%', marginBottom: 8, boxSizing: 'border-box' }}
          />

          {error && (
            <div style={{ fontSize: 13, color: '#e23b56', background: '#fff0f3', border: '1px solid #fcc', borderRadius: 8, padding: '8px 12px', marginBottom: 16 }}>
              {error}
            </div>
          )}

          {mode === 'login' && (
            <div style={{ fontSize: 12.5, color: 'var(--ink-400)', marginBottom: 20 }}>
              Demo: <strong>heba@ideamint.io</strong> / <strong>password123</strong>
              &nbsp;·&nbsp; Admin: <strong>admin@ideamint.io</strong>
            </div>
          )}

          <button
            type="submit"
            disabled={loading}
            style={{
              width: '100%', padding: '12px 0', background: 'var(--accent)', color: '#fff',
              border: 'none', borderRadius: 'var(--r)', fontWeight: 700, fontSize: 15,
              cursor: loading ? 'not-allowed' : 'pointer', opacity: loading ? 0.7 : 1,
              boxSizing: 'border-box',
            }}
          >
            {loading ? 'Please wait…' : mode === 'login' ? 'Sign in' : 'Create account'}
          </button>
        </form>

        <div style={{ marginTop: 24, textAlign: 'center', fontSize: 13.5, color: 'var(--ink-400)' }}>
          {mode === 'login' ? "Don't have an account? " : 'Already have an account? '}
          <button
            onClick={() => { setMode(mode === 'login' ? 'register' : 'login'); setError(''); }}
            style={{ background: 'none', border: 'none', color: 'var(--accent)', fontWeight: 700, cursor: 'pointer', fontSize: 13.5 }}
          >
            {mode === 'login' ? 'Register' : 'Sign in'}
          </button>
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;