/* ============================================================
   KeS Metas — Tela de Login (Firebase Authentication)
   ============================================================ */
const { useState, useEffect, useRef } = React;
function LoginScreen({ state, dispatch, onLogin }) {
  const K = window.KES;
  const A = window.KESAUTH;
  const usaFirebase = !!(A && A.configured());
  const [email, setEmail] = useState("");
  const [senha, setSenha] = useState("");
  const [show, setShow] = useState(false);
  const [erro, setErro] = useState("");
  const [busy, setBusy] = useState(false);
  const [info, setInfo] = useState("");

  // E-mail do admin da KeS (para o atalho de primeiro acesso).
  const adminUser = state.users.find((u) => u.papel === "admin");

  async function submit(e) {
    e && e.preventDefault();
    setErro(""); setInfo("");
    if (!email.trim() || !senha) { setErro("Informe e-mail e senha."); return; }

    if (usaFirebase) {
      setBusy(true);
      // Para o e-mail do admin, na 1ª vez cria a conta automaticamente.
      const ehAdmin = adminUser && email.trim().toLowerCase() === adminUser.email.toLowerCase();
      const res = ehAdmin ? await A.signInOrCreate(email, senha) : await A.signIn(email, senha);
      setBusy(false);
      if (!res.ok) { setErro(A.traduzErro(res)); return; }
      if (res.created) setInfo("Conta de administrador criada. Entrando…");
      // O App detecta o login pelo "escutador" e abre o sistema.
      return;
    }

    // Fallback (sem internet/Firebase): login local em memória.
    const r = K.AuthService.authenticate(state.users, email, senha);
    if (!r.ok) { setErro(r.motivo); return; }
    onLogin(r.user);
  }

  async function esqueciSenha() {
    setErro(""); setInfo("");
    if (!email.trim()) { setErro("Digite seu e-mail para receber o link de redefinição."); return; }
    if (!usaFirebase) { setErro("Redefinição de senha disponível só com o banco de dados conectado."); return; }
    setBusy(true);
    const res = await A.resetPassword(email);
    setBusy(false);
    if (res.ok) setInfo("Enviamos um link de redefinição de senha para o seu e-mail.");
    else setErro(A.traduzErro(res));
  }

  return (
    <div className="login-wrap">
      <aside className="login-aside">
        <div className="pattern" />
        <div className="glow" />
        <div style={{ position: "relative", display: "flex", alignItems: "center", gap: 14 }}>
          <Logo size={46} />
          <div>
            <div style={{ fontWeight: 800, fontSize: 20, lineHeight: 1 }}>KeS Assessoria</div>
            <div style={{ fontSize: 11, color: "var(--fg3)", letterSpacing: ".14em", textTransform: "uppercase", marginTop: 5, fontWeight: 600 }}>Metas Comerciais</div>
          </div>
        </div>
        <div style={{ position: "relative", maxWidth: 440 }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Vendas e crescimento de mercado</div>
          <h1 style={{ fontSize: "var(--text-4xl)", margin: 0, lineHeight: 1.05 }}>
            Acompanhe suas metas e <span style={{ color: "var(--kes-red-400)" }}>bata todos os resultados.</span>
          </h1>
          <p style={{ color: "var(--fg2)", fontSize: 15, marginTop: 18, maxWidth: 400 }}>
            Ligações, conexões, reuniões e vendas em um só painel — integrado à sua agenda e atualizado em tempo real.
          </p>
        </div>
        <div style={{ position: "relative", display: "flex", gap: 26, color: "var(--fg3)", fontSize: 12.5, fontWeight: 600 }}>
          <span style={{ display: "inline-flex", gap: 7, alignItems: "center" }}><Icon name="target" size={16} />Metas por período</span>
          <span style={{ display: "inline-flex", gap: 7, alignItems: "center" }}><Icon name="calendarCheck" size={16} />Google Agenda</span>
          <span style={{ display: "inline-flex", gap: 7, alignItems: "center" }}><Icon name="trendingUp" size={16} />Equipe consolidada</span>
        </div>
      </aside>

      <div className="login-form-side">
        <div className="login-card">
          <h2 style={{ margin: "0 0 6px", fontSize: "var(--text-2xl)" }}>Entrar</h2>
          <p style={{ margin: "0 0 22px", color: "var(--fg2)", fontSize: 14 }}>Acesse o painel de metas da KeS.</p>

          <form onSubmit={submit} style={{ display: "flex", flexDirection: "column", gap: 15 }}>
            <Field label="E-mail">
              <input className="field" type="email" placeholder="voce@kesassessoria.com.br" value={email}
                onChange={(e) => { setEmail(e.target.value); setErro(""); }} autoComplete="username" />
            </Field>
            <Field label="Senha" error={erro || null}>
              <div style={{ position: "relative" }}>
                <input className="field" type={show ? "text" : "password"} placeholder="••••••••" value={senha}
                  onChange={(e) => { setSenha(e.target.value); setErro(""); }} autoComplete="current-password"
                  style={{ paddingRight: 44 }} />
                <button type="button" className="iconbtn" onClick={() => setShow((s) => !s)}
                  style={{ position: "absolute", right: 6, top: "50%", transform: "translateY(-50%)" }} aria-label="Mostrar senha">
                  <Icon name={show ? "eyeOff" : "eye"} size={18} />
                </button>
              </div>
            </Field>
            {info && <div style={{ color: "var(--ok)", fontSize: 12.5, display: "flex", alignItems: "center", gap: 6 }}><Icon name="checkCircle" size={14} />{info}</div>}
            <Btn type="submit" variant="primary" disc disabled={busy} className="btn-block" style={{ marginTop: 4 }}>
              {busy ? "Entrando…" : "Entrar"}
            </Btn>
          </form>

          <div style={{ marginTop: 14, textAlign: "center" }}>
            <button type="button" onClick={esqueciSenha} disabled={busy}
              style={{ background: "transparent", border: 0, color: "var(--fg2)", fontSize: 13, fontWeight: 600, cursor: "pointer" }}>
              Esqueci minha senha
            </button>
          </div>

          <p className="muted" style={{ fontSize: 11.5, marginTop: 18, textAlign: "center", display: "flex", gap: 6, justifyContent: "center", alignItems: "center" }}>
            <Icon name={usaFirebase ? "lock" : "alert"} size={13} />
            {usaFirebase ? "Login protegido pelo Google (Firebase)." : "Banco de dados não conectado — modo local."}
          </p>
        </div>
      </div>
    </div>
  );
}

window.LoginScreen = LoginScreen;