// Examine — LoginGate: per-student sign-in, sign-up, and account switching
function LoginGate({ onAuth }) {
  const [users, setUsers] = useState(() => window.Storage.listUsers());
  const [tab, setTab] = useState(users.length === 0 ? 'signup' : 'signin');
  const [selected, setSelected] = useState(users[0]?.id || '');
  const [pin, setPin] = useState('');
  const [name, setName] = useState('');
  const [newPin, setNewPin] = useState('');
  const [confirmPin, setConfirmPin] = useState('');
  const [error, setError] = useState('');

  const refresh = () => setUsers(window.Storage.listUsers());

  const signin = () => {
    setError('');
    const u = users.find(x => x.id === selected);
    if (!u) { setError('Pick a profile first.'); return; }
    if (!window.Storage.verifyUser(u.id, pin)) {
      setError(u.pinHash ? 'Incorrect PIN.' : 'Could not verify.');
      return;
    }
    window.Storage.setActiveUserId(u.id);
    onAuth(u);
  };

  const signup = () => {
    setError('');
    try {
      if (newPin && newPin !== confirmPin) {
        setError('PINs do not match.'); return;
      }
      if (newPin && !/^\d{4,8}$/.test(newPin)) {
        setError('PIN must be 4–8 digits.'); return;
      }
      const u = window.Storage.createUser(name, newPin);
      window.Storage.setActiveUserId(u.id);
      onAuth(u);
    } catch (e) {
      setError(e.message || 'Could not create profile.');
    }
  };

  const removeUser = (id) => {
    if (!confirm('Delete this profile and all of its progress on this device? This cannot be undone.')) return;
    window.Storage.deleteUser(id);
    refresh();
    setSelected(window.Storage.listUsers()[0]?.id || '');
    setPin('');
  };

  const onKey = (e, fn) => { if (e.key === 'Enter') fn(); };

  return (
    <div className="auth-screen">
      <div className="auth-card">
        <div className="auth-brand">
          <div className="brand-mark" style={{width:36, height:36, fontSize:'1.15rem'}}>E</div>
          <div>
            <div className="auth-title">Examine</div>
            <div className="auth-sub">Financial Management · MBA</div>
          </div>
        </div>

        <div className="auth-pitch">
          <h1>Sign in to track <em>your</em> progress.</h1>
          <p>Each student keeps their own attempts, scores, and analytics — separate on this device.</p>
        </div>

        <div className="auth-tabs">
          <button className={tab==='signin'?'on':''} onClick={() => { setTab('signin'); setError(''); }} disabled={users.length===0}>Sign in</button>
          <button className={tab==='signup'?'on':''} onClick={() => { setTab('signup'); setError(''); }}>Create profile</button>
        </div>

        {tab === 'signin' && (
          <div className="auth-form">
            {users.length === 0 ? (
              <div className="empty" style={{padding:'1.4rem 0'}}>No profiles yet on this device. Create one to begin.</div>
            ) : (
              <>
                <label className="auth-label">Profile</label>
                <div className="user-list">
                  {users.map(u => (
                    <div key={u.id} className={`user-row ${selected===u.id?'on':''}`}>
                      <button className="pick" onClick={() => { setSelected(u.id); setPin(''); setError(''); }}>
                        <span className="ini">{u.name.trim().charAt(0).toUpperCase()}</span>
                        <span className="nm">{u.name}</span>
                        {u.pinHash ? <span className="lock">PIN</span> : <span className="lock open">no PIN</span>}
                      </button>
                      <button className="rm" title="Delete profile" onClick={() => removeUser(u.id)}>
                        <Icon name="x" size={14} />
                      </button>
                    </div>
                  ))}
                </div>

                {selected && users.find(x => x.id === selected)?.pinHash && (
                  <>
                    <label className="auth-label">PIN</label>
                    <input className="auth-input" type="password" inputMode="numeric"
                      value={pin} onChange={e => setPin(e.target.value)} onKeyDown={e => onKey(e, signin)}
                      placeholder="••••" autoFocus />
                  </>
                )}

                {error && <div className="auth-error">{error}</div>}
                <button className="btn btn-primary auth-submit" onClick={signin}>
                  Continue <Icon name="arrow" size={16} />
                </button>
              </>
            )}
          </div>
        )}

        {tab === 'signup' && (
          <div className="auth-form">
            <label className="auth-label">Your name</label>
            <input className="auth-input" type="text" value={name}
              onChange={e => setName(e.target.value)} onKeyDown={e => onKey(e, signup)}
              placeholder="e.g. Aria Tanaka" autoFocus maxLength={48} />

            <label className="auth-label">PIN <span className="hint">(optional, 4–8 digits)</span></label>
            <input className="auth-input" type="password" inputMode="numeric"
              value={newPin} onChange={e => setNewPin(e.target.value.replace(/[^0-9]/g, '').slice(0,8))}
              placeholder="leave blank to skip" />

            {newPin && (
              <>
                <label className="auth-label">Confirm PIN</label>
                <input className="auth-input" type="password" inputMode="numeric"
                  value={confirmPin} onChange={e => setConfirmPin(e.target.value.replace(/[^0-9]/g, '').slice(0,8))}
                  onKeyDown={e => onKey(e, signup)} placeholder="repeat PIN" />
              </>
            )}

            {error && <div className="auth-error">{error}</div>}
            <button className="btn btn-primary auth-submit" onClick={signup}>
              Create profile <Icon name="arrow" size={16} />
            </button>
            <p className="auth-fineprint">
              Profiles are stored only on this device. The PIN keeps casual users from opening your data on a shared computer — it is not a strong password.
            </p>
          </div>
        )}

        <div className="auth-beta">BETA · v0.1</div>
      </div>
    </div>
  );
}

window.LoginGate = LoginGate;