/* Tela de login dos operadores (André / Gra) — e-mail + senha */
function LoginScreen({ onLogged }) {
  const [modo, setModo] = React.useState("entrar"); // entrar | criar
  const [email, setEmail] = React.useState("");
  const [senha, setSenha] = React.useState("");
  const [erro, setErro] = React.useState("");
  const [info, setInfo] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const criando = modo === "criar";

  async function entrar(e) {
    if (e) e.preventDefault();
    setErro(""); setInfo(""); setLoading(true);
    if (criando) {
      if (senha.length < 6) { setLoading(false); setErro("A senha precisa ter ao menos 6 caracteres."); return; }
      const r = await window.OS.signUp(email, senha);
      setLoading(false);
      if (!r.ok) { setErro(r.error || "Não consegui criar o acesso."); return; }
      if (r.needConfirm) { setInfo("Acesso criado! Confirme pelo e-mail e depois entre."); setModo("entrar"); return; }
      onLogged(); return;
    }
    const r = await window.OS.signIn(email, senha);
    setLoading(false);
    if (!r.ok) { setErro("E-mail ou senha incorretos."); return; }
    onLogged();
  }

  return (
    <div style={{ minHeight: "100vh", display: "grid", placeItems: "center", padding: 20,
      background: "linear-gradient(135deg,#0E1A30 0%,#1b2c4e 60%,#243B66 100%)" }}>
      <div style={{ width: "100%", maxWidth: 400 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12, justifyContent: "center", marginBottom: 22 }}>
          <div style={{ width: 44, height: 44, borderRadius: 13, background: "#fff", display: "grid", placeItems: "center", color: C.cobalt }}>
            <LIcon name="rocket" size={24} stroke={2.3} />
          </div>
          <div style={{ color: "#fff" }}>
            <div style={{ fontWeight: 800, fontSize: 19, letterSpacing: "-.01em", lineHeight: 1.1 }}>Onboarding ASCEND</div>
            <div style={{ fontSize: 12.5, color: "#aebfee", fontWeight: 600 }}>Integração de colaboradores</div>
          </div>
        </div>

        <form onSubmit={entrar} style={{ background: "#fff", borderRadius: 18, padding: 28, boxShadow: "0 24px 60px rgba(8,15,40,.4)" }}>
          <div style={{ fontSize: 18, fontWeight: 800, color: C.ink, marginBottom: 4 }}>{criando ? "Criar acesso" : "Entrar"}</div>
          <div style={{ fontSize: 13, color: C.ink3, marginBottom: 20 }}>{criando ? "Crie a senha do seu acesso de equipe." : "Acesso da equipe (RH e supervisão)."}</div>

          <label style={{ fontSize: 12.5, fontWeight: 700, color: C.ink2, display: "block", marginBottom: 6 }}>E-mail</label>
          <input value={email} onChange={(e) => setEmail(e.target.value)} type="email" autoComplete="username"
            placeholder="voce@ascendconsulting.com.br"
            style={{ width: "100%", padding: "11px 13px", border: `1.5px solid ${C.line}`, borderRadius: 11, fontSize: 14, fontFamily: "inherit", color: C.ink, outline: "none", boxSizing: "border-box", marginBottom: 14 }} />

          <label style={{ fontSize: 12.5, fontWeight: 700, color: C.ink2, display: "block", marginBottom: 6 }}>Senha</label>
          <input value={senha} onChange={(e) => setSenha(e.target.value)} type="password" autoComplete="current-password"
            placeholder="••••••••"
            style={{ width: "100%", padding: "11px 13px", border: `1.5px solid ${C.line}`, borderRadius: 11, fontSize: 14, fontFamily: "inherit", color: C.ink, outline: "none", boxSizing: "border-box", marginBottom: 6 }} />

          {erro && <div style={{ fontSize: 12.5, color: C.red, fontWeight: 600, margin: "8px 0 0", display: "flex", alignItems: "center", gap: 6 }}><LIcon name="alert-circle" size={14} />{erro}</div>}
          {info && <div style={{ fontSize: 12.5, color: C.green, fontWeight: 600, margin: "8px 0 0", display: "flex", alignItems: "center", gap: 6 }}><LIcon name="check-circle-2" size={14} />{info}</div>}

          <button type="submit" disabled={loading} style={{
            width: "100%", marginTop: 18, padding: "12px 18px", border: "none", borderRadius: 11, cursor: loading ? "wait" : "pointer",
            background: C.cobalt, color: "#fff", fontWeight: 800, fontSize: 14.5, fontFamily: "inherit",
            display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, opacity: loading ? 0.7 : 1,
          }}>
            {loading ? (criando ? "Criando…" : "Entrando…") : <>{criando ? "Criar acesso" : "Entrar"} <LIcon name="arrow-right" size={17} /></>}
          </button>

          <div style={{ marginTop: 14, textAlign: "center" }}>
            <button type="button" onClick={() => { setErro(""); setInfo(""); setModo(criando ? "entrar" : "criar"); }}
              style={{ background: "transparent", border: "none", cursor: "pointer", fontFamily: "inherit", color: C.cobalt, fontWeight: 700, fontSize: 13 }}>
              {criando ? "Já tenho acesso — entrar" : "Criar um acesso novo"}
            </button>
          </div>

          <div style={{ marginTop: 14, fontSize: 11.5, color: C.ink3, textAlign: "center", lineHeight: 1.5, borderTop: `1px solid ${C.lineSoft}`, paddingTop: 14 }}>
            O colaborador não entra por aqui — ele recebe um <b>link próprio</b> do RH.
          </div>
        </form>
      </div>
    </div>
  );
}

Object.assign(window, { LoginScreen });