@props([
    'products' => collect(),
    'tracks' => collect(),
    'testers' => collect(),
    'title' => 'Calendar',
    'description' => 'Browse sessions and filter by products or programs.',
    'isDemo' => false,
    'showFilters' => true,
])
@php
    $isLoggedTester = auth()->user()?->staff?->jobTitle?->slug === 'tester';
@endphp
<style>
    .calendar-event-pill--stacked {
        display: flex;
        flex-direction: column;
        gap: 2px;
        font-size: 11px;
        line-height: 1.2;
        padding: 6px 8px;
    }

    .calendar-event-pill__line {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar-event-card {
        padding: 8px 10px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid #dbe3f0;
        display: flex;
        flex-direction: column;
        gap: 3px;
        min-height: 72px;
        overflow: hidden;
    }

    .calendar-event-card__line {
        font-size: 11px;
        line-height: 1.3;
        font-weight: 600;
        color: #2f5bd2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar-event-card__meta {
        margin-top: 2px;
        font-size: 10px;
        line-height: 1.25;
        font-weight: 500;
        color: #7b8794;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>

<div class="container-fluid app-bg">
    <div class="page-shell">
        <div class="d-flex flex-column gap-4">
            <x-page-title :title="$title" :description="$description" />

            @if ($showFilters)
                <div class="ui-card">
                    <div class="ui-card__header">
                        <div>
                            <h6 class="mb-0 ui-title">Calendar Filters</h6>
                            <p class="mb-0 ui-muted">Toggle the products and programs you want to see on the calendar.</p>
                        </div>
                    </div>

                    <div class="p-3">
                        <div class="calendar-filters-grid">
                            <section class="calendar-filter-group">
                                <span class="calendar-filter-group__title">Products</span>
                                <div class="calendar-filter-options">
                                    @foreach ($products as $product)
                                        <label class="calendar-filter-chip" data-type="{{ $product->name_en }}"
                                            data-category="product">
                                            <input type="checkbox" value="{{ $product->name_en }}">
                                            <span>{{ $product->name_en }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </section>

                            <section class="calendar-filter-group">
                                <span class="calendar-filter-group__title">Programs</span>
                                <div class="calendar-filter-options">
                                    @foreach ($tracks as $track)
                                        <label class="calendar-filter-chip" data-type="{{ $track->name_en }}"
                                            data-category="track">
                                            <input type="checkbox" value="{{ $track->name_en }}">
                                            <span>{{ $track->name_en }}</span>
                                        </label>
                                    @endforeach
                                </div>
                            </section>
                        </div>

                        <div class="calendar-filter-actions">
                            <button type="button" class="asset-btn asset-btn--secondary"
                                onclick="clearAllFilters()">Clear Filters</button>
                            <span class="ui-pill ui-pill--neutral" id="selectedFiltersHint">Showing all sessions</span>
                        </div>
                    </div>
                </div>
            @endif

            @if ($isDemo && ! $isLoggedTester)
                <div class="ui-card">
                    <div class="ui-card__header">
                        <div>
                            <h6 class="mb-0 ui-title">Demo Filters</h6>
                            <p class="mb-0 ui-muted">Filter demo sessions by tester.</p>
                        </div>
                    </div>
                    <div class="p-3">
                        <div class="row g-3 align-items-end">
                            <div class="col-md-6 col-lg-4">
                                <label for="testerFilter" class="form-label text-muted small mb-1">Tester</label>
                                <select id="testerFilter" class="form-select">
                                    <option value="">All Testers</option>
                                    @foreach ($testers as $tester)
                                        @php
                                            $testerName = $tester->full_name
                                                ?: trim(($tester->first_name ?? '') . ' ' . ($tester->last_name ?? ''));
                                        @endphp
                                        <option value="{{ $tester->id }}">{{ $testerName ?: ('Tester #' . $tester->id) }}</option>
                                    @endforeach
                                </select>
                            </div>
                            <div class="col-md-6 col-lg-3">
                                <button type="button" class="asset-btn asset-btn--secondary w-100" id="clearTesterFilter">
                                    Clear Tester Filter
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            @endif

            <div class="ui-card ui-card--table">
                <div class="ui-card__header">
                    <div>
                        <h6 class="mb-0 ui-title">Session Calendar</h6>
                        <p class="mb-0 ui-muted">Use the calendar toolbar to switch views.</p>
                    </div>
                </div>

                <div class="calendar-shell">
                    <div id="calendar"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="eventModal" tabindex="-1" aria-labelledby="eventModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <div class="modal-title fw-semibold" id="eventModalLabel">Session Details</div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="eventModalBody"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@include('components.calendar-styles')

@push('scripts')
    <script>
        let selectedTypes = [];
        let selectedTesterId = '';
        let calendar;
        const isCalendarDemo = @json($isDemo);

        function updateSelectedCount() {
            const count = selectedTypes.length;
            const selectedFiltersHint = document.getElementById('selectedFiltersHint');

            if (selectedFiltersHint) {
                selectedFiltersHint.textContent = count ?
                    `${count} filters applied` :
                    'Showing all sessions';
            }
        }

        function clearAllFilters() {
            selectedTypes = [];
            document.querySelectorAll('.calendar-filter-chip input[type="checkbox"]').forEach((checkbox) => {
                checkbox.checked = false;
            });
            document.querySelectorAll('.calendar-filter-chip').forEach((label) => {
                label.classList.remove('is-selected');
            });
            updateSelectedCount();
            updateCalendarEvents();
        }

        function updateCalendarEvents() {
            if (calendar) {
                calendar.refetchEvents();
            }
        }

        function buildEventDetailsHtml(info) {
            const props = info.event.extendedProps;
            const isTrack = props.schedule_type === 'track';
            const categoryLabel = isTrack ? 'Category' : 'Product Category';
            const detailsUrl = isTrack ?
                `{{ route('courses.show', '__ID__') }}`.replace('__ID__', props.schedule_id) :
                `{{ url('/products/show/__ID__') }}`.replace('__ID__', props.schedule_id);

            const start = info.event.start ?
                info.event.start.toLocaleTimeString([], {
                    hour: '2-digit',
                    minute: '2-digit'
                }) :
                'N/A';

            const end = info.event.end ?
                info.event.end.toLocaleTimeString([], {
                    hour: '2-digit',
                    minute: '2-digit'
                }) :
                'N/A';

            const students = props.students || [];
            const routeMeetingUrl = props.schedule_id && props.session_id
                ? `{{ route('courses.sessions.bbb.join', ['course' => '__COURSE__', 'session' => '__SESSION__']) }}`
                    .replace('__COURSE__', props.schedule_id)
                    .replace('__SESSION__', props.session_id)
                : '';
            const meetingUrl = props.bbb_join_url || props.meeting_url || routeMeetingUrl;
            const safeMeetingUrl = meetingUrl
                ? String(meetingUrl)
                    .replace(/&/g, '&amp;')
                    .replace(/"/g, '&quot;')
                    .replace(/</g, '&lt;')
                    .replace(/>/g, '&gt;')
                : '';

            const studentsHtml = students.length ?
                students.map((student) => {
                    const studentUrl = `{{ route('students.show', '__ID__') }}`.replace('__ID__', student.id);
                    return `<a href="${studentUrl}" target="_blank" class="calendar-event-student">${student.first_name} ${student.last_name}</a>`;
                }).join('') :
                '<span class="ui-muted">No students assigned.</span>';


                let staffUrl = "{{ config('app.HR_URL') }}staffs/" + props.staff_id;
                let adminUrl = "{{ config('app.HR_URL') }}staffs/" + props.admin_id;



            return `
        <div class="calendar-event-modal">
            <div class="calendar-event-modal__meta">
                <div class="calendar-event-modal__item">
                    <span class="calendar-event-modal__label">Teacher</span>
                    <strong class="calendar-event-modal__value"><a href="${staffUrl}" target="_blank" style="text-decoration: none; color: #007bff;">${props.staff_name || 'N/A'}</a></strong>
                </div>

                <div class="calendar-event-modal__item">
                    <span class="calendar-event-modal__label">Admin</span>
                    <strong class="calendar-event-modal__value"><a href="${adminUrl}" target="_blank" style="text-decoration: none; color: #007bff;">${props.admin_name || 'N/A'}</a></strong>
                </div>

                <div class="calendar-event-modal__item">
                    <span class="calendar-event-modal__label">Schedule Type</span>
                    <strong class="calendar-event-modal__value">${props.schedule_type || 'N/A'}</strong>
                </div>

                <div class="calendar-event-modal__item">
                    <span class="calendar-event-modal__label">Session</span>
                    <strong class="calendar-event-modal__value">${props.session_no || 'N/A'}</strong>
                </div>

                <div class="calendar-event-modal__item">
                    <span class="calendar-event-modal__label">${categoryLabel}</span>
                    <strong class="calendar-event-modal__value">${props.category_name || 'N/A'}</strong>
                </div>

                <div class="calendar-event-modal__item">
                    <span class="calendar-event-modal__label">${isTrack ? 'Program' : 'Product'}</span>
                    <strong class="calendar-event-modal__value">${props.track_name || info.event.title || 'N/A'}</strong>
                </div>

                <div class="calendar-event-modal__item">
                    <span class="calendar-event-modal__label">Level</span>
                    <strong class="calendar-event-modal__value">${props.level || 'N/A'}</strong>
                </div>

                <div class="calendar-event-modal__item">
                    <span class="calendar-event-modal__label">Start</span>
                    <strong class="calendar-event-modal__value">${start}</strong>
                </div>

                <div class="calendar-event-modal__item">
                    <span class="calendar-event-modal__label">End</span>
                    <strong class="calendar-event-modal__value">${end}</strong>
                </div>

                <div class="calendar-event-modal__item">
                    <span class="calendar-event-modal__label">Session Link</span>
                    <strong class="calendar-event-modal__value">
                        ${safeMeetingUrl ? `<a href="${safeMeetingUrl}" target="_blank" class="btn btn-sm btn-outline-success">Join Meeting</a>` : 'N/A'}
                    </strong>
                </div>
            </div>

            <div>
                <span class="calendar-event-modal__label">Students</span>
                <div class="calendar-event-students">${studentsHtml}</div>
            </div>

            <div class="d-flex justify-content-end">
                <a href="${detailsUrl}" class="asset-btn asset-btn--primary">Open Full Details</a>
            </div>
        </div>
    `;
        }

        document.addEventListener('DOMContentLoaded', function() {
            const calendarEl = document.getElementById('calendar');
            const eventModal = new bootstrap.Modal(document.getElementById('eventModal'));

            calendar = new FullCalendar.Calendar(calendarEl, {
                initialView: 'dayGridMonth',
                height: 'auto',
                dayMaxEvents: 4,
                headerToolbar: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                },
                eventOrder: 'start,title',
                buttonText: {
                    today: 'Today',
                    month: 'Month',
                    week: 'Week',
                    day: 'Day',
                    list: 'List'
                },
                events: function(fetchInfo, successCallback, failureCallback) {
                    const requestData = {
                        types: selectedTypes.join(','),
                    };
                    @if ($isDemo)
                        requestData.is_demo = true;
                        if (selectedTesterId) {
                            requestData.tester_id = selectedTesterId;
                        }
                    @endif
                    $.ajax({
                        url: "{{ url('/calendar/events') }}",
                        method: 'GET',
                        data: requestData,
                        success: function(data) {
                            successCallback(data.events);
                        },
                        error: function(error) {
                            failureCallback(error);
                        }
                    });
                },
                eventClick: function(info) {
                    // Close any open popovers first
                    const popover = document.querySelector('.fc-popover');
                    if (popover) {
                        popover.remove();
                    }

                    document.getElementById('eventModalBody').innerHTML = buildEventDetailsHtml(info);
                    eventModal.show();
                },
                eventContent: function(arg) {


                    const props = arg.event.extendedProps;
                    // console.log(props);

                    const teacherName = props.staff_name ? `T.${props.staff_name}` : 'T.N/A';

                    const studentName = (props.students && props.students.length) ?
                        `St.${props.students[0].first_name} ${props.students[0].last_name}` :
                        'St.N/A';

                    const adminName = props.admin_name ? `Ad.${props.admin_name}` : 'Ad.N/A';

                    const levelText = props.level ? `Lv.${props.level}` : 'Lv.N/A';
                    const sessionText = props.session_no ? `S.${props.session_no}` : 'S.N/A';
                    const categoryText = props.track_name || '';
                    const demoStartTime = arg.event.start ?
                        arg.event.start.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) :
                        'N/A';
                    const demoEndTime = arg.event.end ?
                        arg.event.end.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) :
                        'N/A';

                    const metaLine = isCalendarDemo
                        ? ` ${demoStartTime} - ${demoEndTime}`.trim()
                        : `${levelText} ${sessionText} ${categoryText}`.trim();

                    return {
                        html: `
            <div class="calendar-event-card">
                <div class="calendar-event-card__line">${teacherName}</div>
                <div class="calendar-event-card__line">${studentName}</div>
                <div class="calendar-event-card__line">${adminName}</div>
                <div class="calendar-event-card__line">${metaLine}</div>
            </div>
        `
                    };
                }
            });

            document.querySelectorAll('.calendar-filter-chip input[type="checkbox"]').forEach((checkbox) => {
                checkbox.addEventListener('change', function() {
                    const type = this.value;
                    const label = this.closest('.calendar-filter-chip');

                    if (this.checked) {
                        if (!selectedTypes.includes(type)) {
                            selectedTypes.push(type);
                        }
                        label.classList.add('is-selected');
                    } else {
                        selectedTypes = selectedTypes.filter((selectedType) => selectedType !==
                            type);
                        label.classList.remove('is-selected');
                    }

                    updateSelectedCount();
                    updateCalendarEvents();
                });
            });

            const testerFilter = document.getElementById('testerFilter');
            const clearTesterFilter = document.getElementById('clearTesterFilter');

            if (testerFilter) {
                testerFilter.addEventListener('change', function() {
                    selectedTesterId = this.value || '';
                    updateCalendarEvents();
                });
            }

            if (clearTesterFilter && testerFilter) {
                clearTesterFilter.addEventListener('click', function() {
                    testerFilter.value = '';
                    selectedTesterId = '';
                    updateCalendarEvents();
                });
            }

            updateSelectedCount();
            calendar.render();
        });
    </script>
@endpush