<x-filament-widgets::widget>
    <div wire:poll.5s>
        <style>
            /* Live Traffic Card styling */
            .lt-card {
                display: flex;
                align-items: center;
                justify-content: space-between;
                background: linear-gradient(135deg, #1e293b, #0f172a);
                color: #ffffff;
                padding: 24px;
                border-radius: 16px;
                box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15);
                border: 1px solid rgba(255, 255, 255, 0.05);
            }
            .lt-left {
                display: flex;
                align-items: center;
                gap: 16px;
            }
            .lt-pulse-container {
                display: flex;
                position: relative;
                width: 14px;
                height: 14px;
            }
            .lt-pulse-dot {
                position: absolute;
                width: 14px;
                height: 14px;
                background-color: #22c55e;
                border-radius: 50%;
            }
            .lt-pulse-ring {
                position: absolute;
                width: 14px;
                height: 14px;
                background-color: #22c55e;
                border-radius: 50%;
                animation: lt-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
            }
            @keyframes lt-ping {
                75%, 100% {
                    transform: scale(3);
                    opacity: 0;
                }
            }
            .lt-count-label {
                font-size: 0.75rem;
                font-weight: 600;
                color: #94a3b8;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }
            .lt-count-val {
                font-size: 2.25rem;
                font-weight: 800;
                color: #ffffff;
                line-height: 1.1;
                margin-top: 4px;
            }
            .lt-btn {
                background-color: rgba(255, 255, 255, 0.08);
                color: #ffffff;
                font-size: 0.85rem;
                font-weight: 600;
                padding: 10px 18px;
                border-radius: 10px;
                border: 1px solid rgba(255, 255, 255, 0.1);
                cursor: pointer;
                transition: all 0.2s ease;
            }
            .lt-btn:hover {
                background-color: rgba(255, 255, 255, 0.15);
                border-color: rgba(255, 255, 255, 0.2);
            }

            /* Slide-over Panel styles */
            .lt-modal-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(0, 0, 0, 0.5);
                backdrop-filter: blur(4px);
                z-index: 99999;
                display: flex;
                justify-content: flex-end;
            }
            .lt-slideover {
                width: 100%;
                max-width: 480px;
                height: 100%;
                background-color: #ffffff;
                box-shadow: -10px 0 30px -10px rgba(0, 0, 0, 0.15);
                display: flex;
                flex-direction: column;
                padding: 28px;
                z-index: 100000;
                box-sizing: border-box;
            }
            .dark .lt-slideover {
                background-color: #111827;
            }
            .lt-modal-header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-bottom: 1px solid #e5e7eb;
                padding-bottom: 16px;
                margin-bottom: 24px;
            }
            .dark .lt-modal-header {
                border-bottom-color: #374151;
            }
            .lt-modal-title {
                font-size: 1.25rem;
                font-weight: 700;
                color: #111827;
            }
            .dark .lt-modal-title {
                color: #f9fafb;
            }
            .lt-close-btn {
                background: none;
                border: none;
                font-size: 1.75rem;
                cursor: pointer;
                color: #9ca3af;
                line-height: 1;
            }
            .lt-close-btn:hover {
                color: #4b5563;
                dark:color: #f3f4f6;
            }
            .lt-sessions-list {
                flex: 1;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                gap: 16px;
                padding-right: 4px;
            }
            .lt-session-card {
                border: 1px solid #e5e7eb;
                border-radius: 12px;
                padding: 16px;
                background-color: #f9fafb;
                display: flex;
                flex-direction: column;
                gap: 10px;
                box-sizing: border-box;
            }
            .dark .lt-session-card {
                border-color: #374151;
                background-color: rgba(31, 41, 55, 0.4);
            }
            .lt-session-top {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
            .lt-session-ip {
                font-weight: 700;
                font-size: 0.9rem;
                color: #1f2937;
            }
            .dark .lt-session-ip {
                color: #f3f4f6;
            }
            .lt-session-time {
                font-size: 0.75rem;
                color: #9ca3af;
            }
            .lt-session-meta {
                display: flex;
                gap: 8px;
            }
            .lt-tag {
                font-size: 0.7rem;
                font-weight: 600;
                padding: 2px 8px;
                border-radius: 4px;
            }
            .lt-tag-device { background-color: #e0f2fe; color: #0369a1; }
            .lt-tag-source { background-color: #fef3c7; color: #b45309; }
            .lt-session-action {
                font-size: 0.85rem;
                color: #4b5563;
                font-weight: 500;
                line-height: 1.4;
            }
            .dark .lt-session-action {
                color: #d1d5db;
            }
            .lt-empty-state {
                text-align: center;
                color: #9ca3af;
                padding: 40px 0;
                font-size: 0.9rem;
            }
        </style>

        <!-- Live Traffic Dashboard Card -->
        <div class="lt-card">
            <div class="lt-left">
                <div class="lt-pulse-container">
                    <div class="lt-pulse-ring"></div>
                    <div class="lt-pulse-dot"></div>
                </div>
                <div>
                    <span class="lt-count-label">Active Storefront Visitors Right Now</span>
                    <h2 class="lt-count-val">{{ number_format($activeCount) }}</h2>
                </div>
            </div>
            <button wire:click="openModal" class="lt-btn">
                View Live Details
            </button>
        </div>

        <!-- Slide-over Modal -->
        @if($showModal)
            <div class="lt-modal-overlay" wire:click.self="closeModal">
                <div class="lt-slideover">
                    <div class="lt-modal-header">
                        <span class="lt-modal-title">Live Active Visitors ({{ number_format($activeCount) }})</span>
                        <button wire:click="closeModal" class="lt-close-btn">&times;</button>
                    </div>

                    <div class="lt-sessions-list">
                        @forelse($activeSessionsList as $session)
                            <div class="lt-session-card">
                                <div class="lt-session-top">
                                    <span class="lt-session-ip">📍 {{ $session['ip'] }}</span>
                                    <span class="lt-session-time">{{ $session['last_active'] }}</span>
                                </div>
                                <div class="lt-session-meta">
                                    <span class="lt-tag lt-tag-device">📱 {{ $session['device'] }}</span>
                                    <span class="lt-tag lt-tag-source">🔗 {{ $session['source'] }}</span>
                                </div>
                                <div class="lt-session-action">
                                    <strong>Current Location:</strong> {{ $session['action'] }}
                                </div>
                            </div>
                        @empty
                            <div class="lt-empty-state">
                                No active visitors in the last 5 minutes.
                            </div>
                        @endforelse
                    </div>
                </div>
            </div>
        @endif
    </div>
</x-filament-widgets::widget>
