@php
    $createTaskModalConfig = [
        'apiBase' => url('/api/v1'),
        'csrf' => csrf_token(),
    ];
@endphp
<div
    x-data="createTaskModal({{ Js::from($createTaskModalConfig) }})"
    x-on:open-create-task-modal.window="open()"
    x-on:keydown.escape.window="isOpen && close()"
    x-show="isOpen"
    x-cloak
    class="fixed inset-0 z-50 overflow-y-auto"
    aria-labelledby="create-task-modal-title"
    aria-modal="true"
>
    <div class="fixed inset-0 bg-gray-500/75" x-show="isOpen" x-transition @click="close()"></div>
    <div class="flex min-h-full items-center justify-center p-4">
        <div
            x-show="isOpen"
            x-transition:enter="ease-out duration-200"
            x-transition:enter-start="opacity-0"
            x-transition:enter-end="opacity-100"
            class="relative w-full max-w-md rounded-lg bg-white shadow-xl border border-gray-200"
            @click.stop
        >
            <div class="flex items-center justify-between px-4 py-3 border-b border-gray-200">
                <h2 id="create-task-modal-title" class="text-lg font-semibold text-gray-900">Create task</h2>
                <button type="button" @click="close()" class="rounded p-1 text-gray-400 hover:bg-gray-100" aria-label="Close">✕</button>
            </div>
            <form @submit.prevent="submitForm()" class="p-4 space-y-4">
                <p x-show="errorMessage" x-text="errorMessage" class="text-sm text-red-600"></p>

                <div>
                    <label for="create-task-title" class="block text-xs font-medium text-gray-500">Title</label>
                    <input
                        id="create-task-title"
                        type="text"
                        x-model="form.title"
                        required
                        class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                        placeholder="Task title"
                    />
                </div>

                <div>
                    <label for="create-task-project" class="block text-xs font-medium text-gray-500">Project</label>
                    <select
                        id="create-task-project"
                        x-model="form.project_id"
                        @change="onProjectChange()"
                        class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                    >
                        <option value="">Loading…</option>
                        <template x-for="p in projects" :key="p.id">
                            <option :value="p.id" x-text="p.name"></option>
                        </template>
                    </select>
                </div>

                <div>
                    <label for="create-task-list" class="block text-xs font-medium text-gray-500">List</label>
                    <select
                        id="create-task-list"
                        x-model="form.task_list_id"
                        :disabled="lists.length === 0"
                        class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500 disabled:opacity-50"
                    >
                        <option value="">Select a list…</option>
                        <template x-for="l in lists" :key="l.id">
                            <option :value="l.id" x-text="l.name"></option>
                        </template>
                    </select>
                </div>

                <div>
                    <label class="block text-xs font-medium text-gray-500 mb-1">Assignees</label>
                    <div class="max-h-32 overflow-y-auto rounded border border-gray-200 divide-y divide-gray-100">
                        <template x-for="u in assignableUsers" :key="u.id">
                            <button
                                type="button"
                                @click="toggleAssignee(u)"
                                class="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
                            >
                                <span class="shrink-0 w-4 h-4 rounded border flex items-center justify-center" :class="selectedAssignees.some(a => a.id === u.id) ? 'bg-indigo-600 border-indigo-600 text-white' : 'border-gray-300'">
                                    <span x-show="selectedAssignees.some(a => a.id === u.id)">✓</span>
                                </span>
                                <span x-text="u.name"></span>
                            </button>
                        </template>
                        <p x-show="assignableUsers.length === 0 && !assignableUsersLoaded" class="px-3 py-2 text-xs text-gray-500">Loading…</p>
                        <p x-show="assignableUsers.length === 0 && assignableUsersLoaded" class="px-3 py-2 text-xs text-gray-500">No users to assign.</p>
                    </div>
                </div>

                <div class="grid grid-cols-2 gap-4">
                    <div>
                        <label for="create-task-due-date" class="block text-xs font-medium text-gray-500">Due date</label>
                        <input
                            id="create-task-due-date"
                            type="date"
                            x-model="form.due_date"
                            class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                        />
                    </div>
                    <div>
                        <label for="create-task-due-time" class="block text-xs font-medium text-gray-500">Due time</label>
                        <input
                            id="create-task-due-time"
                            type="time"
                            x-model="form.due_time"
                            class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                        />
                    </div>
                </div>

                <div>
                    <label for="create-task-priority" class="block text-xs font-medium text-gray-500">Priority</label>
                    <select
                        id="create-task-priority"
                        x-model="form.priority"
                        class="mt-1 w-full rounded border border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                    >
                        <option value="low">low</option>
                        <option value="medium">medium</option>
                        <option value="high">high</option>
                        <option value="urgent">urgent</option>
                    </select>
                </div>

                <div class="flex justify-end gap-2 pt-2 border-t border-gray-200">
                    <button
                        type="button"
                        @click="close()"
                        class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
                    >
                        Cancel
                    </button>
                    <button
                        type="submit"
                        :disabled="submitting || !form.title?.trim() || !form.task_list_id"
                        class="rounded-md bg-indigo-600 px-4 py-2 text-sm font-medium text-white hover:bg-indigo-700 disabled:opacity-50 disabled:cursor-not-allowed"
                    >
                        <span x-show="!submitting">Create task</span>
                        <span x-show="submitting">Creating…</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

