@props([
    'events' => [],
    'filters' => [],
    'view' => 'dayGridMonth',
    'editable' => true,
    'showFilters' => true
])

<div class="calendar-view-component"
     x-data="calendarView()"
     x-init="initCalendar()"
     data-events-url="{{ route('calendar.events.filtered') }}">

    {{-- Toolbar Superior --}}
    <div class="calendar-toolbar mb-3">
        <div class="row g-3 align-items-center">
            <div class="col-auto">
                <div class="btn-group btn-group-sm" role="group">
                    <button type="button" class="btn btn-phoenix-secondary" @click="previousPeriod()">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button type="button" class="btn btn-phoenix-primary" @click="goToToday()">
                        Hoje
                    </button>
                    <button type="button" class="btn btn-phoenix-secondary" @click="nextPeriod()">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
            </div>

            <div class="col-auto">
                <h5 class="mb-0 calendar-title" id="calendarTitle">
                    <span class="spinner-border spinner-border-sm me-2"
                          style="display: none;"
                          id="calendarLoadingSpinner"></span>
                    <span id="calendarTitleText">Carregando...</span>
                </h5>
            </div>

            <div class="col-auto ms-auto">
                {{-- Botões de Visualização --}}
                <div class="btn-group btn-group-sm me-2" role="group">
                    <button type="button"
                            class="btn btn-phoenix-secondary view-btn"
                            data-view="dayGridMonth"
                            @click="changeView('dayGridMonth')">
                        <i class="fas fa-calendar-alt me-1"></i>Mês
                    </button>
                    <button type="button"
                            class="btn btn-phoenix-secondary view-btn"
                            data-view="timeGridWeek"
                            @click="changeView('timeGridWeek')">
                        <i class="fas fa-calendar-week me-1"></i>Semana
                    </button>
                    <button type="button"
                            class="btn btn-phoenix-secondary view-btn"
                            data-view="timeGridDay"
                            @click="changeView('timeGridDay')">
                        <i class="fas fa-calendar-day me-1"></i>Dia
                    </button>
                    <button type="button"
                            class="btn btn-phoenix-secondary view-btn"
                            data-view="listWeek"
                            @click="changeView('listWeek')">
                        <i class="fas fa-list me-1"></i>Lista
                    </button>
                </div>

                {{-- Ações Adicionais --}}
                @if($showFilters)
                <button type="button"
                        class="btn btn-phoenix-secondary btn-sm me-2"
                        @click="toggleFilters()">
                    <i class="fas fa-filter me-1"></i>
                    Filtros
                    <span class="badge bg-primary ms-1"
                          id="activeFiltersCount"
                          style="display: none;">0</span>
                </button>
                @endif

                <button type="button"
                        class="btn btn-phoenix-secondary btn-sm"
                        @click="refreshCalendar()">
                    <i class="fas fa-sync-alt"></i>
                </button>
            </div>
        </div>
    </div>

    {{-- Painel de Filtros --}}
    @if($showFilters)
    <div class="calendar-filters-panel" id="filtersPanel" style="display: none;">
        <x-calendar.filters-panel />
    </div>
    @endif

    {{-- Container do Calendário --}}
    <div class="calendar-container position-relative">
        {{-- Loading Overlay --}}
        <div class="calendar-loading-overlay" id="calendarLoadingOverlay" style="display: none;">
            <div class="d-flex align-items-center justify-content-center h-100">
                <div class="text-center">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Carregando...</span>
                    </div>
                    <p class="text-muted">Carregando eventos...</p>
                </div>
            </div>
        </div>

        {{-- Mensagem de Erro --}}
        <div class="calendar-error-message alert alert-danger"
             id="calendarError"
             style="display: none;">
            <div class="d-flex align-items-center">
                <i class="fas fa-exclamation-triangle me-2"></i>
                <div>
                    <strong>Erro ao carregar o calendário</strong>
                    <p class="mb-0 small" id="calendarErrorMessage"></p>
                </div>
                <button type="button"
                        class="btn btn-sm btn-danger ms-auto"
                        onclick="retryLoadCalendar()">
                    <i class="fas fa-redo me-1"></i>Tentar novamente
                </button>
            </div>
        </div>

        {{-- Calendário --}}
        <div id="calendarElement" class="calendar-element"></div>

        {{-- Mensagem quando não há eventos --}}
        <div class="calendar-no-events text-center py-5"
             id="noEventsMessage"
             style="display: none;">
            <i class="fas fa-calendar-times fa-3x text-muted mb-3"></i>
            <h5 class="text-muted">Nenhum evento encontrado</h5>
            <p class="text-muted">Tente ajustar os filtros ou criar um novo post.</p>
            @if(auth()->user()->hasPermission('posts.create'))
            <a href="{{ route('posts.create') }}" class="btn btn-primary">
                <i class="fas fa-plus me-2"></i>Criar Novo Post
            </a>
            @endif
        </div>
    </div>

    {{-- Slots para modais --}}
    {{ $slot }}
