const { Button, Input, Checkbox, Icon } = window.ACRFlowDesignSystem_ba1e9c;

function LoginScreen({ onLogin }) {
  const [email, setEmail] = React.useState("");
  const [senha, setSenha] = React.useState("");
  const [keep, setKeep] = React.useState(true);
  const [show, setShow] = React.useState(false);
  const [erro, setErro] = React.useState("");
  const [entrando, setEntrando] = React.useState(false);

  const entrar = async () => {
    setErro("");
    if (!email.trim() || !senha) { setErro("Informe o e-mail e a senha."); return; }
    setEntrando(true);
    try {
      const r = await window.ACRApi.auth.login(email.trim(), senha);
      window.ACRApi.setToken(r.token);
      onLogin(r.user);
    } catch (e) {
      setErro(e.message || "Não foi possível entrar.");
    } finally {
      setEntrando(false);
    }
  };
  return (
    <div style={{ height: "100vh", position: "relative", display: "flex", background: "linear-gradient(180deg,#023f92 0%,#2264b7 45%,#003a89 100%)", overflow: "hidden" }}>
      <img src="../../assets/login-hero.png" alt="" aria-hidden="true" style={{ position: "absolute", top: 0, bottom: 0, left: 0, width: "calc(100% - clamp(360px, 26%, 470px) + 46px)", height: "100%", objectFit: "cover", objectPosition: "left center", filter: "blur(26px)", transform: "scale(1.06)" }} />
      <img src="../../assets/login-hero.png" alt="Controle de demandas, planejamento estratégico e maior visibilidade e gestão de recursos operacionais" style={{ position: "absolute", top: 0, bottom: 0, left: 0, width: "calc(100% - clamp(360px, 26%, 470px) + 46px)", height: "100%", objectFit: "contain", objectPosition: "left center" }} />

      <div style={{ position: "absolute", left: 32, bottom: 22, display: "flex", alignItems: "center", gap: 12 }}>
        <img src="../../assets/acr-logo-footer.png" alt="ACR" style={{ height: 26, width: "auto" }} />
        <span style={{ font: "var(--type-caption)", color: "rgba(255,255,255,.92)", textShadow: "0 1px 6px rgba(4,18,46,.55)" }}>Copyright © 2026 Group ACR - Todos os direitos reservados</span>
      </div>

      <section style={{ position: "relative", flex: "1 1 auto", minWidth: 0 }}></section>

      <section style={{ position: "relative", flex: "0 0 clamp(360px, 26%, 470px)", display: "flex", alignItems: "center", justifyContent: "center", padding: "32px 30px", background: "#ffffff", borderRadius: "26% 0 0 26% / 50%", boxShadow: "-34px 0 90px rgba(4,15,38,.4)", overflowY: "auto" }}>
        <div style={{ width: "100%", maxWidth: 330, display: "flex", flexDirection: "column", gap: 11, margin: "auto 0" }}>
          <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 4, marginBottom: 2 }}>
            <img src="../../assets/flowtix-logo.png" alt="FlowTix" style={{ width: "100%", maxWidth: 218, height: "auto", objectFit: "contain" }} />
            <span style={{ font: "var(--type-body)", fontSize: 14, color: "#5a6b86", whiteSpace: "nowrap" }}>Condomínio e Contabilidade</span>
            <span style={{ width: 48, height: 3, borderRadius: 3, background: "var(--acr-blue-400)", marginTop: 6 }} />
          </div>

          <Input label="" placeholder="E-mail corporativo" type="email" value={email} onChange={(e) => setEmail(e.target.value)} onKeyDown={(e) => e.key === "Enter" && entrar()} size="lg" iconLeft={<Icon name="user" size={17} />} />
          <div style={{ position: "relative" }}>
            <Input label="" placeholder="Senha" type={show ? "text" : "password"} value={senha} onChange={(e) => setSenha(e.target.value)} onKeyDown={(e) => e.key === "Enter" && entrar()} size="lg" iconLeft={<Icon name="lock" size={17} />} />
            <button type="button" onClick={() => setShow((v) => !v)} aria-label="Mostrar senha"
              style={{ position: "absolute", right: 12, top: 11, display: "inline-flex", padding: 4, border: "none", background: "transparent", color: "var(--text-muted)", cursor: "pointer" }}>
              <Icon name={show ? "eye-off" : "eye"} size={17} />
            </button>
          </div>

          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap", marginTop: 1 }}>
            <Checkbox checked={keep} onChange={() => setKeep((v) => !v)} label="Lembrar-me" />
            <a href="#" style={{ font: "var(--type-caption)", fontWeight: 600 }}>Esqueci minha senha</a>
          </div>

          {erro ? <div role="alert" style={{ display: "flex", alignItems: "center", gap: 8, padding: "9px 12px", borderRadius: "var(--radius-control)", background: "var(--danger-soft)", color: "var(--danger-ink)", font: "var(--type-caption)" }}><Icon name="alert-circle" size={15} />{erro}</div> : null}

          <Button variant="primary" size="lg" fullWidth disabled={entrando} onClick={entrar}>{entrando ? "Entrando…" : "Entrar"}</Button>

          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <span style={{ flex: 1, height: 1, background: "var(--border-subtle)" }} />
            <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)" }}>ou</span>
            <span style={{ flex: 1, height: 1, background: "var(--border-subtle)" }} />
          </div>

          <button type="button" onClick={() => setErro("Login com Google ainda não configurado neste servidor. Use e-mail e senha.")}
            style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, width: "100%", height: "var(--control-h-lg)", borderRadius: "var(--radius-control)", border: "1px solid var(--border-default)", background: "#fff", color: "var(--text-strong)", font: "var(--type-body-strong)", cursor: "pointer" }}>
            <svg width="18" height="18" viewBox="0 0 48 48" style={{ display: "block" }} aria-hidden="true"><path fill="#EA4335" d="M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.6 30.2 0 24 0 14.6 0 6.5 5.4 2.6 13.2l7.8 6.1C12.3 13.3 17.6 9.5 24 9.5z"></path><path fill="#4285F4" d="M46.5 24.5c0-1.6-.1-3.2-.4-4.7H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.5z"></path><path fill="#FBBC05" d="M10.4 28.7c-.5-1.4-.8-2.9-.8-4.7s.3-3.3.8-4.7l-7.8-6.1C.9 16.4 0 20.1 0 24s.9 7.6 2.6 10.8l7.8-6.1z"></path><path fill="#34A853" d="M24 48c6.5 0 11.9-2.1 15.9-5.9l-7.6-5.9c-2.1 1.4-4.8 2.3-8.3 2.3-6.4 0-11.7-3.8-13.6-9.8l-7.8 6.1C6.5 42.6 14.6 48 24 48z"></path></svg>
            Entrar com Google
          </button>

          <span style={{ font: "var(--type-caption)", color: "var(--text-subtle)", textAlign: "center", lineHeight: 1.5 }}>Acesso Google somente para contas <strong style={{ color: "var(--text-muted)" }}>@acrcondominio.com.br</strong> e <strong style={{ color: "var(--text-muted)" }}>@acrcondo.com</strong> já cadastradas.</span>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { LoginScreen });