@push('scripts')
<script>
document.addEventListener('alpine:init', () => {
    Alpine.data('createTaskModal', (config) => ({
        isOpen: false,
        submitting: false,
        errorMessage: '',
        projects: [],
        projectsLoaded: false,
        lists: [],
        assignableUsers: [],
        assignableUsersLoaded: false,
        selectedAssignees: [],
        form: {
            title: '',
            project_id: '',
            task_list_id: '',
            due_date: '',
            due_time: '',
            priority: 'medium',
        },
        apiBase: config.apiBase,
        csrf: config.csrf,

        open() {
            this.isOpen = true;
            this.resetForm();
            if (!this.projectsLoaded) {
                this.loadProjects();
            } else if (this.projects.length > 0) {
                this.form.project_id = this.projects[0].id;
                this.onProjectChange();
            }
            if (!this.assignableUsersLoaded) {
                this.loadAssignableUsers();
            }
        },

        close() {
            this.isOpen = false;
            this.errorMessage = '';
        },

        resetForm() {
            this.form = {
                title: '',
                project_id: '',
                task_list_id: '',
                due_date: '',
                due_time: '',
                priority: 'medium',
            };
            this.selectedAssignees = [];
            this.lists = [];
        },

        async loadProjects() {
            const r = await fetch(this.apiBase + '/projects', { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' });
            if (!r.ok) {
                this.projects = [];
                this.projectsLoaded = true;
                return;
            }
            const d = await r.json();
            this.projects = d.data ?? d ?? [];
            this.projectsLoaded = true;
            if (this.projects.length > 0) {
                this.form.project_id = this.projects[0].id;
                await this.onProjectChange();
            }
        },

        async onProjectChange() {
            if (!this.form.project_id) {
                this.lists = [];
                this.form.task_list_id = '';
                return;
            }
            const r = await fetch(this.apiBase + '/projects/' + encodeURIComponent(this.form.project_id) + '/lists', { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' });
            if (!r.ok) {
                this.lists = [];
                this.form.task_list_id = '';
                return;
            }
            const d = await r.json();
            this.lists = d.data ?? d ?? [];
            this.form.task_list_id = this.lists.length > 0 ? this.lists[0].id : '';
        },

        async loadAssignableUsers() {
            const r = await fetch(this.apiBase + '/assignable-users', { headers: { 'Accept': 'application/json' }, credentials: 'same-origin' });
            this.assignableUsersLoaded = true;
            if (!r.ok) {
                this.assignableUsers = [];
                return;
            }
            const d = await r.json();
            this.assignableUsers = d.data ?? d ?? [];
        },

        toggleAssignee(user) {
            const idx = this.selectedAssignees.findIndex(a => a.id === user.id);
            if (idx >= 0) {
                this.selectedAssignees.splice(idx, 1);
            } else {
                this.selectedAssignees.push({ id: user.id, name: user.name });
            }
        },

        async submitForm() {
            this.errorMessage = '';
            this.submitting = true;
            try {
                const body = {
                    title: this.form.title.trim(),
                    task_list_id: this.form.task_list_id,
                    priority: this.form.priority,
                };
                if (this.form.due_date) body.due_date = this.form.due_date;
                if (this.form.due_time) body.due_time = this.form.due_time;

                const createRes = await fetch(this.apiBase + '/tasks', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': this.csrf,
                    },
                    body: JSON.stringify(body),
                    credentials: 'same-origin',
                });

                const createData = await createRes.json();
                if (!createRes.ok) {
                    this.errorMessage = createData.message || 'Failed to create task.';
                    this.submitting = false;
                    return;
                }

                const task = createData.data ?? createData;
                const taskId = task.id;

                for (const assignee of this.selectedAssignees) {
                    const assignRes = await fetch(this.apiBase + '/tasks/' + encodeURIComponent(taskId) + '/assign', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': this.csrf,
                        },
                        body: JSON.stringify({ user_id: assignee.id, role: 'responsible' }),
                        credentials: 'same-origin',
                    });
                    if (!assignRes.ok) {
                        const assignData = await assignRes.json().catch(() => ({}));
                        this.errorMessage = assignData.message || 'Failed to assign ' + (assignee.name || '') + '.';
                        this.submitting = false;
                        return;
                    }
                }

                window.dispatchEvent(new CustomEvent('task-created', { detail: { task: task } }));
                this.close();
            } catch (e) {
                this.errorMessage = e.message || 'Something went wrong.';
            } finally {
                this.submitting = false;
            }
        },
    }));
});
</script>
@endpush