/* ============ LOGIN SCREEN ============ */
const USERS = [
  { username: 'admin',   password: '1221', role: 'employee', displayName: 'Employee' },
  { username: 'manager', password: '1616', role: 'manager',  displayName: 'Manager'  },
];

function LoginScreen({ onLogin }) {
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPass, setShowPass] = React.useState(false);
  const [error, setError]       = React.useState('');
  const [loading, setLoading]   = React.useState(false);

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    setLoading(true);
    setTimeout(() => {
      const user = USERS.find(
        u => u.username === username.trim().toLowerCase() && u.password === password
      );
      if (user) {
        localStorage.setItem('helbawi_user', JSON.stringify({ username: user.username, role: user.role, displayName: user.displayName }));
        onLogin({ username: user.username, role: user.role, displayName: user.displayName });
      } else {
        setError('Incorrect username or password.');
        setLoading(false);
      }
    }, 400);
  };

  return (
    <div style={{
      minHeight:'100vh', background:'linear-gradient(135deg,var(--sidebar-top),var(--sidebar-bot))',
      display:'flex', alignItems:'center', justifyContent:'center', padding:20,
    }}>
      <div style={{
        background:'#fff', borderRadius:24, boxShadow:'0 24px 80px rgba(193,0,80,.35)',
        width:'100%', maxWidth:400, padding:'40px 36px',
      }}>
        {/* Logo */}
        <div style={{textAlign:'center', marginBottom:28}}>
          <img src="helbawi-logo-mark.png" alt="Helbawi" style={{width:72, marginBottom:12}} onError={e=>e.target.style.display='none'}/>
          <div style={{fontSize:22, fontWeight:800, color:'var(--magenta)', letterSpacing:'-.01em'}}>Helbawi Warehouse</div>
          <div style={{color:'var(--muted)', fontSize:14, marginTop:4}}>Sign in to continue</div>
        </div>

        <form onSubmit={handleSubmit}>
          <div className="field" style={{marginBottom:16}}>
            <label>Username</label>
            <input
              className="input"
              placeholder="Enter your username"
              value={username}
              onChange={e => { setUsername(e.target.value); setError(''); }}
              autoFocus
              autoComplete="username"
            />
          </div>

          <div className="field" style={{marginBottom:24}}>
            <label>Password</label>
            <div style={{position:'relative'}}>
              <input
                className="input"
                type={showPass ? 'text' : 'password'}
                placeholder="Enter your password"
                value={password}
                onChange={e => { setPassword(e.target.value); setError(''); }}
                autoComplete="current-password"
                style={{paddingRight:44}}
              />
              <button type="button" onClick={() => setShowPass(v => !v)}
                style={{position:'absolute',right:12,top:'50%',transform:'translateY(-50%)',
                  background:'none',border:'none',cursor:'pointer',color:'var(--muted)',padding:4}}>
                <Icon name={showPass ? 'eye' : 'eye'} size={18}/>
              </button>
            </div>
          </div>

          {error && (
            <div style={{
              background:'var(--crit-bg)', color:'var(--crit)', borderRadius:10,
              padding:'10px 14px', fontSize:13, fontWeight:600, marginBottom:16,
              display:'flex', alignItems:'center', gap:8,
            }}>
              <Icon name="alert" size={16}/> {error}
            </div>
          )}

          <button
            type="submit"
            className="btn btn-primary"
            style={{width:'100%', fontSize:16, padding:'14px', opacity: loading ? .7 : 1}}
            disabled={loading || !username || !password}
          >
            {loading ? 'Signing in…' : 'Sign In'}
          </button>
        </form>

        <div style={{textAlign:'center', marginTop:24, color:'var(--muted)', fontSize:12}}>
          © 2026 Helbawi Inventory System
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;