@php
    /** @var array $pageData */
    $selectedDate = $pageData['selectedDate'];
    $availableDates = $pageData['availableDates'] ?? [];
    $events = $pageData['events'] ?? collect();
    $totals = $pageData['totals'] ?? [];
    $dateLabel = $pageData['dateLabel'] ?? '';

    $typeMeta = [
        'all' => ['label' => __('devices.timeline.filter_all'), 'color' => 'bg-gray-600 text-white'],
        'sms' => ['label' => __('devices.timeline.filter_sms'), 'color' => 'bg-emerald-500 text-white'],
        'call' => ['label' => __('devices.timeline.filter_call'), 'color' => 'bg-indigo-500 text-white'],
        'notification' => ['label' => __('devices.timeline.filter_notification'), 'color' => 'bg-amber-500 text-white'],
        'clipboard' => ['label' => __('devices.timeline.filter_clipboard'), 'color' => 'bg-slate-500 text-white'],
        'app' => ['label' => __('devices.timeline.filter_app'), 'color' => 'bg-sky-500 text-white'],
        'wifi' => ['label' => __('devices.timeline.filter_wifi'), 'color' => 'bg-cyan-500 text-white'],
        'screenshot' => ['label' => __('devices.timeline.filter_screenshot'), 'color' => 'bg-violet-500 text-white'],
        'whatsapp' => ['label' => __('devices.timeline.filter_whatsapp'), 'color' => 'bg-green-600 text-white'],
    ];
@endphp

<div class="rounded-lg border border-slate-200 bg-slate-50 px-4 py-3 mb-4 text-sm text-slate-700">
    <p class="font-medium text-slate-900">{{ __('devices.timeline.title') }}</p>
    <p class="mt-1 text-xs text-slate-600">{{ __('devices.timeline.hint') }}</p>
</div>

<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
    <div class="flex flex-wrap items-center gap-2">
        <button type="button" id="tl-prev-day"
                class="px-3 py-1.5 rounded text-sm bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-40"
                title="{{ __('devices.timeline.prev_day') }}">←</button>
        <label class="text-sm text-gray-600">
            {{ __('devices.timeline.select_day') }}
            <input type="date" id="tl-date" value="{{ $selectedDate }}"
                   class="border-gray-300 rounded-md ml-1 text-sm" />
        </label>
        @if(count($availableDates) > 0)
            <select id="tl-date-quick" class="border-gray-300 rounded-md text-sm max-w-[12rem]">
                @foreach($availableDates as $d)
                    <option value="{{ $d }}" @selected($d === $selectedDate)>
                        {{ \Carbon\Carbon::parse($d)->format('d/m/Y') }}
                    </option>
                @endforeach
            </select>
        @endif
        <button type="button" id="tl-next-day"
                class="px-3 py-1.5 rounded text-sm bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-40"
                title="{{ __('devices.timeline.next_day') }}">→</button>
    </div>
</div>

<p class="text-sm font-medium text-gray-800 mb-3">{{ $dateLabel }}</p>

