// ui-keuangan.js — FINAL FIXED untuk Saldo Mingguan
import { formatRupiah } from "../helpers/format.js";

export function updateKeuanganUI(data = {}) {
  const elMingguan = document.getElementById("saldo-mingguan");
  const elBulanan  = document.getElementById("saldo-bulanan");

  const icMingguan = document.getElementById("icon-mingguan");
  const icBulanan  = document.getElementById("icon-bulanan");

  const mingguan = (data.mingguan?.saldo ?? 0);
  const bulanan  = (data.bulanan?.saldo ?? 0);

  if (elMingguan && icMingguan) applySaldoStyle(elMingguan, icMingguan, mingguan);
  if (elBulanan && icBulanan) applySaldoStyle(elBulanan, icBulanan, bulanan);
}

function applySaldoStyle(elValue, elIcon, val) {

  // Reset Classes
  elValue.classList.remove("value-green", "value-red", "value-black");
  elIcon.classList.remove("icon-green", "icon-red", "icon-black", "icon-anim-up", "icon-anim-down");

  // Set Text
  elValue.textContent = formatRupiah(val);

  // UI Behavior
  if (val > 0) {
    elValue.classList.add("value-green");
    elIcon.classList.add("icon-green", "icon-anim-up");
    elIcon.textContent = "📈";
  }
  else if (val < 0) {
    elValue.classList.add("value-red");
    elIcon.classList.add("icon-red", "icon-anim-down");
    elIcon.textContent = "📉";
  }
  else {
    elValue.classList.add("value-black");
    elIcon.classList.add("icon-black");
    elIcon.textContent = "➖";
  }
}
