@extends('layouts.app')

@section('title', 'Events Management')

@section('navigation')
    <a href="{{ route('dashboard') }}">Dashboard</a>
    <a href="{{ route('dashboard.settings') }}">Settings</a>
    <a href="{{ route('dashboard.events') }}" class="active">Events</a>
    <a href="{{ route('dashboard.widgets') }}">Widgets</a>
@endsection

@section('content')
<div class="eb-card">
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem;">
        <div>
            <h2>Events Management</h2>
            <p>Control which events are visible on your storefront and mark events as featured.</p>
        </div>
        <div>
            @if($totalEvents ?? 0 > 0)
                <span style="color: #637381;">{{ $totalEvents }} events found</span>
            @endif
        </div>
    </div>

    @if($error)
        <div class="eb-alert eb-alert-error">
            <strong>Error loading events:</strong> {{ $error }}
            <br>
            <a href="{{ route('dashboard.settings') }}">Check your EventBookings connection settings</a>
        </div>
    @elseif(empty($events))
        <div class="eb-alert eb-alert-warning">
            <strong>No events found.</strong>
            @if(!$store->storeSetting || !$store->storeSetting->is_connected)
                Please <a href="{{ route('dashboard.settings') }}">connect your EventBookings account</a> first.
            @else
                Make sure you have published events in your EventBookings account.
            @endif
        </div>
    @else
        <div style="overflow-x: auto;">
            <table class="eb-table">
                <thead>
                    <tr>
                        <th>Event</th>
                        <th>Date</th>
                        <th>Location</th>
                        <th>Visible</th>
                        <th>Featured</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($events as $event)
                        <tr>
                            <td>
                                <div>
                                    <strong>{{ $event['title'] ?? 'Untitled Event' }}</strong>
                                    @if($event['description'] ?? '')
                                        <br>
                                        <small style="color: #637381;">
                                            {{ Str::limit(strip_tags($event['description']), 80) }}
                                        </small>
                                    @endif
                                </div>
                            </td>
                            <td>
                                @if($event['start_date'] ?? '')
                                    {{ \Carbon\Carbon::parse($event['start_date'])->format('M j, Y') }}
                                    @if($event['start_time'] ?? '')
                                        <br><small>{{ \Carbon\Carbon::parse($event['start_time'])->format('g:i A') }}</small>
                                    @endif
                                @else
                                    <span style="color: #637381;">TBD</span>
                                @endif
                            </td>
                            <td>
                                @if($event['location'] ?? '')
                                    {{ $event['location']['name'] ?? $event['location'] }}
                                    @if(isset($event['location']['city']))
                                        <br><small style="color: #637381;">{{ $event['location']['city'] }}</small>
                                    @endif
                                @else
                                    <span style="color: #637381;">No location</span>
                                @endif
                            </td>
                            <td>
                                <label class="eb-toggle">
                                    <input type="checkbox"
                                           {{ ($event['show_event'] ?? true) ? 'checked' : '' }}
                                           onchange="toggleEvent('{{ $event['uuid'] ?? '' }}', 'visibility', this)"
                                           data-event-uuid="{{ $event['uuid'] ?? '' }}"
                                           data-toggle-type="visibility">
                                    <span class="eb-toggle-slider"></span>
                                </label>
                            </td>
                            <td>
                                <label class="eb-toggle">
                                    <input type="checkbox"
                                           {{ ($event['featured_event'] ?? false) ? 'checked' : '' }}
                                           onchange="toggleEvent('{{ $event['uuid'] ?? '' }}', 'featured', this)"
                                           data-event-uuid="{{ $event['uuid'] ?? '' }}"
                                           data-toggle-type="featured">
                                    <span class="eb-toggle-slider"></span>
                                </label>
                            </td>
                            <td>
                                @if($event['uuid'] ?? '')
                                    <button class="eb-btn eb-btn-secondary" style="font-size: 0.8rem; padding: 0.5rem 0.75rem;"
                                            onclick="viewEventDetails('{{ $event['uuid'] }}')">
                                        View Details
                                    </button>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>

        <div style="margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #e1e3e5;">
            <h4>Legend</h4>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem;">
                <div>
                    <strong>Visible:</strong> Controls whether the event appears on your storefront widgets.
                </div>
                <div>
                    <strong>Featured:</strong> Marks the event as featured in featured event widgets.
                </div>
            </div>
        </div>
    @endif
