// --- Live Ads dashboard: table render + DOM helpers ---

import * as FBAds from './facebook-ads-api.js';

function esc(s) {
    const d = document.createElement('div');
    d.textContent = s == null ? '' : String(s);
    return d.innerHTML;
}

function statusBadgeClass(effective) {
    const u = String(effective || '').toUpperCase();
    if (u.includes('ACTIVE') && !u.includes('NOT')) return 'bg-emerald-100 text-emerald-800 border-emerald-200';
    if (u.includes('PAUSED')) return 'bg-amber-100 text-amber-900 border-amber-200';
    if (u.includes('ARCHIVED') || u.includes('DELETED')) return 'bg-gray-100 text-gray-600 border-gray-200';
    return 'bg-slate-100 text-slate-700 border-slate-200';
}

export function renderCampaignTableRows(tbody, rows, currencyCode, options = {}) {
    const { showActions = false } = options;
    if (!tbody) return;
    if (!rows.length) {
        tbody.innerHTML = `<tr><td colspan="${showActions ? 8 : 7}" class="px-4 py-8 text-center text-gray-400">No campaigns returned.</td></tr>`;
        return;
    }
    tbody.innerHTML = rows
        .map((r) => {
            const canToggle =
                r.effectiveStatus &&
                !String(r.effectiveStatus).toUpperCase().includes('ARCHIVED');
            const isPaused =
                String(r.status || '').toUpperCase() === 'PAUSED' ||
                String(r.effectiveStatus || '').toUpperCase().includes('PAUSED');
            const actionCell = showActions
                ? canToggle
                    ? isPaused
                        ? `<button type="button" class="live-ads-campaign-toggle text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 px-3 py-1.5 rounded-lg" data-campaign-id="${esc(r.id)}" data-next-status="ACTIVE">Activate</button>`
                        : `<button type="button" class="live-ads-campaign-toggle text-xs font-bold text-white bg-amber-600 hover:bg-amber-700 px-3 py-1.5 rounded-lg" data-campaign-id="${esc(r.id)}" data-next-status="PAUSED">Pause</button>`
                    : '<span class="text-xs text-gray-400">—</span>'
                : '';
            const spendStr = FBAds.formatMoney(r.spend, currencyCode);
            const cpcStr = r.clicks > 0 ? FBAds.formatMoney(r.cpc, currencyCode) : '—';
            const purch = Number(r.purchases) || 0;
            return `<tr class="hover:bg-gray-50/80">
<td class="px-4 py-3 font-medium text-gray-800">${esc(r.name)}</td>
<td class="px-4 py-3"><span class="text-xs font-semibold px-2 py-0.5 rounded border ${statusBadgeClass(r.effectiveStatus)}">${esc(r.effectiveStatus || r.status)}</span></td>
<td class="px-4 py-3 text-right tabular-nums">${esc(spendStr)}</td>
<td class="px-4 py-3 text-right tabular-nums">${r.impressions.toLocaleString()}</td>
<td class="px-4 py-3 text-right tabular-nums">${r.clicks.toLocaleString()}</td>
<td class="px-4 py-3 text-right tabular-nums">${esc(cpcStr)}</td>
<td class="px-4 py-3 text-right tabular-nums">${purch.toLocaleString()}</td>
${showActions ? `<td class="px-4 py-3 text-right">${actionCell}</td>` : ''}
</tr>`;
        })
        .join('');
}

export function showEl(el, visible) {
    if (!el) return;
    el.classList.toggle('hidden', !visible);
}

export function setText(id, text) {
    const el = document.getElementById(id);
    if (el) el.textContent = text;
}
