@props([
    'menu' => []
])

@php
    $items = collect($menu)
        ->flatMap(fn ($m) => $m['submodules'])
        ->flatMap(fn ($s) => $s['items']);

    $total     = $items->count();
    $finished  = $items->where('stateDevelopment', 2)->count();
    $inDev     = $items->where('stateDevelopment', 1)->count();
    $missing   = $items->where('stateDevelopment', 0)->count();

    $percent = $total > 0 ? round(($finished / $total) * 100) : 0;
@endphp

<div
    x-data="{
        open: false,
        search: ''
    }"
    class="relative w-full max-w-md"
>

    {{-- Barra de progreso --}}
    <div
        class="cursor-pointer select-none"
        @click="open = !open"
    >
        <div class="flex justify-between text-xs mb-1">
            <span class="font-medium">Progreso del sistema</span>
            <span>{{ $percent }}%</span>
        </div>

        <div class="w-full bg-gray-200 rounded h-3 overflow-hidden">
            <div
                class="h-3 bg-green-500 transition-all duration-500"
                style="width: {{ $percent }}%"
            ></div>
        </div>

        <div class="flex flex-wrap gap-3 text-xs mt-1 text-gray-600">
            <span>🟢 {{ $finished }} Terminados</span>
            <span>🟡 {{ $inDev }} En desarrollo</span>
            <span>🔴 {{ $missing }} Faltantes</span>
        </div>
    </div>

    {{-- Despliegue flotante --}}
    <div
        x-show="open"
        x-transition
        @click.outside="open = false"
        class="absolute left-0 mt-3 w-full z-50
               border rounded bg-white shadow-lg"
    >

        {{-- Search --}}
        <div class="p-2 border-b bg-gray-50">
            <input
                type="text"
                x-model="search"
                placeholder="Buscar menú..."
                class="w-full px-2 py-1 text-sm border rounded focus:outline-none focus:ring"
            >
        </div>

        <ul class="divide-y text-sm max-h-72 overflow-auto">

            {{-- TERMINADOS --}}
            <li class="px-3 py-2 bg-green-50 font-semibold text-green-700">
                Terminados
            </li>

            @foreach ($items->where('stateDevelopment', 2) as $item)
                <li
                    x-show="search === '' || '{{ strtolower($item['title']) }}'.includes(search.toLowerCase())"
                    class="px-3 py-2 flex items-center gap-2"
                >
                    <x-dynamic-component
                        :component="$item['icon']"
                        class="w-4 h-4 text-green-600"
                    />
                    {{ $item['title'] }}
                </li>
            @endforeach

            {{-- EN DESARROLLO --}}
            <li class="px-3 py-2 bg-yellow-50 font-semibold text-yellow-700">
                En desarrollo
            </li>

            @foreach ($items->where('stateDevelopment', 1) as $item)
                <li
                    x-show="search === '' || '{{ strtolower($item['title']) }}'.includes(search.toLowerCase())"
                    class="px-3 py-2 flex items-center gap-2"
                >
                    <x-dynamic-component
                        :component="$item['icon']"
                        class="w-4 h-4 text-yellow-600"
                    />
                    {{ $item['title'] }}
                </li>
            @endforeach

            {{-- FALTANTES --}}
            <li class="px-3 py-2 bg-red-50 font-semibold text-red-700">
                Faltantes
            </li>

            @foreach ($items->where('stateDevelopment', 0) as $item)
                <li
                    x-show="search === '' || '{{ strtolower($item['title']) }}'.includes(search.toLowerCase())"
                    class="px-3 py-2 flex items-center gap-2"
                >
                    <x-dynamic-component
                        :component="$item['icon']"
                        class="w-4 h-4 text-red-600"
                    />
                    {{ $item['title'] }}
                </li>
            @endforeach

            {{-- Sin resultados --}}
            <li
                x-show="
                    search !== '' &&
                    !Array.from($el.parentElement.querySelectorAll('li'))
                        .some(li => li.offsetParent !== null && !li.classList.contains('font-semibold'))
                "
                class="px-3 py-4 text-center text-gray-400 italic"
            >
                Sin resultados
            </li>

        </ul>
    </div>
</div>