@php
    $chatGreeting = is_array($chatGreeting ?? null) ? $chatGreeting : ['hello' => 'Hello', 'first' => 'there', 'line' => 'It\'s your personal AI Marketer'];
    $chatMessages = is_array($chatMessages ?? null) ? $chatMessages : [];
    $chatPending = is_array($chatPending ?? null) ? $chatPending : null;
    $datePreset = $datePreset ?? 'last_30d';
    $datePresets = $datePresets ?? \App\Services\MetaAdsGraphService::DATE_PRESETS;
    $chatLanguage = ($chatLanguage ?? 'es') === 'en' ? 'en' : 'es';
    $chatStatus = in_array($show ?? 'all', ['on', 'off', 'all'], true) ? ($show ?? 'all') : 'all';
@endphp
<section class="ads-mk" id="ads-marketer"
    data-chat-url="{{ route('ads.meta.chat') }}"
    data-confirm-url="{{ route('ads.meta.chat.confirm') }}"
    data-cancel-url="{{ route('ads.meta.chat.cancel') }}"
    data-clear-url="{{ route('ads.meta.chat.clear') }}"
    data-lang-url="{{ route('ads.meta.chat.language') }}"
    data-range="{{ $datePreset }}"
    data-status="{{ $chatStatus }}"
    data-lang="{{ $chatLanguage }}">
    <div class="ads-mk__bar">
        <p class="ads-mk__hello">
            <span>{{ $chatGreeting['line'] }}</span>
            <svg class="ads-mk__sun" viewBox="0 0 24 24" aria-hidden="true">
                <circle cx="12" cy="12" r="4" fill="#f59e0b"/>
                <path d="M12 2v2.2M12 19.8V22M4.2 4.2l1.6 1.6M18.2 18.2l1.6 1.6M2 12h2.2M19.8 12H22M4.2 19.8l1.6-1.6M18.2 5.8l1.6-1.6" stroke="#f59e0b" stroke-width="1.7" stroke-linecap="round"/>
            </svg>
        </p>
        <div class="ads-mk__actions">
            <div class="ads-mk__menu">
                <button type="button" class="ads-mk__gear" id="ads-mk-gear" aria-expanded="false" aria-haspopup="true" title="AI settings">
                    <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                        <path fill="currentColor" d="M19.14 12.94a7.6 7.6 0 0 0 .05-.94 7.6 7.6 0 0 0-.05-.94l2.03-1.58a.5.5 0 0 0 .12-.64l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.2 7.2 0 0 0-1.63-.94l-.36-2.54a.5.5 0 0 0-.5-.42h-3.84a.5.5 0 0 0-.5.42l-.36 2.54c-.58.22-1.13.53-1.63.94l-2.39-.96a.5.5 0 0 0-.6.22L2.66 8.84a.5.5 0 0 0 .12.64l2.03 1.58a7.6 7.6 0 0 0 0 1.88L2.78 14.52a.5.5 0 0 0-.12.64l1.92 3.32c.13.22.4.3.6.22l2.39-.96c.5.41 1.05.72 1.63.94l.36 2.54a.5.5 0 0 0 .5.42h3.84a.5.5 0 0 0-.5-.42l.36-2.54c.58-.22 1.13-.53 1.63-.94l2.39.96c.22.08.47 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.64l-2.04-1.58ZM12 15.5A3.5 3.5 0 1 1 12 8.5a3.5 3.5 0 0 1 0 7Z"/>
                    </svg>
                </button>
                <div class="ads-mk__drop" id="ads-mk-drop" hidden>
                    <p class="ads-mk__drop-label">AI language</p>
                    <label class="ads-mk__lang"><input type="radio" name="ads_mk_lang" value="es" @checked($chatLanguage === 'es')> Español</label>
                    <label class="ads-mk__lang"><input type="radio" name="ads_mk_lang" value="en" @checked($chatLanguage === 'en')> English</label>
                    <a href="{{ route('setting.ad-platforms') }}">Ad platforms</a>
                </div>
            </div>
            <button type="button" class="ads-mk__cta" id="ads-mk-open">
                <svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true">
                    <path fill="currentColor" d="M12 2.4 13.7 8l5.9.2-4.7 3.6 1.7 5.6L12 14.4 7.4 17.4l1.7-5.6L4.4 8.2 10.3 8 12 2.4Z"/>
                </svg>
                Ask AI Marketer to Do More
            </button>
        </div>
    </div>
