/* ============================================================
   Tela de Login — Promotoria Hyris
   ============================================================ */
const { useState, useEffect, useRef } = React;

function LoginView({ members, onLogin }) {
  const [user, setUser] = useState("");
  const [pass, setPass] = useState("");
  const [show, setShow] = useState(false);
  const [err, setErr] = useState("");

  function submit(e) {
    e.preventDefault();
    const m = members.find(
      (x) => x.username.toLowerCase() === user.trim().toLowerCase() && x.pass === pass
    );
    if (!m) { setErr("Usuário ou senha incorretos."); return; }
    if (!m.active) { setErr("Esta conta está suspensa. Fale com o Manager."); return; }
    setErr("");
    onLogin(m.id);
  }

  return (
    <div className="pr-login">
      <div className="pr-login-bg" aria-hidden="true"></div>
      <div className="pr-login-card">
        <div className="pr-login-brand">
          <img src="assets/logo.png" alt="Hyris" className="pr-login-logo" />
          <div>
            <div className="pr-login-kicker">PAINEL INTERNO</div>
            <h1 className="pr-login-title">Promotoria <span>Hyris</span></h1>
          </div>
        </div>
        <p className="pr-login-sub">
          Área restrita da equipe de eventos. Entre com suas credenciais da promotoria.
        </p>

        <form onSubmit={submit} className="pr-login-form">
          <Field label="Usuário">
            <Input
              placeholder="ex: rafael.mng"
              value={user}
              autoFocus
              onChange={(e) => { setUser(e.target.value); setErr(""); }}
            />
          </Field>
          <Field label="Senha">
            <div className="pr-input-affix">
              <input
                className="pr-input"
                type={show ? "text" : "password"}
                placeholder="••••••••"
                value={pass}
                onChange={(e) => { setPass(e.target.value); setErr(""); }}
              />
              <button type="button" className="pr-affix-btn" onClick={() => setShow((s) => !s)} tabIndex={-1}>
                <Icon name={show ? "eyeoff" : "eye"} size={18} />
              </button>
            </div>
          </Field>

          {err && <div className="pr-login-err"><Icon name="x" size={15} />{err}</div>}

          <Button type="submit" full size="lg" icon="lock">Entrar no painel</Button>
        </form>

        <div className="pr-login-hint">
          <Icon name="shield" size={15} />
          <span>Acesso monitorado. Cada login é vinculado ao seu cargo na equipe.</span>
        </div>
      </div>

      <div className="pr-login-demo">
        <span>Contas de teste:</span>
        <code onClick={() => { setUser("ny3san"); setPass("123"); }}>ny3san <i>(Manager)</i></code>
        <code onClick={() => { setUser("montyaxx"); setPass("123"); }}>montyaxx <i>(Hyris)</i></code>
        <code onClick={() => { setUser("snoopzs"); setPass("123"); }}>snoopzs <i>(Helper)</i></code>
      </div>
    </div>
  );
}

Object.assign(window, { LoginView });