@extends('business::layouts.app')

@section('title', 'Dashboard — BizWap')

@push('styles')
<style>
/* ── Stat Cards ─────────────────────────────────────────── */
.bw-stat-card {
    background: var(--bw-surface);
    border-radius: 14px;
    padding: 1.35rem 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 0 0 1px var(--bw-border);
    transition: box-shadow .2s;
    height: 100%;
}
.bw-stat-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.09), 0 0 0 1px var(--bw-border);
}
.bw-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(22,163,74,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #16a34a;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.bw-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bw-text);
    margin: .6rem 0 .15rem;
}
.bw-stat-label {
    font-size: .8rem;
    color: var(--bw-text-muted);
    margin: 0;
}
.bw-stat-sub {
    font-size: .72rem;
    color: var(--bw-text-muted);
    opacity: .75;
}
.bw-growth {
    font-size: .75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .2rem;
}
.bw-growth.up   { color: #16a34a; }
.bw-growth.down { color: var(--bs-danger); }
.bw-growth.neutral { color: var(--bw-text-muted); }

/* ── Shimmer ─────────────────────────────────────────────── */
@keyframes bw-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.bw-shimmer {
    background: linear-gradient(
        90deg,
        var(--bw-border) 25%,
        var(--bw-surface-alt, color-mix(in srgb, var(--bw-surface) 80%, var(--bw-text) 20%)) 50%,
        var(--bw-border) 75%
    );
    background-size: 200% 100%;
    animation: bw-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}
.bw-shimmer-icon  { width: 42px; height: 42px; border-radius: 10px; }
.bw-shimmer-badge { width: 56px; height: 18px; }
.bw-shimmer-val   { width: 90px; height: 28px; margin: .6rem 0 .3rem; }
.bw-shimmer-lbl   { width: 110px; height: 14px; }
.bw-shimmer-sub   { width: 70px;  height: 11px; margin-top: .3rem; }
.bw-shimmer-chart { width: 100%; height: 260px; border-radius: 8px; }

/* ── Chart Cards ─────────────────────────────────────────── */
.bw-chart-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}
.bw-chart-title {
    font-size: .9rem;
    font-weight: 600;
    color: var(--bw-text);
    margin: 0;
}
.bw-chart-sub {
    font-size: .72rem;
    color: var(--bw-text-muted);
    margin: .1rem 0 0;
}
.bw-rate-badge {
    font-size: 1.4rem;
    font-weight: 700;
    color: #16a34a;
    line-height: 1;
}
.bw-rate-label {
    font-size: .7rem;
    color: var(--bw-text-muted);
    text-align: right;
}
.bw-chart-error {
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bw-text-muted);
    font-size: .82rem;
}
</style>
@endpush

@section('content')
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h4 class="fw-bold mb-0">Dashboard</h4>
        <p class="text-muted small mb-0">Welcome back, {{ $business->name }}</p>
    </div>
</div>

