@extends('layouts.admin')

@section('title', 'CHAPS - Organisation des Metadonnees')
@section('header', 'Organisation des Metadonnees')

@push('styles')
@include('partials.save-button-styles')
<style>
    .draggable-item {
        transition: all 0.2s ease;
    }
    .draggable-item:hover {
        transform: translateX(4px);
    }
    .sortable-ghost {
        opacity: 0.4;
        background: #e0e7ff;
    }
    .sortable-drag {
        opacity: 0.8;
        cursor: grabbing !important;
    }
    .field-card {
        border-left: 4px solid #6366f1;
    }
    .bloc-container {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }
    .tab-active {
        border-color: #6366f1;
        color: #4f46e5;
        background-color: #eef2ff;
    }
    .tab-inactive {
        border-color: transparent;
        color: #6b7280;
    }
    .tab-inactive:hover {
        color: #374151;
        border-color: #d1d5db;
    }
    /* save-btn-pulse defini dans partials.save-button-styles */
</style>
@endpush

@section('content')
<div id="metadata-organizer" x-data="metadataOrganizer('{{ csrf_token() }}')">

    <!-- Header avec filtre source -->
    <div class="bg-white shadow rounded-lg p-6 mb-6">
        <div class="flex justify-between items-center">
            <div class="flex-1">
                <h2 class="text-2xl font-bold text-gray-900">Organisation des Metadonnees</h2>
                <p class="text-sm text-gray-600 mt-1">Organisez visuellement les vues de chaque module</p>
            </div>
            <div class="flex gap-3 items-center">
                <!-- Filtre par source -->
                <div class="flex rounded-lg shadow-sm border border-gray-300 overflow-hidden">
                    <button class="px-4 py-2 text-sm font-medium transition-colors bg-indigo-600 text-white">
                        <i class="fas fa-database mr-2"></i> Modules ESTAIR
                    </button>
                </div>

                <!-- Bouton Sauvegarder (visible seulement quand la pile est non-vide) -->
                <button x-show="getPendingCount() > 0"
                        x-transition:enter="transition ease-out duration-200"
                        x-transition:enter-start="opacity-0 scale-95"
                        x-transition:enter-end="opacity-100 scale-100"
                        x-transition:leave="transition ease-in duration-150"
                        x-transition:leave-start="opacity-100 scale-100"
                        x-transition:leave-end="opacity-0 scale-95"
                        @click="saveAllPending()"
                        :disabled="saving"
                        class="save-btn-pulse inline-flex items-center px-5 py-2 bg-red-600 text-white rounded-md shadow-lg text-sm font-medium hover:bg-red-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors">
                    <i class="fas fa-save mr-2"></i>
                    <span x-text="saving ? 'Sauvegarde...' : 'Sauvegarder'"></span>
                    <span class="ml-2 bg-white text-red-700 font-bold text-xs rounded-full px-2 py-0.5 min-w-[20px] text-center"
                          x-text="getPendingCount()"></span>
                </button>

                <a href="{{ route('admin.metadatas.list') }}"
                   class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-list mr-2"></i> Vue liste
                </a>

                <button @click="regenerateJson()"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700">
                    <i class="fas fa-sync mr-2"></i> Regenerer JSON
                </button>

                <button @click="loadMetadatas()"
                        class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-sync-alt mr-2"></i> Actualiser
                </button>
            </div>
        </div>
    </div>

    <!-- Filtre par module -->
    <div class="bg-white shadow rounded-lg mb-6">
        <div class="border-b border-gray-200 bg-gray-50 px-6 py-3">
            <div class="flex items-center justify-between">
                <span class="text-sm font-medium text-gray-700">
                    <i class="fas fa-filter mr-2"></i>
                    Selectionnez un module
                    <span class="text-indigo-600 font-semibold" x-text="selectedSource === 'data' ? 'ESTAIR' : 'CHAPS'"></span>
                </span>
                <span class="text-xs text-gray-500" x-text="availableObjects.length + ' module(s)'"></span>
            </div>
        </div>
        <div class="border-b border-gray-200">
            <nav class="-mb-px flex space-x-4 px-6 overflow-x-auto" aria-label="Tabs">
                <template x-for="obj in availableObjects" :key="obj">
                    <button @click="selectedObject = obj; filterByObject();"
                            :class="selectedObject === obj
                                ? 'border-indigo-500 text-indigo-600 bg-indigo-50'
                                : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'"
                            class="whitespace-nowrap py-4 px-3 border-b-2 font-medium text-sm capitalize"
                            x-text="obj">
                    </button>
                </template>
            </nav>
        </div>
    </div>

    <!-- Loading -->
    <div x-show="loading" class="bg-white shadow rounded-lg p-12 text-center">
        <i class="fas fa-spinner fa-spin text-4xl text-indigo-600 mb-4"></i>
        <p class="text-gray-600">Chargement des metadonnees...</p>
    </div>

    <!-- ===== 3 TABPANES ===== -->
    <div x-show="!loading">

        <!-- Tabs Navigation -->
        <div class="bg-white shadow rounded-t-lg border-b border-gray-200">
            <div class="px-6 py-3 flex items-center justify-between">
                <nav class="flex -mb-px space-x-1">
                    <button @click="switchTab('tabular')"
                            :class="activeTab === 'tabular' ? 'tab-active' : 'tab-inactive'"
                            class="py-3 px-5 border-b-2 font-medium text-sm rounded-t-lg transition-colors">
                        <i class="fas fa-table mr-2"></i> Vue Tabulaire
                    </button>
                    <button @click="switchTab('blocs')"
                            :class="activeTab === 'blocs' ? 'tab-active' : 'tab-inactive'"
                            class="py-3 px-5 border-b-2 font-medium text-sm rounded-t-lg transition-colors">
                        <i class="fas fa-th-large mr-2"></i> Blocs & Header
                    </button>
                    <button @click="switchTab('list')"
                            :class="activeTab === 'list' ? 'tab-active' : 'tab-inactive'"
                            class="py-3 px-5 border-b-2 font-medium text-sm rounded-t-lg transition-colors">
                        <i class="fas fa-list-ol mr-2"></i> Vue Liste
                    </button>
                </nav>
                <div class="text-sm text-gray-700">
                    <span class="font-medium" x-text="filteredMetadatas.length"></span> champ(s) pour
                    <span class="font-semibold capitalize" x-text="selectedObject"></span>
                </div>
            </div>
        </div>

        <!-- ========== TAB 1 : VUE TABULAIRE ========== -->
        <div x-show="activeTab === 'tabular'" class="bg-white shadow rounded-b-lg overflow-hidden">
            <div class="overflow-y-auto overflow-x-auto" style="max-height: calc(100vh - 400px);">
                <table class="min-w-full divide-y divide-gray-200">
                    <thead class="bg-gray-50 sticky top-0 z-10" style="box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
                        <tr>
                            <th class="px-2 py-3 text-center text-xs font-medium text-gray-500 uppercase w-10">
                                <i class="fas fa-grip-vertical text-gray-400"></i>
                            </th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase w-12">#</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase min-w-[150px]">Champ</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase min-w-[180px]">Display Name</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">List</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Create</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Update</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Detail</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Header</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Context</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Report</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Active</th>
                            <th class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase w-20">Deleted</th>
                            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase min-w-[150px]">Bloc</th>
                        </tr>
                    </thead>
                    <tbody id="sortable-table-tbody" class="bg-white divide-y divide-gray-200">
                        <template x-for="(meta, index) in filteredMetadatas" :key="meta.id">
                            <tr class="hover:bg-gray-50 transition-colors sortable-row" :data-metadata-id="meta.id">
                                <td class="px-2 py-3 text-center cursor-move drag-handle">
                                    <i class="fas fa-grip-vertical text-gray-400"></i>
                                </td>
                                <td class="px-4 py-3 text-sm text-gray-500" x-text="index + 1"></td>
                                <td class="px-4 py-3">
                                    <div class="text-sm font-medium text-gray-900" x-text="meta.fieldname"></div>
                                </td>
                                <td class="px-4 py-3">
                                    <input type="text"
                                           :value="meta.displayname"
                                           @blur="updateDisplayname(meta, $event)"
                                           class="w-full px-2 py-1 text-sm border border-gray-300 rounded focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500"
                                           placeholder="Display name">
                                </td>
                                <!-- Toggles : list, create, update, detail, header, context, report, is_active, is_deleted -->
                                <template x-for="field in ['list', 'create', 'update', 'detail', 'header', 'context', 'report', 'is_active', 'is_deleted']" :key="field">
                                    <td class="px-2 py-3 text-center">
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input type="checkbox"
                                                   :checked="!!meta[field]"
                                                   @change="toggleField(meta, field, $event.target.checked ? 1 : 0)"
                                                   class="sr-only peer">
                                            <div class="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-2 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-green-500"></div>
                                        </label>
                                    </td>
                                </template>
                                <td class="px-4 py-3 text-sm text-gray-600" x-text="getBlocName(meta.blocs_id)"></td>
                            </tr>
                        </template>

                        <tr x-show="filteredMetadatas.length === 0">
                            <td colspan="14" class="px-6 py-12 text-center text-gray-500">
                                Aucune metadonnee trouvee pour ce module
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- ========== TAB 2 : BLOCS & HEADER ========== -->
        <div x-show="activeTab === 'blocs'" class="bg-white shadow rounded-b-lg overflow-hidden">
            <div class="p-6 space-y-6" style="max-height: calc(100vh - 400px); overflow-y: auto;">
                <!-- Champs disponibles (sans bloc) -->
                <div class="bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
                    <h4 class="text-lg font-semibold text-gray-700 mb-3 flex items-center">
                        <i class="fas fa-inbox text-gray-500 mr-2"></i>
                        Champs disponibles
                        <span class="ml-2 text-sm text-gray-500" x-text="'(' + getAvailableFieldsForBlocs().length + ')'"></span>
                    </h4>
                    <div id="available-blocs" class="grid grid-cols-3 gap-2 min-h-[80px] p-2 bg-gray-50 rounded border-2 border-dashed border-gray-300">
                        <template x-for="field in getAvailableFieldsForBlocs()" :key="field.id">
                            <div class="draggable-item bg-white rounded p-2 text-sm flex items-center justify-between cursor-move hover:shadow-md transition-shadow"
                                 :data-id="field.id">
                                <div class="flex items-center flex-1 min-w-0">
                                    <i class="fas fa-grip-vertical text-gray-400 mr-2 flex-shrink-0"></i>
                                    <div class="min-w-0 flex-1">
                                        <div class="font-medium text-gray-900 text-xs truncate" x-text="field.displayname"></div>
                                        <div class="text-xs text-gray-500 truncate" x-text="field.fieldname"></div>
                                    </div>
                                </div>
                                <div class="flex items-center gap-2 flex-shrink-0 ml-2">
                                    <label class="flex items-center text-xs text-gray-600">
                                        <input type="checkbox"
                                               :checked="field.header"
                                               @change="toggleField(field, 'header', $event.target.checked ? 1 : 0)"
                                               class="mr-1 rounded text-indigo-600">
                                        <span class="hidden xl:inline">Header</span>
                                        <span class="xl:hidden">H</span>
                                    </label>
                                </div>
                            </div>
                        </template>
                    </div>
                    <div x-show="getAvailableFieldsForBlocs().length === 0" class="text-center py-4 text-gray-400">
                        Tous les champs sont assignes a un bloc
                    </div>
                </div>

                <!-- Blocs existants -->
                <template x-for="bloc in getBlocs()" :key="bloc.id">
                    <div class="bg-gradient-to-r from-gray-50 to-gray-100 rounded-lg p-4 border border-gray-200">
                        <div class="flex items-center justify-between mb-3">
                            <h5 class="font-bold text-gray-900 flex items-center">
                                <i class="fas fa-folder text-indigo-600 mr-2"></i>
                                <span x-text="bloc.label || bloc.name || 'Sans bloc'"></span>
                            </h5>
                            <span class="text-xs text-gray-500" x-text="getBlocFields(bloc).length + ' champ(s)'"></span>
                        </div>
                        <div :id="'bloc-' + bloc.id" class="grid grid-cols-3 gap-2 min-h-[80px]">
                            <template x-for="(field, index) in getBlocFields(bloc)" :key="field.id">
                                <div class="draggable-item field-card bg-white rounded-lg p-3 shadow-sm cursor-move flex items-center justify-between hover:shadow-md"
                                     :data-id="field.id"
                                     :data-bloc="bloc.id">
                                    <div class="flex items-center flex-1 min-w-0">
                                        <i class="fas fa-grip-vertical text-gray-400 mr-2 flex-shrink-0"></i>
                                        <span class="bg-indigo-100 text-indigo-700 font-bold text-xs rounded-full w-6 h-6 flex items-center justify-center mr-2 flex-shrink-0"
                                              x-text="index + 1"></span>
                                        <div class="min-w-0 flex-1">
                                            <div class="font-medium text-gray-900 text-sm truncate" x-text="field.displayname"></div>
                                            <div class="text-xs text-gray-500 truncate" x-text="field.fieldname"></div>
                                        </div>
                                    </div>
                                    <div class="flex items-center gap-2 flex-shrink-0 ml-2">
                                        <label class="flex items-center text-xs text-gray-600">
                                            <input type="checkbox"
                                                   :checked="field.header"
                                                   @change="toggleField(field, 'header', $event.target.checked ? 1 : 0)"
                                                   class="mr-1 rounded text-indigo-600">
                                            <span class="hidden xl:inline">Header</span>
                                            <span class="xl:hidden">H</span>
                                        </label>
                                        <button @click.stop="removeFromBloc(field)"
                                                class="text-red-500 hover:text-red-700 hover:bg-red-100 rounded p-1.5 transition-colors border border-red-300 hover:border-red-500"
                                                title="Retirer du bloc">
                                            <i class="fas fa-times"></i>
                                        </button>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <!-- ========== TAB 3 : VUE LISTE ========== -->
        <div x-show="activeTab === 'list'" class="bg-white shadow rounded-b-lg overflow-hidden">
            <div class="p-6" style="max-height: calc(100vh - 400px); overflow-y: auto;">
                <div class="grid grid-cols-2 gap-6">
                    <!-- Champs disponibles -->
                    <div>
                        <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-inbox text-gray-400 mr-2"></i>
                            Champs disponibles
                            <span class="ml-2 text-sm text-gray-500" x-text="'(' + getAvailableFields().length + ')'"></span>
                        </h4>
                        <div id="available-list"
                             class="space-y-2 min-h-[400px] bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-300">
                            <template x-for="field in getAvailableFields()" :key="field.id">
                                <div class="draggable-item field-card bg-white rounded-lg p-3 shadow-sm cursor-move flex items-center justify-between hover:shadow-md"
                                     :data-id="field.id">
                                    <div class="flex items-center">
                                        <i class="fas fa-grip-vertical text-gray-400 mr-3"></i>
                                        <div>
                                            <div class="font-medium text-gray-900 text-sm" x-text="field.displayname"></div>
                                            <div class="text-xs text-gray-500" x-text="field.fieldname"></div>
                                        </div>
                                    </div>
                                    <i class="fas fa-arrow-right text-indigo-400"></i>
                                </div>
                            </template>
                        </div>
                    </div>

                    <!-- Champs visibles -->
                    <div>
                        <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                            <i class="fas fa-eye text-indigo-600 mr-2"></i>
                            Champs visibles
                            <span class="ml-2 text-sm text-gray-500" x-text="'(' + getVisibleFields().length + ')'"></span>
                        </h4>
                        <div id="visible-list"
                             class="space-y-2 min-h-[400px] bg-indigo-50 rounded-lg p-4 border-2 border-indigo-300">
                            <template x-for="(field, index) in getVisibleFields()" :key="field.id">
                                <div class="draggable-item field-card bg-white rounded-lg p-3 shadow-sm cursor-move flex items-center justify-between hover:shadow-md"
                                     :data-id="field.id">
                                    <div class="flex items-center flex-1">
                                        <i class="fas fa-grip-vertical text-gray-400 mr-3"></i>
                                        <span class="bg-indigo-100 text-indigo-700 font-bold text-xs rounded-full w-6 h-6 flex items-center justify-center mr-3"
                                              x-text="index + 1"></span>
                                        <div>
                                            <div class="font-medium text-gray-900 text-sm" x-text="field.fieldname"></div>
                                            <div class="text-xs text-gray-500" x-text="field.displayname"></div>
                                        </div>
                                    </div>
                                    <i class="fas fa-times text-red-400 hover:text-red-600 cursor-pointer"
                                       @click="removeFromView(field)"></i>
                                </div>
                            </template>
                            <div x-show="getVisibleFields().length === 0" class="text-center py-12 text-gray-400">
                                <i class="fas fa-inbox text-4xl mb-2"></i>
                                <p>Glissez des champs ici</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