</div>

@if(!empty($events))
<div class="eb-card">
    <h3>Quick Actions</h3>
    <div style="display: flex; gap: 1rem;">
        <button class="eb-btn eb-btn-secondary" onclick="toggleAllEvents(true)">Show All Events</button>
        <button class="eb-btn eb-btn-secondary" onclick="toggleAllEvents(false)">Hide All Events</button>
        <form method="POST" action="{{ route('api.clear-cache') }}" style="display: inline;">
            @csrf
            <button type="submit" class="eb-btn eb-btn-secondary">Refresh Events</button>
        </form>
    </div>
</div>
@endif
@endsection

@push('scripts')
<script>
// Performance optimized JavaScript with cached selectors and debouncing
(function() {
    'use strict';

    // Cache DOM selectors for performance
    const eventTable = document.querySelector('.eb-table');
    const visibilityCheckboxes = eventTable ? eventTable.querySelectorAll('input[type="checkbox"]') : [];

    // Debounce function to prevent rapid API calls
    function debounce(func, wait) {
        let timeout;
        return function executedFunction(...args) {
            const later = () => {
                clearTimeout(timeout);
                func(...args);
            };
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
        };
    }

    // Optimized event details function
    window.viewEventDetails = function(eventUuid) {
        // In a real implementation, this could open a modal or navigate to a detail page
        if (window.console && console.log) {
            console.log('Event details requested for:', eventUuid);
        }
        alert('Event details for: ' + eventUuid + '\n\nThis would typically show more detailed information about the event.');
    };

    // Optimized bulk toggle function with performance improvements
    window.toggleAllEvents = function(visible) {
        if (!eventTable || visibilityCheckboxes.length === 0) return;

        // Get only visibility checkboxes (every other checkbox)
        const checkboxes = Array.from(visibilityCheckboxes).filter((checkbox, index) => index % 2 === 0);

        // Use requestAnimationFrame for smooth UI updates
        let currentIndex = 0;
        function processNextCheckbox() {
            if (currentIndex >= checkboxes.length) return;

            const checkbox = checkboxes[currentIndex];
            if (checkbox.checked !== visible) {
                checkbox.checked = visible;
                // Trigger change event with debouncing
                if (checkbox.onchange) {
                    debouncedToggle(checkbox);
                }
            }

            currentIndex++;
            if (currentIndex < checkboxes.length) {
                requestAnimationFrame(processNextCheckbox);
            }
        }

        requestAnimationFrame(processNextCheckbox);
    };

    // Debounced toggle function to prevent API flooding
    const debouncedToggle = debounce(function(checkbox) {
        if (checkbox.onchange) {
            checkbox.onchange();
        }
    }, 250); // 250ms debounce

    // Add loading states for better UX
    window.toggleEvent = function(eventUuid, type, element) {
        // Add loading state
        const originalDisabled = element.disabled;
        element.disabled = true;

        // Determine the correct endpoint and value
        let endpoint, value;
        if (type === 'visibility') {
            endpoint = '{{ route("api.toggle-event-visibility") }}';
            value = element.checked;
        } else if (type === 'featured') {
            endpoint = '{{ route("api.toggle-event-featured") }}';
            value = element.checked;
        }

        // Make the API call with error handling
        fetch(endpoint, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({
                event_uuid: eventUuid,
                [type === 'visibility' ? 'visible' : 'featured']: value
            })
        })
        .then(response => response.json())
        .then(data => {
            if (!data.success) {
                // Revert checkbox state on error
                element.checked = !element.checked;
                alert('Error: ' + (data.message || 'Failed to update event'));
            }
        })
        .catch(error => {
            // Revert checkbox state on error
            element.checked = !element.checked;
            console.error('Error:', error);
            alert('Network error occurred. Please try again.');
        })
        .finally(() => {
            // Remove loading state
            element.disabled = originalDisabled;
        });
    };

})();
</script>
@endpush