{{-- ============================================================
     Una versión de archivos: SCSS y JS.

     **Una vista para las dos.** Eran dos ficheros de 160 líneas con un diff de 48, todas
     nombres. Lo que cambia lo declara cada componente en su `fichaDeLaVersion()`.

     Y trae lo que la pantalla no decía: **si esta versión se está sirviendo y a quién**. Se
     puede estar editando una versión que no le llega a nadie, y desde aquí no había forma
     de saberlo.
     ============================================================ --}}
<div class="w-full" style="font-size:14px; display:flex; flex-direction:column; gap:14px;">

    {{-- La miga completa: producto → tipo de contenido → esta versión. Antes era un botón
         «Volver» que llevaba al producto, saltándose el listado del tipo. --}}
    <div class="flex flex-wrap items-center gap-1.5 text-[13px]">
        <a href="{{ route('products.show', $product) }}" wire:navigate
           class="inline-flex items-center gap-1.5 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>
        <span style="color:var(--border-strong);">/</span>
        <a href="{{ route($ficha['rutaListado'], $product) }}" wire:navigate
           class="font-semibold" style="color:var(--text-link);">{{ $ficha['nombre'] }}</a>
    </div>

    {{-- ============ Cabecera ============ --}}
    <x-cabecera
        :rotulo="'Versión de ' . $ficha['nombre'] . ' · ' . $product->name"
        :titulo="$version->version">

        <x-slot:icono>
            <span style="font-family:'Plus Jakarta Sans',sans-serif; font-size:20px; font-weight:700;">{{ $ficha['inicial'] }}</span>
        </x-slot:icono>

        <x-slot:descripcion>
            {{ $version->description ?: 'Sin descripción. Sirve para saber qué trae esta versión sin abrirla.' }}
        </x-slot:descripcion>

        <x-slot:meta>
            {{-- **Lo que se compara entre versiones**: no «9 archivos» a secas, sino cuántos
                 y cuánto pesan, que es lo que dice si una versión creció o adelgazó. --}}
            <span>
                <strong class="font-semibold" style="color:var(--text-strong);">{{ $archivos->count() }}</strong>
                {{ $archivos->count() === 1 ? $ficha['elemento'] : $ficha['elementos'] }}
                @if ($carpetas > 1)
                    en {{ $carpetas }} carpetas
                @endif
            </span>
            @if ($peso > 0)
                <span style="color:var(--border-strong);">·</span>
                <span>{{ $peso >= 1024 ? number_format($peso / 1024, 1, ',', '.') . ' KB' : $peso . ' bytes' }}</span>
            @endif

            {{-- A qué entornos les llega. La API sirve la más alta que no supere el plugin de cada
                 sitio, así que una versión puede estar publicada y no llegarle a nadie. --}}
            <span style="color:var(--border-strong);">·</span>
            @if ($llega['conPlugin'] === 0)
                <span class="tip" data-tip="Ningún entorno con licencia tiene el plugin instalado"
                      style="color:var(--text-subtle);">Ningún entorno la pide</span>
            @elseif ($llega['laReciben'] > 0)
                <span style="color:var(--success-500);">
                    La reciben <strong class="font-semibold">{{ $llega['laReciben'] }}</strong>
                    {{ $llega['laReciben'] === 1 ? 'entorno' : 'entornos' }}
                </span>
            @else
                <span class="tip font-semibold"
                      data-tip="Ningún entorno tiene el plugin en una versión que resuelva a esta. Para recibirla tendrían que actualizarlo."
                      style="color:var(--danger-500);">No la recibe nadie</span>
            @endif

            <span style="color:var(--border-strong);">·</span>
            <span>{{ $version->creator?->name ?? 'desconocido' }} · {{ $version->created_at->format('d/m/Y') }}</span>
        </x-slot:meta>

        <x-slot:acciones>
            @can($ficha['permisoVersion'])
                {{-- Duplicar crea otra versión con **todos los archivos dentro**: es el
                     camino normal para sacar una versión nueva, y por eso la confirmación
                     dice qué va a pasar. --}}
                <button type="button" wire:click="duplicateVersion"
                        wire:confirm="Se creará una versión nueva con una copia de los {{ $archivos->count() }} {{ $archivos->count() === 1 ? $ficha['elemento'] : $ficha['elementos'] }} de la {{ $version->version }}. ¿Seguir?"
                        class="rounded-lg border px-3.5 py-2 text-[13px] font-semibold"
                        style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                    Duplicar como nueva
                </button>
            @endcan
            {{-- Mismo botón y misma modal que en los tipos de contenido: los cinco versionan
                 igual y la API les resuelve igual (PRODSECU-198). --}}
            @if ($this->puedeBorrarLaVersion())
                <x-boton-borrar-version :la-reciben="$llega['laReciben']"
                                        :elementos="$archivos->count()" />
            @endif
            @can($ficha['permisoVersionEdit'])
                <a href="{{ route($ficha['rutaEditarVersion'], [$product, $version]) }}" wire:navigate
                   class="rounded-lg px-4 py-2 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)'">
                    Editar la versión
                </a>
            @endcan
        </x-slot:acciones>
    </x-cabecera>

    @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

    {{-- ============ Los archivos ============ --}}
    <section class="overflow-hidden rounded-xl border"
             style="background:var(--surface-card); border-color:var(--border-subtle);">

        <div class="flex flex-wrap items-end justify-between gap-4 px-5 py-3.5">
            <div class="min-w-0">
                <h2 style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong); margin:0;">
                    {{ ucfirst($ficha['elementos']) }}
                </h2>
                <div class="mt-0.5 text-[12.5px]" style="color:var(--text-muted);">
                    Se piden por nombre sin extensión, o todos los de la versión si no se pide ninguno.
                </div>
            </div>

            <div class="flex flex-wrap items-center gap-2">
                @can($ficha['permisoSubir'])
                    <a href="{{ route($ficha['rutaSubir'], [$product, $version]) }}" wire:navigate
                       class="rounded-lg border px-3.5 py-2 text-[12.5px] font-semibold"
                       style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                        Subir archivos
                    </a>
                @endcan
                @can($ficha['permisoArchivo'])
                    <a href="{{ route($ficha['rutaCrearArchivo'], [$product, $version]) }}" wire:navigate
                       class="rounded-lg px-3.5 py-2 text-[12.5px] font-semibold text-white"
                       style="background:var(--orange-500);">
                        Escribir uno
                    </a>
                @endcan
            </div>
        </div>

        @if ($archivos->isNotEmpty())
            <div class="vf-grid border-y px-5 py-1.5 text-[11px] font-semibold uppercase tracking-[0.06em]"
                 style="border-color:var(--border-subtle); background:var(--neutral-50); color:var(--text-subtle);">
                <div>Archivo</div>
                <div>Tamaño</div>
                <div>Añadido</div>
                <div></div>
            </div>
        @endif

        @forelse ($archivos as $archivo)
            @php
                $ruta = str_contains((string) $archivo->filename, '/') ? dirname((string) $archivo->filename) . '/' : '';
                $nombre = basename((string) $archivo->filename);
            @endphp
            <div class="vf-grid px-5 py-2 text-[12.5px] {{ ! $loop->first ? 'border-t' : '' }} hover:bg-[var(--surface-alt)]"
                 style="border-color:var(--border-subtle);">

                {{-- La carpeta en gris y el nombre en negro: con estructura de carpetas, lo
                     que se busca es el nombre, y la ruta es contexto. --}}
                <div class="min-w-0 truncate" style="font-family:ui-monospace,monospace;">
                    @if ($ruta !== '')
                        <span style="color:var(--text-subtle);">{{ $ruta }}</span>
                    @endif
                    <span class="font-semibold" style="color:var(--text-strong);">{{ $nombre }}</span>
                </div>

                <div style="color:var(--text-muted);">
                    @php $bytes = (int) $archivo->peso; @endphp
                    {{ $bytes >= 1024 ? number_format($bytes / 1024, 1, ',', '.') . ' KB' : $bytes . ' bytes' }}
                </div>

                <div style="color:var(--text-muted);">
                    {{ $archivo->created_at->format('d/m/Y') }}
                    @if ($archivo->creator)
                        <div class="truncate text-[11.5px]" style="color:var(--text-subtle);">{{ $archivo->creator->name }}</div>
                    @endif
                </div>

                <div class="flex items-center justify-end gap-2.5 text-[12px] font-semibold">
                    @can($ficha['permisoVerArchivo'])
                        <a href="{{ route($ficha['rutaVerArchivo'], [$product, $version, $archivo]) }}" wire:navigate
                           style="color:var(--text-link);">Ver</a>
                    @endcan
                    @can($ficha['permisoEditarArchivo'])
                        <a href="{{ route($ficha['rutaEditarArchivo'], [$product, $version, $archivo]) }}" wire:navigate
                           style="color:var(--text-link);">Editar</a>
                    @endcan
                    @can($ficha['permisoBorrarArchivo'])
                        {{-- Borrar un archivo **cambia lo que reciben los clientes que
                             resuelven a esta versión**, y eso no se puede descubrir después:
                             la confirmación lo dice con el número delante. --}}
                        {{-- Era un `wire:confirm` con el recuento de la versión metido en la
                             frase. La modal lo dice mejor y, sobre todo, dice que **estos
                             archivos no tienen borrador**: todo lo que hay se sirve. --}}
                        <button type="button" wire:click="abrirBorrarElemento({{ $archivo->id }})"
                                style="color:var(--danger-500);">Borrar</button>
                    @endcan
                </div>
            </div>
        @empty
            {{-- **Una versión vacía se sirve igual**, y quien la reciba se lleva una
                 respuesta vacía sin ningún error. Aquí es donde hay que decirlo. --}}
            <div class="px-6 py-10 text-center">
                <div style="font-family:'Plus Jakarta Sans',sans-serif; font-size:15px; font-weight:700; color:var(--text-strong);">
                    Esta versión no tiene ningún archivo
                </div>
                <p class="mx-auto mt-2.5 max-w-[520px] text-[13px] leading-[1.6]" style="color:var(--text-muted);">
                    @if ($llega['laReciben'] > 0)
                        Y <strong class="font-semibold" style="color:var(--warning-500);">{{ $llega['laReciben'] }}
                        {{ $llega['laReciben'] === 1 ? 'entorno la está recibiendo' : 'entornos la están recibiendo' }}</strong>:
                        se llevan una respuesta vacía, sin ningún error que lo indique.
                    @else
                        Se sirve igual a quien la resuelva, con una respuesta vacía y sin ningún error.
                    @endif
                </p>

                <div class="mt-5 flex flex-wrap justify-center gap-2.5">
                    @can($ficha['permisoSubir'])
                        <a href="{{ route($ficha['rutaSubir'], [$product, $version]) }}" wire:navigate
                           class="rounded-lg border px-4 py-2.5 text-[13px] font-semibold"
                           style="border-color:var(--border-default); background:var(--surface-page); color:var(--text-body);">
                            Subir archivos
                        </a>
                    @endcan
                    @can($ficha['permisoArchivo'])
                        <a href="{{ route($ficha['rutaCrearArchivo'], [$product, $version]) }}" wire:navigate
                           class="rounded-lg px-4 py-2.5 text-[13px] font-semibold text-white"
                           style="background:var(--orange-500);">
                            Escribir uno
                        </a>
                    @endcan
                </div>
            </div>
        @endforelse
    </section>
</div>