// pages/LoginPage.jsx — Portal do Cliente (login real)

function LoginPage({ onLogin }) {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [loading, setLoading] = React.useState(false);
  const [error, setError] = React.useState(null);
  const [obraInfo, setObraInfo] = React.useState(null);
  const [keepLogged, setKeepLogged] = React.useState(true);

  // Se a URL tem um slug, busca info publica da obra pra exibir na tela
  React.useEffect(() => {
    if (!window.OBRA_SLUG) return;
    portalApi.publicObraInfo(window.OBRA_SLUG)
      .then((info) => setObraInfo(info))
      .catch(() => setObraInfo({ nome: null, unknownSlug: true }));
  }, []);

  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 autorizado, mas nao foi possivel carregar os dados da obra.");
        setLoading(false);
        return;
      }
      onLogin();
    } catch (err) {
      setError(err?.message || "Credenciais invalidas");
      setLoading(false);
    }
  };

  return (
    <div className="login-shell">
      <div className="login-left">
        <div className="login-brand">
          <div className="brand-mark">S</div>
          <div>
            <div className="brand-name">Strucon · Portal do cliente</div>
            <div className="brand-sub">acesso seguro</div>
          </div>
        </div>

        <h1 className="login-title">Acompanhe sua obra</h1>
        <div className="login-sub">Acesso exclusivo do cliente. Diarios, cronograma, financeiro e cameras ao vivo em um so lugar.</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"
              autoComplete="username"
              required
            />
          </div>
          <div className="field">
            <label>Senha</label>
            <input
              type="password"
              className="mono"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              placeholder="Sua senha"
              autoComplete="current-password"
              required
            />
          </div>

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

          <div className="field-row">
            <label
              style={{
                display: "inline-flex",
                alignItems: "center",
                gap: 10,
                color: "#3A3A3A",
                cursor: "pointer",
                userSelect: "none",
                fontSize: 13,
              }}
            >
              <input
                type="checkbox"
                checked={keepLogged}
                onChange={(e) => setKeepLogged(e.target.checked)}
                style={{ position: "absolute", opacity: 0, pointerEvents: "none" }}
              />
              <span
                aria-hidden="true"
                style={{
                  width: 18,
                  height: 18,
                  borderRadius: 4,
                  border: "1.5px solid " + (keepLogged ? "#0A0A0A" : "#999"),
                  background: keepLogged ? "#0A0A0A" : "#fff",
                  display: "inline-flex",
                  alignItems: "center",
                  justifyContent: "center",
                  transition: "background 120ms ease, border-color 120ms ease",
                  flexShrink: 0,
                }}
              >
                {keepLogged && (
                  <svg
                    width="11"
                    height="11"
                    viewBox="0 0 11 11"
                    fill="none"
                    aria-hidden="true"
                  >
                    <path
                      d="M2 5.5L4.5 8L9 3"
                      stroke="#fff"
                      strokeWidth="1.8"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                )}
              </span>
              Manter conectado
            </label>
            <span style={{ color: "#999", fontSize: 12 }}>Precisa de ajuda? Contate seu engenheiro</span>
          </div>

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

        <div className="login-footer">
          <span>STRUCON ENGENHARIA</span>
          <span>CREA-SC 209.510-4</span>
        </div>
      </div>

      <div className="login-right">
        <div className="login-right-inner">
          {obraInfo && obraInfo.nome ? (
            <>
              <h4>Obra selecionada</h4>
              <div className="meta-row"><span>OBRA</span><span style={{ textAlign: "right" }}>{obraInfo.nome}</span></div>
              <div className="meta-row"><span>PROGRESSO</span><span>{Math.round(obraInfo.progressoGeral || 0)}%</span></div>
              <div className="meta-row"><span>ACESSO</span><span>Cliente autorizado</span></div>
              <div className="meta-row"><span>EMPRESA</span><span>Strucon Engenharia</span></div>
            </>
          ) : obraInfo && obraInfo.unknownSlug ? (
            <>
              <h4>Link invalido</h4>
              <div style={{ fontSize: 12, color: "#666", marginTop: 8 }}>
                O endereco <code className="mono">{window.OBRA_SLUG}</code> nao corresponde a nenhuma obra ativa. Verifique com seu engenheiro.
              </div>
            </>
          ) : (
            <>
              <h4>Portal do cliente</h4>
              <div className="meta-row"><span>PROJETO</span><span>Gerenciamento de obras</span></div>
              <div className="meta-row"><span>EMPRESA</span><span>Strucon Engenharia</span></div>
              <div className="meta-row"><span>ACESSO</span><span>Cliente autorizado</span></div>
            </>
          )}

          <div style={{ marginTop: 18, paddingTop: 14, borderTop: "1px solid var(--border)" }}>
            <div style={{ fontSize: 10, color: "#999", marginBottom: 8, textTransform: "uppercase", letterSpacing: "0.06em", fontFamily: "var(--font-sans)" }}>
              O que voce tera acesso
            </div>
            <div className="meta-row" style={{ fontSize: 11 }}><span>•</span><span>Diarios com fotos e atividades</span></div>
            <div className="meta-row" style={{ fontSize: 11 }}><span>•</span><span>Cronograma atualizado</span></div>
            <div className="meta-row" style={{ fontSize: 11 }}><span>•</span><span>Progresso das frentes</span></div>
            <div className="meta-row" style={{ fontSize: 11 }}><span>•</span><span>Pagamentos e parcelas</span></div>
            <div className="meta-row" style={{ fontSize: 11 }}><span>•</span><span>Cameras ao vivo (se disponivel)</span></div>
            <div className="meta-row" style={{ fontSize: 11 }}><span>•</span><span>Documentos do contrato</span></div>
          </div>
        </div>
      </div>
    </div>
  );
}

window.LoginPage = LoginPage;