@php
    $events = $pageData['events'] ?? collect();
    $contacts = $pageData['contacts'] ?? collect();
    $contactsByHash = $pageData['contactsByHash'] ?? $contacts->keyBy('hash');
    $countAdded = $events->where('action', 'added')->count();
    $countUpdated = $events->where('action', 'updated')->count();
    $countDeleted = $events->where('action', 'deleted')->count();
@endphp

@include('admin.devices.partials.monitoring-notice', ['compact' => true])

<div class="flex flex-wrap items-center justify-between gap-3 mb-4">
    <p id="contacts-refresh-status" class="text-xs text-slate-500" aria-live="polite"></p>
</div>

<div class="mb-6" style="display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.75rem">
    <div class="rounded-lg border border-slate-200 bg-white px-4 py-3 shadow-sm text-center min-w-0">
        <p class="text-2xl font-bold text-slate-900" id="stat-total">{{ $contacts->count() }}</p>
        <p class="text-xs font-medium text-slate-500 uppercase tracking-wide mt-1">{{ __('devices.contacts.stats_total') }}</p>
    </div>
    <div class="rounded-lg border border-emerald-200 bg-emerald-50/50 px-4 py-3 shadow-sm text-center min-w-0">
        <p class="text-2xl font-bold text-emerald-800" id="stat-added">{{ $countAdded }}</p>
        <p class="text-xs font-medium text-emerald-700 uppercase tracking-wide mt-1">{{ __('devices.contacts.stats_added') }}</p>
    </div>
    <div class="rounded-lg border border-amber-200 bg-amber-50/50 px-4 py-3 shadow-sm text-center min-w-0">
        <p class="text-2xl font-bold text-amber-800" id="stat-updated">{{ $countUpdated }}</p>
        <p class="text-xs font-medium text-amber-700 uppercase tracking-wide mt-1">{{ __('devices.contacts.stats_updated') }}</p>
    </div>
    <div class="rounded-lg border border-red-200 bg-red-50/50 px-4 py-3 shadow-sm text-center min-w-0">
        <p class="text-2xl font-bold text-red-800" id="stat-deleted">{{ $countDeleted }}</p>
        <p class="text-xs font-medium text-red-700 uppercase tracking-wide mt-1">{{ __('devices.contacts.stats_deleted') }}</p>
    </div>
</div>

<nav class="flex flex-wrap gap-2 mb-4 border-b border-slate-200 pb-3" aria-label="{{ __('devices.pages.contacts') }}">
    <button type="button" data-contacts-tab="activity"
            class="contacts-tab-btn px-4 py-2 text-sm font-medium rounded-md bg-indigo-600 text-white">
        {{ __('devices.contacts.tab_activity') }}
    </button>
    <button type="button" data-contacts-tab="agenda"
            class="contacts-tab-btn px-4 py-2 text-sm font-medium rounded-md bg-slate-100 text-slate-700 hover:bg-slate-200">
        {{ __('devices.contacts.tab_agenda') }}
    </button>
</nav>

<div id="contacts-panel-activity" class="contacts-panel">
    <div class="flex flex-wrap gap-2 mb-4" id="contacts-event-filters" role="group" aria-label="{{ __('devices.contacts.activity_title') }}">
        @foreach(['all', 'added', 'updated', 'deleted'] as $filter)
            <button type="button"
                    data-event-filter="{{ $filter }}"
                    class="event-filter-btn px-3 py-1.5 text-xs font-medium rounded-full border transition-colors
                        {{ $filter === 'all' ? 'bg-indigo-600 text-white border-indigo-600' : 'bg-white text-gray-600 border-gray-300 hover:border-indigo-400' }}">
                {{ __('devices.contacts.filter_'.$filter) }}
            </button>
        @endforeach
    </div>
</div>

<div id="contacts-panel-agenda" class="contacts-panel hidden mb-4">
    <label class="block">
        <span class="sr-only">{{ __('devices.contacts.agenda_search') }}</span>
        <input type="search"
               id="contacts-search"
               placeholder="{{ __('devices.contacts.agenda_search') }}"
               class="w-full max-w-md border-slate-300 rounded-lg text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
               autocomplete="off" />
    </label>
</div>

<div id="contacts-body" class="text-sm min-h-[120px]">
    @include('admin.devices.partials.contacts-body', [
        'device' => $device,
        'events' => $events,
        'contacts' => $contacts,
        'contactsByHash' => $contactsByHash,
    ])
</div>

