@props(['projectId', 'isClientView' => false, 'updateUrl', 'summaryUrl' => null])

@once
    @prepend('dhtmlxgantt')
        <style>
            /* 🔥 CRITICAL PATH: Estilos para tareas críticas */
            .gantt_critical_task {
                background-color: #ff4444 !important;
                border: 2px solid #cc0000 !important;
            }

            .gantt_critical_task .gantt_task_content {
                background-color: #ff4444 !important;
                color: white !important;
                font-weight: bold !important;
            }

            /* 📊 STATUS DROPDOWN: Estilos para dropdown personalizado */
            .gantt-status-custom-dropdown:hover > div {
                border-color: #3b82f6 !important;
                box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
            }

            .gantt-status-dropdown-menu {
                animation: fadeIn 0.15s ease-out;
            }

            @keyframes fadeIn {
                from {
                    opacity: 0;
                    transform: translateY(-5px);
                }
                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            /* Estilo para las líneas de conexión críticas */
            .gantt_critical_link {
                stroke: #ff4444 !important;
                stroke-width: 3px !important;
            }

            /* Mejorar visibilidad de las líneas de dependencia */
            .gantt_link_line {
                stroke-width: 2px !important;
            }

            /* Líneas de dependencia Finish-to-Start (tipo 0) */
            .gantt_link_line[data-link-type="0"] {
                stroke: #2196F3 !important;
                stroke-width: 2px !important;
            }

            /* Líneas de dependencia Start-to-Start (tipo 1) */
            .gantt_link_line[data-link-type="1"] {
                stroke: #4CAF50 !important;
                stroke-width: 2px !important;
            }

            /* Flechas de las dependencias más visibles */
            .gantt_link_arrow {
                fill: #333 !important;
                stroke: #333 !important;
            }

            /* Estilos específicos por tipo de dependencia */
            .gantt_fs_link .gantt_link_line {
                stroke: #2196F3 !important;
                stroke-width: 2px !important;
            }

            /* 🔒 CONSTRAINT TYPES: Estilos para diferenciar tareas por tipo de restricción (INVERTIDO) */
            /* ASAP: Tareas bloqueadas que NO se pueden mover - Totalmente opaco (100%) */
            .asap-task .gantt_task_content {
                opacity: 1 !important;
                border: 2px solid #444 !important;
                border-radius: 6px !important;
                cursor: not-allowed !important;
            }

            /* FIXEDSTART: Tareas movibles - Azul más claro con texto oscuro para accesibilidad */
            .fixed-task .gantt_task_content {
                opacity: 0.85 !important;
                background-color: #90CAF9 !important;
                border: 2px dashed #1976D2 !important;
                border-radius: 6px !important;
                color: #111 !important;
                cursor: grab !important;
            }

            /* FIXEDSTART: Cuando se está arrastrando, cambiar a cursor "grabbing" */
            .fixed-task .gantt_task_content:active {
                cursor: grabbing !important;
            }

            /* Bordes redondeados para TODAS las tareas del Gantt (aplicación global) */
            .gantt_task_content {
                border-radius: 6px !important;
            }

            .gantt_ss_link .gantt_link_line {
                stroke: #4CAF50 !important;
                stroke-width: 2px !important;
            }

            .gantt_ff_link .gantt_link_line {
                stroke: #FF9800 !important;
                stroke-width: 2px !important;
            }

            .gantt_sf_link .gantt_link_line {
                stroke: #9C27B0 !important;
                stroke-width: 2px !important;
            }

            /* Links críticos siempre en rojo */
            .gantt_critical_link .gantt_link_line {
                stroke: #ff4444 !important;
                stroke-width: 3px !important;
            }

            /* Resaltar tareas críticas en el grid también */
            .gantt_critical_task .gantt_cell {
                background-color: #ffe6e6 !important;
                font-weight: bold !important;
            }

            /* 📅 WEEKENDS: Sombrear fines de semana para mejor visualización */
            .weekend {
                background-color: #f5f5f5 !important;
            }

            /* Aplicar el gris más oscuro en modo hover para mantener visibilidad */
            .weekend:hover {
                background-color: #eeeeee !important;
            }
        </style>
        <link href="{{ secure_asset('assets/css/dhtmlxgantt.css') }}" rel="stylesheet">
    @endprepend
    <script src="{{ secure_asset('assets/js/dhtmlxgantt.js') }}" defer></script>
@endonce

<div
    x-data="ganttChart({
        projectId: {{ Js::from($projectId) }},
        isClientView: {{ Js::from($isClientView) }},
        updateUrl: {{ Js::from($updateUrl) }},
        summaryUrl: {{ Js::from($summaryUrl ?? route('tenant.api.v1.gantt.summary')) }}
    })"
    x-init="init()"
    x-on:livewire:navigating.window="destroy()"
    x-on:beforeunload.window="destroy()"
    class="gantt-container"
