// pages/mobile/MobileLogin.jsx — real API

function MobileLogin({ onLogin }) {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);

  const submit = async (e) => {
    e.preventDefault();
    if (!email || !password) {
      setError("Informe e-mail e senha.");
      return;
    }
    setLoading(true); setError(null);
    try {
      await portalApi.login(email, password);
      const ok = await loadPortalData();
      if (!ok) {
        setError("Login ok, mas falhou ao carregar a obra.");
        setLoading(false); return;
      }
      onLogin();
    } catch (err) {
      setError(err?.message || "Credenciais invalidas");
      setLoading(false);
    }
  };

  return (
    <div className="m-login">
      <div className="m-login-brand">
        <div className="brand-mark">S</div>
        <div>
          <div style={{ fontSize: 13, fontWeight: 600 }}>Strucon · Portal do cliente</div>
          <div style={{ fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)" }}>acesso seguro</div>
        </div>
      </div>

      <div className="m-login-hero">
        <h1 className="m-login-title">Acompanhe sua obra.</h1>
        <div className="m-login-sub">Diarios, cronograma, cameras ao vivo e financeiro na palma da sua mao.</div>

        <form onSubmit={submit}>
          <div className="field">
            <label>E-mail</label>
            <input type="email" value={email} onChange={e => setEmail(e.target.value)} placeholder="seu@email.com" required />
          </div>
          <div className="field">
            <label>Senha</label>
            <input type="password" className="mono" value={password} onChange={e => setPassword(e.target.value)} placeholder="Sua senha" required />
          </div>

          {error && (
            <div style={{
              background: "#fee2e2", color: "#991b1b", fontSize: 12,
              padding: "10px 12px", borderRadius: 6, marginBottom: 10,
              border: "1px solid #fecaca",
            }}>
              {error}
            </div>
          )}

          <button type="submit" className="btn primary btn-block" disabled={loading} style={{ height: 46, fontSize: 14 }}>
            {loading ? "Autenticando..." : <>Entrar <I.Arrow size={14} /></>}
          </button>
        </form>
      </div>

      <div style={{ textAlign: "center", marginTop: 24, fontSize: 10.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)" }}>
        STRUCON ENGENHARIA · CREA-SC 209.510-4
      </div>
    </div>
  );
}

window.MobileLogin = MobileLogin;