@props([
    'apiBase',
    'csrf',
    'projectId' => null,
    'filterParams' => [],
])

<div
    class="task-calendar rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
    x-data="taskCalendar({{ Js::from([
        'apiBase' => $apiBase,
        'csrf' => $csrf,
        'projectId' => $projectId,
        'filterParams' => $filterParams,
        'initialMonth' => now()->format('Y-m'),
    ]) }})"
    x-init="fetchMonth()"
>
    {{-- Navigation --}}
    <div class="mb-4 flex flex-wrap items-center justify-between gap-2">
        <div class="flex items-center gap-2">
            <button type="button" @click="prevMonth()" class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50">&larr; Previous</button>
            <span class="min-w-[140px] text-center text-lg font-semibold text-gray-900" x-text="monthLabel"></span>
            <button type="button" @click="nextMonth()" class="rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50">Next &rarr;</button>
        </div>
        <button type="button" @click="goToday()" class="rounded-md border border-indigo-600 bg-indigo-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-indigo-700">Today</button>
    </div>

    <div x-show="loading" class="py-8 text-center text-gray-500">Loading calendar…</div>

    {{-- 7-column grid: Sun–Sat --}}
    <div x-show="!loading" class="grid grid-cols-7 gap-px rounded-lg border border-gray-200 bg-gray-200">
        <template x-for="dayName in dayNames" :key="dayName">
            <div class="bg-gray-100 px-2 py-1.5 text-center text-xs font-medium text-gray-600" x-text="dayName"></div>
        </template>
        <template x-for="cell in gridCells" :key="cell.key">
            <div
                x-show="cell.dateStr"
                class="min-h-[100px] bg-white p-1"
                :class="{
                    'bg-red-50': cell.isOverdue,
                    'bg-blue-50 ring-1 ring-blue-200': cell.isToday,
                }"
            >
                <div class="flex items-center justify-between">
                    <button
                        type="button"
                        @click="selectDate(cell.dateStr)"
                        class="text-left text-sm font-medium"
                        :class="cell.isToday ? 'text-blue-700' : (cell.isOverdue ? 'text-red-700' : 'text-gray-900')"
                        x-text="cell.dayNum"
                    ></button>
                </div>
                <div class="mt-1 space-y-0.5">
                    <template x-for="(task, i) in (cell.tasks || []).slice(0, 3)" :key="task.id">
                        <button
                            type="button"
                            @click.stop="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: task.id, projectId: task.project_id || projectId } }))"
                            class="flex w-full items-center gap-1 rounded border-l-2 bg-white px-1.5 py-0.5 text-left text-xs shadow-sm hover:bg-gray-50"
                            :class="{
                                'border-gray-400': task.priority === 'low',
                                'border-blue-500': task.priority === 'medium',
                                'border-orange-500': task.priority === 'high',
                                'border-red-500': task.priority === 'urgent',
                            }"
                        >
                            <span class="min-w-0 flex-1 truncate" x-text="task.title"></span>
                        </button>
                    </template>
                    <button
                        x-show="(cell.tasks || []).length > 3"
                        type="button"
                        @click="selectDate(cell.dateStr)"
                        class="w-full rounded px-1.5 py-0.5 text-left text-xs font-medium text-indigo-600 hover:bg-indigo-50"
                        x-text="'+' + ((cell.tasks || []).length - 3) + ' more'"
                    ></button>
                </div>
            </div>
            <div x-show="!cell.dateStr" class="min-h-[100px] bg-gray-100 p-1" :aria-hidden="true"></div>
        </template>
    </div>

    {{-- Date detail popover --}}
    <div
        x-show="selectedDate"
        x-cloak
        class="fixed inset-0 z-40"
        @click.self="selectedDate = null"
    >
        <div
            x-show="selectedDate"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            class="fixed inset-0 bg-black/30"
        ></div>
        <div
            x-show="selectedDate"
            x-transition:enter="transition ease-out duration-200"
            x-transition:enter-start="opacity-0 scale-95"
            x-transition:enter-end="opacity-100 scale-100"
            class="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg border border-gray-200 bg-white p-4 shadow-xl"
            @click.stop
        >
            <div class="mb-3 flex items-center justify-between">
                <h3 class="text-lg font-semibold text-gray-900" x-text="selectedDateLabel"></h3>
                <button type="button" @click="selectedDate = null" class="rounded p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600">
                    <svg class="h-5 w-5" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                </button>
            </div>
            <ul class="max-h-80 space-y-1 overflow-y-auto">
                <template x-for="task in (selectedDateTasks || [])" :key="task.id">
                    <li>
                        <button
                            type="button"
                            @click="window.dispatchEvent(new CustomEvent('open-task-panel', { bubbles: true, detail: { taskId: task.id, projectId: task.project_id || projectId } })); selectedDate = null"
                            class="flex w-full items-center gap-2 rounded-md px-2 py-2 text-left hover:bg-gray-100"
                        >
                            <span class="shrink-0 w-1 rounded-full self-stretch"
                                :class="{ 'bg-gray-400': task.priority === 'low', 'bg-blue-500': task.priority === 'medium', 'bg-orange-500': task.priority === 'high', 'bg-red-500': task.priority === 'urgent' }"></span>
                            <span class="min-w-0 flex-1 truncate font-medium text-gray-900" x-text="task.title"></span>
                            <span x-show="task.project?.name" class="shrink-0 text-xs text-gray-500" x-text="task.project?.name"></span>
                        </button>
                    </li>
                </template>
                <li x-show="selectedDate && (!selectedDateTasks || selectedDateTasks.length === 0)" class="py-4 text-center text-sm text-gray-500">No tasks this day.</li>
            </ul>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('taskCalendar', (config) => ({
        apiBase: config.apiBase,
        csrf: config.csrf,
        projectId: config.projectId,
        filterParams: config.filterParams || {},
        month: config.initialMonth || new Date().toISOString().slice(0, 7),
        data: {},
        loading: true,
        selectedDate: null,
        dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],

        get monthLabel() {
            const [y, m] = this.month.split('-');
            const d = new Date(parseInt(y, 10), parseInt(m, 10) - 1, 1);
            return d.toLocaleDateString(undefined, { month: 'long', year: 'numeric' });
        },

        get gridCells() {
            const [y, m] = this.month.split('-');
            const year = parseInt(y, 10);
            const month = parseInt(m, 10) - 1;
            const first = new Date(year, month, 1);
            const last = new Date(year, month + 1, 0);
            const daysInMonth = last.getDate();
            const firstDay = first.getDay();
            const today = new Date();
            today.setHours(0, 0, 0, 0);

            const cells = [];
            for (let i = 0; i < firstDay; i++) {
                cells.push({ key: 'pad-' + i, dateStr: null, dayNum: '', tasks: [], isOverdue: false, isToday: false });
            }
            for (let d = 1; d <= daysInMonth; d++) {
                const dateStr = this.month + '-' + String(d).padStart(2, '0');
                const cellDate = new Date(year, month, d);
                cellDate.setHours(0, 0, 0, 0);
                const isToday = cellDate.getTime() === today.getTime();
                const isOverdue = !isToday && cellDate < today;
                cells.push({
                    key: dateStr,
                    dateStr,
                    dayNum: d,
                    tasks: this.data[dateStr] || [],
                    isOverdue,
                    isToday,
                });
            }
            const remainder = (7 - (cells.length % 7)) % 7;
            for (let i = 0; i < remainder; i++) {
                cells.push({ key: 'pad-end-' + i, dateStr: null, dayNum: '', tasks: [], isOverdue: false, isToday: false });
            }
            return cells;
        },

        get selectedDateLabel() {
            if (!this.selectedDate) return '';
            const d = new Date(this.selectedDate + 'T12:00:00');
            return d.toLocaleDateString(undefined, { weekday: 'long', month: 'long', day: 'numeric', year: 'numeric' });
        },

        get selectedDateTasks() {
            return this.selectedDate ? (this.data[this.selectedDate] || []) : [];
        },

        buildQueryString() {
            const params = new URLSearchParams();
            params.set('month', this.month);
            if (this.projectId) params.set('project_id', this.projectId);
            (this.filterParams.status || []).forEach(s => params.append('status[]', s));
            (this.filterParams.priority || []).forEach(p => params.append('priority[]', p));
            if (this.filterParams.assignee) params.set('assignee', this.filterParams.assignee);
            (this.filterParams.tag_ids || []).forEach(t => params.append('tag_ids[]', t));
            if (this.filterParams.q) params.set('q', this.filterParams.q);
            return params.toString();
        },

        async fetchMonth() {
            this.loading = true;
            try {
                const qs = this.buildQueryString();
                const r = await fetch(`${this.apiBase}/tasks/calendar?${qs}`, { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' });
                const json = await r.json();
                if (r.ok && json.data) {
                    this.data = json.data;
                    if (json.month) this.month = json.month;
                }
            } finally {
                this.loading = false;
            }
        },

        prevMonth() {
            const [y, m] = this.month.split('-');
            const d = new Date(parseInt(y, 10), parseInt(m, 10) - 2, 1);
            this.month = d.toISOString().slice(0, 7);
            this.fetchMonth();
        },

        nextMonth() {
            const [y, m] = this.month.split('-');
            const d = new Date(parseInt(y, 10), parseInt(m, 10), 1);
            this.month = d.toISOString().slice(0, 7);
            this.fetchMonth();
        },

        goToday() {
            this.month = new Date().toISOString().slice(0, 7);
            this.fetchMonth();
        },

        selectDate(dateStr) {
            this.selectedDate = dateStr;
        },
    }));
});
</script>
@endpush