>
    <!-- Control Bar -->
    <div class="gantt-controls  flex items-center justify-between bg-gray-100 p-4 rounded">
        <!-- Zoom Controls -->
        <div class="zoom-controls flex items-center space-x-2">
            <button @click="zoomGantt('in')" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                Zoom In
            </button>
            <button @click="zoomGantt('out')" class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                Zoom Out
            </button>
            <button @click="toFit()" class="zoom_toggle px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600">
                Zoom to Fit
            </button>
        </div>

        @if(!$isClientView)
        <!-- Column Settings -->
        <div class="relative ml-2">
            <button
                @click="showColumnSettings = !showColumnSettings"
                class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded text-sm font-medium flex items-center border border-gray-300"
                title="Column Settings">
                <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 100 4m0-4v2m0-6V4" />
                </svg>
                Columns
            </button>

            <template x-if="showColumnSettings">
                <div>
                    <div class="fixed inset-0 z-5" @click="showColumnSettings = false"></div>
                    <div class="absolute left-0 mt-2 w-56 bg-white rounded-md shadow-lg z-10 border border-gray-200">
                        <div class="p-3">
                            <h3 class="text-sm font-medium text-gray-900 mb-3">Visible Columns</h3>
                            <div class="space-y-2">
                                <template x-for="column in availableColumns" :key="column.id">
                                    <label class="flex items-center cursor-pointer">
                                        <input type="checkbox" :checked="visibleColumns[column.id]" @change="toggleColumnVisibility(column.id)" class="rounded border-gray-300">
                                        <span class="ml-2 text-sm" x-text="column.label"></span>
                                    </label>
                                </template>
                            </div>
                        </div>
                    </div>
                </div>
            </template>
        </div>

        <!-- Date Field Toggle -->
        <div class="flex items-center space-x-2 ml-2">
            <span class="text-sm font-medium text-gray-700">Date Field:</span>
            <div class="flex rounded-md shadow-sm">
                <button type="button" @click="setDateField(true)" :class="useFinishByDate ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700'" class="px-3 py-1 text-sm font-medium border border-gray-300 rounded-l-md hover:bg-gray-200 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">End No Later Than</button>
                <button type="button" @click="setDateField(false)" :class="!useFinishByDate ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700'" class="px-3 py-1 text-sm font-medium border-t border-b border-r border-gray-300 rounded-r-md hover:bg-gray-200 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">End Date</button>
            </div>
        </div>

        <!-- Auto-Scheduling Indicator (read-only display of tenant setting) -->
        <div class="flex items-center space-x-1 ml-2 text-xs text-gray-500" title="Auto-scheduling is configured at the account level in Settings">
            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            <span x-show="autoSchedulingEnabled">Auto-schedule: On</span>
            <span x-show="!autoSchedulingEnabled">Auto-schedule: Off</span>
        </div>

        <!-- Save Controls (not rendered for clients) -->
        <div class="save-controls flex items-center space-x-2">
            <!-- Unsaved changes indicator -->
            <div x-show="hasUnsavedChanges" class="flex items-center text-orange-600">
                <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                </svg>
                <span x-text="`${pendingChangesCount} unsaved changes`" class="text-sm"></span>
            </div>

            <!-- Save Button -->
            <button
                @click="saveAllChanges()"
                :disabled="!hasUnsavedChanges || isSaving"
                class="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 disabled:bg-gray-400 disabled:cursor-not-allowed flex items-center">

                <!-- Loading spinner -->
                <svg x-show="isSaving" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                </svg>

                <span x-text="isSaving ? 'Saving...' : 'Save Changes'"></span>
            </button>

            <!-- Discard Button -->
            <button
                @click="discardChanges()"
                :disabled="!hasUnsavedChanges || isSaving"
                class="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600 disabled:bg-gray-400 disabled:cursor-not-allowed">
                Discard Changes
            </button>
        </div>
        @endif
    </div>

    <!-- Gantt Chart Container (unique ID per instance) -->
    <div id="gantt_here_{{ $projectId }}" class="gantt-body" style="height: 700px; width: 100%; min-height: 600px;"></div>

    <!-- Toast Notification Container -->
    <div id="toast-container" style="position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column;"></div>

    <!-- External Changes Overlay -->
    <div x-show="hasExternalChanges"
         x-transition:enter="transition ease-out duration-300"
         x-transition:enter-start="opacity-0 translate-y-4"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 translate-y-4"
         style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10000; width: 90%; max-width: 500px;">
        <div style="position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999;" @click="dismissExternalChanges()"></div>
        <div style="position: relative; z-index: 10000; background: white; border-radius: 12px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); padding: 24px;">
            <div style="display: flex; align-items: start; gap: 16px; margin-bottom: 16px;">
                <div style="flex-shrink: 0; width: 48px; height: 48px; background: #3b82f6; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                    <svg style="width: 24px; height: 24px; color: white;" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
                    </svg>
                </div>
                <div style="flex: 1;">
                    <h3 style="font-size: 18px; font-weight: 600; color: #111827; margin: 0;">Gantt Data Updated</h3>
                    <p style="margin-top: 8px; font-size: 14px; color: #6b7280; line-height: 1.5;">
                        <span x-text="externalChangesCount"></span> change<span x-show="externalChangesCount > 1">s</span> detected from other users.
                        <br><strong>Click "Load Changes" to update your view</strong> or continue working and load them later.
                    </p>
                </div>
            </div>
            <div x-show="hasUnsavedChanges" style="margin-bottom: 16px; padding: 12px; background: #fef3c7; border-left: 4px solid #f59e0b; border-radius: 4px;">
                <div style="display: flex; align-items: start; gap: 8px;">
                    <svg style="width: 20px; height: 20px; color: #f59e0b; flex-shrink: 0;" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"></path>
                    </svg>
                    <p style="margin: 0; font-size: 13px; color: #92400e; line-height: 1.4;">
                        <strong>You have unsaved changes.</strong> Save or discard them before loading external changes to avoid conflicts.
                    </p>
                </div>
            </div>
            <div style="display: flex; gap: 12px; justify-content: flex-end;">
                <button @click="dismissExternalChanges()" style="padding: 8px 16px; font-size: 14px; font-weight: 500; color: #6b7280; background: white; border: 1px solid #d1d5db; border-radius: 6px; cursor: pointer; transition: all 0.2s;">Later</button>
                <button @click="loadExternalChanges()" :disabled="hasUnsavedChanges" :style="hasUnsavedChanges ? 'opacity: 0.5; cursor: not-allowed;' : ''" style="padding: 8px 20px; font-size: 14px; font-weight: 600; color: white; background: #3b82f6; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s;">Load Changes</button>
            </div>
        </div>
    </div>
</div>