{{-- ── Stats Row ───────────────────────────────────────────── --}}
<div class="row g-3 mb-4" id="bw-stats-row">

    {{-- Card 1: Messages --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="bw-stat-card" id="card-messages">
            <div class="d-flex justify-content-between align-items-start">
                <div class="bw-shimmer bw-shimmer-icon"></div>
                <div class="bw-shimmer bw-shimmer-badge"></div>
            </div>
            <div class="bw-shimmer bw-shimmer-val"></div>
            <div class="bw-shimmer bw-shimmer-lbl"></div>
            <div class="bw-shimmer bw-shimmer-sub"></div>
        </div>
    </div>

    {{-- Card 2: Conversations --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="bw-stat-card" id="card-conversations">
            <div class="d-flex justify-content-between align-items-start">
                <div class="bw-shimmer bw-shimmer-icon"></div>
                <div class="bw-shimmer bw-shimmer-badge"></div>
            </div>
            <div class="bw-shimmer bw-shimmer-val"></div>
            <div class="bw-shimmer bw-shimmer-lbl"></div>
            <div class="bw-shimmer bw-shimmer-sub"></div>
        </div>
    </div>

    {{-- Card 3: Wallet --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="bw-stat-card" id="card-wallet">
            <div class="d-flex justify-content-between align-items-start">
                <div class="bw-shimmer bw-shimmer-icon"></div>
                <div class="bw-shimmer bw-shimmer-badge"></div>
            </div>
            <div class="bw-shimmer bw-shimmer-val"></div>
            <div class="bw-shimmer bw-shimmer-lbl"></div>
            <div class="bw-shimmer bw-shimmer-sub"></div>
        </div>
    </div>

    {{-- Card 4: Webhooks --}}
    <div class="col-12 col-sm-6 col-xl-3">
        <div class="bw-stat-card" id="card-webhooks">
            <div class="d-flex justify-content-between align-items-start">
                <div class="bw-shimmer bw-shimmer-icon"></div>
                <div class="bw-shimmer bw-shimmer-badge"></div>
            </div>
            <div class="bw-shimmer bw-shimmer-val"></div>
            <div class="bw-shimmer bw-shimmer-lbl"></div>
            <div class="bw-shimmer bw-shimmer-sub"></div>
        </div>
    </div>

</div>
{{-- ── End Stats Row ──────────────────────────────────────── --}}

{{-- ── Charts Row ──────────────────────────────────────────── --}}
<div class="row g-3 mb-4">

    {{-- Message Analytics ──────────────────────────────────── --}}
    <div class="col-12 col-lg-7">
        <div class="bw-stat-card h-100">
            <div class="bw-chart-header" id="analytics-header">
                <div>
                    <p class="bw-chart-title">Message Analytics</p>
                    <p class="bw-chart-sub">Track your message performance over time</p>
                </div>
            </div>
            <div id="analytics-body">
                <div class="bw-shimmer bw-shimmer-chart"></div>
            </div>
        </div>
    </div>

    {{-- Sent Metrics ────────────────────────────────────────── --}}
    <div class="col-12 col-lg-5">
        <div class="bw-stat-card h-100">
            <div class="bw-chart-header">
                <div>
                    <p class="bw-chart-title">Sent Metrics</p>
                    <p class="bw-chart-sub">API send success vs failure</p>
                </div>
                <div id="delivery-rate-badge" class="text-end">
                    <div class="bw-shimmer" style="width:70px;height:28px;border-radius:6px;"></div>
                    <div class="bw-shimmer mt-1" style="width:52px;height:11px;border-radius:4px;margin-left:auto;"></div>
                </div>
            </div>
            <div id="delivery-body">
                <div class="bw-shimmer bw-shimmer-chart"></div>
            </div>
        </div>
    </div>

</div>
{{-- ── End Charts Row ───────────────────────────────────────── --}}

{{-- ── Delivery Metrics Row ───────────────────────────────── --}}
<div class="row g-3 mb-4">

    <div class="col-12">
        <div class="bw-stat-card h-100">
            <div class="bw-chart-header">
                <div>
                    <p class="bw-chart-title">Delivery Metrics</p>
                    <p class="bw-chart-sub">Webhook-confirmed delivery vs failure (last 7 days)</p>
                </div>
                <div id="wh-delivery-rate-badge" class="text-end">
                    <div class="bw-shimmer" style="width:70px;height:28px;border-radius:6px;"></div>
                    <div class="bw-shimmer mt-1" style="width:52px;height:11px;border-radius:4px;margin-left:auto;"></div>
                </div>
            </div>
            <div id="wh-delivery-body">
                <div class="bw-shimmer bw-shimmer-chart"></div>
            </div>
        </div>
    </div>

</div>
{{-- ── End Delivery Metrics Row ────────────────────────────── --}}

{{-- ── Recent Activity Row ─────────────────────────────────── --}}
<div class="row g-3 mb-4">

    {{-- Recent Conversations ───────────────────────────────── --}}
    <div class="col-12 col-lg-7">
        <div class="bw-stat-card h-100">
            <div class="bw-chart-header">
                <div>
                    <p class="bw-chart-title">Recent Conversations</p>
                    <p class="bw-chart-sub">Your latest WhatsApp conversations</p>
                </div>
                <a href="{{ route('business.conversations.index') }}" class="text-muted" style="font-size:1.1rem;" title="View all">
                    <i class="bi bi-chat-square-text"></i>
                </a>
            </div>
            <div id="conversations-body">
                {{-- shimmer rows --}}
                @for ($i = 0; $i < 4; $i++)
                <div class="d-flex align-items-center gap-3 py-3 {{ $i < 3 ? 'border-bottom' : '' }}" style="border-color:var(--bw-border)!important;">
                    <div class="bw-shimmer flex-shrink-0" style="width:40px;height:40px;border-radius:50%;"></div>
                    <div class="flex-grow-1">
                        <div class="bw-shimmer mb-1" style="width:55%;height:13px;border-radius:4px;"></div>
                        <div class="bw-shimmer" style="width:80%;height:11px;border-radius:4px;"></div>
                    </div>
                    <div class="bw-shimmer flex-shrink-0" style="width:48px;height:11px;border-radius:4px;"></div>
                </div>
                @endfor
            </div>
        </div>
    </div>

    {{-- Template Status ─────────────────────────────────────── --}}
    <div class="col-12 col-lg-5">
        <div class="bw-stat-card h-100">
            <div class="bw-chart-header">
                <div>
                    <p class="bw-chart-title">Template Status</p>
                    <p class="bw-chart-sub">Overview of your message templates</p>
                </div>
            </div>
            <div id="template-donut-wrap" class="d-flex justify-content-center mb-3">
                <div class="bw-shimmer" style="width:140px;height:140px;border-radius:50%;"></div>
            </div>
            <div id="template-legend" class="d-flex justify-content-center gap-3 mb-3">
                <div class="bw-shimmer" style="width:80px;height:13px;border-radius:4px;"></div>
                <div class="bw-shimmer" style="width:70px;height:13px;border-radius:4px;"></div>
                <div class="bw-shimmer" style="width:75px;height:13px;border-radius:4px;"></div>
            </div>
            <div id="template-list">
                <p class="bw-chart-title mb-2" style="font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6;">Recent Templates</p>
                @for ($i = 0; $i < 4; $i++)
                <div class="d-flex align-items-center justify-content-between py-2 {{ $i < 3 ? 'border-bottom' : '' }}" style="border-color:var(--bw-border)!important;">
                    <div>
                        <div class="bw-shimmer mb-1" style="width:120px;height:13px;border-radius:4px;"></div>
                        <div class="bw-shimmer" style="width:70px;height:11px;border-radius:4px;"></div>
                    </div>
                    <div class="bw-shimmer" style="width:60px;height:20px;border-radius:20px;"></div>
                </div>
                @endfor
            </div>
        </div>
    </div>

</div>
{{-- ── End Recent Activity Row ──────────────────────────────── --}}

@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
(function () {
    const STATS_URL = '{{ route("business.dashboard.stats") }}';
    const CSRF      = '{{ csrf_token() }}';

    function growthHtml(growth, direction) {
        const icon = direction === 'up'
            ? '<i class="bi bi-graph-up-arrow"></i>'
            : direction === 'down'
                ? '<i class="bi bi-graph-down-arrow"></i>'
                : '';
        return `<span class="bw-growth ${direction}">${icon} ${growth}</span>`;
    }

    function cardHtml(iconClass, growth, direction, value, label, sub) {
        return `
            <div class="d-flex justify-content-between align-items-start">
                <div class="bw-stat-icon"><i class="bi ${iconClass}"></i></div>
                ${growthHtml(growth, direction)}
            </div>
            <div class="bw-stat-value">${value}</div>
            <p class="bw-stat-label">${label}</p>
            <p class="bw-stat-sub">${sub}</p>`;
    }

    function populateStatCards(data) {
        const m = data.messages;
        document.getElementById('card-messages').innerHTML = cardHtml(
            'bi-chat-left-text',
            m.growth, m.direction,
            m.value,
            'Total Messages',
            'vs last month'
        );

        const c = data.conversations;
        document.getElementById('card-conversations').innerHTML = cardHtml(
            'bi-people',
            c.growth, c.direction,
            c.value,
            'Conversations',
            'unique numbers'
        );

        const w = data.wallet;
        const walletGrowth = w.direction === 'down'
            ? `<span class="bw-growth down"><i class="bi bi-dash-circle"></i> ${w.used}</span>`
            : `<span class="bw-growth neutral">—</span>`;
        document.getElementById('card-wallet').innerHTML = `
            <div class="d-flex justify-content-between align-items-start">
                <div class="bw-stat-icon"><i class="bi bi-wallet2"></i></div>
                ${walletGrowth}
            </div>
            <div class="bw-stat-value">${w.balance}</div>
            <p class="bw-stat-label">Wallet Balance</p>
            <p class="bw-stat-sub">used this month</p>`;

        const wh = data.webhooks;
        document.getElementById('card-webhooks').innerHTML = cardHtml(
            'bi bi-arrow-repeat',
            wh.rate === '—' ? '—' : wh.rate,
            wh.direction,
            wh.rate === '—' ? '—' : wh.rate,
            'Webhook Events',
            wh.sub ?? 'delivery rate'
        );
    }

    function showStatCardError() {
        ['card-messages','card-conversations','card-wallet','card-webhooks'].forEach(id => {
            document.getElementById(id).innerHTML =
                `<div class="text-center text-muted py-3 small"><i class="bi bi-exclamation-circle me-1"></i>Failed to load</div>`;
        });
    }

    fetch(STATS_URL, {
        headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF }
    })
    .then(r => {
        if (!r.ok) throw new Error('Non-200');
        return r.json();
    })
    .then(res => {
        if (res.success) populateStatCards(res.data);
        else showStatCardError();
    })
    .catch(showStatCardError);
})();

/* ── Charts ──────────────────────────────────────────────── */
(function () {
    const ANALYTICS_URL    = '{{ route("business.dashboard.analytics") }}';
    const DELIVERY_URL     = '{{ route("business.dashboard.delivery-metrics") }}';
    const CSRF             = '{{ csrf_token() }}';

    function isDark() {
        return document.documentElement.getAttribute('data-bs-theme') === 'dark';
    }

    function chartColors() {
        const dark = isDark();
        return {
            grid:    dark ? 'rgba(255,255,255,.06)' : 'rgba(0,0,0,.06)',
            ticks:   dark ? '#94a3b8' : '#64748b',
            sent:    dark ? '#22c55e' : '#16a34a',
            deliv:   dark ? '#38bdf8' : '#0ea5e9',
            read:    dark ? '#fbbf24' : '#f59e0b',
            dBar:    dark ? '#22c55e' : '#16a34a',
            fBar:    dark ? '#f87171' : '#ef4444',
        };
    }

    function makeGradient(ctx, color) {
        const g = ctx.createLinearGradient(0, 0, 0, 260);
        g.addColorStop(0, color + '55');
        g.addColorStop(1, color + '00');
        return g;
    }

    function baseChartOptions(colors) {
        return {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false } },
            scales: {
                x: {
                    grid: { color: colors.grid },
                    ticks: { color: colors.ticks, font: { size: 11 } },
                },
                y: {
                    beginAtZero: true,
                    grid: { color: colors.grid },
                    ticks: { color: colors.ticks, font: { size: 11 }, precision: 0 },
                },
            },
        };
    }

    /* ── Message Analytics ──────────────────── */
    let analyticsChart = null;

    function loadMessageAnalytics() {
        fetch(ANALYTICS_URL, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF } })
            .then(r => { if (!r.ok) throw new Error(); return r.json(); })
            .then(res => { if (res.success) renderAnalytics(res.data); else throw new Error(); })
            .catch(() => {
                document.getElementById('analytics-body').innerHTML =
                    '<div class="bw-chart-error"><i class="bi bi-exclamation-circle me-2"></i>Failed to load chart</div>';
            });
    }

    function renderAnalytics(data) {
        const el = document.getElementById('analytics-body');
        el.innerHTML = '<div style="position:relative;height:260px;"><canvas id="analytics-canvas"></canvas></div>';

        const canvas = document.getElementById('analytics-canvas');
        const ctx    = canvas.getContext('2d');
        const c      = chartColors();

        analyticsChart = new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.labels,
                datasets: [
                    {
                        label: 'Sent',
                        data: data.sent,
                        borderColor: c.sent,
                        backgroundColor: makeGradient(ctx, c.sent),
                        borderWidth: 2,
                        pointRadius: 3,
                        pointHoverRadius: 5,
                        fill: true,
                        tension: 0.4,
                    },
                    {
                        label: 'Delivered',
                        data: data.delivered,
                        borderColor: c.deliv,
                        backgroundColor: makeGradient(ctx, c.deliv),
                        borderWidth: 2,
                        pointRadius: 3,
                        pointHoverRadius: 5,
                        fill: true,
                        tension: 0.4,
                    },
                    {
                        label: 'Read',
                        data: data.read,
                        borderColor: c.read,
                        backgroundColor: makeGradient(ctx, c.read),
                        borderWidth: 2,
                        pointRadius: 3,
                        pointHoverRadius: 5,
                        fill: true,
                        tension: 0.4,
                    },
                ],
            },
            options: {
                ...baseChartOptions(c),
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            color: c.ticks,
                            boxWidth: 12,
                            padding: 16,
                            font: { size: 12 },
                        },
                    },
                    tooltip: { mode: 'index', intersect: false },
                },
            },
        });
    }

    /* ── Delivery Metrics ───────────────────── */
    let deliveryChart = null;

    function loadDeliveryMetrics() {
        fetch(DELIVERY_URL, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF } })
            .then(r => { if (!r.ok) throw new Error(); return r.json(); })
            .then(res => { if (res.success) renderDelivery(res.data); else throw new Error(); })
            .catch(() => {
                document.getElementById('delivery-body').innerHTML =
                    '<div class="bw-chart-error"><i class="bi bi-exclamation-circle me-2"></i>Failed to load chart</div>';
                document.getElementById('delivery-rate-badge').innerHTML = '';
            });
    }

    function renderDelivery(data) {
        const rateBadge = document.getElementById('delivery-rate-badge');
        rateBadge.innerHTML = data.success_rate === '—'
            ? `<div class="bw-rate-badge" style="color:var(--bw-text-muted);">—</div>
               <div class="bw-rate-label">no data yet</div>`
            : `<div class="bw-rate-badge">${data.success_rate}</div>
               <div class="bw-rate-label">Success Rate</div>`;

        const el = document.getElementById('delivery-body');
        el.innerHTML = '<div style="position:relative;height:260px;"><canvas id="delivery-canvas"></canvas></div>';

        const canvas = document.getElementById('delivery-canvas');
        const ctx    = canvas.getContext('2d');
        const c      = chartColors();

        deliveryChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data.labels,
                datasets: [
                    {
                        label: `Delivered: ${data.total_delivered.toLocaleString()}`,
                        data: data.delivered,
                        backgroundColor: c.dBar + 'cc',
                        borderRadius: 4,
                        borderSkipped: false,
                    },
                    {
                        label: `Failed: ${data.total_failed.toLocaleString()}`,
                        data: data.failed,
                        backgroundColor: c.fBar + 'cc',
                        borderRadius: 4,
                        borderSkipped: false,
                    },
                ],
            },
            options: {
                ...baseChartOptions(c),
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            color: c.ticks,
                            boxWidth: 12,
                            padding: 16,
                            font: { size: 12 },
                        },
                    },
                    tooltip: { mode: 'index', intersect: false },
                },
            },
        });
    }

    /* ── Theme change: re-colour charts ─────── */
    document.addEventListener('click', function (e) {
        const btn = e.target.closest('[data-bs-theme-toggle], .bw-theme-toggle, #theme-toggle');
        if (!btn) return;
        setTimeout(function () {
            const c = chartColors();
            [analyticsChart, deliveryChart].forEach(chart => {
                if (!chart) return;
                chart.options.scales.x.grid.color  = c.grid;
                chart.options.scales.x.ticks.color = c.ticks;
                chart.options.scales.y.grid.color  = c.grid;
                chart.options.scales.y.ticks.color = c.ticks;
                chart.options.plugins.legend.labels.color = c.ticks;
                chart.update();
            });
        }, 50);
    });

    /* ── Fire both independently ────────────── */
    loadMessageAnalytics();
    loadDeliveryMetrics();

})();

