@php
    $originLabels = [
        'direct' => 'Direto',
        'organic' => 'Organico',
        'social' => 'Social',
        'campaign' => 'Campanha',
        'referral' => 'Referral',
    ];
    $originColors = [
        'direct' => 'bg-slate-500',
        'organic' => 'bg-emerald-500',
        'social' => 'bg-sky-500',
        'campaign' => 'bg-amber-500',
        'referral' => 'bg-violet-500',
    ];
    $originHex = [
        'direct' => '#607168',
        'organic' => '#2eaa74',
        'social' => '#299bc2',
        'campaign' => '#d99a28',
        'referral' => '#8b67c7',
    ];
    $dailyMax = max(1, $daily->map(fn ($day) => $day['direct'] + $day['organic'] + $day['social'] + $day['campaign'] + $day['referral'])->max() ?? 0);
    $labelEvery = max(1, (int) ceil(max(1, $daily->count()) / 14));
    $peakDay = $daily->sortByDesc(fn ($day) => $day['direct'] + $day['organic'] + $day['social'] + $day['campaign'] + $day['referral'])->first();
    $peakTotal = $peakDay ? ($peakDay['direct'] + $peakDay['organic'] + $peakDay['social'] + $peakDay['campaign'] + $peakDay['referral']) : 0;
    $mapCoverage = $pageviews > 0 ? round(($mapTrackedPageviews / $pageviews) * 100, 1) : 0;
    $topMapPoints = $mapPoints->take(6);
    $chartWidth = max(760, $daily->count() * 34);
    $chartTicks = collect([1, .75, .5, .25, 0])
        ->map(fn (float|int $ratio): int => (int) round($dailyMax * $ratio));
    $mapInitialViewBox = collect(['x', 'y', 'w', 'h'])
        ->map(fn (string $key): string => number_format((float) $mapInitialView[$key], 2, '.', ''))
        ->implode(' ');
@endphp

@include('filament.pages.partials.analytics-dashboard-styles')