</section>

<div class="ads-mk-overlay" id="ads-mk-overlay" hidden></div>
<aside class="ads-mk-panel" id="ads-mk-panel" hidden aria-label="AI Marketer chat">
    <header class="ads-mk-panel__head">
        <div>
            <h2>AI Marketer</h2>
            <p id="ads-mk-sub">{{ $chatLanguage === 'en' ? 'Reads Meta live. OpenAI replies. Nothing changes until you confirm.' : 'Lee Meta en vivo. OpenAI responde. Nada cambia hasta que confirmes.' }}</p>
        </div>
        <button type="button" class="ads-mk-panel__x" id="ads-mk-close" aria-label="Close chat">&times;</button>
    </header>
    <div class="ads-mk-panel__meta">
        <label>
            Date range
            <select id="ads-mk-range">
                @foreach($datePresets as $presetKey => $presetLabel)
                    <option value="{{ $presetKey }}" @selected($datePreset === $presetKey)>{{ $presetLabel }}</option>
                @endforeach
            </select>
        </label>
        <button type="button" class="ads-mk-panel__clear" id="ads-mk-clear">New chat</button>
    </div>
    <div class="ads-mk-log" id="ads-mk-log"></div>
    <div class="ads-mk-pending" id="ads-mk-pending" hidden>
        <p id="ads-mk-pending-text"></p>
        <div class="ads-mk-pending__row">
            <button type="button" class="ads-mk-btn ads-mk-btn--ghost" id="ads-mk-cancel">Cancel</button>
            <button type="button" class="ads-mk-btn ads-mk-btn--go" id="ads-mk-confirm">Confirm in Meta</button>
        </div>
    </div>
    <div class="ads-mk-attach" id="ads-mk-attach" hidden></div>
    <form class="ads-mk-compose" id="ads-mk-form">
        <label class="ads-mk-clip" title="{{ $chatLanguage === 'en' ? 'Attach Ads Manager screenshot' : 'Adjuntar captura de Ads Manager' }}">
            <input type="file" id="ads-mk-file" accept="image/png,image/jpeg,image/webp,image/gif" multiple hidden>
            <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true"><path fill="currentColor" d="M16.5 6.5v10.2a4.5 4.5 0 1 1-9 0V6.2a3 3 0 1 1 6 0v9.8a1.5 1.5 0 1 1-3 0V7.4h-1.6v8.6a3.1 3.1 0 1 0 6.2 0V6.2a4.6 4.6 0 1 0-9.2 0v10.5a6 6 0 1 0 12 0V6.5h-1.6Z"/></svg>
        </label>
        <textarea id="ads-mk-input" rows="2" maxlength="2000" placeholder="{{ $chatLanguage === 'en' ? 'Ask, or paste a Meta screenshot…' : 'Pregunta, o pega una captura de Meta…' }}"></textarea>
        <button type="submit" class="ads-mk-btn ads-mk-btn--send" id="ads-mk-send">Send</button>
    </form>
</aside>