/* ── Webhook Delivery Metrics ────────────────────────────── */
(function () {
    const WH_DELIVERY_URL = '{{ route("business.dashboard.webhook-delivery-metrics") }}';
    const CSRF            = '{{ csrf_token() }}';

    function isDark() {
        return document.documentElement.getAttribute('data-bs-theme') === 'dark';
    }

    function chartColors() {
        const dark = isDark();
        return {
            grid:  dark ? 'rgba(255,255,255,.06)' : 'rgba(0,0,0,.06)',
            ticks: dark ? '#94a3b8' : '#64748b',
            dBar:  dark ? '#22c55e' : '#16a34a',
            rBar:  dark ? '#fbbf24' : '#f59e0b',
            fBar:  dark ? '#f87171' : '#ef4444',
        };
    }

    let whDeliveryChart = null;

    function loadWhDeliveryMetrics() {
        fetch(WH_DELIVERY_URL, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF } })
            .then(r => { if (!r.ok) throw new Error(); return r.json(); })
            .then(res => { if (res.success) renderWhDelivery(res.data); else throw new Error(); })
            .catch(() => {
                document.getElementById('wh-delivery-body').innerHTML =
                    '<div class="bw-chart-error"><i class="bi bi-exclamation-circle me-2"></i>Failed to load chart</div>';
                document.getElementById('wh-delivery-rate-badge').innerHTML = '';
            });
    }

    function renderWhDelivery(data) {
        const rateBadge = document.getElementById('wh-delivery-rate-badge');
        rateBadge.innerHTML = data.success_rate === '—'
            ? `<div class="bw-rate-badge" style="color:var(--bw-text-muted);">—</div>
               <div class="bw-rate-label">no data yet</div>`
            : `<div class="bw-rate-badge">${data.success_rate}</div>
               <div class="bw-rate-label">Delivery Rate</div>`;

        const el = document.getElementById('wh-delivery-body');
        el.innerHTML = '<div style="position:relative;height:260px;"><canvas id="wh-delivery-canvas"></canvas></div>';

        const canvas = document.getElementById('wh-delivery-canvas');
        const ctx    = canvas.getContext('2d');
        const c      = chartColors();

        whDeliveryChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: data.labels,
                datasets: [
                    {
                        label: `Delivered: ${data.total_delivered.toLocaleString()}`,
                        data: data.delivered,
                        backgroundColor: c.dBar + 'cc',
                        borderRadius: 4,
                        borderSkipped: false,
                    },
                    {
                        label: `Read: ${data.total_read.toLocaleString()}`,
                        data: data.read,
                        backgroundColor: c.rBar + 'cc',
                        borderRadius: 4,
                        borderSkipped: false,
                    },
                    {
                        label: `Failed: ${data.total_failed.toLocaleString()}`,
                        data: data.failed,
                        backgroundColor: c.fBar + 'cc',
                        borderRadius: 4,
                        borderSkipped: false,
                    },
                ],
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: { color: c.ticks, boxWidth: 12, padding: 16, font: { size: 12 } },
                    },
                    tooltip: { mode: 'index', intersect: false },
                },
                scales: {
                    x: { grid: { color: c.grid }, ticks: { color: c.ticks, font: { size: 11 } } },
                    y: { beginAtZero: true, grid: { color: c.grid }, ticks: { color: c.ticks, font: { size: 11 }, precision: 0 } },
                },
            },
        });
    }

    /* Re-colour on theme toggle */
    document.addEventListener('click', function (e) {
        if (!e.target.closest('[data-bs-theme-toggle], .bw-theme-toggle, #theme-toggle')) return;
        setTimeout(function () {
            if (!whDeliveryChart) return;
            const c = chartColors();
            whDeliveryChart.options.scales.x.grid.color  = c.grid;
            whDeliveryChart.options.scales.x.ticks.color = c.ticks;
            whDeliveryChart.options.scales.y.grid.color  = c.grid;
            whDeliveryChart.options.scales.y.ticks.color = c.ticks;
            whDeliveryChart.options.plugins.legend.labels.color = c.ticks;
            whDeliveryChart.update();
        }, 50);
    });

    loadWhDeliveryMetrics();
})();