@once
    <style>
        .vm-traffic-map {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
            background:
                radial-gradient(circle at 23% 22%, rgba(34, 211, 238, 0.14), transparent 18rem),
                radial-gradient(circle at 75% 16%, rgba(20, 184, 166, 0.11), transparent 18rem),
                linear-gradient(180deg, #07111a 0%, #0c1722 54%, #071018 100%);
            border: 1px solid rgba(148, 163, 184, 0.18);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 36px rgba(2, 6, 23, 0.18);
        }

        .vm-traffic-map::before {
            position: absolute;
            inset: 0;
            content: "";
            background-image:
                linear-gradient(rgba(148, 163, 184, 0.055) 1px, transparent 1px),
                linear-gradient(90deg, rgba(148, 163, 184, 0.055) 1px, transparent 1px);
            background-size: 50px 50px;
            mask-image: radial-gradient(circle at center, black 26%, transparent 82%);
        }

        .vm-map-countries path {
            fill: rgba(55, 71, 84, 0.74);
            stroke: rgba(203, 213, 225, 0.22);
            stroke-width: 0.58;
            vector-effect: non-scaling-stroke;
            transition: fill 160ms ease, stroke 160ms ease;
        }

        .vm-map-countries path:hover {
            fill: rgba(71, 91, 105, 0.88);
            stroke: rgba(226, 232, 240, 0.36);
        }

        .vm-map-line {
            stroke: rgba(148, 163, 184, 0.085);
            stroke-width: 1;
            vector-effect: non-scaling-stroke;
        }

        .vm-map-marker {
            animation: vmMarkerFloat 4.8s ease-in-out infinite;
            animation-delay: var(--delay);
        }

        .vm-map-ring {
            fill: none;
            stroke: rgba(45, 212, 191, 0.38);
            stroke-width: 1.8;
            animation: vmMapPulse 2.8s ease-out infinite;
            animation-delay: var(--delay);
            transform-box: fill-box;
            transform-origin: center;
            vector-effect: non-scaling-stroke;
        }

        .vm-map-dot-halo {
            fill: rgba(20, 184, 166, 0.18);
            filter: blur(2px);
        }

        .vm-map-dot {
            fill: #2dd4bf;
            stroke: rgba(240, 253, 250, 0.95);
            stroke-width: 1.3;
            filter: drop-shadow(0 0 7px rgba(45, 212, 191, 0.78));
            vector-effect: non-scaling-stroke;
        }

        .vm-map-stat {
            border: 1px solid rgba(203, 213, 225, 0.22);
            background: rgba(2, 6, 23, 0.86);
            backdrop-filter: blur(10px);
            box-shadow: 0 12px 28px rgba(2, 6, 23, 0.22);
            color: #e5f0f6 !important;
        }

        .vm-map-stat,
        .vm-map-stat * {
            color: #e5f0f6 !important;
        }

        .vm-map-stat-strong {
            color: #ffffff !important;
        }

        .vm-map-stat-accent {
            color: #99f6e4 !important;
        }

        .vm-map-control {
            display: inline-flex;
            height: 2.25rem;
            width: 2.25rem;
            align-items: center;
            justify-content: center;
            border-left: 1px solid rgba(148, 163, 184, 0.18);
            color: #e2e8f0;
            transition: background 160ms ease, color 160ms ease, opacity 160ms ease;
        }

        .vm-map-control:first-child {
            border-left: 0;
        }

        .vm-map-control:hover:not(:disabled) {
            background: rgba(45, 212, 191, 0.12);
            color: #ccfbf1 !important;
        }

        .vm-map-control:disabled {
            cursor: not-allowed;
            opacity: 0.42;
        }

        .vm-map-zoom-label {
            display: inline-flex;
            min-width: 3.2rem;
            align-items: center;
            justify-content: center;
            border-right: 1px solid rgba(148, 163, 184, 0.18);
            color: #99f6e4 !important;
            font-size: 0.7rem;
            font-variant-numeric: tabular-nums;
            font-weight: 750;
            letter-spacing: 0.025em;
        }

        .vm-map-stage {
            position: relative;
            width: 100%;
            min-height: 18rem;
            aspect-ratio: 2 / 1;
        }

        .vm-map-hint {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            color: #738078;
            font-size: 0.7rem;
            line-height: 1.35;
        }

        .vm-map-hint svg {
            width: 0.95rem;
            height: 0.95rem;
            flex: none;
        }

        .vm-map-summary-grid {
            display: grid;
            grid-template-columns: minmax(15rem, 0.62fr) minmax(0, 1.38fr);
            gap: 0.85rem;
            margin-top: 0.9rem;
        }

        .vm-map-kpis {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.55rem;
        }

        .vm-map-kpi {
            border: 1px solid #e0e7e2;
            border-radius: 0.75rem;
            background: #f7faf8;
            padding: 0.78rem;
        }

        .vm-map-kpi-label {
            color: #7a877f;
            font-size: 0.6rem;
            font-weight: 800;
            letter-spacing: 0.075em;
            text-transform: uppercase;
        }

        .vm-map-kpi-value {
            margin-top: 0.3rem;
            color: #1d2c23;
            font-family: "Avenir Next", "Trebuchet MS", sans-serif;
            font-size: 1.25rem;
            font-variant-numeric: tabular-nums;
            font-weight: 700;
            letter-spacing: -0.035em;
        }

        .vm-map-top-locations {
            border: 1px solid #e0e7e2;
            border-radius: 0.75rem;
            background: #ffffff;
            padding: 0.78rem;
        }

        .vm-map-top-title {
            margin-bottom: 0.6rem;
            color: #7a877f;
            font-size: 0.6rem;
            font-weight: 800;
            letter-spacing: 0.075em;
            text-transform: uppercase;
        }

        .vm-map-location-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 0.45rem;
        }

        .vm-map-location {
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            align-items: center;
            gap: 0.55rem;
            border-radius: 0.55rem;
            background: #f5f8f6;
            padding: 0.55rem 0.62rem;
        }

        .vm-map-location-name {
            overflow: hidden;
            color: #304138;
            font-size: 0.7rem;
            font-weight: 700;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .vm-map-location-meta {
            margin-top: 0.12rem;
            color: #849088;
            font-size: 0.62rem;
        }

        .vm-map-location-value {
            border-radius: 999px;
            background: #e5f5ec;
            color: #16724d;
            font-size: 0.64rem;
            font-weight: 800;
            padding: 0.32rem 0.48rem;
        }

        .dark .vm-map-kpi,
        .dark .vm-map-top-locations {
            border-color: #303b34;
            background: #171e19;
        }

        .dark .vm-map-kpi-value,
        .dark .vm-map-location-name {
            color: #eef4f0;
        }

        .dark .vm-map-location {
            background: #202923;
        }

        .dark .vm-map-location-value {
            background: #173b2a;
            color: #7be0af;
        }

        .vm-map-canvas {
            touch-action: none;
            user-select: none;
        }

        .vm-map-canvas.is-pannable {
            cursor: grab;
        }

        .vm-map-canvas.is-panning {
            cursor: grabbing;
        }

        .vm-map-tooltip {
            position: absolute;
            z-index: 30;
            min-width: 9rem;
            max-width: 16rem;
            pointer-events: none;
            border: 1px solid rgba(153, 246, 228, 0.28);
            border-radius: 0.5rem;
            background: rgba(2, 6, 23, 0.92);
            box-shadow: 0 18px 36px rgba(2, 6, 23, 0.3), 0 0 22px rgba(45, 212, 191, 0.16);
            color: #f8fafc !important;
            opacity: 0;
            padding: 0.55rem 0.7rem;
            transform: translate(-50%, calc(-100% - 14px)) scale(0.96);
            transition: opacity 120ms ease, transform 120ms ease;
        }

        .vm-map-tooltip.is-visible {
            opacity: 1;
            transform: translate(-50%, calc(-100% - 14px)) scale(1);
        }

        .vm-map-tooltip::after {
            position: absolute;
            bottom: -5px;
            left: 50%;
            height: 9px;
            width: 9px;
            content: "";
            background: rgba(2, 6, 23, 0.92);
            border-bottom: 1px solid rgba(153, 246, 228, 0.28);
            border-right: 1px solid rgba(153, 246, 228, 0.28);
            transform: translateX(-50%) rotate(45deg);
        }

        .vm-map-tooltip-location {
            overflow: hidden;
            color: #ffffff !important;
            font-size: 0.8125rem;
            font-weight: 700;
            line-height: 1.15;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .vm-map-tooltip-meta {
            margin-top: 0.2rem;
            color: #99f6e4 !important;
            font-size: 0.7rem;
            font-weight: 600;
        }

        @keyframes vmMapPulse {
            0% { opacity: 0.7; transform: scale(0.68); }
            70% { opacity: 0; transform: scale(1.3); }
            100% { opacity: 0; transform: scale(1.3); }
        }

        @keyframes vmMarkerFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-2px); }
        }

        @media (max-width: 980px) {
            .vm-map-summary-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        @media (max-width: 700px) {
            .vm-map-location-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }

        @media (max-width: 520px) {
            .vm-map-stage {
                min-height: 15rem;
            }

            .vm-map-kpis,
            .vm-map-location-grid {
                grid-template-columns: minmax(0, 1fr);
            }
        }
    </style>

    <script>
        (() => {
            const bounds = { x: 0, y: 0, w: 1000, h: 500 };
            const minWidth = 72;

            const parseInitialView = (root) => {
                try {
                    return normalizeView(JSON.parse(root.dataset.initialView || '{}'));
                } catch (error) {
                    return { x: 0, y: 0, w: 1000, h: 500 };
                }
            };

            const normalizeView = (view) => {
                const normalized = {
                    x: Number(view.x),
                    y: Number(view.y),
                    w: Number(view.w),
                    h: Number(view.h),
                };

                if (Object.values(normalized).some((value) => ! Number.isFinite(value))) {
                    return { x: 0, y: 0, w: 1000, h: 500 };
                }

                return clampView(normalized);
            };

            const clampView = (view) => {
                view.w = Math.min(bounds.w, Math.max(minWidth, view.w));
                view.h = view.w / 2;
                view.x = Math.min(bounds.w - view.w, Math.max(bounds.x, view.x));
                view.y = Math.min(bounds.h - view.h, Math.max(bounds.y, view.y));

                return view;
            };

            const formatViewBox = (view) => [view.x, view.y, view.w, view.h]
                .map((value) => Number(value).toFixed(2))
                .join(' ');

            const sameView = (left, right) => ['x', 'y', 'w', 'h']
                .every((key) => Math.abs(left[key] - right[key]) < 0.5);

            const pointerToMap = (svg, view, event) => {
                const rect = svg.getBoundingClientRect();

                return {
                    x: view.x + (((event.clientX - rect.left) / rect.width) * view.w),
                    y: view.y + (((event.clientY - rect.top) / rect.height) * view.h),
                };
            };

            const initializeTrafficMap = (root) => {
                if (root.dataset.mapReady === '1') {
                    return;
                }

                const svg = root.querySelector('[data-traffic-map-svg]');
                if (! svg) {
                    return;
                }

                root.dataset.mapReady = '1';

                const initialView = parseInitialView(root);
                let view = { ...initialView };
                let dragging = false;
                let lastPointer = null;

                const buttons = {
                    zoomIn: root.querySelector('[data-traffic-map-action="zoom-in"]'),
                    zoomOut: root.querySelector('[data-traffic-map-action="zoom-out"]'),
                    reset: root.querySelector('[data-traffic-map-action="reset"]'),
                };
                const markerShapes = Array.from(svg.querySelectorAll('[data-marker-radius]'))
                    .map((shape) => ({
                        shape,
                        radius: Number(shape.dataset.markerRadius),
                    }))
                    .filter((marker) => Number.isFinite(marker.radius));
                const tooltip = root.querySelector('[data-traffic-map-tooltip]');
                const tooltipLocation = tooltip?.querySelector('[data-tooltip-location]');
                const tooltipMeta = tooltip?.querySelector('[data-tooltip-meta]');
                const zoomLabel = root.querySelector('[data-traffic-map-zoom]');
                let activeMarker = null;

                const updateMarkerSizes = () => {
                    const markerScale = view.w / initialView.w;

                    markerShapes.forEach((marker) => {
                        marker.shape.setAttribute('r', (marker.radius * markerScale).toFixed(2));
                    });
                };

                const positionTooltip = (event) => {
                    if (! tooltip) {
                        return;
                    }

                    const rect = (tooltip.offsetParent || root).getBoundingClientRect();
                    tooltip.style.left = `${event.clientX - rect.left}px`;
                    tooltip.style.top = `${event.clientY - rect.top}px`;
                };

                const showTooltip = (marker, event) => {
                    if (! tooltip || ! tooltipLocation || ! tooltipMeta) {
                        return;
                    }

                    activeMarker = marker;
                    tooltipLocation.textContent = marker.dataset.location || 'Localizacao';
                    tooltipMeta.textContent = `${marker.dataset.visits || '0'} visitas`;
                    positionTooltip(event);
                    tooltip.classList.add('is-visible');
                    tooltip.setAttribute('aria-hidden', 'false');
                };

                const hideTooltip = () => {
                    if (! tooltip) {
                        return;
                    }

                    activeMarker = null;
                    tooltip.classList.remove('is-visible');
                    tooltip.setAttribute('aria-hidden', 'true');
                };

                const render = () => {
                    svg.setAttribute('viewBox', formatViewBox(view));
                    svg.classList.toggle('is-pannable', view.w < bounds.w);
                    svg.classList.toggle('is-panning', dragging);
                    updateMarkerSizes();

                    if (buttons.zoomIn) {
                        buttons.zoomIn.disabled = view.w <= minWidth + 0.5;
                    }

                    if (buttons.zoomOut) {
                        buttons.zoomOut.disabled = view.w >= bounds.w - 0.5;
                    }

                    if (buttons.reset) {
                        buttons.reset.disabled = sameView(view, initialView);
                    }

                    if (zoomLabel) {
                        zoomLabel.textContent = `${(bounds.w / view.w).toFixed(1)}×`;
                    }
                };

                const zoom = (factor, anchor = null) => {
                    const targetWidth = Math.min(bounds.w, Math.max(minWidth, view.w * factor));
                    const targetHeight = targetWidth / 2;
                    const focus = anchor ?? {
                        x: view.x + (view.w / 2),
                        y: view.y + (view.h / 2),
                    };
                    const relativeX = (focus.x - view.x) / view.w;
                    const relativeY = (focus.y - view.y) / view.h;

                    view = clampView({
                        x: focus.x - (targetWidth * relativeX),
                        y: focus.y - (targetHeight * relativeY),
                        w: targetWidth,
                        h: targetHeight,
                    });

                    render();
                };

                buttons.zoomIn?.addEventListener('click', () => zoom(0.64));
                buttons.zoomOut?.addEventListener('click', () => zoom(1.28));
                buttons.reset?.addEventListener('click', () => {
                    dragging = false;
                    lastPointer = null;
                    view = { ...initialView };
                    render();
                });

                svg.addEventListener('wheel', (event) => {
                    event.preventDefault();
                    zoom(event.deltaY < 0 ? 0.78 : 1.22, pointerToMap(svg, view, event));
                }, { passive: false });

                svg.addEventListener('dblclick', (event) => {
                    event.preventDefault();
                    zoom(0.56, pointerToMap(svg, view, event));
                });

                svg.addEventListener('pointerdown', (event) => {
                    if (view.w >= bounds.w || (event.button !== undefined && event.button !== 0)) {
                        return;
                    }

                    hideTooltip();
                    dragging = true;
                    lastPointer = { x: event.clientX, y: event.clientY };
                    svg.setPointerCapture?.(event.pointerId);
                    render();
                });

                svg.addEventListener('pointermove', (event) => {
                    if (! dragging || ! lastPointer) {
                        return;
                    }

                    const rect = svg.getBoundingClientRect();
                    const dx = (event.clientX - lastPointer.x) * (view.w / rect.width);
                    const dy = (event.clientY - lastPointer.y) * (view.h / rect.height);

                    view = clampView({
                        x: view.x - dx,
                        y: view.y - dy,
                        w: view.w,
                        h: view.h,
                    });
                    lastPointer = { x: event.clientX, y: event.clientY };
                    render();
                });

                const endPan = (event) => {
                    if (! dragging) {
                        return;
                    }

                    dragging = false;
                    lastPointer = null;
                    svg.releasePointerCapture?.(event.pointerId);
                    render();
                };

                svg.addEventListener('pointerup', endPan);
                svg.addEventListener('pointercancel', endPan);
                svg.addEventListener('pointerleave', endPan);

                svg.addEventListener('pointerover', (event) => {
                    const marker = event.target.closest?.('[data-traffic-map-marker]');
                    if (! marker || dragging || marker === activeMarker) {
                        return;
                    }

                    showTooltip(marker, event);
                });

                svg.addEventListener('pointermove', (event) => {
                    if (activeMarker && ! dragging) {
                        positionTooltip(event);
                    }
                });

                svg.addEventListener('pointerout', (event) => {
                    const marker = event.target.closest?.('[data-traffic-map-marker]');
                    if (! marker || marker.contains(event.relatedTarget)) {
                        return;
                    }

                    hideTooltip();
                });

                render();
            };

            const initializeAllTrafficMaps = () => {
                document.querySelectorAll('[data-traffic-map]').forEach(initializeTrafficMap);
            };

            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initializeAllTrafficMaps);
            } else {
                initializeAllTrafficMaps();
            }

            document.addEventListener('livewire:navigated', initializeAllTrafficMaps);
            document.addEventListener('livewire:load', initializeAllTrafficMaps);
        })();
    </script>
