/* ============================================
   LOGIN SCREEN
   ============================================ */

const LoginScreen = ({ onLogin }) => {
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [showPw, setShowPw] = React.useState(false);
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState('');

  const tryLogin = (userId) => {
    setLoading(true);
    setTimeout(() => {
      onLogin(userId || 'u1');
    }, 350);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    setError('');
    if (!email) { setError('Please enter your email'); return; }
    if (!password) { setError('Please enter your password'); return; }
    // Mock: any creds work
    const found = USERS.find(u => u.email.toLowerCase() === email.toLowerCase());
    tryLogin(found ? found.id : 'u1');
  };

  return (
    <div className="login-wrap">
      <div className="login-form-col">
        <form className="login-form" onSubmit={handleSubmit}>
          <div className="login-brand">
            <div className="sb-logo">T</div>
            <div className="login-brand-name">Tasker</div>
          </div>
          <h1 className="login-h1">Welcome back 👋</h1>
          <p className="login-sub">Sign in to manage your team's tasks.</p>

          <div className="fg">
            <label className="fl">Work email</label>
            <input
              type="email"
              className="fi"
              placeholder="you@dtgo.com"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              autoComplete="email"
            />
          </div>

          <div className="fg">
            <label className="fl">Password</label>
            <div style={{ position: 'relative' }}>
              <input
                type={showPw ? 'text' : 'password'}
                className="fi"
                placeholder="••••••••"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
                autoComplete="current-password"
                style={{ paddingRight: 36, width: '100%' }}
              />
              <button
                type="button"
                onClick={() => setShowPw(s => !s)}
                style={{
                  position: 'absolute', right: 4, top: '50%', transform: 'translateY(-50%)',
                  background: 'transparent', border: 'none', color: 'var(--text-subtle)',
                  padding: 8, cursor: 'pointer', display: 'grid', placeItems: 'center', borderRadius: 6,
                }}
              >
                <Icon name={showPw ? 'eyeOff' : 'eye'} size={16} />
              </button>
            </div>
          </div>

          <div className="login-row">
            <label style={{ display: 'flex', alignItems: 'center', gap: 6, cursor: 'pointer' }}>
              <input type="checkbox" defaultChecked /> Remember me
            </label>
            <a href="#" onClick={(e) => e.preventDefault()}>Forgot password?</a>
          </div>

          {error && (
            <div style={{ color: 'var(--c-rose)', fontSize: 12.5, marginBottom: 12, padding: '8px 10px', background: 'rgba(244,63,94,.08)', borderRadius: 8, border: '1px solid rgba(244,63,94,.2)' }}>
              {error}
            </div>
          )}

          <button type="submit" className="btn btn-primary" disabled={loading}>
            {loading ? <span className="spinner" style={{ borderTopColor: 'white' }} /> : <Icon name="arrow" size={14} />}
            {loading ? 'Signing in…' : 'Sign in'}
          </button>

          <div className="login-divider">or sign in as demo user</div>

          <div className="login-team">
            <div className="login-team-title">Choose a team member</div>
            <div className="login-team-grid">
              {USERS.slice(0, 8).map(u => (
                <button
                  key={u.id}
                  type="button"
                  className="login-team-btn"
                  onClick={() => tryLogin(u.id)}
                >
                  <Avatar user={u} size="sm" />
                  <span style={{ flex: 1, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                    {u.short}
                  </span>
                </button>
              ))}
            </div>
          </div>
        </form>
      </div>

      <div className="login-hero-col">
        <div className="login-hero">
          <h2>Get your team aligned, one task at a time.</h2>
          <p>Kanban, list, calendar — all in one place. Built for fast-moving teams shipping real work.</p>

          <div className="login-preview">
            <div className="login-preview-row">
              <span className="av av-sm" style={{ background: '#6D49F2' }}>PS</span>
              <span style={{ fontSize: 12, fontWeight: 600, color: '#1A1D29', flex: 1 }}>Redesign property page</span>
              <span className="badge prio-Highest" style={{ fontSize: 10 }}><span className="dot" />Highest</span>
            </div>
            <div className="login-preview-row">
              <span className="av av-sm" style={{ background: '#10B981' }}>KT</span>
              <span className="lp-bar short" />
              <span style={{ fontSize: 11, color: '#64748B', fontWeight: 600 }}>In progress</span>
            </div>
            <div className="login-preview-row">
              <span className="av av-sm" style={{ background: '#EC4899' }}>JT</span>
              <span className="lp-bar" />
              <span style={{ fontSize: 11, color: '#10B981', fontWeight: 600 }}>✓ Done</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { LoginScreen });