/* ── Recent Activity ─────────────────────────────────────── */
(function () {
    const ACTIVITY_URL = '{{ route("business.dashboard.recent-activity") }}';
    const CSRF         = '{{ csrf_token() }}';

    function isDark() {
        return document.documentElement.getAttribute('data-bs-theme') === 'dark';
    }

    /* ── Avatar helpers ─────── */
    const AVATAR_PALETTE = ['#16a34a','#0ea5e9','#f59e0b','#8b5cf6','#ec4899','#14b8a6'];

    function phoneToInitials(phone) {
        const digits = phone.replace(/\D/g, '');
        const tail   = digits.slice(-4);
        return tail.slice(0, 2);
    }

    function phoneToColor(phone) {
        let hash = 0;
        for (let i = 0; i < phone.length; i++) hash = phone.charCodeAt(i) + ((hash << 5) - hash);
        return AVATAR_PALETTE[Math.abs(hash) % AVATAR_PALETTE.length];
    }

    function statusDot(status) {
        const color = status === 'active' ? '#16a34a' : '#94a3b8';
        return `<span style="width:9px;height:9px;border-radius:50%;background:${color};display:inline-block;flex-shrink:0;"></span>`;
    }

    /* ── Conversations ──────── */
    function renderConversations(list) {
        if (!list.length) {
            document.getElementById('conversations-body').innerHTML =
                '<div class="text-center text-muted py-4 small"><i class="bi bi-chat-left me-1"></i>No conversations yet</div>';
            return;
        }

        const rows = list.map((c, i) => {
            const initials = phoneToInitials(c.phone);
            const color    = phoneToColor(c.phone);
            const border   = i < list.length - 1 ? 'border-bottom' : '';
            const arrow    = c.direction === 'inbound'
                ? '<i class="bi bi-arrow-down-left text-success me-1" style="font-size:.7rem;"></i>'
                : '<i class="bi bi-arrow-up-right text-muted me-1" style="font-size:.7rem;"></i>';

            return `
            <div class="d-flex align-items-center gap-3 py-3 ${border}" style="border-color:var(--bw-border)!important;">
                <div class="flex-shrink-0 position-relative">
                    <div style="width:40px;height:40px;border-radius:50%;background:${color};display:flex;align-items:center;justify-content:center;color:#fff;font-size:.75rem;font-weight:700;">
                        ${initials}
                    </div>
                    <span style="position:absolute;bottom:1px;right:1px;">${statusDot(c.status)}</span>
                </div>
                <div class="flex-grow-1 overflow-hidden">
                    <div class="fw-semibold small text-truncate" style="color:var(--bw-text);">${c.phone}</div>
                    <div class="text-truncate" style="font-size:.75rem;color:var(--bw-text-muted);">${arrow}${c.preview}</div>
                </div>
                <div class="flex-shrink-0 text-end" style="font-size:.72rem;color:var(--bw-text-muted);white-space:nowrap;">${c.time}</div>
            </div>`;
        }).join('');

        document.getElementById('conversations-body').innerHTML = rows;
    }

    /* ── Template donut chart ── */
    let templateChart = null;

    function renderTemplates(counts, recent) {
        const c      = isDark();
        const colors = { approved: '#16a34a', pending: '#f59e0b', rejected: '#ef4444' };
        const total  = counts.approved + counts.pending + counts.rejected;

        /* Donut */
        const donutWrap = document.getElementById('template-donut-wrap');
        donutWrap.innerHTML = '<canvas id="template-canvas" style="max-width:160px;max-height:160px;"></canvas>';

        const ctx = document.getElementById('template-canvas').getContext('2d');
        templateChart = new Chart(ctx, {
            type: 'doughnut',
            data: {
                labels: ['Approved', 'Pending', 'Rejected'],
                datasets: [{
                    data: total > 0
                        ? [counts.approved, counts.pending, counts.rejected]
                        : [1, 0, 0],
                    backgroundColor: total > 0
                        ? [colors.approved, colors.pending, colors.rejected]
                        : ['rgba(100,116,139,.2)'],
                    borderWidth: 0,
                    hoverOffset: 4,
                }],
            },
            options: {
                cutout: '68%',
                responsive: true,
                plugins: { legend: { display: false }, tooltip: { enabled: total > 0 } },
            },
        });

        /* Legend */
        document.getElementById('template-legend').innerHTML = `
            <span style="font-size:.75rem;color:var(--bw-text-muted);">
                <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${colors.approved};margin-right:4px;"></span>
                Approved: <strong>${counts.approved}</strong>
            </span>
            <span style="font-size:.75rem;color:var(--bw-text-muted);">
                <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${colors.pending};margin-right:4px;"></span>
                Pending: <strong>${counts.pending}</strong>
            </span>
            <span style="font-size:.75rem;color:var(--bw-text-muted);">
                <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:${colors.rejected};margin-right:4px;"></span>
                Rejected: <strong>${counts.rejected}</strong>
            </span>`;

        /* Recent template list */
        const statusBadge = {
            approved: 'background:#16a34a22;color:#16a34a;',
            pending:  'background:#f59e0b22;color:#d97706;',
            rejected: 'background:#ef444422;color:#ef4444;',
        };

        const rows = recent.map((t, i) => {
            const border  = i < recent.length - 1 ? 'border-bottom' : '';
            const badgeStyle = statusBadge[t.status] ?? 'background:rgba(100,116,139,.15);color:var(--bw-text-muted);';
            return `
            <div class="d-flex align-items-center justify-content-between py-2 ${border}" style="border-color:var(--bw-border)!important;">
                <div class="overflow-hidden me-2">
                    <div class="fw-semibold small text-truncate" style="color:var(--bw-text);">${t.name}</div>
                    <div style="font-size:.72rem;color:var(--bw-text-muted);">${t.category}</div>
                </div>
                <span style="font-size:.7rem;font-weight:600;padding:3px 10px;border-radius:20px;white-space:nowrap;${badgeStyle}">${t.status}</span>
            </div>`;
        }).join('');

        const listEl = document.getElementById('template-list');
        listEl.innerHTML = `
            <p class="bw-chart-title mb-2" style="font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;opacity:.6;">Recent Templates</p>
            ${rows || '<div class="text-center text-muted py-3 small">No templates yet</div>'}`;
    }

    /* ── Fetch ──────────────── */
    fetch(ACTIVITY_URL, { headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': CSRF } })
        .then(r => { if (!r.ok) throw new Error(); return r.json(); })
        .then(res => {
            if (!res.success) throw new Error();
            renderConversations(res.data.conversations);
            renderTemplates(res.data.template_counts, res.data.recent_templates);
        })
        .catch(() => {
            document.getElementById('conversations-body').innerHTML =
                '<div class="bw-chart-error"><i class="bi bi-exclamation-circle me-2"></i>Failed to load</div>';
            document.getElementById('template-donut-wrap').innerHTML = '';
            document.getElementById('template-legend').innerHTML = '';
            document.getElementById('template-list').innerHTML =
                '<div class="bw-chart-error"><i class="bi bi-exclamation-circle me-2"></i>Failed to load</div>';
        });

})();
</script>
@endpush