@props([
    'id' => 'calendar',
    'eventsUrl' => null,
    'events' => null,
    'selectable' => false,
    'dateClickCallback' => null,
    'eventClickCallback' => null,
    'timeZone' => null,
    'slotMinTime' => null,
    'slotMaxTime' => null,
    'showLegend' => false,
    'legendSlots' => [],
    'minHeight' => 'calc(100vh - 220px)',
    'disablePastDates' => false,
    'cardless' => false,
    'prettyEventUi' => false,
])

@push('styles')
<link href="{{ asset('assets/plugins/fullcalendar/main.css') }}" rel="stylesheet">
<style>
    #{{ $id }} {
        min-height: {{ $minHeight }};
    }
    .fc-capsule {
        display: inline-block;
        font-size: 0.75rem;
        line-height: 1.3;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border: 1px solid transparent;
    }
    .fc-capsule--assigned { background-color: #0d6efd; color: #fff; border-color: #0a58ca; }
    .fc-capsule--pending { background-color: #fd7e14; color: #fff; border-color: #e8590c; }
    .fc-capsule--overdue { background-color: #dc3545; color: #fff; border-color: #b02a37; }
    .fc-event.fc-capsule--assigned { background: #0d6efd; border-color: #0a58ca; }
    .fc-event.fc-capsule--pending { background: #fd7e14; border-color: #e8590c; }
    .fc-event.fc-capsule--overdue { background: #dc3545; border-color: #b02a37; }
    .fc .fc-daygrid-event {
        padding: 2px 6px;
        font-size: 0.7rem;
    }
    .fc .fc-daygrid-event-harness {
        margin: 1px 2px;
    }
    .fc .fc-daygrid-day-number {
        font-size: 0.85rem;
        padding: 4px;
    }
    .fc-theme-standard .fc-scrollgrid {
        border-color: #dee2e6;
    }
    .fc .fc-toolbar-title {
        font-size: 1.25rem;
    }
    @if ($selectable)
    #{{ $id }} .fc-daygrid-day { cursor: pointer; }
    @endif
    @if ($disablePastDates)
    /* Past days stay visually muted; do not use pointer-events:none so past meetings remain clickable for view. */
    #{{ $id }} .fc-day-past { cursor: not-allowed; opacity: 0.65; }
    @endif
</style>
@endpush

@if ($showLegend && count($legendSlots) > 0)
<div class="card border-0 shadow-none mb-2">
    <div class="card-body py-2 d-flex flex-wrap align-items-center gap-3">
        @foreach ($legendSlots as $slot)
        <span class="d-inline-flex align-items-center gap-1">
            <span class="fc-capsule {{ $slot['class'] ?? '' }} rounded px-2 py-1 small">{{ $slot['label'] ?? '' }}</span>
        </span>
        @endforeach
    </div>
</div>
@endif

@if ($cardless)
<div id="{{ $id }}" class="w-100"></div>
@else
<div class="card">
    <div class="card-body p-2 p-md-3">
        <div id="{{ $id }}" class="w-100"></div>
    </div>
</div>
@endif

@push('scripts')
<script src="{{ asset('assets/plugins/fullcalendar/main.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('{{ $id }}');
    var eventsSource = @json($eventsUrl);
    var staticEvents = @json($events ?? []);
    var selectable = @json($selectable);
    var dateClickCallback = @json($dateClickCallback);
    var eventClickCallback = @json($eventClickCallback);
    var timeZone = @json($timeZone);
    var slotMinTime = @json($slotMinTime);
    var slotMaxTime = @json($slotMaxTime);
    var disablePastDates = @json($disablePastDates);
    var prettyEventUi = @json($prettyEventUi);

    function isDatePast(date, tz) {
        var now = new Date();
        var todayStr = tz ? now.toLocaleDateString('en-CA', { timeZone: tz }) : (now.getFullYear() + '-' + String(now.getMonth() + 1).padStart(2, '0') + '-' + String(now.getDate()).padStart(2, '0'));
        var dateStr = tz ? date.toLocaleDateString('en-CA', { timeZone: tz }) : (date.getFullYear() + '-' + String(date.getMonth() + 1).padStart(2, '0') + '-' + String(date.getDate()).padStart(2, '0'));
        return dateStr < todayStr;
    }

    var config = {
        initialView: 'dayGridMonth',
        headerToolbar: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth,dayGridWeek,timeGridDay'
        },
        eventDisplay: 'block',
        height: 'auto',
        navLinks: true,
        editable: false,
        selectable: selectable,
        nowIndicator: true,
        dayMaxEvents: 8,
        moreLinkClick: 'popover'
    };

    if (disablePastDates) {
        config.dayCellClassNames = function(arg) {
            return isDatePast(arg.date, timeZone) ? ['fc-day-past'] : [];
        };
    }

    if (selectable && disablePastDates) {
        config.selectAllow = function(selectInfo) {
            return !isDatePast(selectInfo.start, timeZone);
        };
    }

    if (timeZone && typeof timeZone === 'string') {
        config.timeZone = timeZone;
    }
    if (slotMinTime && typeof slotMinTime === 'string') {
        config.slotMinTime = slotMinTime;
    }
    if (slotMaxTime && typeof slotMaxTime === 'string') {
        config.slotMaxTime = slotMaxTime;
    }

    if (staticEvents && Array.isArray(staticEvents) && staticEvents.length > 0) {
        config.events = staticEvents;
    } else if (eventsSource && typeof eventsSource === 'string') {
        config.events = eventsSource;
    }

    if (selectable && dateClickCallback && typeof window[dateClickCallback] === 'function') {
        config.dateClick = function(info) {
            if (disablePastDates && isDatePast(info.date, timeZone)) {
                info.jsEvent.preventDefault();
                return;
            }
            info.jsEvent.preventDefault();
            var d = info.date;
            var dateStr = info.dateStr;
            var startTime = null;
            var endTime = null;
            if (d && info.allDay === false) {
                var y, m, day, h, min, eh, emin;
                if (timeZone) {
                    y = d.getUTCFullYear();
                    m = d.getUTCMonth() + 1;
                    day = d.getUTCDate();
                    h = d.getUTCHours();
                    min = d.getUTCMinutes();
                    var end = new Date(d.getTime() + 60 * 60 * 1000);
                    eh = end.getUTCHours();
                    emin = end.getUTCMinutes();
                } else {
                    y = d.getFullYear();
                    m = d.getMonth() + 1;
                    day = d.getDate();
                    h = d.getHours();
                    min = d.getMinutes();
                    var end = new Date(d.getTime() + 60 * 60 * 1000);
                    eh = end.getHours();
                    emin = end.getMinutes();
                }
                dateStr = y + '-' + (m < 10 ? '0' : '') + m + '-' + (day < 10 ? '0' : '') + day;
                startTime = (h < 10 ? '0' : '') + h + ':' + (min < 10 ? '0' : '') + min;
                endTime = (eh < 10 ? '0' : '') + eh + ':' + (emin < 10 ? '0' : '') + emin;
            } else if (d && info.allDay === true) {
                var now = new Date();
                var h, min, eh, emin;
                if (timeZone && typeof timeZone === 'string') {
                    var formatter = new Intl.DateTimeFormat('en-CA', { timeZone: timeZone, hour: '2-digit', minute: '2-digit', hour12: false });
                    var parts = formatter.formatToParts(now);
                    var hourPart = parts.find(function(p) { return p.type === 'hour'; });
                    var minPart = parts.find(function(p) { return p.type === 'minute'; });
                    h = hourPart ? parseInt(hourPart.value, 10) : now.getHours();
                    min = minPart ? parseInt(minPart.value, 10) : now.getMinutes();
                    var endNow = new Date(now.getTime() + 60 * 60 * 1000);
                    var endParts = formatter.formatToParts(endNow);
                    var ehPart = endParts.find(function(p) { return p.type === 'hour'; });
                    var emPart = endParts.find(function(p) { return p.type === 'minute'; });
                    eh = ehPart ? parseInt(ehPart.value, 10) : (h + 1) % 24;
                    emin = emPart ? parseInt(emPart.value, 10) : min;
                } else {
                    h = now.getHours();
                    min = now.getMinutes();
                    var endNow = new Date(now.getTime() + 60 * 60 * 1000);
                    eh = endNow.getHours();
                    emin = endNow.getMinutes();
                }
                startTime = (h < 10 ? '0' : '') + h + ':' + (min < 10 ? '0' : '') + min;
                endTime = (eh < 10 ? '0' : '') + eh + ':' + (emin < 10 ? '0' : '') + emin;
                if (!dateStr || dateStr.length < 10) {
                    dateStr = d.getFullYear() + '-' + (d.getMonth() + 1 < 10 ? '0' : '') + (d.getMonth() + 1) + '-' + (d.getDate() < 10 ? '0' : '') + d.getDate();
                }
            }
            window[dateClickCallback](dateStr, startTime, endTime);
        };
    }

    if (eventClickCallback && typeof window[eventClickCallback] === 'function') {
        config.eventClick = function(info) {
            info.jsEvent.preventDefault();
            var eventId = info.event.id;
            window[eventClickCallback](eventId);
        };
    } else if (typeof config.eventClick === 'undefined') {
        config.eventClick = function(info) {
            info.jsEvent.preventDefault();
        };
    }

    if (prettyEventUi) {
        config.eventDidMount = function(info) {
            info.el.classList.add('fc-event-pretty');
            var props = info.event.extendedProps || {};
            var schemeTip = props.schemeNamesTooltip || '';
            var subj = info.event.title || '';
            if (schemeTip) {
                info.el.setAttribute('title', schemeTip + (subj ? '\n\n' + subj : ''));
            } else if (subj) {
                info.el.setAttribute('title', subj);
            }
        };
    }

    var calendar = new FullCalendar.Calendar(calendarEl, config);
    window['calendarInstance_{{ $id }}'] = calendar;
    calendar.render();
});
</script>
@endpush