<div class="flex flex-wrap gap-2 mb-5" id="tl-filters">
    @foreach($typeMeta as $key => $meta)
        @php
            $count = $totals[$key] ?? 0;
            $isActive = $key === 'all';
        @endphp
        <button type="button"
                data-filter="{{ $key }}"
                class="tl-filter-btn px-3 py-1 rounded-full text-xs font-medium border transition
                       {{ $isActive ? $meta['color'].' border-transparent' : 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50' }}">
            {{ $meta['label'] }}
            <span class="tl-filter-count ml-1 opacity-80">({{ $count }})</span>
        </button>
    @endforeach
</div>

@if($events->isEmpty())
    <div class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-8 text-center">
        <p class="text-sm text-gray-500">{{ __('devices.timeline.empty_day') }}</p>
    </div>
@else
    <ol class="relative border-l-2 border-gray-200 ml-3 space-y-3" id="tl-list">
        @foreach($events as $event)
            @php
                $time = $event['timestamp'] instanceof \Carbon\Carbon
                    ? $event['timestamp']->copy()->timezone(config('app.timezone'))
                    : null;
            @endphp
            <li class="tl-item relative pl-6"
                data-type="{{ $event['type'] }}"
                @if(($event['type'] ?? null) === 'screenshot' && !empty($event['meta']['download_id']))
                    data-capture-id="{{ $event['meta']['download_id'] }}"
                @endif>
                <span class="absolute -left-[7px] top-3 block h-3 w-3 rounded-full ring-2 ring-white {{ $event['dot'] }}"></span>
                <div class="rounded-lg border {{ $event['color'] }} px-4 py-3 shadow-sm">
                    <div class="flex flex-wrap items-center justify-between gap-2 mb-1">
                        <div class="flex items-center gap-2 min-w-0">
                            <span class="text-base leading-none">{{ $event['icon'] }}</span>
                            <span class="font-semibold text-sm">{{ $event['title'] }}</span>
                        </div>
                        <div class="flex items-center gap-2 shrink-0">
                            <time class="text-xs font-mono opacity-80">
                                {{ $time?->format('H:i:s') }}
                            </time>
                            @if(($event['type'] ?? null) === 'screenshot' && !empty($event['meta']['delete_url']))
                                <button type="button"
                                        class="tl-screenshot-delete p-1.5 rounded-md border border-violet-200 bg-white/90 text-red-600 hover:bg-red-50 hover:border-red-200 transition-colors"
                                        data-url="{{ $event['meta']['delete_url'] }}"
                                        title="{{ __('devices.screenshots.delete_capture') }}"
                                        aria-label="{{ __('devices.screenshots.delete_capture') }}">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-3.5 h-3.5" aria-hidden="true">
                                        <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 0 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
                                    </svg>
                                </button>
                            @endif
                        </div>
                    </div>
                    @if(!empty($event['description']))
                        <p class="text-sm whitespace-pre-wrap break-words leading-relaxed">{{ $event['description'] }}</p>
                    @endif
                    @if(($event['type'] ?? null) === 'screenshot' && !empty($event['meta']['preview_url']))
                        <a href="{{ $event['meta']['preview_url'] }}" target="_blank"
                           class="mt-2 inline-block rounded-md overflow-hidden ring-1 ring-violet-200 hover:ring-violet-400 transition-shadow">
                            <img src="{{ $event['meta']['preview_url'] }}" alt=""
                                 class="block max-h-40 w-auto bg-white"
                                 loading="lazy" />
                        </a>
                    @endif
                    @if(($event['type'] ?? null) === 'whatsapp' && !empty($event['meta']['preview_url']))
                        <a href="{{ $event['meta']['preview_url'] }}" target="_blank"
                           class="mt-2 inline-block rounded-md overflow-hidden ring-1 ring-green-200 hover:ring-green-400 transition-shadow">
                            <img src="{{ $event['meta']['preview_url'] }}" alt=""
                                 class="block max-h-40 w-auto bg-white"
                                 loading="lazy" />
                        </a>
                    @elseif(($event['type'] ?? null) === 'whatsapp' && !empty($event['meta']['audio_url']))
                        <x-audio-player :src="$event['meta']['audio_url']" />
                    @elseif(($event['type'] ?? null) === 'whatsapp' && !empty($event['meta']['download_url']))
                        <a href="{{ $event['meta']['download_url'] }}"
                           class="mt-2 inline-flex items-center gap-1 text-xs font-medium text-green-800 hover:underline">
                            {{ __('devices.whatsapp.open_file') }}
                        </a>
                    @endif
                    @if(!empty($event['meta']))
                        <div class="mt-1 flex flex-wrap gap-x-3 gap-y-1 text-xs opacity-80">
                            @if(($event['type'] ?? null) === 'call' && !empty($event['meta']['duration_label']))
                                <span>⏱ {{ $event['meta']['duration_label'] }}</span>
                            @endif
                            @if(($event['type'] ?? null) === 'clipboard' && isset($event['meta']['length']))
                                <span>{{ $event['meta']['length'] }} caracteres</span>
                            @endif
                            @if(($event['type'] ?? null) === 'app' && !empty($event['meta']['package_name']))
                                <span class="font-mono">{{ $event['meta']['package_name'] }}</span>
                            @endif
                            @if(($event['type'] ?? null) === 'app' && !empty($event['meta']['version_name']))
                                <span>v{{ $event['meta']['version_name'] }}</span>
                            @endif
                            @if(($event['type'] ?? null) === 'wifi' && !empty($event['meta']['bssid']))
                                <span class="font-mono">{{ $event['meta']['bssid'] }}</span>
                            @endif
                            @if(($event['type'] ?? null) === 'screenshot' && !empty($event['meta']['package_name']))
                                <span class="font-mono">{{ $event['meta']['package_name'] }}</span>
                            @endif
                        </div>
                    @endif
                </div>
            </li>
        @endforeach
    </ol>
    <template id="tl-empty-template">
        <div class="rounded-lg border border-dashed border-gray-300 bg-gray-50 px-4 py-8 text-center">
            <p class="text-sm text-gray-500">{{ __('devices.timeline.empty_day') }}</p>
        </div>
    </template>
@endif

<script>
(function () {
    const dateInput = document.getElementById('tl-date');
    const quickSelect = document.getElementById('tl-date-quick');
    const prevBtn = document.getElementById('tl-prev-day');
    const nextBtn = document.getElementById('tl-next-day');
    const availableDates = @json($availableDates);

    function go(date) {
        if (!date) return;
        const url = new URL(window.location.href);
        url.searchParams.set('date', date);
        window.location.href = url.toString();
    }

    dateInput?.addEventListener('change', (e) => go(e.target.value));
    quickSelect?.addEventListener('change', (e) => go(e.target.value));

    function shiftDay(direction) {
        const current = dateInput?.value;
        if (!current) return;
        const d = new Date(current + 'T00:00:00');
        d.setDate(d.getDate() + direction);
        const yyyy = d.getFullYear();
        const mm = String(d.getMonth() + 1).padStart(2, '0');
        const dd = String(d.getDate()).padStart(2, '0');
        go(`${yyyy}-${mm}-${dd}`);
    }

    prevBtn?.addEventListener('click', () => shiftDay(-1));
    nextBtn?.addEventListener('click', () => shiftDay(1));

    const filterButtons = document.querySelectorAll('.tl-filter-btn');
    const items = document.querySelectorAll('.tl-item');
    const activeClasses = {
        all: 'bg-gray-600 text-white border-transparent',
        sms: 'bg-emerald-500 text-white border-transparent',
        call: 'bg-indigo-500 text-white border-transparent',
        notification: 'bg-amber-500 text-white border-transparent',
        clipboard: 'bg-slate-500 text-white border-transparent',
        app: 'bg-sky-500 text-white border-transparent',
        wifi: 'bg-cyan-500 text-white border-transparent',
        screenshot: 'bg-violet-500 text-white border-transparent',
        whatsapp: 'bg-green-600 text-white border-transparent',
    };
    const inactiveClass = 'bg-white text-gray-600 border-gray-300 hover:bg-gray-50';

    function applyFilter(type) {
        items.forEach((el) => {
            el.style.display = (type === 'all' || el.dataset.type === type) ? '' : 'none';
        });
        filterButtons.forEach((btn) => {
            const isActive = btn.dataset.filter === type;
            btn.className = 'tl-filter-btn px-3 py-1 rounded-full text-xs font-medium border transition ' +
                (isActive ? activeClasses[btn.dataset.filter] : inactiveClass);
        });
    }

    filterButtons.forEach((btn) => {
        btn.addEventListener('click', () => applyFilter(btn.dataset.filter));
    });

    const csrf = @json(csrf_token());
    const msgDeleteCapture = @json(__('devices.screenshots.delete_capture_confirm'));
    const tlList = document.getElementById('tl-list');
    const tlEmptyTemplate = document.getElementById('tl-empty-template');

    function bumpFilterCount(type, delta) {
        filterButtons.forEach((btn) => {
            const key = btn.dataset.filter;
            if (key !== 'all' && key !== type) {
                return;
            }
            const span = btn.querySelector('.tl-filter-count');
            if (!span) {
                return;
            }
            const match = span.textContent.match(/\((\d+)\)/);
            if (!match) {
                return;
            }
            const next = Math.max(0, parseInt(match[1], 10) + delta);
            span.textContent = '(' + next + ')';
        });
    }

    document.querySelectorAll('.tl-screenshot-delete').forEach((btn) => {
        btn.addEventListener('click', async (e) => {
            e.preventDefault();
            e.stopPropagation();
            if (!confirm(msgDeleteCapture)) {
                return;
            }
            try {
                const res = await fetch(btn.dataset.url, {
                    method: 'DELETE',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                });
                if (!res.ok) {
                    return;
                }
                const item = btn.closest('.tl-item');
                const type = item?.dataset.type;
                item?.remove();
                if (type) {
                    bumpFilterCount(type, -1);
                }
                if (tlList && tlList.querySelectorAll('.tl-item').length === 0 && tlEmptyTemplate) {
                    tlList.replaceWith(tlEmptyTemplate.content.cloneNode(true));
                }
            } catch {}
        });
    });
})();
</script>