const { $, showView, showFlash, balanceLinesForAddress } = require("./helpers");
const { state, saveState } = require("../../shared/state");
const { deriveAddressFromXpub } = require("../../shared/wallet");
const {
    formatUsd,
    getAddressValueUsd,
    getTotalValueUsd,
} = require("../../shared/prices");

function renderTotalValue() {
    const el = $("total-value");
    if (!el) return;
    el.textContent = formatUsd(getTotalValueUsd(state.wallets));
}

function render(ctx) {
    const container = $("wallet-list");
    if (state.wallets.length === 0) {
        container.innerHTML =
            '<p class="text-muted py-2">No wallets yet. Add one to get started.</p>';
        renderTotalValue();
        return;
    }

    let html = "";
    state.wallets.forEach((wallet, wi) => {
        html += `<div class="mb-3">`;
        html += `<div class="flex justify-between items-center border-b border-border pb-1 mb-1">`;
        html += `<span class="font-bold">${wallet.name}</span>`;
        if (wallet.type === "hd") {
            html += `<button class="btn-add-address border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs" data-wallet="${wi}" title="Add another address to this wallet">+</button>`;
        }
        html += `</div>`;

        wallet.addresses.forEach((addr, ai) => {
            html += `<div class="address-row py-1 border-b border-border-light cursor-pointer hover:bg-hover" data-wallet="${wi}" data-address="${ai}">`;
            html += `<div class="text-xs font-bold">Address ${wi + 1}.${ai + 1}</div>`;
            if (addr.ensName) {
                html += `<div class="text-xs font-bold">${addr.ensName}</div>`;
            }
            const addrUsd = formatUsd(getAddressValueUsd(addr));
            html += `<div class="flex text-xs">`;
            html += `<span style="width:42ch">${addr.address}</span>`;
            html += `<span class="text-right text-muted flex-1">${addrUsd}</span>`;
            html += `</div>`;
            html += balanceLinesForAddress(addr);
            html += `</div>`;
        });

        html += `</div>`;
    });
    container.innerHTML = html;

    container.querySelectorAll(".address-row").forEach((row) => {
        row.addEventListener("click", () => {
            state.selectedWallet = parseInt(row.dataset.wallet, 10);
            state.selectedAddress = parseInt(row.dataset.address, 10);
            ctx.showAddressDetail();
        });
    });

    container.querySelectorAll(".btn-add-address").forEach((btn) => {
        btn.addEventListener("click", async (e) => {
            e.stopPropagation();
            const wi = parseInt(btn.dataset.wallet, 10);
            const wallet = state.wallets[wi];
            const newAddr = deriveAddressFromXpub(
                wallet.xpub,
                wallet.nextIndex,
            );
            wallet.addresses.push({
                address: newAddr,
                balance: "0.0000",
                tokenBalances: [],
            });
            wallet.nextIndex++;
            await saveState();
            render(ctx);
            ctx.doRefreshAndRender();
        });
    });

    renderTotalValue();
}

function init(ctx) {}

module.exports = { init, render };