/**
 * Outbox view modal — lists .ltr files currently queued on disk.
 * Pink rows = local-only, not yet reconciled with the server.
 * Clicking the status-bar queue pill opens this.
 */
import { listQueuedOutgoing, cancelQueuedOutgoing } from "../lib/api-client.js";
let isOpen = false;
export async function openOutboxView() {
    if (isOpen)
        return;
    isOpen = true;
    const backdrop = document.createElement("div");
    backdrop.className = "mailx-modal-backdrop";
    const panel = document.createElement("div");
    panel.className = "mailx-modal mailx-modal-wide";
    panel.innerHTML = `
        <div class="mailx-modal-title">
            <span class="mailx-modal-title-text">Outbox — Local Queue</span>
            <button type="button" class="mailx-modal-close" id="ob-close" title="Close (Esc)" aria-label="Close">&times;</button>
        </div>
        <div class="ob-info">Messages waiting to be sent. Pink rows are local-only until the server accepts them. Click Cancel to drop a queued message.</div>
        <div class="ob-list" id="ob-list">Loading…</div>
        <div class="mailx-modal-buttons">
            <span class="mailx-modal-spacer"></span>
            <button type="button" class="mailx-modal-btn" data-action="refresh">Refresh</button>
            <button type="button" class="mailx-modal-btn" data-action="close">Close</button>
        </div>`;
    backdrop.appendChild(panel);
    document.body.appendChild(backdrop);
    const listEl = panel.querySelector("#ob-list");
    const renderList = (items) => {
        if (items.length === 0) {
            listEl.innerHTML = `<div class="ob-empty">Outbox is clean — no messages queued.</div>`;
            return;
        }
        const fmtDate = (ms) => new Date(ms).toLocaleString();
        listEl.innerHTML = items.map((m, i) => `
            <div class="ob-row ob-pink" data-idx="${i}">
                <div class="ob-row-hdr">
                    <span class="ob-acct">${escapeHtml(m.accountId)}</span>
                    <span class="ob-subject">${escapeHtml(m.subject || "(no subject)")}</span>
                    <span class="ob-created">${fmtDate(m.createdAt)}</span>
                    ${m.claimed ? `<span class="ob-badge ob-claimed" title="Sending now on this host">sending…</span>` : ""}
                    ${m.attempts > 0 ? `<span class="ob-badge ob-retry" title="Retry attempts made so far">retry ×${m.attempts}</span>` : ""}
                </div>
                <div class="ob-row-meta">
                    <span class="ob-from">${escapeHtml(m.from || "")}</span>
                    → <span class="ob-to">${escapeHtml(m.to || "")}</span>
                    ${m.cc ? ` · Cc: ${escapeHtml(m.cc)}` : ""}
                    <span class="ob-size">· ${(m.sizeBytes / 1024).toFixed(1)}kB</span>
                </div>
                <div class="ob-row-path">${escapeHtml(m.path)}</div>
                <div class="ob-row-actions">
                    <button type="button" class="ob-cancel" ${m.claimed ? "disabled title='Cannot cancel while in flight'" : ""}>Cancel</button>
                </div>
            </div>`).join("");
        listEl.querySelectorAll(".ob-row").forEach((row, idx) => {
            row.querySelector(".ob-cancel").addEventListener("click", async () => {
                const m = items[idx];
                if (!confirm(`Drop this queued message?\n\nTo: ${m.to}\nSubject: ${m.subject}`))
                    return;
                try {
                    await cancelQueuedOutgoing(m.path);
                    await reload();
                }
                catch (e) {
                    alert(`Cancel failed: ${e?.message || e}`);
                }
            });
        });
    };
    const reload = async () => {
        try {
            const items = await listQueuedOutgoing();
            renderList(items || []);
        }
        catch (e) {
            listEl.innerHTML = `<div class="ob-empty">Load failed: ${escapeHtml(e?.message || String(e))}</div>`;
        }
    };
    const close = () => {
        backdrop.remove();
        document.removeEventListener("keydown", onKey, true);
        isOpen = false;
    };
    const onKey = (e) => {
        if (e.key === "Escape") {
            e.stopPropagation();
            e.preventDefault();
            close();
        }
    };
    document.addEventListener("keydown", onKey, true);
    panel.querySelector("#ob-close").addEventListener("click", close);
    panel.querySelector('[data-action="close"]').addEventListener("click", close);
    panel.querySelector('[data-action="refresh"]').addEventListener("click", reload);
    backdrop.addEventListener("mousedown", (e) => { if (e.target === backdrop)
        close(); });
    await reload();
}
function escapeHtml(s) {
    return s.replace(/[&<>"']/g, c => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\"": "&quot;", "'": "&#39;" }[c]));
}
//# sourceMappingURL=outbox-view.js.map