const onboarding = JSON.parse(localStorage.getItem("flowpesa_onboarding"));

if (!onboarding || onboarding.account_status !== "active") {
  window.location.href = "index.html";
}

/*
  MOCK DATA
  This will later come from:
  GET /api/transactions
*/
const transactions = [
  {
    type: "topup",
    direction: "credit",
    amount: 50000,
    reference: "MTN Top-Up",
    status: "success",
    date: "Today"
  },
  {
    type: "send",
    direction: "debit",
    amount: 15000,
    reference: "Sent to John",
    status: "blocked (KYC)",
    date: "Yesterday"
  }
];

const list = document.getElementById("transactionList");

if (transactions.length === 0) {
  list.innerHTML = `<p class="sub">No transactions yet.</p>`;
}

transactions.forEach(tx => {
  const item = document.createElement("div");
  item.className = "tx-item";

  item.innerHTML = `
    <div class="tx-left">
      <div class="tx-icon ${tx.direction}">
        ${tx.direction === "credit" ? "➕" : "➖"}
      </div>
      <div class="tx-details">
        <p>${tx.reference}</p>
        <span>${tx.date}</span>
      </div>
    </div>

    <div class="tx-amount">
      <strong>
        ${tx.direction === "credit" ? "+" : "-"}UGX ${tx.amount.toLocaleString()}
      </strong>
      <span class="tx-status">${tx.status}</span>
    </div>
  `;

  list.appendChild(item);
});
