// pages/mobile/MobileFinanceiro.jsx — real data

const mBoletoUrl = (parcela, dl) =>
  "/portal-cliente/api/financeiro/boleto?parcela=" + encodeURIComponent(parcela) + (dl ? "&dl=1" : "");

function MobileFinanceiro() {
  const pct = FIN.total > 0 ? FIN.paid / FIN.total : 0;
  const nextInst = FIN.installments.find(i => i.status !== "paid");
  const paidCount = FIN.installments.filter(i => i.status === "paid").length;

  const formatBRLShort = (v) => {
    if (!v) return "R$ 0";
    if (v >= 1_000_000) return "R$ " + (v / 1_000_000).toFixed(2).replace(".", ",") + " mi";
    if (v >= 1_000) return "R$ " + (v / 1_000).toFixed(0) + " mil";
    return fmtBRL(v);
  };

  if (FIN.total <= 0 && FIN.installments.length === 0) {
    return (
      <>
        <h1 className="m-title">Financeiro</h1>
        <div className="m-subtitle">Contrato · {PROJECT.code}</div>
        <div className="m-card" style={{ padding: 24, textAlign: "center", color: "var(--fg-4)", fontSize: 13 }}>
          Nao existem dados financeiros desta obra.
        </div>
      </>
    );
  }

  return (
    <>
      <h1 className="m-title">Financeiro</h1>
      <div className="m-subtitle">Contrato · {PROJECT.code}</div>

      <div className="m-card">
        <div className="m-card-body">
          <div style={{ fontSize: 10.5, color: "var(--fg-4)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Ja pago</div>
          <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 6 }}>
            <div className="mono" style={{ fontSize: 30, fontWeight: 500, letterSpacing: "-0.02em" }}>{fmtBRL(FIN.paid)}</div>
          </div>
          <div style={{ fontSize: 11.5, color: "var(--fg-4)", fontFamily: "var(--font-mono)", marginTop: 2 }}>
            de {fmtBRL(FIN.total)} · {(pct * 100).toFixed(0)}%
          </div>
          <div className="bar" style={{ marginTop: 12 }}><span style={{ width: (pct * 100) + "%" }} /></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 12, marginTop: 14, paddingTop: 12, borderTop: "1px solid var(--border)" }}>
            <div>
              <div style={{ fontSize: 9.5, color: "var(--fg-4)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Total</div>
              <div className="mono" style={{ fontSize: 12.5, fontWeight: 500, marginTop: 3 }}>{formatBRLShort(FIN.total)}</div>
            </div>
            <div>
              <div style={{ fontSize: 9.5, color: "var(--fg-4)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Parcelas</div>
              <div className="mono" style={{ fontSize: 12.5, fontWeight: 500, marginTop: 3 }}>{paidCount} / {FIN.installments.length}</div>
            </div>
            <div>
              <div style={{ fontSize: 9.5, color: "var(--fg-4)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Saldo</div>
              <div className="mono" style={{ fontSize: 12.5, fontWeight: 500, marginTop: 3 }}>{formatBRLShort(Math.max(0, FIN.total - FIN.paid))}</div>
            </div>
          </div>
        </div>
      </div>

      {nextInst && (
        <div className="m-card" style={{ background: "var(--fg)", color: "#fff", borderColor: "var(--fg)" }}>
          <div className="m-card-body">
            <div style={{ fontSize: 10, color: "rgba(255,255,255,0.6)", textTransform: "uppercase", letterSpacing: "0.06em" }}>Proxima parcela</div>
            <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", marginTop: 8 }}>
              <div>
                <div className="mono" style={{ fontSize: 22, fontWeight: 500 }}>{fmtBRL(nextInst.amount)}</div>
                <div style={{ fontSize: 11.5, color: "rgba(255,255,255,0.7)", fontFamily: "var(--font-mono)", marginTop: 2 }}>
                  parcela #{nextInst.n} · vence {fmtDate(nextInst.due)}
                </div>
              </div>
            </div>
          </div>
        </div>
      )}

      <div className="m-section-label">Cronograma de pagamentos</div>
      <div className="m-card">
        {FIN.entry && (
          <div className="m-installment">
            <div className={"m-inst-n " + (FIN.entry.status === "paid" ? "paid" : "")}>E</div>
            <div className="m-inst-body">
              <div className="m-inst-label">{FIN.entry.label}</div>
              <div className="m-inst-date">
                {FIN.entry.status === "paid" ? ("pago em " + fmtDate(FIN.entry.paidOn || FIN.entry.date)) : "pendente"}
              </div>
            </div>
            <div className="m-inst-amount">{fmtBRL(FIN.entry.amount)}</div>
            {FIN.entry.status !== "paid" && FIN.entry.boletoDisponivel && (
              <a
                className="m-inst-action"
                href={mBoletoUrl("entrada", 1)}
                download
                title="Baixar 2ª via do boleto"
                aria-label="Baixar 2ª via do boleto"
              >
                <I.Download size={14} />
              </a>
            )}
          </div>
        )}
        {FIN.installments.map(i => {
          const showBoleto = i.status !== "paid" && i.boletoDisponivel;
          return (
            <div key={i.n} className="m-installment">
              <div className={"m-inst-n " + (i.status === "paid" ? "paid" : i.status === "upcoming" ? "upcoming" : "")}>{i.n}</div>
              <div className="m-inst-body">
                <div className="m-inst-label">{i.label || "Parcela mensal"}</div>
                <div className="m-inst-date">
                  {i.status === "paid" ? ("pago em " + fmtDate(i.paidOn)) :
                   i.status === "upcoming" ? ("vence " + fmtDate(i.due)) :
                   ("venc. " + fmtDate(i.due))}
                </div>
              </div>
              <div className="m-inst-amount">{fmtBRL(i.amount)}</div>
              {showBoleto && (
                <a
                  className={"m-inst-action " + (i.status === "upcoming" ? "primary" : "")}
                  href={mBoletoUrl(i.n, 1)}
                  download
                  title="Baixar 2ª via do boleto"
                  aria-label="Baixar 2ª via do boleto"
                >
                  <I.Download size={14} />
                </a>
              )}
            </div>
          );
        })}
      </div>
    </>
  );
}

window.MobileFinanceiro = MobileFinanceiro;