@push('styles')
<style>
    .mailchimp-analytics-page {
        background-color: #f9fafb;
        min-height: 100vh;
        padding: 10px;
    }
    .mailchimp-analytics-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        background-color: #ffffff;
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        gap: 12px;
    }
    .mailchimp-analytics-title {
        font-size: 24px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }
    .mailchimp-analytics-subtitle {
        font-size: 14px;
        color: #6b7280;
        margin-top: 4px;
    }
    .mailchimp-analytics-back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 10px 14px;
        border-radius: 10px;
        border: 1px solid #e5e7eb;
        background-color: #ffffff;
        color: #374151;
        font-size: 14px;
        font-weight: 500;
        text-decoration: none;
    }
    .mailchimp-analytics-card {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .mailchimp-analytics-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
    .mailchimp-metric {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px;
        background: #fafafa;
    }
    .mailchimp-metric .label {
        font-size: 12px;
        color: #6b7280;
    }
    .mailchimp-metric .value {
        font-size: 22px;
        font-weight: 700;
        color: #111827;
        margin-top: 4px;
        line-height: 1.2;
        word-break: break-word;
    }
    .mailchimp-section-title {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 10px;
    }
    .mailchimp-reason-list {
        margin: 0;
        padding-left: 18px;
    }
    .mailchimp-reason-list li {
        margin: 7px 0;
        color: #1f2937;
        font-size: 14px;
    }
    .mailchimp-empty {
        color: #6b7280;
        font-size: 14px;
    }
    .mailchimp-error {
        color: #b91c1c;
        border: 1px solid #fecaca;
        background: #fff7f7;
        border-radius: 10px;
        padding: 10px 12px;
        font-size: 14px;
        margin-bottom: 12px;
    }
    @media (max-width: 1100px) {
        .mailchimp-analytics-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 720px) {
        .mailchimp-analytics-grid {
            grid-template-columns: 1fr;
        }
        .mailchimp-analytics-header {
            flex-direction: column;
        }
    }
</style>
@endpush

<x-filament-panels::page>
    <div class="mailchimp-analytics-page text-gray-800">
        <x-breadcrumbs :breadcrumbs="$this->getBreadcrumbs()" />

        <div class="mailchimp-analytics-header">
            <div>
                <!-- <h1 class="mailchimp-analytics-title">Mailchimp Template Analytics</h1> -->
                <div id="templateMeta" class="mailchimp-analytics-subtitle">Loading...</div>
            </div>
            <a href="{{ \App\Filament\Resources\BackOfficeAdminResource::getUrl('index') }}?tab=email" class="mailchimp-analytics-back">Back</a>
        </div>

        <div id="errorBox" class="mailchimp-error" style="display:none;"></div>

        <div class="mailchimp-analytics-card">
            <div class="mailchimp-analytics-grid">
                <div class="mailchimp-metric"><div class="label">Matched Campaigns</div><div class="value" id="m_matched">0</div></div>
                <div class="mailchimp-metric"><div class="label">Latest Send</div><div class="value" style="font-size:16px;" id="m_latest">N/A</div></div>
                <div class="mailchimp-metric"><div class="label">Total Sent</div><div class="value" id="m_sent">0</div></div>
                <div class="mailchimp-metric"><div class="label">Delivered</div><div class="value" id="m_delivered">0</div></div>
                <div class="mailchimp-metric"><div class="label">Bounced</div><div class="value" id="m_bounced">0</div></div>
                <div class="mailchimp-metric"><div class="label">Unsubscribed</div><div class="value" id="m_unsub">0</div></div>
                <div class="mailchimp-metric"><div class="label">Avg Open Rate</div><div class="value" id="m_open">0.0%</div></div>
                <div class="mailchimp-metric"><div class="label">Avg Click Rate</div><div class="value" id="m_click">0.0%</div></div>
                <div class="mailchimp-metric"><div class="label">Delivery Rate</div><div class="value" id="m_delivery">0.0%</div></div>
            </div>
        </div>

        <div class="mailchimp-analytics-card">
            <h2 class="mailchimp-section-title">Why Email Bounced</h2>
            <div id="bounceReasons" class="mailchimp-empty">Loading...</div>
        </div>

        <div class="mailchimp-analytics-card">
            <h2 class="mailchimp-section-title">Why Email Not Sent</h2>
            <div id="notSentReasons" class="mailchimp-empty">Loading...</div>
        </div>
    </div>
</x-filament-panels::page>

@push('scripts')
<script>
    (function () {
        const encryptedAppId = @json($this->encryptedAppId ?? '');
        const templateId = Number(@json($this->templateId ?? 0));
        const initialTemplateName = String(@json($this->templateName ?? ''));

        function buildApiUrl(endpoint, params = {}) {
            const url = new URL(endpoint, window.location.origin);
            if (encryptedAppId) {
                url.searchParams.append('app_id', encryptedAppId);
            }
            Object.entries(params).forEach(([k, v]) => {
                if (v !== undefined && v !== null && String(v) !== '') {
                    url.searchParams.append(k, String(v));
                }
            });
            return url.toString();
        }

        function fmtInt(value) {
            return Number(value || 0).toLocaleString('en-IN');
        }

        function fmtPct(value) {
            return `${Number(value || 0).toFixed(1)}%`;
        }

        function renderReasons(targetId, rows, emptyText) {
            const mount = document.getElementById(targetId);
            if (!mount) return;

            const list = Array.isArray(rows) ? rows : [];
            if (!list.length) {
                mount.className = 'mailchimp-empty';
                mount.textContent = emptyText;
                return;
            }

            mount.className = '';
            mount.innerHTML = `<ol class="mailchimp-reason-list">${
                list.map((item) => {
                    const reason = String(item?.reason || 'Unknown');
                    const count = fmtInt(item?.count || 0);
                    return `<li>${reason} (${count})</li>`;
                }).join('')
            }</ol>`;
        }

        async function loadAnalytics() {
            const errorBox = document.getElementById('errorBox');
            const meta = document.getElementById('templateMeta');
            if (meta) {
                meta.textContent = initialTemplateName
                    ? `${initialTemplateName} (#${templateId})`
                    : `Template #${templateId}`;
            }

            try {
                const response = await fetch(buildApiUrl('/admin/back-office/email-templates/mailchimp-template-analytics', {
                    template_id: templateId,
                }), {
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    credentials: 'same-origin',
                });

                const payload = await response.json().catch(() => ({}));
                if (!response.ok || !payload?.success) {
                    throw new Error(payload?.error || payload?.message || 'Unable to load analytics.');
                }

                const data = payload?.data || {};
                if (meta) {
                    const templateName = String(data.template_name || initialTemplateName || '');
                    const subject = String(data.subject || '').trim();
                    meta.textContent = templateName
                        ? `${templateName} (#${templateId})${subject ? ' - ' + subject : ''}`
                        : `Template #${templateId}`;
                }

                const latest = String(data.latest_send_time || '').trim();
                const latestLabel = latest ? new Date(latest).toLocaleString() : 'N/A';

                document.getElementById('m_matched').textContent = fmtInt(data.matched_campaigns);
                document.getElementById('m_latest').textContent = latestLabel;
                document.getElementById('m_sent').textContent = fmtInt(data.total_sent);
                document.getElementById('m_delivered').textContent = fmtInt(data.delivered);
                document.getElementById('m_bounced').textContent = fmtInt(data.bounced);
                document.getElementById('m_unsub').textContent = fmtInt(data.unsubscribed);
                document.getElementById('m_open').textContent = fmtPct(data.avg_open_rate);
                document.getElementById('m_click').textContent = fmtPct(data.avg_click_rate);
                document.getElementById('m_delivery').textContent = fmtPct(data.delivery_rate);

                renderReasons('bounceReasons', data.bounce_reasons, 'No bounce reasons found for this template.');
                renderReasons('notSentReasons', data.not_sent_reasons, 'No local not-sent errors recorded for this template.');
            } catch (error) {
                if (errorBox) {
                    errorBox.style.display = 'block';
                    errorBox.textContent = String(error?.message || 'Unable to load analytics.');
                }
                renderReasons('bounceReasons', [], 'No bounce reasons found for this template.');
                renderReasons('notSentReasons', [], 'No local not-sent errors recorded for this template.');
            }
        }

        loadAnalytics();
    })();
</script>
@endpush