const { $, addressDotHtml, escapeHtml, showView } = require("./helpers");
const { state, saveState } = require("../../shared/state");
const { formatEther } = require("ethers");

const runtime =
    typeof browser !== "undefined" ? browser.runtime : chrome.runtime;

const EXT_ICON =
    `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
    `<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
    `<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
    `<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
    `</svg></span>`;

function approvalAddressHtml(address) {
    const dot = addressDotHtml(address);
    const link = `https://etherscan.io/address/${address}`;
    const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
    return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
}

function formatTxValue(val) {
    const parts = val.split(".");
    if (parts.length === 1) return val + ".0000";
    const dec = (parts[1] + "0000").slice(0, 4);
    return parts[0] + "." + dec;
}

let approvalId = null;

function showTxApproval(details) {
    $("approve-tx-hostname").textContent = details.hostname;
    $("approve-tx-from").innerHTML = approvalAddressHtml(state.activeAddress);
    const toAddr = details.txParams.to;
    $("approve-tx-to").innerHTML = toAddr
        ? approvalAddressHtml(toAddr)
        : escapeHtml("(contract creation)");
    $("approve-tx-value").textContent =
        formatTxValue(formatEther(details.txParams.value || "0")) + " ETH";
    if (details.txParams.data && details.txParams.data !== "0x") {
        $("approve-tx-data").textContent = details.txParams.data;
        $("approve-tx-data-section").classList.remove("hidden");
    }
    showView("approve-tx");
}

function show(id) {
    approvalId = id;
    // Connect a port so the background detects if the popup closes
    // without an explicit response (e.g. user clicks away).
    runtime.connect({ name: "approval:" + id });
    runtime.sendMessage({ type: "AUTISTMASK_GET_APPROVAL", id }, (details) => {
        if (!details) {
            window.close();
            return;
        }
        if (details.type === "tx") {
            showTxApproval(details);
            return;
        }
        $("approve-hostname").textContent = details.hostname;
        $("approve-address").innerHTML = approvalAddressHtml(
            state.activeAddress,
        );
        $("approve-remember").checked = state.rememberSiteChoice;
    });
}

function init(ctx) {
    $("approve-remember").addEventListener("change", async () => {
        state.rememberSiteChoice = $("approve-remember").checked;
        await saveState();
    });

    $("btn-approve").addEventListener("click", () => {
        const remember = $("approve-remember").checked;
        runtime.sendMessage({
            type: "AUTISTMASK_APPROVAL_RESPONSE",
            id: approvalId,
            approved: true,
            remember,
        });
        window.close();
    });

    $("btn-reject").addEventListener("click", () => {
        const remember = $("approve-remember").checked;
        runtime.sendMessage({
            type: "AUTISTMASK_APPROVAL_RESPONSE",
            id: approvalId,
            approved: false,
            remember,
        });
        window.close();
    });

    $("btn-approve-tx").addEventListener("click", () => {
        runtime.sendMessage({
            type: "AUTISTMASK_TX_RESPONSE",
            id: approvalId,
            approved: true,
            password: $("approve-tx-password").value,
        });
        window.close();
    });

    $("btn-reject-tx").addEventListener("click", () => {
        runtime.sendMessage({
            type: "AUTISTMASK_TX_RESPONSE",
            id: approvalId,
            approved: false,
        });
        window.close();
    });
}

module.exports = { init, show };