{{-- ============================================================
     Los setups de un producto — desde `Setups.dc.html`.

     Es el séptimo tipo de contenido versionado y **el único con estado**: la versión es un
     campo del propio setup, no hay elementos dentro, y un `deprecated` deja de servirse.
     Comparte con los otros seis la cabecera, el selector de tipos y la tabla de entornos;
     tiene vista propia porque donde los demás cuentan elementos, aquí va el estado y el
     resumen del YAML.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    <div>
        <a href="{{ route('products.show', $product) }}" wire:navigate
           class="inline-flex items-center gap-1.5 text-[13px] font-semibold" style="color:var(--text-link);">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
            {{ $product->name }}
        </a>
    </div>

    {{-- ============ Cabecera con el selector de tipos ============ --}}
    <section class="overflow-hidden rounded-xl border"
             style="background:var(--surface-card); border-color:var(--border-subtle);">

        <div class="flex flex-wrap items-start justify-between gap-6 px-6 py-5">
            <div class="flex min-w-0 flex-1 items-start gap-4">
                <span class="flex h-[52px] w-[52px] flex-none items-center justify-center rounded-xl"
                      style="background:{{ $ficha['fondo'] }}; color:{{ $ficha['tinta'] }}; font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:700;">
                    {{ $ficha['inicial'] }}
                </span>

                <div class="min-w-0">
                    <div class="text-[10.5px] font-semibold uppercase tracking-[0.08em]" style="color:var(--orange-600);">
                        Contenido versionado · {{ $product->name }}
                    </div>
                    <h1 class="mt-0.5" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:21px; font-weight:700; letter-spacing:-0.02em; color:var(--text-strong); margin:0;">
                        {{ $ficha['nombre'] }}
                    </h1>
                    <div class="mt-1 max-w-[640px] text-[13px] leading-[1.5]" style="color:var(--text-muted);">
                        {{ $ficha['explicacion'] }}
                    </div>

                    <div class="mt-2 flex flex-wrap items-center gap-y-1 gap-x-[7px] text-[12px]" style="color:var(--text-muted);">
                        <span>
                            Acción de la API:
                            <strong class="font-semibold" style="font-family:ui-monospace,monospace; color:var(--text-strong);">{{ $ficha['accion'] }}</strong>
                        </span>
                        <span style="color:var(--border-default);">·</span>
                        {{-- **Publicados y deshabilitados no es lo mismo**, y solo los publicados
                             se sirven: el número que importa es el primero.

                             Se dice «publicado» y «deshabilitado», como en los otros seis tipos.
                             Aquí se decía «activo» y «deprecado» para exactamente lo mismo,
                             y leyendo dos pantallas seguidas no había forma de saber que
                             eran la misma cosa. En la base siguen siendo `active` y
                             `deprecated`; lo que cambia es cómo se le llama a quien lo lee. --}}
                        <span>
                            <strong class="font-semibold" style="color:{{ $cuantosActivos === 0 ? 'var(--warning-500)' : 'var(--text-strong)' }};">{{ $cuantosActivos }}</strong>
                            {{ $cuantosActivos === 1 ? 'publicado' : 'publicados' }}
                            @if ($cuantosDeprecados > 0)
                                <span style="color:var(--text-subtle);">· {{ $cuantosDeprecados }} {{ $cuantosDeprecados === 1 ? 'deshabilitado' : 'deshabilitados' }}</span>
                            @endif
                        </span>
                        @if ($reparto['entornos'] > 0)
                            <span style="color:var(--border-default);">·</span>
                            <span>
                                <strong class="font-semibold" style="color:var(--text-strong);">{{ $reparto['entornos'] }}</strong>
                                {{ $reparto['entornos'] === 1 ? 'entorno con licencia' : 'entornos con licencia' }},
                                <strong class="font-semibold" style="color:var(--text-strong);">{{ $reparto['entornos'] - $reparto['sinPlugin'] }}</strong>
                                con el plugin instalado
                            </span>
                        @endif
                    </div>
                </div>
            </div>

            @can('admin.setups.create')
                <a href="{{ route('products.setups.create', $product) }}" wire:navigate
                   class="flex-none rounded-lg px-4 py-2.5 text-[13px] font-semibold text-white"
                   style="background:var(--orange-500);"
                   onmouseover="this.style.background='var(--orange-600)'"
                   onmouseout="this.style.background='var(--orange-500)'">
                    Nuevo setup
                </a>
            @endcan
        </div>

        <div class="flex gap-0.5 overflow-x-auto border-t px-4"
             style="border-color:var(--divider); background:var(--surface-alt);">
            @foreach ($tipos as $tipo)
                <a href="{{ $tipo['ruta'] }}" wire:navigate
                   class="inline-flex flex-none items-center gap-[7px] whitespace-nowrap px-3.5 pb-2.5 pt-[11px] text-[13px]"
                   style="border-bottom:2px solid {{ $tipo['activo'] ? 'var(--orange-500)' : 'transparent' }};
                          color:{{ $tipo['activo'] ? 'var(--orange-600)' : 'var(--text-muted)' }};
                          font-weight:{{ $tipo['activo'] ? 600 : 500 }};">
                    {{ $tipo['nombre'] }}
                    <span class="rounded-full px-[7px] py-px text-[10.5px]"
                          style="font-weight:{{ $tipo['cuantas'] > 0 ? 700 : 600 }};
                                 background:{{ $tipo['cuantas'] > 0 ? 'var(--orange-100)' : 'var(--surface-sunken)' }};
                                 color:{{ $tipo['cuantas'] > 0 ? 'var(--orange-600)' : 'var(--text-subtle)' }};">{{ $tipo['cuantas'] }}</span>
                </a>
            @endforeach
        </div>
    </section>

    @foreach (['success' => 'success', 'error' => 'danger'] as $clave => $color)
        @if (session($clave))
            <div class="rounded-lg px-4 py-2.5 text-[13px]"
                 style="background:var(--{{ $color }}-50); color:var(--{{ $color }}-500);">
                {{ session($clave) }}
            </div>
        @endif
    @endforeach

    {{-- ============ Ningún setup activo ============ --}}
    {{-- Un producto con setups pero ninguno activo **no sirve ninguno**, y en la lista eso
         se ve solo si te fijas en que todas las filas están en gris. --}}
    @if ($cuantosActivos === 0 && $cuantosDeprecados > 0)
        <div class="flex items-start gap-3 rounded-xl border px-[18px] py-3 text-[13px] leading-[1.55]"
             style="background:var(--warning-50); border-color:var(--warning-500); color:var(--text-body);">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="var(--warning-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none; margin-top:2px;"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
            <span>
                <strong class="font-semibold">No hay ningún setup publicado.</strong>
                Hay {{ $cuantosDeprecados }} {{ $cuantosDeprecados === 1 ? 'deshabilitado' : 'deshabilitados' }}, y los
                deshabilitados no se sirven: quien pida la acción
                <strong class="font-semibold" style="font-family:ui-monospace,monospace;">setup</strong>
                recibirá un error {{ $ficha['error'] }}. Vuelve a habilitar uno si esto no era lo que se quería.
            </span>
        </div>
    @endif

    @if ($setups->total() > 0)

        {{-- ============ Filtros ============ --}}
        @if ($cuantosDeprecados > 0 || $search !== '' || $statusFilter)
            <div class="flex flex-wrap items-center gap-2">
                <input type="text" wire:model.live.debounce.300ms="search"
                       placeholder="Buscar versión"
                       class="w-[180px] rounded-lg border px-3 py-1.5 text-[13px]"
                       style="border-color:var(--border-subtle); background:var(--surface-card); color:var(--text-strong);">

                @foreach ([['active', 'Publicados', $cuantosActivos], ['deprecated', 'Deshabilitados', $cuantosDeprecados]] as [$clave, $etiqueta, $cuantos])
                    @if ($cuantos > 0)
                        <button type="button" wire:click="$set('statusFilter', '{{ $statusFilter === $clave ? '' : $clave }}')"
                                class="rounded-lg border px-2.5 py-1 text-[12.5px] font-semibold"
                                style="border-color:{{ $statusFilter === $clave ? 'var(--text-strong)' : 'var(--border-subtle)' }};
                                       color:{{ $statusFilter === $clave ? 'var(--text-strong)' : 'var(--text-muted)' }};">
                            {{ $etiqueta }} <span style="color:var(--text-subtle);">{{ $cuantos }}</span>
                        </button>
                    @endif
                @endforeach

                @if ($search !== '' || $statusFilter)
                    <button type="button" wire:click="$set('search', ''); $set('statusFilter', null)"
                            class="text-[12.5px] font-semibold" style="color:var(--text-link);">Quitar filtros</button>
                @endif
            </div>
        @endif

        {{-- ============ Los setups, en tarjetas ============ --}}
        <section style="display:flex; flex-direction:column; gap:10px;">
            @foreach ($setups as $setup)
                @php
                    $activo = $setup->status === 'active';
                    $loReciben = $reparto['porVersion'][(string) $setup->version] ?? 0;
                    $yaml = $setup->resumenYaml ?? ['resumen' => null, 'roto' => false];

                    // La única acción de estado que se ofrece desde donde está el setup. Se
                    // calcula aquí y no en el atributo: Blade dentro de un atributo no lo
                    // reconoce el compilador y se queda literal en la pantalla.
                    [$estadoDestino, $textoDeEstado, $iconoDeEstado] = \App\Support\EstadoDePublicacion::accionDesde($setup->status);
                    $publicando = $estadoDestino === \App\Support\EstadoDePublicacion::PUBLICADA;
                @endphp
                <div class="rounded-xl border px-5 py-4"
                     style="background:var(--surface-card); border-color:{{ $yaml['roto'] ? 'var(--danger-500)' : 'var(--border-subtle)' }};{{ ! $activo ? ' opacity:0.75;' : '' }}">
                    <div class="flex flex-wrap items-start justify-between gap-4">
                        <div class="min-w-0 flex-1">
                            <div class="flex flex-wrap items-center gap-2.5">
                                <span style="font-family:ui-monospace,monospace; font-size:17px; font-weight:700; color:{{ $activo ? 'var(--text-strong)' : 'var(--text-muted)' }};">
                                    {{ $setup->version }}
                                </span>

                                {{-- El chip dice **la consecuencia**, no solo el estado:
                                     «Activo» a secas no explica que sea lo que se sirve. --}}
                                @if ($activo)
                                    <span class="rounded-full px-2 py-px text-[10.5px] font-semibold"
                                          style="color:var(--success-500); background:var(--success-50);">Publicado — se sirve</span>
                                @else
                                    <span class="rounded-full px-2 py-px text-[10.5px] font-semibold"
                                          style="color:var(--neutral-600); background:var(--surface-sunken);">Deshabilitado — no se sirve</span>
                                @endif

                                {{-- **Lo peor que le puede pasar a un setup**: si el YAML no
                                     parsea, la API le devuelve un 500 al cliente. Se ve
                                     aquí antes de que alguien se lo lleve. --}}
                                @if ($yaml['roto'])
                                    <span class="rounded-full px-2 py-px text-[10.5px] font-semibold"
                                          style="color:var(--danger-500); background:var(--danger-50);">El YAML no se puede leer</span>
                                @endif
                            </div>

                            {{-- El resumen del YAML: 181 líneas no caben, pero sus piezas
                                 sí, y es lo que permite comparar dos versiones de un
                                 vistazo. --}}
                            @if ($yaml['resumen'] && ! $yaml['roto'])
                                <div class="mt-1 text-[12px]" style="color:var(--text-muted);">{{ $yaml['resumen'] }}</div>
                            @endif

                            <div class="mt-[5px] text-[12.5px]" style="color:var(--text-body);">
                                {{ $setup->description ?: '—' }}
                            </div>

                            @if ($setup->change_log)
                                <div class="mt-[3px] text-[12px]" style="color:var(--text-muted);">
                                    <strong class="font-semibold" style="color:var(--text-body);">Qué cambió:</strong>
                                    {{ $setup->change_log }}
                                </div>
                            @endif

                            <div class="mt-[3px] text-[11.5px]" style="color:var(--text-subtle);">
                                Creado por {{ $setup->creator?->name ?? 'desconocido' }} · {{ $setup->created_at->format('d/m/Y') }}
                            </div>
                        </div>

                        <div class="flex flex-none flex-col items-end gap-2">
                            <div class="flex items-center gap-1.5 text-[12.5px]">
                                @if (! $activo)
                                    <span class="h-2 w-2 flex-none rounded-full" style="background:var(--neutral-400);"></span>
                                    <span style="color:var(--text-subtle);">No se sirve</span>
                                @elseif ($reparto['entornos'] === 0)
                                    <span class="h-2 w-2 flex-none rounded-full" style="background:var(--neutral-400);"></span>
                                    <span style="color:var(--text-subtle);">Sin entornos</span>
                                @elseif ($loReciben > 0)
                                    <span class="h-2 w-2 flex-none rounded-full" style="background:var(--success-500);"></span>
                                    <span style="color:var(--text-body);">
                                        Lo reciben <strong style="font-weight:700; color:var(--text-strong);">{{ $loReciben }}</strong>
                                    </span>
                                @else
                                    <span class="h-2 w-2 flex-none rounded-full" style="background:var(--danger-500);"></span>
                                    <span class="tip font-semibold"
                                          data-tip="Ningún entorno tiene el plugin en una versión que resuelva a este setup"
                                          style="color:var(--danger-500);">Nadie lo resuelve</span>
                                @endif
                            </div>

                            {{-- **Dos grupos, igual que en los otros seis tipos.** A la
                                 izquierda lo que cambia lo que reciben los clientes; a la
                                 derecha lo que solo lleva a otra pantalla.

                                 La acción de estado es **una sola** y la decide dónde está el
                                 setup: publicado se deshabilita, deshabilitado se vuelve a
                                 habilitar.
                                 Y abre la modal, que cuenta a qué versión cae cada entorno
                                 —que no es la misma para todos, depende de la versión de su
                                 plugin— y cuáles se quedan sin ninguna, que es el caso que
                                 decide porque ahí la API responde «sin contenido» y eso no
                                 avisa a nadie. --}}
                            <div class="flex flex-wrap items-center justify-end gap-2 text-[12.5px] font-semibold">
                                @if ($puedeEscribir)
                                    <button type="button"
                                            wire:click="pedirCambioDeEstado({{ $setup->id }}, '{{ $estadoDestino }}')"
                                            class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5"
                                            style="border-color:{{ $publicando ? 'var(--success-500)' : 'var(--border-default)' }};
                                                   background:var(--surface-page);
                                                   color:{{ $publicando ? 'var(--success-600, var(--success-500))' : 'var(--text-body)' }};">
                                        <x-icono-de-accion :nombre="$iconoDeEstado" />
                                        {{ $textoDeEstado }}
                                    </button>
                                @endif
                                @if ($puedeCrear)
                                    {{-- Abre la modal, que es donde se decide el número del
                                         setup nuevo: es lo que determina a qué sitios les
                                         llegará cuando se publique. --}}
                                    <button type="button" wire:click="pedirDuplicar({{ $setup->id }})"
                                            class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5"
                                            style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                                        <x-icono-de-accion nombre="duplicar" />
                                        Duplicar como nuevo…
                                    </button>
                                @endif

                                @can('admin.setups.show')
                                    <a href="{{ route('products.setups.show', [$product, $setup]) }}" wire:navigate
                                       class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5"
                                       style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-link);">
                                        <x-icono-de-accion nombre="ver" />
                                        Ver
                                    </a>
                                @endcan
                                @if ($puedeEscribir)
                                    <a href="{{ route('products.setups.edit', [$product, $setup]) }}" wire:navigate
                                       class="inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5"
                                       style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-link);">
                                        <x-icono-de-accion nombre="editar" />
                                        Editar
                                    </a>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
        </section>

        @if ($setups->hasPages())
            <div>{{ $setups->links() }}</div>
        @endif

        {{-- ============ Qué recibe cada entorno ============ --}}
        @include('livewire.products.contenido.por-entorno', [
            'porEntorno' => $porEntorno,
            'peticiones' => $peticiones,
            'product' => $product,
            'ficha' => $ficha,
        ])

    @else
        {{-- ============ Vacío ============ --}}
        <section class="rounded-xl border px-6 py-11 text-center"
                 style="background:var(--surface-card); border-color:var(--border-subtle);">
            @if ($search !== '' || $statusFilter)
                <div class="text-[13px]" style="color:var(--text-muted);">
                    Ningún setup encaja con la búsqueda.
                    <button type="button" wire:click="$set('search', ''); $set('statusFilter', null)"
                            class="font-semibold" style="color:var(--text-link);">Quitarla</button>
                </div>
            @else
                <span class="inline-flex h-[52px] w-[52px] items-center justify-center rounded-[14px]"
                      style="background:{{ $ficha['fondo'] }}; color:{{ $ficha['tinta'] }}; font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:700;">
                    {{ $ficha['inicial'] }}
                </span>

                <div class="mt-4" style="font-family:'Plus Jakarta Sans',sans-serif; font-size:17px; font-weight:700; color:var(--text-strong);">
                    {{ $product->name }} no tiene ningún setup
                </div>

                {{-- **Dos cosas distintas, dos párrafos.** Antes iban pegados en uno solo y
                     se leía como un muro: qué es un setup es lo que hace falta la primera
                     vez, y qué pasa mientras no haya ninguno es una consecuencia técnica. --}}
                <p class="mx-auto mt-3 max-w-[560px] text-[13.5px] leading-[1.65]" style="color:var(--text-body);">
                    {{ $ficha['explicacion'] }}
                </p>

                <div class="mx-auto mt-5 max-w-[520px] rounded-lg px-4 py-3 text-[12.5px] leading-[1.6]"
                     style="background:var(--surface-alt); color:var(--text-muted);">
                    Mientras no haya ninguno publicado, la acción
                    <strong class="font-semibold" style="font-family:ui-monospace,monospace; color:var(--text-body);">setup</strong>
                    responde un error <strong class="font-semibold" style="color:var(--text-body);">{{ $ficha['error'] }}</strong>
                    a quien la pida. No es un fallo: es que aún no hay nada publicado.
                </div>

                @if (($peticiones['total'] ?? 0) > 0)
                    <div class="mx-auto mt-3.5 inline-flex max-w-[560px] items-start gap-2.5 rounded-[10px] border px-4 py-2.5 text-left text-[12.5px]"
                         style="background:var(--danger-50); border-color:var(--danger-500); color:var(--text-body);">
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--danger-500)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex:none; margin-top:2px;"><circle cx="12" cy="12" r="10"/><path d="M12 8v4"/><path d="M12 16h.01"/></svg>
                        <span>
                            Y hay quien lo está pidiendo: <strong class="font-semibold">{{ $peticiones['total'] }}</strong>
                            {{ $peticiones['total'] === 1 ? 'petición registrada' : 'peticiones registradas' }} en los últimos 30 días.
                            Alguien espera un setup que no existe.
                        </span>
                    </div>
                @endif

                @can('admin.setups.create')
                    <div class="mt-4.5 flex justify-center">
                        <a href="{{ route('products.setups.create', $product) }}" wire:navigate
                           class="rounded-lg px-4 py-2.5 text-[13px] font-semibold text-white"
                           style="background:var(--orange-500);">
                            Crear el primer setup
                        </a>
                    </div>
                @endcan
            @endif
        </section>
    @endif
</div>