</div>

@push('styles')
<style>
.calendar-view-component {
    position: relative;
}

.calendar-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1000;
    min-height: 400px;
}

.calendar-container {
    min-height: 500px;
    position: relative;
}

.calendar-filters-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.view-btn.active {
    background-color: #3874ff !important;
    color: white !important;
}

.calendar-toolbar .btn-group {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Responsividade */
@media (max-width: 768px) {
    .calendar-toolbar .row {
        flex-direction: column;
        align-items: stretch !important;
    }

    .calendar-toolbar .col-auto {
        width: 100%;
        margin-bottom: 0.5rem;
    }

    .calendar-toolbar .ms-auto {
        margin-left: 0 !important;
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .view-btn span {
        display: none;
    }
}
</style>
@endpush

@push('scripts')
<script>
function calendarView() {
    return {
        calendar: null,
        currentFilters: {},
        isLoading: false,

        initCalendar() {
            // Este método será sobrescrito pelo componente específico
            console.log('CalendarView initialized');
        },

        previousPeriod() {
            if (this.calendar) {
                this.calendar.prev();
                this.updateTitle();
            }
        },

        nextPeriod() {
            if (this.calendar) {
                this.calendar.next();
                this.updateTitle();
            }
        },

        goToToday() {
            if (this.calendar) {
                this.calendar.today();
                this.updateTitle();
                this.showToast('Navegando para hoje');
            }
        },

        changeView(viewName) {
            if (this.calendar) {
                this.calendar.changeView(viewName);
                this.updateViewButtons(viewName);
                this.updateTitle();
            }
        },

        updateViewButtons(activeView) {
            document.querySelectorAll('.view-btn').forEach(btn => {
                btn.classList.remove('active');
                if (btn.dataset.view === activeView) {
                    btn.classList.add('active');
                }
            });
        },

        updateTitle() {
            if (this.calendar) {
                const title = this.calendar.view.title;
                document.getElementById('calendarTitleText').textContent = title;
            }
        },

        toggleFilters() {
            const panel = document.getElementById('filtersPanel');
            if (panel) {
                panel.style.display = panel.style.display === 'none' ? 'block' : 'none';
            }
        },

        refreshCalendar() {
            if (this.calendar) {
                this.showLoading();
                this.calendar.refetchEvents();
            }
        },

        showLoading() {
            document.getElementById('calendarLoadingSpinner').style.display = 'inline-block';
            this.isLoading = true;
        },

        hideLoading() {
            document.getElementById('calendarLoadingSpinner').style.display = 'none';
            this.isLoading = false;
        },

        showError(message) {
            const errorEl = document.getElementById('calendarError');
            const errorMsg = document.getElementById('calendarErrorMessage');
            if (errorEl && errorMsg) {
                errorMsg.textContent = message;
                errorEl.style.display = 'block';
            }
        },

        hideError() {
            const errorEl = document.getElementById('calendarError');
            if (errorEl) {
                errorEl.style.display = 'none';
            }
        },

        showToast(message, type = 'info') {
            // Implementar sistema de notificação toast
            console.log(`[${type}] ${message}`);
        },

        updateFiltersCount() {
            const count = Object.keys(this.currentFilters).filter(key => {
                const value = this.currentFilters[key];
                return value && (Array.isArray(value) ? value.length > 0 : true);
            }).length;

            const badge = document.getElementById('activeFiltersCount');
            if (badge) {
                badge.textContent = count;
                badge.style.display = count > 0 ? 'inline-block' : 'none';
            }
        }
    }
}

function retryLoadCalendar() {
    // Implementar retry
    location.reload();
}
</script>
@endpush