@include('partials.toast')

@endsection

@push('scripts')
<!-- SortableJS CDN -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>

<script>
function metadataOrganizer(csrfToken) {
    return {
        csrfToken,
        loading: true,
        saving: false,
        allMetadatas: [],
        filteredMetadatas: [],
        availableObjects: [],
        selectedObject: null,
        activeTab: 'tabular',
        sortableInstances: [],
        tableSortableInstance: null,
        blocs: [],
        modules: [],
        selectedSource: 'data',
        allMetadatasUnfiltered: [],
        tracker: new ChangeTracker('metadatas'),
        pendingCount: 0,

        // ===== INIT =====

        async init() {
            await Promise.all([
                this.loadModules(),
                this.loadBlocs()
            ]);
            await this.loadMetadatas();
        },

        // ===== TAB SWITCHING =====

        switchTab(tab) {
            this.activeTab = tab;
            this.$nextTick(() => {
                if (tab === 'tabular') {
                    this.initTableSortable();
                } else if (tab === 'blocs' || tab === 'list') {
                    this.initSortable();
                }
            });
        },

        // ===== DATA LOADING =====

        async loadModules() {
            try {
                const response = await fetch('/api/admin/modules?size=1000', {
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrfToken }
                });
                if (response.ok) {
                    const data = await response.json();
                    this.modules = data.data || data.records || [];
                }
            } catch (error) {
                console.error('Erreur chargement modules:', error);
            }
        },

        async loadBlocs() {
            try {
                const response = await fetch('/api/admin/blocs?size=1000', {
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrfToken }
                });
                if (response.ok) {
                    const data = await response.json();
                    this.blocs = data.data || data.records || [];
                }
            } catch (error) {
                console.error('Erreur chargement blocs:', error);
            }
        },

        async loadMetadatas() {
            this.loading = true;
            try {
                const response = await fetch('/api/admin/metadatas?size=1000', {
                    headers: { 'Accept': 'application/json', 'X-CSRF-TOKEN': this.csrfToken }
                });
                if (response.ok) {
                    const data = await response.json();
                    this.allMetadatasUnfiltered = data.data || data.records || [];
                    this.applySourceFilter();
                }
            } catch (error) {
                console.error('Erreur chargement metadonnees:', error);
                showToast('Erreur lors du chargement des metadonnees', 'error');
            } finally {
                this.loading = false;
            }
        },

        // ===== FILTERING =====

        getBlocName(blocsId) {
            if (!blocsId) return '-';
            const id = typeof blocsId === 'object' ? blocsId.id : blocsId;
            const bloc = this.blocs.find(b => b.id === id);
            return bloc ? (bloc.label || bloc.name) : (typeof blocsId === 'object' && blocsId.name ? blocsId.name : `Bloc #${id}`);
        },

        applySourceFilter() {
            const filteredModuleNames = this.modules
                .filter(m => m.source === this.selectedSource)
                .map(m => m.name);

            this.allMetadatas = this.allMetadatasUnfiltered.filter(meta =>
                filteredModuleNames.includes(meta.object)
            );

            this.availableObjects = [...new Set(this.allMetadatas.map(m => m.object))]
                .filter(Boolean)
                .sort();

            const savedObject = localStorage.getItem('metadataOrganizer_selectedObject');
            if (savedObject && this.availableObjects.includes(savedObject)) {
                this.selectedObject = savedObject;
            } else if (this.availableObjects.length > 0) {
                this.selectedObject = this.availableObjects[0];
            } else {
                this.selectedObject = null;
            }

            if (this.selectedObject) {
                this.filterByObject();
            } else {
                this.filteredMetadatas = [];
            }
        },

        filterByObject() {
            if (this.selectedObject) {
                localStorage.setItem('metadataOrganizer_selectedObject', this.selectedObject);
            }

            this.filteredMetadatas = this.allMetadatas
                .filter(m => m.object === this.selectedObject)
                .sort((a, b) => (a.sequencelist || 999) - (b.sequencelist || 999));

            // Appliquer les changements en attente depuis localStorage
            if (this.selectedObject) {
                this.tracker.applyTo(this.selectedObject, this.filteredMetadatas);
            }
            this.refreshPendingCount();

            this.$nextTick(() => {
                if (this.activeTab === 'tabular') {
                    this.initTableSortable();
                } else if (this.activeTab === 'blocs' || this.activeTab === 'list') {
                    this.initSortable();
                }
            });
        },

        // ===== CHANGE TRACKER =====

        refreshPendingCount() {
            this.pendingCount = this.selectedObject ? this.tracker.count(this.selectedObject) : 0;
        },

        getPendingCount() {
            return this.pendingCount;
        },

        async saveAllPending() {
            if (!this.selectedObject || this.getPendingCount() === 0) return;

            this.saving = true;
            try {
                // Nettoyer les metadonnees avant envoi
                const cleanedMetadatas = this.filteredMetadatas.map(meta => ({
                    ...meta,
                    blocs_id: meta.blocs_id && typeof meta.blocs_id === 'object'
                        ? meta.blocs_id.id
                        : meta.blocs_id
                }));

                const response = await fetch('/api/admin/metadatas/batch-update', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': this.csrfToken
                    },
                    body: JSON.stringify({ metadatas: cleanedMetadatas })
                });

                if (response.ok) {
                    const result = await response.json();
                    this.tracker.clear(this.selectedObject);
                    this.refreshPendingCount();
                    showToast(`Sauvegarde reussie : ${result.updated || 0} metadonnee(s) mise(s) a jour`, 'success');
                    this.filteredMetadatas = [...this.filteredMetadatas];
                } else {
                    const errorText = await response.text();
                    console.error('Erreur sauvegarde:', response.status, errorText.substring(0, 500));
                    showToast('Erreur lors de la sauvegarde. Modifications conservees.', 'error');
                }
            } catch (error) {
                console.error('Erreur sauvegarde:', error);
                showToast('Erreur reseau. Modifications conservees dans le navigateur.', 'error');
            } finally {
                this.saving = false;
            }
        },

        // ===== FIELD MODIFICATIONS =====

        toggleField(meta, field, value) {
            meta[field] = value;
            if (this.selectedObject) {
                this.tracker.push(this.selectedObject, meta.id, field, value);
                this.refreshPendingCount();
                this.filteredMetadatas = [...this.filteredMetadatas];
            }
        },

        updateDisplayname(meta, event) {
            const displayname = event.target.value.trim();
            if (displayname === meta.displayname) return;

            meta.displayname = displayname;
            if (this.selectedObject) {
                this.tracker.push(this.selectedObject, meta.id, 'displayname', displayname);
                this.refreshPendingCount();
            }
        },

        // ===== VIEW HELPERS (for Tab 2: Blocs & Tab 3: Liste) =====

        getAvailableFieldsForBlocs() {
            return this.filteredMetadatas.filter(m => !m.blocs_id);
        },

        getAvailableFields() {
            return this.filteredMetadatas.filter(m => !m.list);
        },

        getVisibleFields() {
            return this.filteredMetadatas
                .filter(m => m.list)
                .sort((a, b) => (a.sequencelist || 999) - (b.sequencelist || 999));
        },

        getBlocs() {
            return (this.blocs || [])
                .filter(b => b.is_active === 1)
                .sort((a, b) => (a.bloc_order || 999) - (b.bloc_order || 999));
        },

        getBlocFields(bloc) {
            const blocId = typeof bloc === 'object' ? bloc.id : bloc;
            return this.filteredMetadatas
                .filter(m => {
                    const metaBlocId = (m.blocs_id && typeof m.blocs_id === 'object') ? m.blocs_id.id : m.blocs_id;
                    return metaBlocId === blocId;
                })
                .sort((a, b) => (a.sequencedetail || 999) - (b.sequencedetail || 999));
        },

        removeFromView(field) {
            field.list = 0;
            if (this.selectedObject) {
                this.tracker.push(this.selectedObject, field.id, 'list', 0);
            }
            this.$nextTick(() => {
                this.filteredMetadatas = [...this.filteredMetadatas];
            });
        },

        removeFromBloc(field) {
            field.blocs_id = null;
            field.sequencecreate = 0;
            field.sequenceupdate = 0;
            field.sequencedetail = 0;

            if (this.selectedObject) {
                this.tracker.pushMultiple(this.selectedObject, field.id, {
                    blocs_id: null,
                    sequencecreate: 0,
                    sequenceupdate: 0,
                    sequencedetail: 0
                });
            }
        },

        // ===== SORTABLE INIT =====

        initTableSortable() {
            if (this.tableSortableInstance) {
                this.tableSortableInstance.destroy();
                this.tableSortableInstance = null;
            }

            const tbody = document.getElementById('sortable-table-tbody');
            if (!tbody) return;

            this.tableSortableInstance = new Sortable(tbody, {
                animation: 150,
                handle: '.drag-handle',
                draggable: '.sortable-row',
                ghostClass: 'bg-indigo-100',
                dragClass: 'opacity-50',
                onEnd: (evt) => this.handleSortTable(evt)
            });
        },

        initSortable() {
            this.sortableInstances.forEach(instance => instance.destroy());
            this.sortableInstances = [];

            if (this.activeTab === 'blocs') {
                // Sortable pour "Champs disponibles"
                const availableBlocsEl = document.getElementById('available-blocs');
                if (availableBlocsEl) {
                    const s = Sortable.create(availableBlocsEl, {
                        group: 'blocs-fields',
                        animation: 150,
                        ghostClass: 'sortable-ghost',
                        dragClass: 'sortable-drag',
                        onEnd: (evt) => {
                            if (evt.to.id === 'available-blocs' && evt.from.id.startsWith('bloc-')) {
                                this.handleRemoveFromBloc(evt);
                            } else if (evt.from.id === 'available-blocs' && evt.to.id.startsWith('bloc-')) {
                                this.handleSortBlocs(evt);
                            }
                        }
                    });
                    this.sortableInstances.push(s);
                }

                // Sortable pour chaque bloc
                this.getBlocs().forEach(bloc => {
                    const blocId = typeof bloc === 'object' ? bloc.id : bloc;
                    const el = document.getElementById('bloc-' + blocId);
                    if (el) {
                        const s = Sortable.create(el, {
                            group: 'blocs-fields',
                            animation: 150,
                            ghostClass: 'sortable-ghost',
                            dragClass: 'sortable-drag',
                            scroll: true,
                            scrollSensitivity: 100,
                            scrollSpeed: 10,
                            bubbleScroll: true,
                            onEnd: (evt) => {
                                if (evt.to.id === 'available-blocs') {
                                    this.handleRemoveFromBloc(evt);
                                } else {
                                    this.handleSortBlocs(evt);
                                }
                            }
                        });
                        this.sortableInstances.push(s);
                    }
                });
            } else if (this.activeTab === 'list') {
                const availableEl = document.getElementById('available-list');
                const visibleEl = document.getElementById('visible-list');

                if (availableEl && visibleEl) {
                    const s1 = Sortable.create(availableEl, {
                        group: 'list-fields',
                        animation: 150,
                        ghostClass: 'sortable-ghost',
                        dragClass: 'sortable-drag',
                        onEnd: (evt) => this.handleSort(evt)
                    });
                    const s2 = Sortable.create(visibleEl, {
                        group: 'list-fields',
                        animation: 150,
                        ghostClass: 'sortable-ghost',
                        dragClass: 'sortable-drag',
                        onEnd: (evt) => this.handleSort(evt)
                    });
                    this.sortableInstances.push(s1, s2);
                }
            }
        },

        // ===== SORT HANDLERS =====

        handleSortTable(evt) {
            const tbody = document.getElementById('sortable-table-tbody');
            const rows = Array.from(tbody.querySelectorAll('.sortable-row'));
            const orderedIds = rows.map(row => parseInt(row.dataset.metadataId));

            orderedIds.forEach((id, index) => {
                const meta = this.filteredMetadatas.find(m => m.id === id);
                if (meta) {
                    meta.sequencelist = index + 1;
                    if (this.selectedObject) {
                        this.tracker.push(this.selectedObject, id, 'sequencelist', index + 1);
                    }
                }
            });

            this.filteredMetadatas.sort((a, b) => a.sequencelist - b.sequencelist);
        },

        handleSort(evt) {
            const fieldId = parseInt(evt.item.dataset.id);
            const field = this.filteredMetadatas.find(m => m.id === fieldId);
            if (!field) return;

            const isInVisible = evt.to.id.startsWith('visible-');

            // Mettre a jour le flag de visibilite
            field.list = isInVisible ? 1 : 0;
            if (this.selectedObject) {
                this.tracker.push(this.selectedObject, field.id, 'list', field.list);
            }

            // Mettre a jour les sequences depuis le DOM
            const visibleEl = document.getElementById('visible-list');
            if (visibleEl) {
                const orderedIds = Array.from(visibleEl.children).map(el => parseInt(el.dataset.id));
                orderedIds.forEach((id, index) => {
                    const f = this.filteredMetadatas.find(m => m.id === id);
                    if (f) {
                        f.sequencelist = index + 1;
                        if (this.selectedObject) {
                            this.tracker.push(this.selectedObject, id, 'sequencelist', index + 1);
                        }
                    }
                });
            }

            this.$nextTick(() => {
                this.filteredMetadatas = [...this.filteredMetadatas];
            });
        },

        handleSortBlocs(evt) {
            const fieldId = parseInt(evt.item.dataset.id);
            const field = this.filteredMetadatas.find(m => m.id === fieldId);
            if (!field || !evt.to.id.startsWith('bloc-')) return;

            const targetBlocId = parseInt(evt.to.id.replace('bloc-', ''));
            field.blocs_id = targetBlocId;

            const targetBloc = this.blocs.find(b => b.id === targetBlocId);
            const blocOrder = targetBloc?.bloc_order || 0;

            // Calculer les sequences composites depuis le DOM
            const blocEl = document.getElementById('bloc-' + targetBlocId);
            if (blocEl) {
                const orderedIds = Array.from(blocEl.children).map(el => parseInt(el.dataset.id));
                orderedIds.forEach((id, index) => {
                    const f = this.filteredMetadatas.find(m => m.id === id);
                    if (f) {
                        const compositeSeq = (blocOrder * 1000) + (index + 1);
                        f.sequencecreate = compositeSeq;
                        f.sequenceupdate = compositeSeq;
                        f.sequencedetail = compositeSeq;

                        if (this.selectedObject) {
                            this.tracker.pushMultiple(this.selectedObject, id, {
                                blocs_id: targetBlocId,
                                sequencecreate: compositeSeq,
                                sequenceupdate: compositeSeq,
                                sequencedetail: compositeSeq
                            });
                        }
                    }
                });
            }
        },

        handleRemoveFromBloc(evt) {
            const fieldId = parseInt(evt.item.dataset.id);
            const field = this.filteredMetadatas.find(m => m.id === fieldId);
            if (!field) return;

            this.removeFromBloc(field);
        },

        // ===== REGENERATE JSON =====

        async regenerateJson() {
            if (!confirm('Voulez-vous vraiment regenerer tous les fichiers JSON dans metadatas_generated ?')) {
                return;
            }

            // Verifier s'il y a des modifications non sauvegardees
            if (this.getPendingCount() > 0) {
                if (!confirm(`Attention : ${this.getPendingCount()} modification(s) non sauvegardee(s). Voulez-vous d'abord sauvegarder ?`)) {
                    return;
                }
                await this.saveAllPending();
            }

            this.loading = true;
            try {
                const response = await fetch('/api/admin/chaps/metadata/regenerate', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': this.csrfToken,
                        'Accept': 'application/json'
                    }
                });

                const data = await response.json();

                if (response.ok && data.success) {
                    showToast(data.message || 'Les fichiers JSON ont ete regeneres avec succes', 'success');
                } else {
                    throw new Error(data.message || 'Erreur lors de la regeneration');
                }
            } catch (error) {
                console.error('Erreur regeneration JSON:', error);
                showToast(error.message || 'Erreur lors de la regeneration', 'error');
            } finally {
                this.loading = false;
            }
        }
    }
}

// showToast est defini dans partials.toast
</script>
@endpush