@endonce

<x-filament-panels::page>
    <div class="vm-analytics-dashboard">
        <section class="vm-analytics-hero" aria-label="Resumo do trafego do site">
            <div class="vm-analytics-toolbar">
                <div class="vm-analytics-copy">
                    <div class="vm-analytics-eyebrow">Inteligencia de trafego</div>
                    <p class="vm-analytics-description">
                        Entenda de onde os visitantes chegam, quais paginas acessam e como o trafego se distribui por localizacao e dispositivo.
                    </p>
                </div>

                <nav class="vm-period-filter" aria-label="Periodo do trafego">
                    @foreach ($periodOptions as $value => $label)
                        <a
                            href="{{ request()->fullUrlWithQuery(['dias' => $value]) }}"
                            @class(['vm-period-link', 'is-active' => $days === $value])
                            @if ($days === $value) aria-current="page" @endif
                        >
                            {{ $label }}
                        </a>
                    @endforeach
                </nav>
            </div>

            <div class="vm-metrics-grid">
                <article class="vm-metric-card" data-tone="forest">
                    <div class="vm-metric-topline">
                        <div class="vm-metric-label">Pageviews</div>
                        <span class="vm-metric-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
                                <path d="M4 18.5V13m5.3 5.5V8.8m5.4 9.7V5.5m5.3 13V10" stroke-linecap="round" />
                            </svg>
                        </span>
                    </div>
                    <div class="vm-metric-value">{{ number_format($pageviews) }}</div>
                    <div class="vm-metric-note">Paginas visualizadas no periodo selecionado</div>
                </article>

                <article class="vm-metric-card" data-tone="lime">
                    <div class="vm-metric-topline">
                        <div class="vm-metric-label">Unicas por dia</div>
                        <span class="vm-metric-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
                                <path d="m5 12 4 4L19 6" stroke-linecap="round" stroke-linejoin="round" />
                                <circle cx="12" cy="12" r="9" />
                            </svg>
                        </span>
                    </div>
                    <div class="vm-metric-value">{{ number_format($uniques) }}</div>
                    <div class="vm-metric-note">Primeiro acesso reconhecido de cada dia</div>
                </article>

                <article class="vm-metric-card" data-tone="gold">
                    <div class="vm-metric-topline">
                        <div class="vm-metric-label">Visitantes</div>
                        <span class="vm-metric-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
                                <path d="M16 19.5v-1.4a4.1 4.1 0 0 0-4.1-4.1H7.1A4.1 4.1 0 0 0 3 18.1v1.4" stroke-linecap="round" />
                                <circle cx="9.5" cy="7.5" r="3.5" />
                                <path d="M17 9.5a3 3 0 0 1 0 6" stroke-linecap="round" />
                            </svg>
                        </span>
                    </div>
                    <div class="vm-metric-value">{{ number_format($visitors) }}</div>
                    <div class="vm-metric-note">Pessoas distintas reconhecidas pelo navegador</div>
                </article>

                <article class="vm-metric-card" data-tone="slate">
                    <div class="vm-metric-topline">
                        <div class="vm-metric-label">Taxa unica</div>
                        <span class="vm-metric-icon" aria-hidden="true">
                            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9">
                                <circle cx="8" cy="8" r="2.5" />
                                <circle cx="16" cy="16" r="2.5" />
                                <path d="m18.5 5.5-13 13" stroke-linecap="round" />
                            </svg>
                        </span>
                    </div>
                    <div class="vm-metric-value">{{ $uniqueRate }}%</div>
                    <div class="vm-metric-note">Participacao de visitas unicas no volume total</div>
                </article>
            </div>
        </section>

        <section class="vm-panel" aria-labelledby="traffic-map-title">
            <header class="vm-panel-header">
                <div>
                    <h2 class="vm-panel-title" id="traffic-map-title">Mapa de visitas</h2>
                    <p class="vm-panel-subtitle">Distribuicao geografica do trafego com marcadores proporcionais ao volume de acessos.</p>
                </div>
                <span class="vm-map-hint">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true">
                        <path d="M12 4v16m-4-4 4 4 4-4M8 8l4-4 4 4" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    Scroll para zoom · arraste para mover · duplo clique aproxima
                </span>
            </header>

            <div class="vm-panel-body">
                <div class="vm-traffic-map" data-traffic-map data-initial-view='@json($mapInitialView)'>
                <div class="absolute left-4 right-4 top-4 z-20 flex flex-wrap items-start justify-between gap-3">
                    <div class="flex flex-wrap gap-2">
                        <div class="vm-map-stat rounded-lg px-3 py-2 text-xs font-medium">
                            <span class="vm-map-stat-strong font-semibold">{{ number_format($mapTrackedPageviews) }}</span>
                            pageviews com localizacao
                        </div>
                        <div class="vm-map-stat rounded-lg px-3 py-2 text-xs font-medium">
                            <span class="vm-map-stat-accent font-semibold">{{ $mapCoverage }}%</span>
                            de cobertura
                        </div>
                    </div>

                    <div class="vm-map-stat flex overflow-hidden rounded-lg" role="group" aria-label="Controles de zoom do mapa">
                        <span class="vm-map-zoom-label" data-traffic-map-zoom aria-label="Nivel de zoom">1.0×</span>
                        <button type="button" class="vm-map-control text-base font-semibold" data-traffic-map-action="zoom-in" aria-label="Aproximar mapa" title="Aproximar">+</button>
                        <button type="button" class="vm-map-control text-base font-semibold" data-traffic-map-action="zoom-out" aria-label="Afastar mapa" title="Afastar">-</button>
                        <button type="button" class="vm-map-control" data-traffic-map-action="reset" aria-label="Resetar mapa para o foco das visitas" title="Resetar">
                            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="none" aria-hidden="true">
                                <path d="M4.5 7.5A6 6 0 1 1 5.8 14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
                                <path d="M4.5 3.8v3.7H8" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" />
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="relative z-10 px-3 pb-4 pt-12 sm:px-5 sm:pt-14">
                    <div class="vm-map-stage">
                        <svg
                            class="vm-map-canvas h-full w-full"
                            viewBox="{{ $mapInitialViewBox }}"
                            data-traffic-map-svg
                            role="img"
                            aria-label="Mapa mundial com origem das visitas"
                        >
                            <g opacity="0.8">
                                @foreach ([86, 155, 224, 293, 362, 431] as $lineY)
                                    <line class="vm-map-line" x1="18" y1="{{ $lineY }}" x2="982" y2="{{ $lineY }}" />
                                @endforeach
                                @foreach ([100, 200, 300, 400, 500, 600, 700, 800, 900] as $lineX)
                                    <line class="vm-map-line" x1="{{ $lineX }}" y1="24" x2="{{ $lineX }}" y2="476" />
                                @endforeach
                            </g>

                            <g class="vm-map-countries">
                                @include('filament.pages.partials.world-map-paths')
                            </g>

                            <g>
                                @foreach ($mapPoints as $point)
                                    @php
                                        $ringRadius = round($point['radius'] * 2.1, 2);
                                        $haloRadius = round($point['radius'] * 1.08, 2);
                                        $dotRadius = round(max(3.25, min(9.5, $point['radius'] * 0.52)), 2);
                                    @endphp
                                    <g
                                        class="vm-map-marker"
                                        style="--delay: {{ $loop->index * 85 }}ms"
                                        data-traffic-map-marker
                                        data-location="{{ $point['location'] }}"
                                        data-visits="{{ number_format($point['visits']) }}"
                                    >
                                        <title>{{ $point['location'] }} - {{ number_format($point['visits']) }} visitas</title>
                                        <circle class="vm-map-ring" cx="{{ $point['x'] }}" cy="{{ $point['y'] }}" r="{{ $ringRadius }}" data-marker-radius="{{ $ringRadius }}" />
                                        <circle class="vm-map-dot-halo" cx="{{ $point['x'] }}" cy="{{ $point['y'] }}" r="{{ $haloRadius }}" data-marker-radius="{{ $haloRadius }}" />
                                        <circle class="vm-map-dot" cx="{{ $point['x'] }}" cy="{{ $point['y'] }}" r="{{ $dotRadius }}" data-marker-radius="{{ $dotRadius }}" />
                                    </g>
                                @endforeach
                            </g>
                        </svg>
                        <div class="vm-map-tooltip" data-traffic-map-tooltip aria-hidden="true">
                            <div class="vm-map-tooltip-location" data-tooltip-location></div>
                            <div class="vm-map-tooltip-meta" data-tooltip-meta></div>
                        </div>
                    </div>

                    @if ($mapPoints->isEmpty())
                        <div class="absolute inset-0 z-20 flex items-center justify-center px-6 text-center">
                            <div class="max-w-sm rounded-lg border border-white/10 bg-slate-950/75 px-4 py-3 text-sm text-slate-200 shadow-2xl backdrop-blur">
                                Sem coordenadas ainda. As novas visitas ja serao mapeadas, e o deploy tenta preencher acessos antigos por IP.
                            </div>
                        </div>
                    @endif
                </div>
                </div>

                <div class="vm-map-summary-grid">
                    <div class="vm-map-kpis">
                        <div class="vm-map-kpi">
                            <div class="vm-map-kpi-label">Pontos</div>
                            <div class="vm-map-kpi-value">{{ number_format($mapPoints->count()) }}</div>
                        </div>
                        <div class="vm-map-kpi">
                            <div class="vm-map-kpi-label">Pageviews</div>
                            <div class="vm-map-kpi-value">{{ number_format($mapTrackedPageviews) }}</div>
                        </div>
                        <div class="vm-map-kpi">
                            <div class="vm-map-kpi-label">Cobertura</div>
                            <div class="vm-map-kpi-value" style="color: #16845b;">{{ $mapCoverage }}%</div>
                        </div>
                    </div>

                    <div class="vm-map-top-locations">
                        <div class="vm-map-top-title">Locais com mais trafego</div>
                        <div class="vm-map-location-grid">
                        @forelse ($topMapPoints as $point)
                            <div class="vm-map-location">
                                <div class="min-w-0">
                                    <div class="vm-map-location-name" title="{{ $point['location'] }}">{{ $point['location'] }}</div>
                                    <div class="vm-map-location-meta">{{ number_format($point['visitors']) }} visitantes</div>
                                </div>
                                <div class="vm-map-location-value">{{ number_format($point['visits']) }}</div>
                            </div>
                        @empty
                            <div class="vm-panel-subtitle">Sem locais com coordenadas no periodo.</div>
                        @endforelse
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="vm-panel" aria-labelledby="traffic-daily-title">
            <header class="vm-panel-header">
                <div>
                    <h2 class="vm-panel-title" id="traffic-daily-title">Evolucao diaria por origem</h2>
                    <p class="vm-panel-subtitle">Composicao do trafego a cada dia, separada pelo canal de aquisicao.</p>
                </div>
                @if ($peakDay && $peakTotal > 0)
                    <div class="vm-chart-summary">
                        <span>Pico do periodo</span>
                        <strong>{{ number_format($peakTotal) }} em {{ $peakDay['label'] }}</strong>
                    </div>
                @else
                    <span class="vm-panel-badge">Sem atividade no periodo</span>
                @endif
            </header>

            <div class="vm-panel-body">
                <div class="vm-chart-legend" aria-label="Legenda das origens">
                    @foreach ($originLabels as $origin => $label)
                        <span class="vm-chart-legend-item">
                            <span class="vm-chart-legend-dot" style="--legend-color: {{ $originHex[$origin] }};"></span>
                            {{ $label }}
                        </span>
                    @endforeach
                </div>

                <div class="vm-chart-scroll">
                    <div class="vm-chart-frame" style="width: {{ $chartWidth }}px;">
                        <div class="vm-chart-layout">
                            <div class="vm-chart-axis" aria-hidden="true">
                                @foreach ($chartTicks as $tick)
                                    <span>{{ number_format($tick) }}</span>
                                @endforeach
                            </div>

                            <div class="vm-chart-plot">
                                <div class="vm-chart-grid" aria-hidden="true">
                                    @foreach ($chartTicks as $tick)
                                        <span class="vm-chart-grid-line"></span>
                                    @endforeach
                                </div>

                                <div class="vm-chart-columns" style="--chart-points: {{ max(1, $daily->count()) }};">
                                    @forelse ($daily as $day)
                                        @php
                                            $total = $day['direct'] + $day['organic'] + $day['social'] + $day['campaign'] + $day['referral'];
                                            $height = $total > 0 ? max(3, round($total / $dailyMax * 100, 2)) : 0;
                                        @endphp
                                        <div class="vm-chart-column" tabindex="0" aria-label="{{ $day['label'] }}: {{ $total }} visitas">
                                            <div class="vm-chart-tooltip">
                                                <strong>{{ $day['label'] }} · {{ number_format($total) }} visitas</strong>
                                                @foreach ($originLabels as $origin => $label)
                                                    {{ $label }}: {{ number_format($day[$origin]) }}@if (! $loop->last) · @endif
                                                @endforeach
                                            </div>
                                            <div
                                                class="vm-chart-stacked"
                                                style="--bar-min-height: {{ $total > 0 ? '6px' : '0' }}; height: {{ $height }}%;"
                                                aria-hidden="true"
                                            >
                                                @foreach (['referral', 'campaign', 'social', 'organic', 'direct'] as $origin)
                                                    @if ($day[$origin] > 0)
                                                        <div
                                                            class="vm-chart-segment"
                                                            style="height: {{ round($day[$origin] / max(1, $total) * 100, 3) }}%; background: {{ $originHex[$origin] }};"
                                                        ></div>
                                                    @endif
                                                @endforeach
                                            </div>
                                        </div>
                                    @empty
                                        <div class="vm-empty-state" style="grid-column: 1 / -1;">Sem visitas no periodo.</div>
                                    @endforelse
                                </div>
                            </div>
                        </div>

                        @if ($daily->isNotEmpty())
                            <div class="vm-chart-labels" style="--chart-points: {{ $daily->count() }};" aria-hidden="true">
                                @foreach ($daily as $day)
                                    <span @class(['vm-chart-label', 'is-hidden' => $loop->index % $labelEvery !== 0 && ! $loop->last])>
                                        {{ $day['label'] }}
                                    </span>
                                @endforeach
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>

        <div class="vm-insight-grid">
            <section class="vm-panel" aria-labelledby="origin-breakdown-title">
                <header class="vm-panel-header">
                    <div>
                        <h2 class="vm-panel-title" id="origin-breakdown-title">Por origem</h2>
                        <p class="vm-panel-subtitle">Participacao de cada canal no volume total.</p>
                    </div>
                </header>
                <div class="vm-panel-body">
                    <div class="vm-breakdown-list">
                        @forelse ($origins as $origin)
                            @php
                                $pct = $pageviews > 0 ? round(((int) $origin->visits / $pageviews) * 100, 1) : 0;
                                $originColor = $originHex[$origin->label] ?? '#819087';
                            @endphp
                            <div class="vm-breakdown-row">
                                <div class="vm-breakdown-line">
                                    <span class="inline-flex items-center gap-2">
                                        <span class="h-2 w-2 rounded-full" style="background: {{ $originColor }};"></span>
                                        {{ $originLabels[$origin->label] ?? ucfirst($origin->label) }}
                                    </span>
                                    <span class="vm-breakdown-value"><strong>{{ number_format((int) $origin->visits) }}</strong> · {{ $pct }}%</span>
                                </div>
                                <div class="vm-progress-track">
                                    <div class="vm-progress-bar" style="--progress-color: {{ $originColor }}; width: {{ max(2, $pct) }}%;"></div>
                                </div>
                            </div>
                        @empty
                            <div class="vm-panel-subtitle">Sem dados.</div>
                        @endforelse
                    </div>
                </div>
            </section>

            <section class="vm-panel" aria-labelledby="top-pages-title">
                <header class="vm-panel-header">
                    <div>
                        <h2 class="vm-panel-title" id="top-pages-title">Top paginas</h2>
                        <p class="vm-panel-subtitle">Conteudos que mais concentraram visualizacoes.</p>
                    </div>
                </header>
                <div class="vm-panel-body">
                    @php $maxPages = max(1, (int) ($pages->max('visits') ?? 0)); @endphp
                    <div class="vm-breakdown-list">
                        @forelse ($pages as $page)
                            @php $width = max(2, round(((int) $page->visits / $maxPages) * 100)); @endphp
                            <div class="vm-breakdown-row">
                                <div class="vm-breakdown-line">
                                    <span title="{{ $page->label }}">{{ $page->label }}</span>
                                    <span class="vm-breakdown-value">{{ number_format((int) $page->visits) }}</span>
                                </div>
                                <div class="vm-progress-track">
                                    <div class="vm-progress-bar" style="width: {{ $width }}%;"></div>
                                </div>
                            </div>
                        @empty
                            <div class="vm-panel-subtitle">Sem dados.</div>
                        @endforelse
                    </div>
                </div>
            </section>
        </div>

        <div class="vm-breakdown-grid">
            @foreach ([['Dispositivo', $devices], ['Sistema', $oses], ['Browser', $browsers]] as [$title, $items])
                @php $maxItems = max(1, (int) ($items->max('visits') ?? 0)); @endphp
                <section class="vm-panel">
                    <header class="vm-panel-header">
                        <h2 class="vm-panel-title">{{ $title }}</h2>
                    </header>
                    <div class="vm-panel-body">
                        <div class="vm-breakdown-list">
                            @forelse ($items as $item)
                                @php $width = max(2, round(((int) $item->visits / $maxItems) * 100)); @endphp
                                <div class="vm-breakdown-row">
                                    <div class="vm-breakdown-line">
                                        <span>{{ $item->label }}</span>
                                        <span class="vm-breakdown-value">{{ number_format((int) $item->visits) }}</span>
                                    </div>
                                    <div class="vm-progress-track">
                                        <div class="vm-progress-bar" style="--progress-color: #66776d; width: {{ $width }}%;"></div>
                                    </div>
                                </div>
                            @empty
                                <div class="vm-panel-subtitle">Sem dados.</div>
                            @endforelse
                        </div>
                    </div>
                </section>
            @endforeach

            <section class="vm-panel">
                <header class="vm-panel-header">
                    <h2 class="vm-panel-title">Top cidades</h2>
                </header>
                <div class="vm-panel-body">
                    <div class="vm-breakdown-list">
                        @forelse ($cities as $city)
                            <div class="vm-breakdown-line">
                                <span title="{{ $city->label }}, {{ $city->region }}">
                                    {{ $city->label }}
                                    <small class="vm-table-muted">{{ $city->region }}</small>
                                </span>
                                <span class="vm-breakdown-value">{{ number_format((int) $city->visits) }}</span>
                            </div>
                        @empty
                            <div class="vm-panel-subtitle">Sem dados.</div>
                        @endforelse
                    </div>
                </div>
            </section>
        </div>

        <section class="vm-panel" aria-labelledby="recent-traffic-title">
            <header class="vm-panel-header">
                <div>
                    <h2 class="vm-panel-title" id="recent-traffic-title">Ultimos acessos</h2>
                    <p class="vm-panel-subtitle">Registro recente de paginas, origem, contexto tecnico e identificacao do visitante.</p>
                </div>
                <span class="vm-panel-badge">{{ number_format($recentVisits->count()) }} registros</span>
            </header>
            <div class="vm-data-table-wrap">
                <table class="vm-data-table">
                    <thead>
                        <tr>
                            <th>Quando</th>
                            <th>Pagina</th>
                            <th>Origem</th>
                            <th>Cliente / usuario</th>
                            <th>Disp.</th>
                            <th>Browser</th>
                            <th>Status</th>
                            <th>IP</th>
                        </tr>
                    </thead>
                    <tbody>
                        @forelse ($recentVisits as $visit)
                            <tr>
                                <td class="vm-table-muted">{{ $visit->visited_at?->format('m/d H:i:s') }}</td>
                                <td><span class="vm-table-primary">{{ $visit->page }}</span></td>
                                <td>
                                    <span class="vm-origin-badge">{{ $originLabels[$visit->origin] ?? $visit->origin }}</span>
                                </td>
                                <td class="vm-table-muted">{{ $visit->customer?->company_name ?? $visit->user?->email ?? '-' }}</td>
                                <td>{{ $visit->device }}</td>
                                <td>{{ $visit->browser }}</td>
                                <td>{{ $visit->status_code }}</td>
                                <td class="vm-table-muted">{{ $visit->ip ?: '-' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="8" class="vm-empty-state">Sem acessos no periodo selecionado.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </section>
    </div>
</x-filament-panels::page>