@once
@push('styles')
<style>
.ads-mk { margin: 0 0 1.15rem; }
.ads-mk__bar {
    display: flex; align-items: center; justify-content: space-between; gap: 0.75rem 1rem;
    flex-wrap: wrap;
}
.ads-mk__hello {
    position: relative;
    margin: 0;
    max-width: 36rem;
    padding: 0.72rem 2.1rem 0.72rem 1rem;
    background: #eef0fb;
    color: #1e1b4b;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.35;
}
.ads-mk__sun { position: absolute; top: -0.35rem; right: 0.45rem; width: 18px; height: 18px; }
.ads-mk__actions { display: flex; align-items: center; gap: 0.5rem; margin-left: auto; }
.ads-mk__menu { position: relative; }
.ads-mk__gear {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.35rem; height: 2.35rem; border-radius: 10px;
    border: 1px solid #ddd6fe; background: #fff; color: #64748b; cursor: pointer;
}
.ads-mk__gear:hover { color: #6d28d9; border-color: #c4b5fd; }
.ads-mk__drop {
    position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 20;
    min-width: 11.5rem; padding: 0.65rem 0.75rem;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 10px;
}
.ads-mk__drop[hidden] { display: none !important; }
.ads-mk__drop-label { margin: 0 0 0.4rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.ads-mk__lang { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; font-weight: 600; color: #0f172a; margin: 0.28rem 0; }
.ads-mk__drop a { display: block; margin-top: 0.55rem; font-size: 0.8rem; font-weight: 650; color: #6d28d9; text-decoration: none; }
.ads-mk__cta {
    display: inline-flex; align-items: center; gap: 0.45rem;
    padding: 0.55rem 1rem; border-radius: 10px;
    border: 1.5px solid #7c3aed; background: #fff; color: #6d28d9;
    font-size: 0.88rem; font-weight: 700; cursor: pointer;
}
.ads-mk__cta:hover { background: #f5f3ff; }
.ads-mk-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, 0.38); z-index: 170;
}
.ads-mk-overlay[hidden],
.ads-mk-panel[hidden] { display: none !important; }
.ads-mk-panel {
    position: fixed; z-index: 180; display: flex; flex-direction: column;
    background: #fff; color: #0f172a;
}
.ads-mk-panel__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    padding: 1rem 1.05rem 0.7rem; border-bottom: 1px solid #eef2ff;
}
.ads-mk-panel__head h2 { margin: 0 0 0.2rem; font-size: 1.05rem; }
.ads-mk-panel__head p { margin: 0; font-size: 0.75rem; color: #64748b; line-height: 1.4; max-width: 18rem; }
.ads-mk-panel__x {
    border: 0; background: transparent; font-size: 1.6rem; line-height: 1;
    color: #64748b; cursor: pointer; padding: 0 0.2rem;
}
.ads-mk-panel__meta {
    display: flex; align-items: flex-end; justify-content: space-between; gap: 0.6rem;
    padding: 0.65rem 1.05rem; border-bottom: 1px solid #f1f5f9;
}
.ads-mk-panel__meta label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; }
.ads-mk-panel__meta select {
    font-size: 0.82rem; font-weight: 600; color: #0f172a;
    border: 1px solid #e5e7eb; border-radius: 8px; padding: 0.32rem 0.45rem; background: #fff;
}
.ads-mk-panel__clear {
    border: 0; background: transparent; color: #6d28d9; font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.ads-mk-log { flex: 1; overflow-y: auto; padding: 0.9rem 1.05rem; display: flex; flex-direction: column; gap: 0.7rem; }
.ads-mk-msg { max-width: 92%; padding: 0.7rem 0.85rem; border-radius: 12px; font-size: 0.9rem; line-height: 1.5; white-space: pre-wrap; }
.ads-mk-msg--user { align-self: flex-end; background: #4f46e5; color: #fff; border-bottom-right-radius: 4px; }
.ads-mk-msg--ai { align-self: flex-start; background: #f4f3ff; color: #1e1b4b; border-bottom-left-radius: 4px; }
.ads-mk-msg--hint { align-self: stretch; background: transparent; color: #64748b; padding: 0; font-size: 0.82rem; }
.ads-mk-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.45rem; }
.ads-mk-chips button {
    border: 1px solid #ddd6fe; background: #fff; color: #5b21b6;
    border-radius: 999px; padding: 0.35rem 0.7rem; font-size: 0.78rem; font-weight: 650; cursor: pointer;
}
.ads-mk-pending {
    margin: 0 1.05rem 0.55rem; padding: 0.75rem 0.85rem;
    border: 1px solid #fde68a; background: #fffbeb; border-radius: 10px;
}
.ads-mk-pending p { margin: 0 0 0.55rem; font-size: 0.84rem; font-weight: 650; color: #92400e; }
.ads-mk-pending__row { display: flex; gap: 0.4rem; justify-content: flex-end; }
.ads-mk-attach {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.45rem 1.05rem 0;
}
.ads-mk-attach[hidden] { display: none !important; }
.ads-mk-thumb {
    position: relative; width: 3.4rem; height: 3.4rem;
    border-radius: 8px; overflow: hidden; border: 1px solid #e5e7eb;
}
.ads-mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ads-mk-thumb button {
    position: absolute; top: 0; right: 0; border: 0; background: rgba(15,23,42,.7);
    color: #fff; width: 1.15rem; height: 1.15rem; font-size: 0.7rem; cursor: pointer; line-height: 1;
}
.ads-mk-clip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.7rem; align-self: flex-end; color: #6d28d9; cursor: pointer;
    border: 1px solid #ddd6fe; border-radius: 10px; background: #faf8ff;
}
.ads-mk-clip:hover { background: #f5f3ff; }
.ads-mk-msg__shot { display: block; margin-top: 0.35rem; font-size: 0.72rem; opacity: 0.85; }
.ads-mk-msg__pics {
    display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem;
}
.ads-mk-msg__pics img {
    max-width: 100%; width: 100%; max-height: 14rem; object-fit: contain;
    border-radius: 8px; background: #0f172a; display: block;
}
.ads-mk-msg--user .ads-mk-msg__pics img { background: rgba(255,255,255,.12); }
.ads-mk-compose {
    display: flex; gap: 0.45rem; padding: 0.7rem 1.05rem 1rem;
    border-top: 1px solid #eef2ff; background: #fff;
}
.ads-mk-compose textarea {
    flex: 1; resize: none; border: 1px solid #e5e7eb; border-radius: 10px;
    padding: 0.55rem 0.7rem; font: inherit; font-size: 0.9rem; min-height: 2.7rem;
}
.ads-mk-btn {
    border: 0; border-radius: 9px; cursor: pointer; font-weight: 700; font-size: 0.82rem;
    padding: 0.48rem 0.8rem;
}
.ads-mk-btn--send { background: #6d28d9; color: #fff; align-self: flex-end; }
.ads-mk-btn--go { background: #6d28d9; color: #fff; }
.ads-mk-btn--ghost { background: #fff; color: #64748b; border: 1px solid #e5e7eb; }
.ads-mk-btn:disabled { opacity: 0.55; cursor: wait; }
@media (min-width: 760px) {
    .ads-mk-panel {
        top: 0; right: 0; height: 100vh; width: min(26.5rem, 100vw);
        border-left: 1px solid #e5e7eb;
    }
}
@media (max-width: 759px) {
    .ads-mk__hello { max-width: none; width: 100%; }
    .ads-mk__actions { width: 100%; }
    .ads-mk__cta { flex: 1; justify-content: center; }
    .ads-mk-panel {
        left: 0; right: 0; bottom: 0; top: 8vh;
        height: auto; border-radius: 16px 16px 0 0;
    }
}
</style>
@endpush
@push('scripts')
<script>
(function () {
    var root = document.getElementById('ads-marketer');
    if (!root) return;
    var csrf = (document.querySelector('meta[name="csrf-token"]') || {}).content || '';
    var overlay = document.getElementById('ads-mk-overlay');
    var panel = document.getElementById('ads-mk-panel');
    var logEl = document.getElementById('ads-mk-log');
    var input = document.getElementById('ads-mk-input');
    var rangeEl = document.getElementById('ads-mk-range');
    var pendingBox = document.getElementById('ads-mk-pending');
    var pendingText = document.getElementById('ads-mk-pending-text');
    var pending = @json($chatPending);
    var messages = @json($chatMessages);
    var busy = false;
    var pendingImages = [];
    var lastShotUrls = [];
    var lang = root.getAttribute('data-lang') || 'es';
    var copy = {
        es: {
            hint: 'Cada pregunta vuelve a pedir datos a Meta. Puedes pegar o adjuntar una captura de Ads Manager.',
            shot: 'captura',
            shots: 'capturas',
            clip: 'Adjuntar captura',
            tooBig: 'Esa imagen es muy grande. Usa una captura más liviana.',
            maxShots: 'Máximo 3 capturas por mensaje.',
            q1: 'Analiza las campañas On a fondo. Compara vs el período anterior. Cuida el dinero. No cambies nada.',
            q1l: 'Campañas On',
            q2: '¿Hay alguna On donde el gasto no se justifique? Solo Meta, compara vs antes.',
            q2l: '¿Gasto justificado?',
            q3: 'Revisa creativos, videos, headlines y catálogo. Recomendaciones concretas. No cambies nada.',
            q3l: 'Creativos',
            pull: 'Trayendo números vivos de Meta…',
            send: 'Enviar',
            err: 'No se pudo hablar con Meta o OpenAI.',
            net: 'Error de red. Intenta de nuevo.',
            metaFail: 'Meta no aplicó el cambio.',
            sub: 'Lee Meta en vivo. OpenAI responde. Nada cambia hasta que confirmes.'
        },
        en: {
            hint: 'Each question pulls campaigns from Meta again. You can paste or attach an Ads Manager screenshot.',
            shot: 'screenshot',
            shots: 'screenshots',
            clip: 'Attach screenshot',
            tooBig: 'That image is too large. Use a lighter screenshot.',
            maxShots: 'Maximum 3 screenshots per message.',
            q1: 'Analyze On campaigns in depth. Compare vs the previous period. Protect the money. Do not change anything.',
            q1l: 'On campaigns',
            q2: 'Is any On campaign spending without justification? Meta only, compare vs before.',
            q2l: 'Spend justified?',
            q3: 'Review creatives, videos, headlines and catalog. Concrete recommendations. Do not change anything.',
            q3l: 'Creatives',
            pull: 'Pulling live numbers from Meta…',
            send: 'Send',
            err: 'Could not reach Meta or OpenAI.',
            net: 'Network error. Try again.',
            metaFail: 'Meta did not apply the change.',
            sub: 'Reads Meta live. OpenAI replies. Nothing changes until you confirm.'
        }
    };
    function t() { return copy[lang] || copy.es; }

    function openPanel() {
        overlay.hidden = false;
        panel.hidden = false;
        document.body.style.overflow = 'hidden';
        input.focus();
        logEl.scrollTop = logEl.scrollHeight;
    }
    function closePanel() {
        overlay.hidden = true;
        panel.hidden = true;
        document.body.style.overflow = '';
    }
    function esc(s) {
        return String(s || '').replace(/[&<>"']/g, function (c) {
            return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]);
        });
    }
    function render() {
        logEl.innerHTML = '';
        if (!messages.length) {
            var hint = document.createElement('div');
            hint.className = 'ads-mk-msg ads-mk-msg--hint';
            hint.innerHTML = t().hint + '<div class="ads-mk-chips">' +
                '<button type="button" data-q="'+esc(t().q1)+'">'+esc(t().q1l)+'</button>' +
                '<button type="button" data-q="'+esc(t().q2)+'">'+esc(t().q2l)+'</button>' +
                '<button type="button" data-q="'+esc(t().q3)+'">'+esc(t().q3l)+'</button>' +
                '</div>';
            logEl.appendChild(hint);
        } else {
            messages.forEach(function (row) {
                var div = document.createElement('div');
                div.className = 'ads-mk-msg ' + (row.role === 'user' ? 'ads-mk-msg--user' : 'ads-mk-msg--ai');
                div.textContent = row.content || '';
                var pics = Array.isArray(row.previews) ? row.previews : [];
                if (pics.length) {
                    var gallery = document.createElement('div');
                    gallery.className = 'ads-mk-msg__pics';
                    pics.forEach(function (url) {
                        var im = document.createElement('img');
                        im.src = url;
                        im.alt = lang === 'en' ? 'Attached screenshot' : 'Captura adjunta';
                        gallery.appendChild(im);
                    });
                    div.appendChild(gallery);
                } else if (row.images) {
                    var tag = document.createElement('span');
                    tag.className = 'ads-mk-msg__shot';
                    tag.textContent = row.images + ' ' + (row.images > 1 ? t().shots : t().shot);
                    div.appendChild(tag);
                }
                logEl.appendChild(div);
            });
        }
        if (pending && pending.summary) {
            pendingBox.hidden = false;
            pendingText.textContent = pending.summary;
        } else {
            pendingBox.hidden = true;
            pendingText.textContent = '';
        }
        logEl.scrollTop = logEl.scrollHeight;
    }
    function post(url, body) {
        return fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': csrf,
                'X-Requested-With': 'XMLHttpRequest'
            },
            body: JSON.stringify(body || {})
        }).then(function (res) { return res.json().then(function (j) { return { okHttp: res.ok, json: j }; }); });
    }
    function setBusy(on) {
        busy = on;
        document.getElementById('ads-mk-send').disabled = on;
        document.getElementById('ads-mk-send').textContent = on ? '…' : t().send;
        document.getElementById('ads-mk-confirm').disabled = on;
        document.getElementById('ads-mk-cancel').disabled = on;
    }
    function renderAttach() {
        var box = document.getElementById('ads-mk-attach');
        box.innerHTML = '';
        if (!pendingImages.length) {
            box.hidden = true;
            return;
        }
        box.hidden = false;
        pendingImages.forEach(function (url, i) {
            var wrap = document.createElement('div');
            wrap.className = 'ads-mk-thumb';
            wrap.innerHTML = '<img alt="" src="'+url+'"><button type="button" data-rm="'+i+'" aria-label="Remove">&times;</button>';
            box.appendChild(wrap);
        });
    }
    function addImageDataUrl(dataUrl) {
        if (pendingImages.length >= 3) {
            window.alert(t().maxShots);
            return;
        }
        if (!dataUrl || dataUrl.length > 4200000) {
            window.alert(t().tooBig);
            return;
        }
        pendingImages.push(dataUrl);
        renderAttach();
    }
    function fileToDataUrl(file) {
        if (!file || !/^image\//.test(file.type || '')) return;
        if (file.size > 6 * 1024 * 1024) {
            window.alert(t().tooBig);
            return;
        }
        var reader = new FileReader();
        reader.onload = function () {
            var img = new Image();
            img.onload = function () {
                var max = 1280;
                var w = img.width;
                var h = img.height;
                if (w > max || h > max) {
                    var scale = Math.min(max / w, max / h);
                    w = Math.round(w * scale);
                    h = Math.round(h * scale);
                }
                var canvas = document.createElement('canvas');
                canvas.width = w;
                canvas.height = h;
                canvas.getContext('2d').drawImage(img, 0, 0, w, h);
                addImageDataUrl(canvas.toDataURL('image/jpeg', 0.72));
            };
            img.src = String(reader.result || '');
        };
        reader.readAsDataURL(file);
    }
    function sendText(text) {
        text = (text || '').trim();
        var shots = pendingImages.slice();
        if ((!text && !shots.length) || busy) return;
        setBusy(true);
        lastShotUrls = shots.slice();
        messages.push({
            role: 'user',
            content: text || (lang === 'en' ? 'Read this screenshot.' : 'Lee esta captura.'),
            images: shots.length || undefined,
            previews: shots.slice()
        });
        messages.push({ role: 'assistant', content: t().pull });
        render();
        input.value = '';
        pendingImages = [];
        renderAttach();
        post(root.getAttribute('data-chat-url'), {
            message: text,
            range: rangeEl.value || root.getAttribute('data-range') || 'last_30d',
            status: root.getAttribute('data-status') || 'all',
            images: shots.map(function (url) { return { url: url }; })
        }).then(function (out) {
            var j = out.json || {};
            if (Array.isArray(j.messages)) {
                messages = j.messages;
                if (lastShotUrls.length) {
                    for (var i = messages.length - 1; i >= 0; i--) {
                        if (messages[i].role === 'user') {
                            messages[i].previews = lastShotUrls.slice();
                            break;
                        }
                    }
                }
            } else {
                messages = messages.filter(function (m) { return m.content !== t().pull && m.content !== 'Pulling live numbers from Meta…'; });
                messages.push({ role: 'assistant', content: (j && j.error) || t().err });
            }
            pending = j.pending || null;
            render();
        }).catch(function () {
            messages = messages.filter(function (m) { return m.content !== t().pull && m.content !== 'Pulling live numbers from Meta…'; });
            messages.push({ role: 'assistant', content: t().net });
            render();
        }).finally(function () { setBusy(false); });
    }

    document.getElementById('ads-mk-open').addEventListener('click', openPanel);
    document.getElementById('ads-mk-close').addEventListener('click', closePanel);
    overlay.addEventListener('click', closePanel);
    document.getElementById('ads-mk-form').addEventListener('submit', function (e) {
        e.preventDefault();
        sendText(input.value);
    });
    input.addEventListener('keydown', function (e) {
        if (e.key === 'Enter' && !e.shiftKey) {
            e.preventDefault();
            sendText(input.value);
        }
    });
    input.addEventListener('paste', function (e) {
        var items = (e.clipboardData && e.clipboardData.items) ? e.clipboardData.items : [];
        for (var i = 0; i < items.length; i++) {
            if (items[i].type && items[i].type.indexOf('image') === 0) {
                e.preventDefault();
                var blob = items[i].getAsFile();
                if (blob) fileToDataUrl(blob);
            }
        }
    });
    document.getElementById('ads-mk-file').addEventListener('change', function () {
        Array.prototype.forEach.call(this.files || [], fileToDataUrl);
        this.value = '';
    });
    document.getElementById('ads-mk-attach').addEventListener('click', function (e) {
        var btn = e.target.closest('[data-rm]');
        if (!btn) return;
        pendingImages.splice(parseInt(btn.getAttribute('data-rm'), 10), 1);
        renderAttach();
    });
    logEl.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-q]');
        if (btn) sendText(btn.getAttribute('data-q'));
    });
    document.getElementById('ads-mk-clear').addEventListener('click', function () {
        post(root.getAttribute('data-clear-url'), {}).then(function () {
            messages = [];
            pending = null;
            render();
        });
    });
    document.getElementById('ads-mk-confirm').addEventListener('click', function () {
        if (!pending || !pending.id || busy) return;
        setBusy(true);
        post(root.getAttribute('data-confirm-url'), { action_id: pending.id }).then(function (out) {
            var j = out.json || {};
            if (Array.isArray(j.messages)) messages = j.messages;
            pending = j.pending || null;
            if (!j.ok && !Array.isArray(j.messages)) {
                messages.push({ role: 'assistant', content: j.error || t().metaFail });
            }
            render();
            if (j.ok) setTimeout(function () { window.location.reload(); }, 900);
        }).finally(function () { setBusy(false); });
    });
    document.getElementById('ads-mk-cancel').addEventListener('click', function () {
        post(root.getAttribute('data-cancel-url'), {}).then(function (out) {
            var j = out.json || {};
            if (Array.isArray(j.messages)) messages = j.messages;
            pending = null;
            render();
        });
    });
    document.querySelectorAll('[data-ads-ask]').forEach(function (btn) {
        btn.addEventListener('click', function () {
            openPanel();
            sendText(btn.getAttribute('data-ads-ask') || '');
        });
    });
    var gear = document.getElementById('ads-mk-gear');
    var drop = document.getElementById('ads-mk-drop');
    if (gear && drop) {
        gear.addEventListener('click', function (e) {
            e.stopPropagation();
            var open = drop.hidden;
            drop.hidden = !open;
            gear.setAttribute('aria-expanded', open ? 'true' : 'false');
        });
        document.addEventListener('click', function () { drop.hidden = true; gear.setAttribute('aria-expanded', 'false'); });
        drop.addEventListener('click', function (e) { e.stopPropagation(); });
        drop.querySelectorAll('input[name="ads_mk_lang"]').forEach(function (radio) {
            radio.addEventListener('change', function () {
                var next = radio.value === 'en' ? 'en' : 'es';
                post(root.getAttribute('data-lang-url'), { language: next }).then(function (out) {
                    if (out.json && out.json.ok) {
                        lang = next;
                        root.setAttribute('data-lang', next);
                        var sub = document.getElementById('ads-mk-sub');
                        if (sub) sub.textContent = t().sub;
                        render();
                    }
                });
            });
        });
    }
    render();
})();
</script>
@endpush
@endonce