{{--
    Shared Gantt renderer — see App\Livewire\Gantt\Chart's class docblock.
    The tree column and the timeline are rendered from the same
    `$this->rows()` list so they can never drift out of alignment; the tree
    column stays "fixed" via CSS `sticky left-0` inside one shared
    horizontally-scrolling container — no JS scroll-sync needed.
--}}
@php
    $labelWidthPx = 430;
    $totalWidthPx = $this->totalWidthPx();
    $todayOffsetPx = $this->todayOffsetPx();
    $dayWidth = $this->dayWidth();
    $rows = $this->rows();
@endphp

{{--
    A plain Livewire component (not a Filament page) has no
    `<x-filament-panels::page>` wrapper to hang `@vite()` inside — without
    a single root element here, Vite's injected <link>/<script> tags become
    a sibling of the section below, and Livewire's "one root element per
    component" detection fails on it (the exact bug already fixed once on
    the Kanban tab: @vite() before the real root became the DOM node
    Livewire mistook for this component's root).
--}}
<div>
    @vite(['resources/js/gantt-project.js'])

    <x-filament::section>
    <div x-data="ganttDragController({{ $todayOffsetPx ?? 'null' }}, {{ $labelWidthPx }})">
    {{-- Toolbar: hide-completed, expand/collapse all, zoom pills, "Aujourd'hui". --}}
    <div class="mb-4 flex flex-wrap items-center justify-between gap-3">
        <div class="flex flex-wrap items-center gap-4">
            <label class="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-300">
                <input
                    type="checkbox"
                    wire:model.live="hideCompleted"
                    class="rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-white/20 dark:bg-white/5"
                />
                Masquer les tâches terminées
            </label>

            <button
                type="button"
                wire:click="expandAll"
                class="flex items-center gap-1.5 text-sm font-semibold text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
            >
                <x-filament::icon icon="heroicon-o-arrows-pointing-out" class="h-4 w-4" />
                Tout déplier
            </button>
            <button
                type="button"
                wire:click="collapseAll"
                class="flex items-center gap-1.5 text-sm font-semibold text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
            >
                <x-filament::icon icon="heroicon-o-arrows-pointing-in" class="h-4 w-4" />
                Tout replier
            </button>
        </div>

        <div class="flex flex-wrap items-center gap-2">
            <div class="flex gap-1 rounded-lg bg-gray-100 p-1 dark:bg-white/5">
                @foreach (['week' => 'Semaine', 'month' => 'Mois', 'quarter' => 'Trimestre', 'year' => 'Année', 'all' => 'Toute la durée'] as $key => $label)
                    <button
                        type="button"
                        wire:click="setZoom('{{ $key }}')"
                        @class([
                            'rounded-md px-2.5 py-1 text-xs font-semibold',
                            'bg-white text-primary-600 shadow-sm dark:bg-gray-900 dark:text-primary-400' => $zoom === $key,
                            'text-gray-500 dark:text-gray-400' => $zoom !== $key,
                        ])
                    >
                        {{ $label }}
                    </button>
                @endforeach
            </div>

            <button
                type="button"
                x-on:click="jumpToToday()"
                class="flex items-center gap-1.5 rounded-md border border-gray-200 px-2.5 py-1.5 text-xs font-semibold text-gray-600 hover:bg-gray-50 dark:border-white/10 dark:text-gray-300 dark:hover:bg-white/5"
            >
                <x-filament::icon icon="heroicon-o-calendar" class="h-3.5 w-3.5" />
                Aujourd'hui
            </button>
        </div>
    </div>

    {{-- Legend --}}
    <div class="mb-3 flex flex-wrap items-center gap-4 text-xs text-gray-500 dark:text-gray-400">
        @foreach (['task' => 'Tâche', 'chantier' => 'Chantier', 'milestone' => 'Jalon', 'meeting' => 'Réunion'] as $code => $label)
            <span class="flex items-center gap-1.5">
                <span class="h-2 w-2 rounded-sm" style="background-color: var(--{{ $this->typeColor($code) }}-500)"></span>
                {{ $label }}
            </span>
        @endforeach
    </div>

    <div
        class="gantt-scroll overflow-x-auto rounded-lg border border-gray-100 dark:border-white/5"
        x-ref="scrollContainer"
        x-on:pointerdown="onPointerDown($event)"
        x-on:pointermove.window="onMove($event)"
        x-on:pointerup.window="onUp($event)"
    >
        {{--
            `width`, not `min-width`: a plain block element defaults to
            filling its containing block when only a floor is set, which
            stretched this well past the timeline's actual content on a
            narrow date range (e.g. "Année" zoom on a project spanning
            only a few weeks) — the header ticks stop exactly at the
            real content width, so that extra stretch just read as a
            blank void with no labels past them.
        --}}
        <div class="relative" style="width: {{ $labelWidthPx + $totalWidthPx }}px">
            @if ($todayOffsetPx !== null)
                <div
                    class="pointer-events-none absolute top-0 bottom-0 z-10 w-px bg-primary-400/60"
                    style="left: {{ $labelWidthPx + $todayOffsetPx }}px"
                ></div>
            @endif

            {{-- Header: ticks. --}}
            <div class="flex border-b border-gray-100 dark:border-white/5">
                <div class="sticky left-0 z-30 shrink-0 border-r border-gray-100 bg-white dark:border-white/5 dark:bg-gray-900" style="width: {{ $labelWidthPx }}px"></div>
                <div class="relative h-8 shrink-0 bg-white dark:bg-gray-900" style="width: {{ $totalWidthPx }}px">
                    @foreach ($this->headerTicks() as $tick)
                        <div
                            @class([
                                'absolute top-0 flex h-full items-center justify-center border-r border-gray-50 text-[10px] font-medium text-gray-400 dark:border-white/5 dark:text-gray-500',
                                'bg-gray-50 dark:bg-white/[0.03]' => $tick['isWeekend'],
                                'font-bold text-primary-600 dark:text-primary-400' => $tick['isToday'],
                            ])
                            style="left: {{ $tick['offsetPx'] }}px; width: {{ $tick['widthPx'] }}px"
                        >
                            {{ $tick['label'] }}
                        </div>
                    @endforeach
                </div>
            </div>

            {{-- Rows. --}}
            @forelse ($rows as $row)
                @include('filament.app.resources.projects.pages.partials.gantt-row', [
                    'row' => $row,
                    'labelWidthPx' => $labelWidthPx,
                    'totalWidthPx' => $totalWidthPx,
                    'dayWidth' => $dayWidth,
                    'todayOffsetPx' => $todayOffsetPx,
                ])
            @empty
                <div class="flex items-center justify-center py-12 text-sm text-gray-400 dark:text-gray-500" style="width: {{ $labelWidthPx + $totalWidthPx }}px">
                    Aucun élément à afficher.
                </div>
            @endforelse
        </div>
    </div>
    </div>
    </x-filament::section>

    @include('partials.date-cascade-modal')
</div>