@push('styles')
<style>
    .email-insights-page {
        background-color: #f9fafb;
        min-height: 100vh;
        padding: 10px;
    }
    .email-insights-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;
    }
    .email-insights-title {
        font-size: 24px;
        font-weight: 600;
        color: #111827;
        margin: 0;
    }
    .email-insights-subtitle {
        font-size: 14px;
        color: #6b7280;
        margin-top: 4px;
    }
    .email-insights-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;
    }
    .email-insights-card {
        background-color: #ffffff;
        border-radius: 12px;
        padding: 16px 20px;
        margin-bottom: 16px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .email-insights-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }
    .email-metric {
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        padding: 12px;
        background: #fafafa;
    }
    .email-metric .label {
        font-size: 12px;
        color: #6b7280;
    }
    .email-metric .value {
        font-size: 22px;
        font-weight: 700;
        color: #111827;
        margin-top: 4px;
        line-height: 1.2;
        word-break: break-word;
    }
    .email-section-title {
        font-size: 16px;
        font-weight: 700;
        color: #111827;
        margin: 0 0 10px;
    }
    .email-reason-list {
        margin: 0;
        padding-left: 18px;
    }
    .email-reason-list li {
        margin: 7px 0;
        color: #1f2937;
        font-size: 14px;
    }
    .email-empty {
        color: #6b7280;
        font-size: 14px;
    }
    .email-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) {
        .email-insights-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }
    @media (max-width: 720px) {
        .email-insights-grid {
            grid-template-columns: 1fr;
        }
        .email-insights-header {
            flex-direction: column;
        }
    }
</style>
@endpush

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

        <div class="email-insights-header">
            <div>
                <h1 class="email-insights-title">Email Analytics Insights</h1>
                <div class="email-insights-subtitle">Global email delivery diagnostics and reasons.</div>
            </div>
            <a href="{{ \App\Filament\Resources\BackOfficeAdminResource::getUrl('index') }}?tab=email" class="email-insights-back">Back</a>
        </div>

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

        <div class="email-insights-card">
            <div class="email-insights-grid">
                <div class="email-metric"><div class="label">Total Sent</div><div class="value" id="m_sent">0</div></div>
                <div class="email-metric"><div class="label">Delivered</div><div class="value" id="m_delivered">0</div></div>
                <div class="email-metric"><div class="label">Bounced</div><div class="value" id="m_bounced">0</div></div>
                <div class="email-metric"><div class="label">Unsubscribed</div><div class="value" id="m_unsub">0</div></div>
            </div>
        </div>

        <div class="email-insights-card">
            <h2 class="email-section-title">Why Email Not Sent</h2>
            <div id="notSentReasons" class="email-empty">Loading...</div>
        </div>

        <div class="email-insights-card">
            <h2 class="email-section-title">Why Bounced</h2>
            <div id="bounceReasons" class="email-empty">Loading...</div>
        </div>
    </div>
</x-filament-panels::page>

@push('scripts')
<script>
    (function () {
        const encryptedAppId = @json($this->encryptedAppId ?? '');
        const bearer = @json(session('api_bearer_token') ?? '');

        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 renderReasons(targetId, rows, emptyText) {
            const mount = document.getElementById(targetId);
            if (!mount) return;

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

            mount.className = '';
            mount.innerHTML = `<ol class="email-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');
            try {
                const headers = {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest',
                };
                if (String(bearer).trim() !== '') {
                    headers['Authorization'] = 'Bearer ' + bearer;
                }

                const response = await fetch(buildApiUrl('/admin/api/back-office/sidebar/email'), {
                    method: 'GET',
                    headers,
                    credentials: 'same-origin',
                });

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

                const quick = data.quick || {};
                document.getElementById('m_sent').textContent = fmtInt(quick.total_sent || 0);
                document.getElementById('m_delivered').textContent = fmtInt(quick.delivered || 0);
                document.getElementById('m_bounced').textContent = fmtInt(quick.bounced || 0);
                document.getElementById('m_unsub').textContent = fmtInt(quick.unsubscribed || 0);

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

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