// ============ Login screen (English only) ============
const { useState } = React;

const LoginScreen = ({ onLogin }) => {
  const [id, setId] = useState('');
  const [pw, setPw] = useState('');
  const [showPw, setShowPw] = useState(false);
  const [err, setErr] = useState('');
  const [busy, setBusy] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    setErr('');
    const uid = id.trim();
    if (!uid || !pw) { setErr('Please enter both User ID and Password.'); return; }
    setBusy(true);
    try {
      const result = await window.AUTH.verify(uid, pw);
      if (!result) {
        setErr('Invalid User ID or Password.');
        setBusy(false);
        return;
      }
      onLogin(result);
    } catch (e) {
      setErr('Sign-in failed. Please try again.');
      setBusy(false);
    }
  };

  return (
    <div className="auth-shell">
      {/* art panel */}
      <div className="auth-art">
        <div className="auth-logo-wrap">
          <img src="assets/school-logo.png" alt="CMUDS-ITPC" />
        </div>

        <div style={{flex:1, display:'flex', flexDirection:'column', justifyContent:'center', position:'relative', zIndex:1}}>
          <div style={{fontFamily:'var(--font-mono)', fontSize:13, letterSpacing:'.18em', opacity:.75, textTransform:'uppercase'}}>Welcome to</div>
          <div style={{fontFamily:'var(--font-serif)', fontWeight:500, fontSize:'clamp(48px, 7vw, 88px)', lineHeight:.98, letterSpacing:'-.03em', marginTop:8}}>
            CMUDS<span style={{opacity:.55}}>-</span>ITPC
          </div>
          <div style={{height:1, width:80, background:'rgba(255,255,255,.5)', margin:'24px 0'}}></div>
          <div style={{fontFamily:'var(--font-mono)', fontWeight:500, fontSize:'clamp(15px, 1.8vw, 20px)', letterSpacing:'.32em', textTransform:'uppercase', opacity:.95}}>
            Student Portfolio
          </div>
          <div style={{fontFamily:'var(--font-serif)', fontStyle:'italic', fontWeight:300, fontSize:'clamp(22px, 3vw, 32px)', letterSpacing:'-.01em', marginTop:14, opacity:.9}}>
            Art &amp; 2D Animation
          </div>
        </div>

        <div style={{position:'relative', zIndex:1, display:'flex', gap:18, fontSize:11.5, fontFamily:'var(--font-mono)', opacity:.65, textTransform:'uppercase', letterSpacing:'.06em'}}>
          <span>v 1.0 · 2026</span>
          <span style={{marginLeft:'auto'}}>Chiang Mai University</span>
        </div>
      </div>

      {/* form panel */}
      <div className="auth-form-wrap">
        <form className="auth-form" onSubmit={submit}>
          <div>
            <div className="mono muted" style={{fontSize:11, letterSpacing:'.08em', textTransform:'uppercase'}}>Welcome back</div>
            <h1>Sign <em>in.</em></h1>
            <div className="muted" style={{marginTop:6, fontSize:13.5}}>Access your portfolio and submissions</div>
          </div>

          <div className="field">
            <label>User ID</label>
            <input
              className="input input-lg"
              placeholder="e.g. admin, t1, s01"
              value={id}
              onChange={e=>setId(e.target.value)}
              autoComplete="username"
              autoFocus
            />
          </div>

          <div className="field">
            <label>Password</label>
            <div style={{position:'relative'}}>
              <input
                className="input input-lg"
                type={showPw ? 'text' : 'password'}
                placeholder="••••••••"
                value={pw}
                onChange={e=>setPw(e.target.value)}
                autoComplete="current-password"
                style={{paddingRight:46, width:'100%'}}
              />
              <button
                type="button"
                onClick={()=>setShowPw(s => !s)}
                aria-label={showPw ? 'Hide password' : 'Show password'}
                title={showPw ? 'Hide password' : 'Show password'}
                style={{
                  position:'absolute', right:6, top:'50%', transform:'translateY(-50%)',
                  background:'transparent', border:0, cursor:'pointer',
                  color:'var(--muted)', padding:8, display:'flex', alignItems:'center', justifyContent:'center',
                  borderRadius:8
                }}>
                <Icon name={showPw ? 'eyeOff' : 'eye'} size={18} />
              </button>
            </div>
          </div>

          {err && (
            <div style={{
              fontSize:12.5, color:'oklch(0.45 0.18 25)',
              background:'oklch(0.97 0.04 25)', border:'1px solid oklch(0.85 0.08 25)',
              padding:'10px 12px', borderRadius:10
            }}>
              {err}
            </div>
          )}

          <div className="row between" style={{fontSize:12}}>
            <label className="row" style={{gap:6, cursor:'pointer'}}>
              <input type="checkbox" /> <span>Remember me</span>
            </label>
            <button type="button" className="muted" style={{padding:0, background:'transparent'}}>Forgot password?</button>
          </div>

          <button type="submit" className="btn btn-brand lg" disabled={busy} style={{width:'100%', opacity: busy ? .7 : 1}}>
            {busy ? 'Signing in…' : <span className="row" style={{gap:6, justifyContent:'center'}}>Sign in <Icon name="arrow" size={14} /></span>}
          </button>

          <div className="muted" style={{fontSize:12, textAlign:'center'}}>
            Trouble signing in? Contact your homeroom teacher.
          </div>
        </form>
      </div>
    </div>
  );
};

window.LoginScreen = LoginScreen;