@push('scripts')
<script>
(() => {
    const bodyEl = document.getElementById('contacts-body');
    const fragmentUrl = @json(route('devices.contacts.fragment', $device));
    const statusEl = document.getElementById('contacts-refresh-status');
    const searchInput = document.getElementById('contacts-search');
    const refreshLabel = @json(__('devices.contacts.refreshing'));
    const updatedLabel = @json(__('devices.contacts.updated_seconds'));
    const loadMoreRemainingLabel = @json(__('devices.contacts.load_more_remaining'));

    if (!bodyEl || !fragmentUrl) return;

    let activeEventFilter = 'all';
    let activeTab = 'activity';
    let lastRefreshAt = null;
    let pollTimer = null;
    let activityShowCount = 5;
    const ACTIVITY_INITIAL = 5;
    const ACTIVITY_STEP = 10;
    const POLL_MS = {{ (int) config('systemlog.contacts_page_refresh_seconds', 30) * 1000 }};

    function setStatusRefreshing() {
        if (statusEl) statusEl.textContent = refreshLabel;
    }

    function setStatusUpdated() {
        lastRefreshAt = Date.now();
        if (statusEl) statusEl.textContent = updatedLabel.replace(':s', '0');
    }

    function tickStatus() {
        if (!statusEl || !lastRefreshAt) return;
        const s = Math.floor((Date.now() - lastRefreshAt) / 1000);
        statusEl.textContent = updatedLabel.replace(':s', String(s));
    }

    function getScrollY() {
        return window.scrollY ?? window.pageYOffset ?? document.documentElement.scrollTop ?? document.body.scrollTop ?? 0;
    }

    function captureScrollState() {
        const y = getScrollY();
        const viewTop = y;
        const viewBottom = y + window.innerHeight;
        let anchorEl = null;
        let bestDist = Infinity;

        bodyEl.querySelectorAll('.contact-event-row, .contact-row').forEach(el => {
            if (el.classList.contains('hidden') || el.offsetParent === null) return;
            const rect = el.getBoundingClientRect();
            const top = rect.top + y;
            const bottom = top + rect.height;
            if (bottom < viewTop || top > viewBottom) return;
            const dist = Math.abs(rect.top);
            if (dist < bestDist) {
                bestDist = dist;
                anchorEl = el;
            }
        });

        if (!anchorEl) {
            return { y, anchor: null };
        }

        const eventId = anchorEl.getAttribute('data-event-id');
        const contactId = anchorEl.getAttribute('data-contact-id');

        return {
            y,
            anchor: {
                type: eventId ? 'event' : 'contact',
                id: eventId || contactId,
                offset: anchorEl.getBoundingClientRect().top,
            },
        };
    }

    function restoreScrollState(state) {
        if (!state) return;

        const applyY = (top) => {
            window.scrollTo({ left: 0, top: Math.max(0, top), behavior: 'auto' });
        };

        const restore = () => {
            if (state.anchor?.id) {
                const selector = state.anchor.type === 'event'
                    ? `.contact-event-row[data-event-id="${state.anchor.id}"]`
                    : `.contact-row[data-contact-id="${state.anchor.id}"]`;
                const el = bodyEl.querySelector(selector);
                if (el && !el.classList.contains('hidden') && el.offsetParent !== null) {
                    const top = el.getBoundingClientRect().top + getScrollY() - state.anchor.offset;
                    applyY(top);
                    return true;
                }
            }
            applyY(state.y);
            return false;
        };

        restore();
        requestAnimationFrame(() => {
            restore();
            requestAnimationFrame(restore);
        });
    }

    function setActivityRowVisible(row, visible) {
        row.classList.toggle('hidden', !visible);
        row.style.display = visible ? '' : 'none';
    }

    function applyActivityLimit() {
        const rows = [...bodyEl.querySelectorAll('.contact-event-row')];
        let visibleIndex = 0;
        rows.forEach(row => {
            const action = row.getAttribute('data-action');
            const filterMatch = activeEventFilter === 'all' || action === activeEventFilter;
            if (!filterMatch) {
                setActivityRowVisible(row, false);
                return;
            }
            visibleIndex++;
            setActivityRowVisible(row, visibleIndex <= activityShowCount);
        });

        const wrap = document.getElementById('contacts-activity-more-wrap');
        const countEl = document.getElementById('contacts-load-more-count');
        const matchingCount = rows.filter(row => {
            const action = row.getAttribute('data-action');
            return activeEventFilter === 'all' || action === activeEventFilter;
        }).length;
        const remaining = Math.max(0, matchingCount - activityShowCount);
        if (wrap) wrap.classList.toggle('hidden', remaining === 0);
        if (countEl) {
            countEl.textContent = remaining > 0
                ? loadMoreRemainingLabel.replace(':count', String(remaining))
                : '';
        }
    }

    function applyEventFilter() {
        applyActivityLimit();
    }

    function applyAgendaSearch() {
        const q = (searchInput?.value || '').trim().toLowerCase();
        const rows = bodyEl.querySelectorAll('.contact-row');
        let visible = 0;
        rows.forEach(row => {
            const key = row.getAttribute('data-search') || '';
            const show = q === '' || key.includes(q);
            row.classList.toggle('hidden', !show);
            if (show) visible++;
        });
        const noResults = document.getElementById('contacts-no-results');
        const tableWrap = document.getElementById('contacts-table-wrap');
        if (noResults && tableWrap && rows.length > 0) {
            noResults.classList.toggle('hidden', visible > 0 || q === '');
            tableWrap.classList.toggle('hidden', visible === 0 && q !== '');
        }
    }

    function bindTabButtons() {
        document.querySelectorAll('.contacts-tab-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                activeTab = btn.getAttribute('data-contacts-tab');
                document.querySelectorAll('.contacts-tab-btn').forEach(b => {
                    const on = b.getAttribute('data-contacts-tab') === activeTab;
                    b.classList.toggle('bg-indigo-600', on);
                    b.classList.toggle('text-white', on);
                    b.classList.toggle('bg-slate-100', !on);
                    b.classList.toggle('text-slate-700', !on);
                });
                document.getElementById('contacts-panel-activity')?.classList.toggle('hidden', activeTab !== 'activity');
                document.getElementById('contacts-panel-agenda')?.classList.toggle('hidden', activeTab !== 'agenda');
                const target = bodyEl.querySelector(
                    activeTab === 'activity' ? '#contacts-section-activity' : '#contacts-section-agenda'
                );
                target?.scrollIntoView({ behavior: 'smooth', block: 'start' });
            });
        });
    }

    function bindEventFilters() {
        document.querySelectorAll('.event-filter-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                activeEventFilter = btn.getAttribute('data-event-filter');
                document.querySelectorAll('.event-filter-btn').forEach(b => {
                    const on = b.getAttribute('data-event-filter') === activeEventFilter;
                    b.classList.toggle('bg-indigo-600', on);
                    b.classList.toggle('text-white', on);
                    b.classList.toggle('border-indigo-600', on);
                    b.classList.toggle('bg-white', !on);
                    b.classList.toggle('text-gray-600', !on);
                    b.classList.toggle('border-gray-300', !on);
                });
                activityShowCount = ACTIVITY_INITIAL;
                applyEventFilter();
            });
        });
    }

    function updateStatsFromDom() {
        const total = document.getElementById('contacts-count');
        if (total) document.getElementById('stat-total').textContent = total.textContent;

        const counts = { added: 0, updated: 0, deleted: 0 };
        bodyEl.querySelectorAll('.contact-event-row').forEach(row => {
            const a = row.getAttribute('data-action');
            if (counts[a] !== undefined) counts[a]++;
        });
        const elAdded = document.getElementById('stat-added');
        const elUpdated = document.getElementById('stat-updated');
        const elDeleted = document.getElementById('stat-deleted');
        if (elAdded) elAdded.textContent = counts.added;
        if (elUpdated) elUpdated.textContent = counts.updated;
        if (elDeleted) elDeleted.textContent = counts.deleted;
    }

    async function refresh() {
        if (document.hidden) return;
        const scrollState = captureScrollState();
        const searchVal = searchInput?.value ?? '';
        const prevActivityShowCount = activityShowCount;

        setStatusRefreshing();
        try {
            const res = await fetch(fragmentUrl, {
                headers: { 'Accept': 'text/html', 'X-Requested-With': 'XMLHttpRequest' },
                credentials: 'same-origin',
            });
            if (!res.ok) return;
            bodyEl.innerHTML = await res.text();
            if (searchInput) searchInput.value = searchVal;
            activityShowCount = prevActivityShowCount;
            applyEventFilter();
            applyAgendaSearch();
            updateStatsFromDom();
            setStatusUpdated();
            restoreScrollState(scrollState);
        } catch (e) { /* silencioso */ }
    }

    function startPolling() {
        if (pollTimer) clearInterval(pollTimer);
        pollTimer = setInterval(refresh, POLL_MS);
    }

    function stopPolling() {
        if (pollTimer) clearInterval(pollTimer);
        pollTimer = null;
    }

    bodyEl.addEventListener('click', (e) => {
        if (e.target.closest('#contacts-load-more')) {
            activityShowCount += ACTIVITY_STEP;
            applyActivityLimit();
            return;
        }
        const row = e.target.closest('.contact-row[data-href]');
        if (row && !e.target.closest('a[href^="tel:"]')) {
            window.location.href = row.getAttribute('data-href');
        }
    });

    bodyEl.addEventListener('keydown', (e) => {
        const row = e.target.closest('.contact-row[data-href]');
        if (row && (e.key === 'Enter' || e.key === ' ')) {
            e.preventDefault();
            window.location.href = row.getAttribute('data-href');
        }
    });

    bindTabButtons();
    bindEventFilters();
    searchInput?.addEventListener('input', applyAgendaSearch);

    document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
            stopPolling();
        } else {
            refresh();
            startPolling();
        }
    });

    setInterval(tickStatus, 1000);
    applyActivityLimit();
    updateStatsFromDom();
    refresh();
    startPolling();
})();
</script>
@endpush