@php
    $projectId = $projectId ?? null;
@endphp
<div
    x-data="taskPanel({{ Js::from(['apiBase' => url('/api/v1'), 'csrf' => csrf_token(), 'projectId' => $projectId]) }})"
    x-on:open-task-panel.window="openPanel($event.detail.taskId, $event.detail.projectId)"
    x-on:keydown.escape.window="isOpen && close()"
    x-show="isOpen"
    x-cloak
    class="fixed inset-0 z-50 overflow-hidden"
    aria-labelledby="task-panel-title"
>
    <div class="absolute inset-0 bg-gray-500/75" x-show="isOpen" x-transition @click="close()"></div>
    <div class="fixed inset-y-0 right-0 w-full max-w-lg bg-white shadow-xl flex flex-col" x-show="isOpen" x-transition:enter="transform transition ease-out duration-200" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0">
        <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
            <h2 id="task-panel-title" class="text-lg font-semibold text-gray-900">Task</h2>
            <button type="button" @click="close()" class="rounded p-1 text-gray-400 hover:bg-gray-100">✕</button>
        </div>
        <div class="flex-1 min-h-0 overflow-y-auto p-4">
            <p x-show="loading" class="text-center text-gray-500 py-8">Loading…</p>
            <template x-if="!loading">
                <div>
                    <p x-show="!task" class="text-sm text-gray-500">Task not found or you don't have access to it.</p>
                    <template x-if="task">
                <div class="space-y-4">
                    <div>
                        <label class="block text-xs font-medium text-gray-500">Title</label>
                        <input type="text" x-model="task.title" @blur="saveTask()" class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm" />
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500">Description</label>
                        <textarea x-model="task.description" @blur="saveTask()" rows="4" class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm"></textarea>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-500">Status</label>
                            <select x-model="task.status" @change="saveTask()" class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
                                <option value="todo">todo</option>
                                <option value="in_progress">in progress</option>
                                <option value="review">review</option>
                                <option value="done">done</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500">Priority</label>
                            <select x-model="task.priority" @change="saveTask()" class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
                                <option value="low">low</option>
                                <option value="medium">medium</option>
                                <option value="high">high</option>
                                <option value="urgent">urgent</option>
                            </select>
                        </div>
                    </div>
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label class="block text-xs font-medium text-gray-500">Due date</label>
                            <input type="date" x-model="task.due_date" @change="saveTask()" class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm" />
                        </div>
                        <div>
                            <label class="block text-xs font-medium text-gray-500">Due time</label>
                            <input type="time" x-model="task.due_time" @change="saveTask()" class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm" />
                        </div>
                    </div>
                    <div class="border-t border-gray-200 pt-4">
                        <label class="block text-xs font-medium text-gray-500 mb-2">Repeat</label>
                        <div class="flex flex-wrap gap-2 items-center">
                            <select x-model="recurrenceType" @change="applyRecurrenceType(); saveTask()" class="rounded border border-gray-300 px-3 py-2 text-sm">
                                <option value="">None</option>
                                <option value="daily">Daily</option>
                                <option value="weekly">Weekly</option>
                                <option value="monthly">Monthly</option>
                                <option value="custom">Custom</option>
                            </select>
                            <template x-if="recurrenceType === 'weekly'">
                                <div class="flex gap-1 flex-wrap" @click.stop>
                                    <template x-for="(label, dow) in ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']" :key="dow">
                                        <label class="flex items-center gap-0.5 text-xs"><input type="checkbox" :checked="(task.recurrence_rule?.days_of_week || []).includes(parseInt(dow))" @change="toggleRecurrenceDay(parseInt(dow)); saveTask()" class="rounded border-gray-300" /><span x-text="label"></span></label>
                                    </template>
                                </div>
                            </template>
                            <template x-if="recurrenceType === 'monthly'">
                                <span class="flex items-center gap-1 text-sm">On day <input type="number" min="1" max="31" :value="task.recurrence_rule?.day_of_month || 1" @change="setRecurrenceDayOfMonth($event.target.value); saveTask()" class="w-14 rounded border border-gray-300 px-2 py-1 text-sm" /></span>
                            </template>
                            <template x-if="recurrenceType === 'custom'">
                                <span class="flex items-center gap-1 text-sm">Every <input type="number" min="1" max="365" :value="task.recurrence_rule?.interval || 1" @change="setRecurrenceInterval($event.target.value); saveTask()" class="w-14 rounded border border-gray-300 px-2 py-1 text-sm" /> <select :value="task.recurrence_rule?.unit || 'days'" @change="setRecurrenceUnit($event.target.value); saveTask()" class="rounded border border-gray-300 px-2 py-1 text-sm"><option value="days">days</option><option value="weeks">weeks</option><option value="months">months</option></select></span>
                            </template>
                        </div>
                        <div class="mt-2 flex flex-wrap gap-2 items-center" x-show="recurrenceType">
                            <span class="text-xs text-gray-500">Ends:</span>
                            <select x-model="recurrenceEndType" @change="applyRecurrenceEnd(); saveTask()" class="rounded border border-gray-300 px-2 py-1 text-sm">
                                <option value="never">Never</option>
                                <option value="on_date">On date</option>
                                <option value="after">After N occurrences</option>
                            </select>
                            <input x-show="recurrenceEndType === 'on_date'" type="date" :value="task.recurrence_rule?.end_date || ''" @change="setRecurrenceEndDate($event.target.value); saveTask()" class="rounded border border-gray-300 px-2 py-1 text-sm" />
                            <template x-if="recurrenceEndType === 'after'">
                                <span class="flex items-center gap-1 text-sm"><input type="number" min="1" max="99" :value="recurrenceOccurrences" @change="setRecurrenceOccurrences($event.target.value); saveTask()" class="w-14 rounded border border-gray-300 px-2 py-1 text-sm" /> occurrences</span>
                            </template>
                        </div>
                    </div>
                    <div>
                        <label class="block text-xs font-medium text-gray-500">Assignees</label>
                        <div class="mt-1 flex flex-wrap gap-1">
                            <template x-for="a in (task.assignees || [])" :key="a.user_id">
                                <span class="inline-flex items-center gap-1 rounded bg-gray-100 px-2 py-0.5 text-xs">
                                    <span x-text="a.user?.name"></span>
                                    <button type="button" @click="removeAssignee(a.user_id)" class="text-gray-400 hover:text-red-600" title="Remove assignee">×</button>
                                </span>
                            </template>
                        </div>
                        <div class="mt-2 relative" x-data="{ assigneeOpen: false }">
                            <button type="button" @click="assigneeOpen = !assigneeOpen; assignableUsers.length || fetchAssignableUsers()" class="text-xs font-medium text-indigo-600 hover:text-indigo-800">+ Add assignee</button>
                            <div x-show="assigneeOpen" @click.outside="assigneeOpen = false" x-cloak class="absolute left-0 top-full z-20 mt-1 w-48 rounded border border-gray-200 bg-white py-1 shadow-lg max-h-48 overflow-auto">
                                <template x-for="u in assignableUsers.filter(u => !(task.assignees || []).some(a => a.user_id === u.id))" :key="u.id">
                                    <button type="button" @click="addAssignee(u.id); assigneeOpen = false" class="block w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50" x-text="u.name"></button>
                                </template>
                                <p x-show="assignableUsers.length === 0 && !assignableUsersLoading" class="px-3 py-2 text-xs text-gray-500">No users to assign.</p>
                                <p x-show="assignableUsersLoading" class="px-3 py-2 text-xs text-gray-500">Loading…</p>
                            </div>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-4">
                        <label class="block text-xs font-medium text-gray-500 mb-2">Dependencies</label>
                        <p class="text-xs text-gray-500 mb-1">Blocked by (must be done first)</p>
                        <ul class="space-y-1 mb-2">
                            <template x-for="b in dependencyBlockedBy" :key="b.task_id">
                                <li class="flex items-center justify-between gap-2 rounded bg-gray-50 px-2 py-1.5 text-sm">
                                    <span class="truncate" x-text="b.title"></span>
                                    <span class="shrink-0 text-xs capitalize" x-text="(b.status || '').replace('_',' ')"></span>
                                    <button type="button" @click="removeDependency(b.task_id)" class="shrink-0 text-red-500 hover:underline text-xs">Remove</button>
                                </li>
                            </template>
                        </ul>
                        <div class="relative mb-3" x-data="{ open: false }">
                            <input type="text" placeholder="Add task that must be done first…" @focus="open = true; dependencySearchQuery = ''; fetchDependencySearch()" @input="fetchDependencySearch()" x-model="dependencySearchQuery" class="w-full rounded border border-gray-300 px-2 py-1.5 text-sm" />
                            <div x-show="open" @click.outside="open = false" x-cloak class="absolute left-0 right-0 top-full z-20 mt-1 max-h-48 overflow-auto rounded border bg-white shadow-lg">
                                <template x-for="t in dependencySearchResults" :key="t.id">
                                    <button type="button" @click="addDependency(t.id); open = false; dependencySearchQuery = ''" class="block w-full px-3 py-2 text-left text-sm hover:bg-gray-50" x-text="t.title"></button>
                                </template>
                                <p x-show="dependencySearchResults.length === 0 && dependencySearchQuery.length >= 2" class="px-3 py-2 text-sm text-gray-500">No tasks found.</p>
                            </div>
                        </div>
                        <p class="text-xs text-gray-500 mb-1">Blocks (tasks waiting on this)</p>
                        <ul class="space-y-1">
                            <template x-for="b in dependencyBlocks" :key="b.task_id">
                                <li class="flex items-center gap-2 rounded bg-gray-50 px-2 py-1.5 text-sm">
                                    <span class="truncate" x-text="b.title"></span>
                                    <span class="shrink-0 text-xs capitalize" x-text="(b.status || '').replace('_',' ')"></span>
                                </li>
                            </template>
                            <p x-show="dependencyBlocks.length === 0" class="text-xs text-gray-500 py-1">None</p>
                        </ul>
                    </div>

                    <div class="border-t border-gray-200 pt-4">
                        <label class="block text-xs font-medium text-gray-500 mb-2">Notifications</label>
                        <div class="flex items-center gap-2 flex-wrap">
                            <span class="text-gray-500" title="Notification state">🔔</span>
                            <template x-if="notificationStatus && notificationStatus.paused">
                                <div class="flex items-center gap-2">
                                    <span class="text-sm text-amber-700" x-text="'Paused until ' + (notificationStatus.indefinite ? 'indefinitely' : formatPausedUntil(notificationStatus.paused_until))"></span>
                                    <button type="button" @click="resumeNotifications()" class="rounded border border-gray-300 px-2 py-1 text-xs hover:bg-gray-50">Resume</button>
                                </div>
                            </template>
                            <template x-if="notificationStatus && !notificationStatus.paused">
                                <div class="relative" x-data="{ open: false }">
                                    <button type="button" @click="open = !open" class="rounded border border-gray-300 px-2 py-1 text-xs hover:bg-gray-50">Pause notifications</button>
                                    <div x-show="open" @click.outside="open = false" x-cloak class="absolute left-0 top-full z-10 mt-1 w-48 rounded border border-gray-200 bg-white py-1 shadow-lg">
                                        <button type="button" @click="pauseNotifications('1h'); open = false" class="block w-full px-3 py-1.5 text-left text-sm hover:bg-gray-100">1 hour</button>
                                        <button type="button" @click="pauseNotifications('4h'); open = false" class="block w-full px-3 py-1.5 text-left text-sm hover:bg-gray-100">4 hours</button>
                                        <button type="button" @click="pauseNotifications('tomorrow'); open = false" class="block w-full px-3 py-1.5 text-left text-sm hover:bg-gray-100">Until tomorrow (9 AM)</button>
                                        <button type="button" @click="pauseNotifications('next_week'); open = false" class="block w-full px-3 py-1.5 text-left text-sm hover:bg-gray-100">Until next week (Monday 9 AM)</button>
                                        <button type="button" @click="pauseNotifications('indefinite'); open = false" class="block w-full px-3 py-1.5 text-left text-sm hover:bg-gray-100">Indefinitely</button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-4">
                        <label class="block text-xs font-medium text-gray-500 mb-2">Time</label>
                        <p class="text-xs text-gray-500 mb-2">Total logged: <span x-text="formatDuration(totalMinutes)"></span></p>
                        <template x-if="runningOnThisTask">
                            <div class="flex items-center gap-2 mb-3 rounded bg-amber-50 border border-amber-200 px-3 py-2">
                                <span class="text-sm font-medium text-amber-800">⏱ <span x-text="formatElapsed(runningOnThisTask)"></span></span>
                                <button type="button" @click="stopTimer()" class="ml-auto rounded bg-amber-600 px-2 py-1 text-xs font-medium text-white hover:bg-amber-700">Stop</button>
                            </div>
                        </template>
                        <template x-if="!runningOnThisTask">
                            <button type="button" @click="startTimer()" class="mb-3 rounded border border-gray-300 px-3 py-1.5 text-sm hover:bg-gray-50">Start Timer</button>
                        </template>
                        <div class="mb-3" x-data="{ logTimeOpen: false }">
                            <button type="button" @click="logTimeOpen = !logTimeOpen" class="text-sm text-indigo-600 hover:text-indigo-800">Log Time</button>
                            <div x-show="logTimeOpen" x-cloak class="mt-2 rounded border border-gray-200 bg-gray-50 p-3 space-y-2">
                                <div class="flex gap-2 items-center">
                                    <input type="number" min="0" max="999" x-model.number="logTimeHours" placeholder="H" class="w-14 rounded border border-gray-300 px-2 py-1 text-sm" />
                                    <span class="text-gray-500">:</span>
                                    <input type="number" min="0" max="59" x-model.number="logTimeMinutes" placeholder="M" class="w-14 rounded border border-gray-300 px-2 py-1 text-sm" />
                                </div>
                                <input type="text" x-model="logTimeNote" placeholder="Note (optional)" class="w-full rounded border border-gray-300 px-2 py-1 text-sm" />
                                <div class="flex gap-2">
                                    <button type="button" @click="logTimeManual(); logTimeOpen = false" :disabled="!(logTimeHours > 0 || logTimeMinutes > 0)" class="rounded bg-indigo-600 px-2 py-1 text-xs text-white hover:bg-indigo-700 disabled:opacity-50">Add</button>
                                    <button type="button" @click="logTimeOpen = false" class="rounded border border-gray-300 px-2 py-1 text-xs">Cancel</button>
                                </div>
                            </div>
                        </div>
                        <div class="space-y-2 max-h-40 overflow-y-auto">
                            <template x-for="e in timeEntries" :key="e.id">
                                <div class="flex items-center justify-between gap-2 rounded border border-gray-100 bg-gray-50 px-2 py-1.5 text-sm">
                                    <div class="min-w-0 flex-1">
                                        <span class="text-gray-600" x-text="e.user?.name || '—'"></span>
                                        <span class="text-gray-400 text-xs ml-1" x-text="formatActivityDate(e.created_at)"></span>
                                        <span class="font-medium text-gray-800 ml-1" x-text="formatDuration(e.duration_minutes)"></span>
                                        <span x-show="e.note" class="block text-xs text-gray-500 truncate" x-text="e.note"></span>
                                    </div>
                                    <button type="button" @click="deleteTimeEntry(e.id)" class="shrink-0 text-red-500 hover:text-red-700 text-xs">Delete</button>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-4">
                        <label class="block text-xs font-medium text-gray-500 mb-2">Comments</label>
                        <div class="space-y-3 max-h-48 overflow-y-auto">
                            <template x-for="c in comments" :key="c.id">
                                <div class="flex gap-2 text-sm">
                                    <img x-show="c.user?.avatar_url" :src="c.user.avatar_url" class="w-8 h-8 rounded-full flex-shrink-0" alt="" />
                                    <span x-show="!c.user?.avatar_url" class="w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center flex-shrink-0 text-xs text-gray-600" x-text="(c.user?.name || '?').charAt(0)"></span>
                                    <div class="flex-1 min-w-0">
                                        <div class="flex items-center gap-2 flex-wrap">
                                            <span class="font-medium text-gray-900" x-text="c.user?.name"></span>
                                            <span class="text-gray-400 text-xs" x-text="formatActivityDate(c.created_at)"></span>
                                            <span class="text-xs px-1.5 py-0.5 rounded bg-gray-100 text-gray-600 capitalize" x-text="c.source"></span>
                                            <button type="button" @click="deleteComment(c.id)" class="text-red-500 hover:underline text-xs ml-auto">Delete</button>
                                        </div>
                                        <div class="mt-0.5 text-gray-700 comment-body" x-html="renderMarkdown(c.body)"></div>
                                    </div>
                                </div>
                            </template>
                        </div>
                        <div class="mt-2 flex gap-2">
                            <textarea x-model="newCommentBody" @keydown.meta.enter="postComment()" @keydown.ctrl.enter="postComment()" rows="2" placeholder="Write a comment…" class="flex-1 rounded border border-gray-300 px-3 py-2 text-sm"></textarea>
                            <button type="button" @click="postComment()" :disabled="postingComment || !newCommentBody?.trim()" class="self-end rounded bg-gray-800 text-white px-3 py-2 text-sm disabled:opacity-50">Post</button>
                        </div>
                    </div>

                    <div class="border-t border-gray-200 pt-4">
                        <label class="block text-xs font-medium text-gray-500 mb-2">Attachments</label>
                        <div class="space-y-2">
                            <template x-for="a in attachments" :key="a.id">
                                <div class="flex items-center gap-2 text-sm border border-gray-200 rounded p-2">
                                    <template x-if="isImage(a.mime_type)">
                                        <img :src="a.download_url + '?inline=1'" class="w-12 h-12 object-cover rounded flex-shrink-0" alt="" />
                                    </template>
                                    <span x-show="!isImage(a.mime_type)" class="w-10 h-10 rounded bg-gray-100 flex items-center justify-center text-gray-500 text-lg flex-shrink-0">📎</span>
                                    <div class="flex-1 min-w-0">
                                        <a :href="a.download_url" target="_blank" rel="noopener" class="text-blue-600 hover:underline truncate block" x-text="a.file_name"></a>
                                        <span class="text-gray-400 text-xs" x-text="formatFileSize(a.file_size)"></span>
                                    </div>
                                    <button type="button" @click="downloadAttachment(a)" class="text-gray-500 hover:text-gray-700 text-xs">Download</button>
                                    <button type="button" @click="deleteAttachment(a.id)" class="text-red-500 hover:underline text-xs">Remove</button>
                                </div>
                            </template>
                        </div>
                        <label class="inline-block mt-2 rounded border border-gray-300 px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50">
                            <input type="file" class="hidden" accept=".jpg,.jpeg,.png,.gif,.webp,.pdf,.doc,.docx,.xls,.xlsx,.zip" @change="onAttachmentInput($event)">
                            <span x-text="uploadingAttachment ? 'Uploading…' : 'Attach file'"></span>
                        </label>
                    </div>

                    <div class="border-t border-gray-200 pt-4">
                        <label class="block text-xs font-medium text-gray-500 mb-2">Activity</label>
                        <div class="space-y-2 text-sm">
                            <template x-for="a in activities" :key="a.id">
                                <div class="flex gap-2">
                                    <span class="text-gray-400 text-xs flex-shrink-0 w-16" x-text="formatActivityDate(a.created_at)"></span>
                                    <p class="text-gray-700" x-text="a.message"></p>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div>
                        <label class="block text-xs font-medium text-gray-500">Move to list</label>
                        <select @change="moveList($event.target.value)" class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm">
                            <template x-for="l in lists" :key="l.id">
                                <option :value="l.id" :selected="l.id === task.task_list_id" x-text="l.name"></option>
                            </template>
                        </select>
                    </div>
                    <div class="flex gap-2 pt-2 border-t flex-wrap">
                        <button type="button" @click="saveAsTemplateOpen = true" class="rounded border border-gray-300 px-3 py-1.5 text-sm">Save as Template</button>
                        <button type="button" @click="duplicateTask()" class="rounded border border-gray-300 px-3 py-1.5 text-sm">Duplicate</button>
                        <button type="button" @click="archiveTask()" class="rounded border border-amber-300 text-amber-700 px-3 py-1.5 text-sm">Archive</button>
                    </div>
                    <div x-show="saveAsTemplateOpen" x-cloak class="fixed inset-0 z-[60] flex items-center justify-center bg-black/40" @click.self="saveAsTemplateOpen = false">
                        <div class="w-full max-w-sm rounded-lg bg-white p-4 shadow-xl" @click.stop>
                            <h3 class="text-lg font-semibold text-gray-900">Save as Template</h3>
                            <p class="mt-1 text-sm text-gray-500">Create a reusable template from this task and its subtasks.</p>
                            <input type="text" x-model="saveAsTemplateName" placeholder="Template name" class="mt-3 w-full rounded border border-gray-300 px-3 py-2 text-sm" @keydown.enter="saveAsTemplate()" />
                            <input type="text" x-model="saveAsTemplateDescription" placeholder="Description (optional)" class="mt-2 w-full rounded border border-gray-300 px-3 py-2 text-sm" @keydown.enter="saveAsTemplate()" />
                            <p x-show="saveAsTemplateError" x-text="saveAsTemplateError" class="mt-2 text-sm text-red-600"></p>
                            <div class="mt-4 flex justify-end gap-2">
                                <button type="button" @click="saveAsTemplateOpen = false; saveAsTemplateError = ''" class="rounded border border-gray-300 px-3 py-1.5 text-sm">Cancel</button>
                                <button type="button" @click="saveAsTemplate()" :disabled="saveAsTemplateSaving || !saveAsTemplateName?.trim()" class="rounded bg-indigo-600 px-3 py-1.5 text-sm text-white hover:bg-indigo-700 disabled:opacity-50">Save</button>
                            </div>
                        </div>
                    </div>
                </div>
                    </template>
                </div>
            </template>
        </div>
    </div>
</div>