@if ($processScreen !== '')
    <div class="process-dialog fixed inset-0 z-[60] flex items-start justify-center p-4 sm:p-6" wire:key="process-dialog"
        x-data="{
            previousFocus: null,
            previousOverflow: '',
            init() {
                this.previousFocus = document.activeElement;
                this.previousOverflow = document.body.style.overflow;
                document.body.style.overflow = 'hidden';
                this.focusHeader();
                this.$watch('$wire.processScreen', () => this.focusHeader());
            },
            focusHeader() {
                this.$nextTick(() => this.$el.querySelector('[data-autofocus]')?.focus({ preventScroll: true }));
            },
            destroy() {
                document.body.style.overflow = this.previousOverflow;
                if (this.previousFocus?.isConnected) this.previousFocus.focus();
            },
            close() {
                if (['list', 'detail'].includes($wire.processScreen)) $wire.closeProcessModal();
                else $wire.cancelProcessForm();
            },
            trap(event) {
                const items = [...this.$el.querySelectorAll('button, input, select, textarea, [tabindex]')].filter(el => !el.disabled && el.offsetParent !== null);
                const first = items[0],
                    last = items[items.length - 1];
                if (event.shiftKey && document.activeElement === first) { event.preventDefault();
                    last?.focus(); } else if (!event.shiftKey && document.activeElement === last) { event.preventDefault();
                    first?.focus(); }
            }
        }" x-on:keydown.escape.window.stop.prevent="close()" x-on:keydown.tab="trap($event)">
        <div class="absolute inset-0 bg-stone-900/50" x-on:click="close()"></div>
        <section role="dialog" aria-modal="true" aria-labelledby="process-dialog-title"
            class="relative flex flex-col w-full max-w-5xl max-h-full overflow-hidden bg-white border shadow-2xl rounded-2xl border-stone-200">
            <header class="flex items-center justify-between gap-3 px-5 py-4 border-b border-stone-200">
                <div class="min-w-0">
                    <p class="text-xs tracking-wide uppercase text-stone-400">Team processes</p>
                    <h2 id="process-dialog-title" class="text-lg font-semibold truncate text-stone-900">
                        {{ match ($processScreen) {
                            'list' => 'Processes',
                            'edit' => $activeProcessId ? 'Edit process' : 'New process',
                            'task' => $continuationTaskId ? 'Continue task' : 'New process task',
                            'attach' => 'Add existing tasks',
                            'confirm' => 'Confirm task membership',
                            'transfer' => 'Transfer task',
                            'select-process' => 'Sürece dahil et',
                            default => $activeProcess?->name ?? 'Process unavailable',
                        } }}
                    </h2>
                </div>
                <button type="button" data-autofocus x-on:click="close()" class="process-button"
                    aria-label="Close process dialog">
                    <span class="material-symbols-rounded" aria-hidden="true">close</span>
                </button>
            </header>
            <div class="p-5 overflow-y-auto"
                wire:key="process-content-{{ $processScreen }}-{{ $activeProcessId ?? 'new' }}">
                @if ($errors->any())
                    <div role="alert"
                        class="p-3 mb-4 text-sm border rounded-lg bg-rose-50 text-rose-800 border-rose-200">
                        @foreach ($errors->all() as $error)
                            <p>{{ $error }}</p>
                        @endforeach
                    </div>
                @endif
                <fieldset wire:loading.attr="disabled" class="min-w-0 space-y-4">
                    @if ($processScreen === 'list')
                        <div class="flex flex-wrap items-end gap-3">
                            <label class="flex-1 process-label">Search
                                <input type="search" wire:model.live.debounce.300ms="processSearch" maxlength="255"
                                    class="process-input" placeholder="Process name">
                            </label>
                            <label class="process-label">Status
                                <select wire:model.live="processStatusFilter" class="process-input">
                                    <option value="open">Open</option>
                                    <option value="completed">Completed</option>
                                    <option value="all">All</option>
                                </select>
                            </label>
                            <label class="process-label">Responsible member
                                <select wire:model.live="processAssigneeFilter" class="process-input">
                                    <option value="">All members</option>
                                    @foreach ($teamMembers as $member)
                                        <option value="{{ $member['id'] }}">{{ $member['name'] }}</option>
                                    @endforeach
                                </select>
                            </label>
                            <button type="button" wire:click="editProcess" class="process-button process-primary">New
                                process</button>
                        </div>
                        <div class="grid gap-3 sm:grid-cols-2">
                            @forelse ($processList as $process)
                                <button type="button" wire:click="openProcessModal({{ $process->id }})"
                                    wire:key="process-list-{{ $process->id }}"
                                    class="p-4 text-left border rounded-xl border-stone-200 hover:bg-stone-50">
                                    <div class="flex items-start justify-between gap-2">
                                        <span class="font-semibold text-stone-800">{{ $process->name }}</span>
                                        <span
                                            class="text-xs text-stone-500">{{ $process->status === 'completed' ? 'Completed' : 'Open' }}</span>
                                    </div>
                                    <p class="mt-2 text-xs text-stone-500">
                                        {{ $process->assignedUser?->name ?? 'Unassigned' }}</p>
                                    <p class="mt-1 text-xs text-stone-500">
                                        {{ $process->start_date ? $process->start_date->format('d.m.Y') . ' – ' . $process->end_date?->format('d.m.Y') : 'Undated process' }}
                                    </p>
                                    <p class="mt-3 text-xs font-medium text-teal-700">
                                        {{ $process->completed_tasks_count }} / {{ $process->tasks_count }} tasks
                                        completed</p>
                                </button>
                            @empty
                                <p class="py-8 text-sm text-stone-500">No processes found. Create a process to organize
                                    related tasks.</p>
                            @endforelse
                        </div>
                        <nav class="flex items-center justify-between gap-3" aria-label="Process pages">
                            <button type="button" wire:click="changeProcessPage(-1)" @disabled($processList->onFirstPage())
                                class="process-button">Previous</button>
                            <span class="text-xs text-stone-500">{{ $processList->currentPage() }} /
                                {{ $processList->lastPage() }}</span>
                            <button type="button" wire:click="changeProcessPage(1)" @disabled(!$processList->hasMorePages())
                                class="process-button">Next</button>
                        </nav>
                    @elseif ($processScreen === 'detail' && $activeProcess)
                        <div class="flex flex-wrap items-center gap-2">
                            <button type="button" wire:click="openProcessList" class="process-button">All
                                processes</button>
                            <button type="button" wire:click="editProcess({{ $activeProcess->id }})"
                                class="process-button">Edit process</button>
                            <button type="button"
                                wire:click="setProcessCompleted({{ $activeProcess->status === 'open' ? 'true' : 'false' }})"
                                wire:confirm="This changes only the process status, not its tasks. Continue?"
                                class="process-button">
                                {{ $activeProcess->status === 'open' ? 'Complete process' : 'Reopen process' }}
                            </button>
                            <span
                                class="ml-auto text-sm font-semibold text-teal-700">{{ $processTasks->where('status', 'completed')->count() }}
                                / {{ $processTasks->count() }} completed</span>
                        </div>
                        <div class="p-4 border rounded-xl border-stone-200 bg-stone-50">
                            <div class="flex flex-wrap gap-3 text-sm text-stone-600">
                                <span>{{ $activeProcess->assignedUser?->name ?? 'Unassigned' }}</span>
                                <span>{{ $activeProcess->start_date ? $activeProcess->start_date->format('d.m.Y') . ' – ' . $activeProcess->end_date?->format('d.m.Y') : 'Undated process' }}</span>
                                <span>{{ $activeProcess->status === 'completed' ? 'Completed' : 'Open' }}</span>
                            </div>
                            @if ($activeProcess->description)
                                <p class="mt-3 text-sm whitespace-pre-line text-stone-700">
                                    {{ $activeProcess->description }}</p>
                            @endif
                        </div>
                        <div class="flex flex-wrap gap-2">
                            <button type="button" wire:click="openNewProcessTask" @disabled($activeProcess->status !== 'open')
                                class="process-button process-primary">Create task</button>
                            <button type="button" wire:click="openProcessAttachment" @disabled($activeProcess->status !== 'open')
                                class="process-button">Add existing tasks</button>
                        </div>
                        @if ($activeProcess->status === 'completed')
                            <p class="text-xs text-stone-500">Reopen the process to add tasks.</p>
                        @endif
                        @forelse ($processTasks->groupBy(fn ($task) => $task->date ? 'Scheduled tasks' : 'Undated tasks') as $groupName => $groupTasks)
                            <section>
                                <h3 class="mb-2 text-xs font-semibold uppercase text-stone-500">{{ $groupName }}
                                </h3>
                                <div class="border divide-y rounded-xl border-stone-200 divide-stone-100">
                                    @foreach ($groupTasks as $task)
                                        <div wire:key="process-task-{{ $task->id }}"
                                            class="flex flex-wrap items-center gap-3 p-3">
                                            <button type="button" wire:click="openProcessTask({{ $task->id }})"
                                                class="flex-1 min-w-0 text-left">
                                                <p class="text-sm font-medium text-stone-800">
                                                    {{ trim($task->title ?? '') !== '' && trim($task->title) !== 'Görev' ? $task->title : $task->note }}
                                                </p>
                                                <p class="mt-1 text-xs text-stone-500">
                                                    {{ $task->date?->format('d.m.Y') ?? 'Undated' }} ·
                                                    {{ $task->assignedUser?->name ?? 'Unassigned' }} ·
                                                    {{ $task->status === 'completed' ? 'Completed' : 'Open' }}</p>
                                                @if (!$activeProcess->containsDate($task->date?->toDateString()))
                                                    <p class="mt-1 text-xs text-amber-700">Outside the planned process
                                                        dates</p>
                                                @endif
                                            </button>
                                            <button type="button"
                                                wire:click="openProcessTransfer({{ $task->id }})"
                                                class="process-button">Transfer</button>
                                            <button type="button"
                                                wire:click="detachProcessTask({{ $task->id }})"
                                                wire:confirm="Remove from this process? The task is preserved, but only its creator and assignee will have access."
                                                class="process-button">Remove</button>
                                        </div>
                                    @endforeach
                                </div>
                            </section>
                        @empty
                            <p class="py-8 text-sm text-stone-500">This process has no tasks yet.</p>
                        @endforelse
                    @elseif ($processScreen === 'edit')
                        <form wire:submit="saveProcess" class="space-y-4">
                            <label class="process-label">Process name<input required maxlength="255"
                                    wire:model="processForm.name" class="process-input"></label>
                            <label class="process-label">Description
                                <textarea rows="3" maxlength="10000" wire:model="processForm.description" class="process-input"></textarea>
                            </label>
                            <div class="grid gap-3 sm:grid-cols-2">
                                <label class="process-label">Responsible member
                                    <select wire:model="processForm.assigned_to" class="process-input">
                                        <option value="">Unassigned</option>
                                        @foreach ($teamMembers as $member)
                                            <option value="{{ $member['id'] }}">{{ $member['name'] }}</option>
                                        @endforeach
                                    </select>
                                </label>
                                <label class="process-label">Color
                                    <select wire:model="processForm.color" class="process-input">
                                        <option value="">Default</option>
                                        @foreach (\App\Models\Task::AVAILABLE_COLORS as $color)
                                            <option value="{{ $color }}">{{ ucfirst($color) }}</option>
                                        @endforeach
                                    </select>
                                </label>
                                <label class="process-label">Start date<input type="date"
                                        wire:model="processForm.start_date" class="process-input"></label>
                                <label class="process-label">End date<input type="date"
                                        wire:model="processForm.end_date" class="process-input"></label>
                            </div>
                            <p class="text-xs text-stone-500">Leave both dates empty for an undated process. Changing
                                this range does not move tasks.</p>
                            <button type="submit" class="process-button process-primary">Save process</button>
                            <button type="button" wire:click="cancelProcessForm"
                                class="process-button">Cancel</button>
                        </form>
                    @elseif ($processScreen === 'task')
                        <form wire:submit="saveProcessTask" class="space-y-4">
                            @if ($continuationTaskId && !$expectedSourceProcessId)
                                <div class="p-4 space-y-3 border rounded-xl border-sky-200 bg-sky-50">
                                    <label class="process-label">New process name<input required maxlength="255"
                                            wire:model="processForm.name" class="process-input"></label>
                                    <label class="process-label">Process responsible member
                                        <select wire:model="processForm.assigned_to" class="process-input">
                                            <option value="">Unassigned</option>
                                            @foreach ($teamMembers as $member)
                                                <option value="{{ $member['id'] }}">{{ $member['name'] }}</option>
                                            @endforeach
                                        </select>
                                    </label>
                                    <p class="text-xs text-sky-800">An undated process will be created. The original
                                        task and continuation task will be shared with your team.</p>
                                </div>
                            @elseif ($activeProcess)
                                <p class="text-sm text-stone-600">Process: {{ $activeProcess->name }}</p>
                            @endif
                            <label class="process-label">Task title<input required maxlength="255"
                                    wire:model="processTaskForm.title" class="process-input"></label>
                            <label class="process-label">Note
                                <textarea rows="3" maxlength="10000" wire:model="processTaskForm.note" class="process-input"></textarea>
                            </label>
                            <div class="grid gap-3 sm:grid-cols-2">
                                <label
                                    class="process-label">{{ $continuationTaskId ? 'Continuation date' : 'Date (optional)' }}<input
                                        type="date" @required($continuationTaskId) wire:model="processTaskForm.date"
                                        class="process-input"></label>
                                <label class="process-label">Task assignee<select
                                        wire:model="processTaskForm.assigned_to" class="process-input">
                                        <option value="">Unassigned</option>
                                        @foreach ($teamMembers as $member)
                                            <option value="{{ $member['id'] }}">{{ $member['name'] }}</option>
                                        @endforeach
                                    </select>
                                </label>
                            </div>
                            @if ($continuationTaskId)
                                <label class="flex items-center gap-2 text-sm text-stone-700"><input type="checkbox"
                                        wire:model="completeSourceTask" class="rounded">Mevcut görevi tamamla</label>
                                <p class="text-xs text-stone-500">The original stays on its date. Notes, emails, and
                                    invoices are not copied.</p>
                            @endif
                            <button type="submit"
                                class="process-button process-primary">{{ $continuationTaskId ? 'Create and continue' : 'Create task' }}</button>
                            <button type="button" wire:click="cancelProcessForm"
                                class="process-button">Cancel</button>
                        </form>
                    @elseif ($processScreen === 'attach')
                        <label class="process-label">Search tasks<input type="search" maxlength="255"
                                wire:model.live.debounce.300ms="processTaskSearch" class="process-input"
                                placeholder="Title or note"></label>
                        <p class="text-xs text-stone-500">Up to 50 matches are shown. Refine your search to find older
                            tasks. Selected: {{ count($selectedProcessTasks) }}</p>
                        <div class="border divide-y rounded-xl border-stone-200 divide-stone-100">
                            @forelse ($attachableTasks as $task)
                                <label wire:key="attachable-task-{{ $task->id }}"
                                    class="flex items-start gap-3 p-3 cursor-pointer hover:bg-stone-50">
                                    <input type="checkbox" wire:model.live="selectedProcessTasks"
                                        value="{{ $task->id }}" class="mt-1 rounded">
                                    <span
                                        class="min-w-0 text-sm text-stone-700">{{ trim($task->title ?? '') !== '' && trim($task->title) !== 'Görev' ? $task->title : $task->note }}
                                        <span
                                            class="block mt-1 text-xs text-stone-500">{{ $task->date?->format('d.m.Y') ?? 'Undated' }}
                                            · {{ $task->assignedUser?->name ?? 'Unassigned' }} ·
                                            {{ $task->process?->name ?? 'No process (private task)' }}</span>
                                    </span>
                                </label>
                            @empty<p class="p-4 text-sm text-stone-500">No accessible tasks found.</p>
                            @endforelse
                        </div>
                        <button type="button" wire:click="prepareProcessAttachment"
                            class="process-button process-primary">Review selection</button>
                        <button type="button" wire:click="cancelProcessForm" class="process-button">Cancel</button>
                    @elseif (in_array($processScreen, ['confirm', 'transfer', 'select-process']))
                        @if (in_array($processScreen, ['transfer', 'select-process']))
                            <label class="process-label">Target process<select wire:model="targetProcessId"
                                    class="process-input">
                                    <option value="">Choose a process</option>
                                    @foreach ($transferTargets as $target)
                                        <option value="{{ $target->id }}">{{ $target->name }}</option>
                                    @endforeach
                                </select></label>
                            @if ($transferTargets->isEmpty())
                                <p class="text-sm text-stone-500">No open processes are available. Create or reopen a
                                    process before adding this task.</p>
                            @endif
                        @endif
                        <div class="p-4 space-y-3 border rounded-xl border-amber-200 bg-amber-50">
                            @foreach ($attachmentPreview as $item)
                                <p class="text-sm text-stone-800">{{ $item['title'] }}<span
                                        class="block text-xs text-amber-800">{{ $item['process'] ? 'Transfer from: ' . $item['process'] : 'Share this standalone task with the team' }}</span>
                                </p>
                            @endforeach
                            <p class="text-sm text-amber-900">Each task belongs to one process. Its date, status,
                                notes, and links stay unchanged. All team members can manage tasks in the target
                                process.</p>
                        </div>
                        <label class="flex items-center gap-2 text-sm text-stone-700"><input type="checkbox"
                                wire:model="confirmProcessSharing" class="rounded">I confirm these membership and
                            sharing changes.</label>
                        <button type="button" wire:click="confirmProcessAttachment"
                            @disabled(in_array($processScreen, ['transfer', 'select-process']) && $transferTargets->isEmpty())
                            class="process-button process-primary">{{ $processScreen === 'select-process' ? 'Sürece dahil et' : 'Confirm' }}</button>
                        <button type="button" wire:click="cancelProcessForm" class="process-button">Cancel</button>
                    @endif
                </fieldset>
            </div>
            <footer class="h-8 px-5 text-xs text-stone-400" role="status"><span wire:loading>Saving / loading…</span>
            </footer>
        </section>
    </div>
@endif