{{--
    Locale bar for LocaleSwapEditor: swaps the editor's content in the BROWSER, with no request.

    The two `$wire.set(..., false)` calls are deferred (no round trip). The editor picks the change up
    on its own because the TipTap plugin entangles its `state` and watches it
    (`$watch('state') -> updateEditorContent()`), so writing the scratch path is enough to repaint it.

    See docs/CLAUDE-PANEL-RENDIMIENTO.md.
--}}
@php
    // Absolute state paths of this item: the bar's own path minus its last segment.
    $base       = \Illuminate\Support\Str::beforeLast($getStatePath(), '.');
    $activePath = $base . '.' . $activeField;
    $localePath = $base . '.' . $field;
@endphp

{{--
    wire:key con la ruta completa (incluye el uuid del item del repeater): sin él, el morph de
    Livewire reutiliza este nodo para OTRA card y el x-data sobrevive con los paths y el idioma de la
    card anterior — se veía "PT" activo mientras el editor mostraba el idioma por defecto, y escribir
    habría guardado en la card equivocada.
--}}
<div
    wire:key="locale-swap-bar-{{ $getStatePath() }}"
    x-data="{
        locale: @js($defaultLocale),
        locales: @js($locales),
        activePath: @js($activePath),
        localePath: @js($localePath),
        timer: null,
        lastSeen: null,

        path(locale) {
            return this.localePath + '.' + locale;
        },

        // El componente Alpine del editor TipTap, buscado hacia arriba desde la barra.
        // Se habla con ÉL y no con el estado de Livewire porque en el formulario de CREAR las
        // claves del estado todavía no existen: `$wire.get` devolvía undefined y lo escrito en el
        // primer idioma se perdía. El `state` del editor sí es la verdad de lo que hay en pantalla,
        // y escribirlo dispara su propio $watch (repinta) y su $entangle (sincroniza a Livewire).
        editor() {
            let node = this.$el;

            for (let i = 0; i < 6 && node; i++) {
                const found = node.querySelector('[x-data^=\'tiptap(\']');

                if (found) return Alpine.$data(found);

                node = node.parentElement;
            }

            return null;
        },

        isEmpty(value) {
            if (value === null || value === undefined || value === '') return true;

            return value.type === 'doc' && (! value.content || value.content.length === 0);
        },

        // TipTap ignora setContent(null), así que un idioma vacío se carga como documento vacío.
        // El plugin lo normaliza de vuelta a null en su onUpdate (editor.isEmpty), así que no se
        // guarda un doc falso que rompería el fallback de translate_data() en el frontend.
        emptyDoc() {
            return { type: 'doc', content: [{ type: 'paragraph' }] };
        },

        init() {
            this.$nextTick(() => this.startMirror());
        },

        // Espejo: copia lo que hay en el editor al idioma activo, diferido (sin petición).
        //
        // Va por sondeo del `updatedAt` que el plugin toca en cada cambio, y NO por Alpine.effect
        // sobre `state`: la reactividad entre componentes no disparaba de forma fiable y el texto se
        // quedaba sin copiar hasta que se cambiaba de idioma — es decir, teclear y guardar sin
        // cambiar de idioma perdía el contenido. 400 ms de intervalo comparando un entero, sin
        // coste real.
        startMirror() {
            const ed = this.editor();

            if (! ed) {
                setTimeout(() => this.startMirror(), 300);

                return;
            }

            this.lastSeen = ed.updatedAt;

            this.timer = setInterval(() => {
                const editor = this.editor();

                if (! editor || editor.updatedAt === this.lastSeen) return;

                this.lastSeen = editor.updatedAt;

                this.$wire.set(this.path(this.locale), editor.state ?? null, false);
            }, 400);
        },

        destroy() {
            if (this.timer) clearInterval(this.timer);
        },

        switchTo(locale) {
            if (locale === this.locale) return;

            const ed = this.editor();

            if (! ed) return;

            // 1. guardar lo que está en pantalla en el idioma que se deja
            this.$wire.set(this.path(this.locale), ed.state ?? null, false);

            // 2. cambiar el idioma ANTES de tocar el editor: el espejo escribe en `this.locale`, y
            //    al revés metía el contenido nuevo en el idioma anterior, borrándolo.
            this.locale = locale;

            // 3. cargar el destino en el editor (repinta y sincroniza solo)
            const target = this.$wire.get(this.path(locale));

            ed.state = this.isEmpty(target) ? this.emptyDoc() : target;

            // El espejo no debe volver a escribir lo que acabamos de cargar.
            this.$nextTick(() => { this.lastSeen = ed.updatedAt; });
        },
    }"
    {{-- Estilos en línea a propósito: usan las variables de color del panel (--primary-600,
         --gray-*), así que se ven bien en claro y en oscuro sin depender de utilidades que quizá
         no estén compiladas en el CSS del panel. --}}
    class="flex flex-wrap items-center gap-2"
>
    <div
        style="display: inline-flex; align-items: stretch; border-radius: 0.5rem; overflow: hidden;
               box-shadow: 0 0 0 1px rgba(var(--gray-400), 0.35);"
    >
        <template x-for="(code, i) in locales" :key="code">
            <button
                type="button"
                x-on:click="switchTo(code)"
                x-text="code.replace('_', '-').toUpperCase()"
                :title="code"
                {{-- Todo el estilo va en el :style: Alpine reemplaza el atributo style estático,
                     así que mezclarlos dejaba los botones sin padding (22x24 px). --}}
                :style="(locale === code
                        ? 'background: rgba(var(--primary-600), 1); color: #fff; font-weight: 600;'
                        : 'background: transparent; color: rgba(var(--gray-400), 1); font-weight: 500;')
                    + 'padding: 0.55rem 1rem; font-size: 0.875rem; line-height: 1.2; min-width: 3.75rem;'
                    + 'border: 0; cursor: pointer; letter-spacing: .02em;'
                    + 'transition: background-color .12s ease, color .12s ease;'"
                :class="i > 0 ? 'itg-locale-btn itg-locale-btn--divided' : 'itg-locale-btn'"
            ></button>
        </template>
    </div>
</div>