@extends('layouts.admin')

@section('title', 'Gestion des Métadonnées')
@section('header', 'Gestion des Métadonnées - Vue Matricielle')

@section('content')
<div class="bg-white shadow rounded-lg">
    <div class="border-b border-gray-200 px-6 py-4">
        <div class="flex items-center justify-between">
            <div>
                <h3 class="text-lg font-medium text-gray-900">Configuration des champs métadonnées</h3>
                <p class="text-sm text-gray-500 mt-1">Vue matricielle pour gérer les propriétés des champs</p>
            </div>
            <div class="flex items-center gap-4">
                @include('partials.save-button')
                <div class="text-sm text-gray-500">
                    <span class="inline-flex items-center">
                        <span class="h-2.5 w-2.5 rounded-full bg-green-500 mr-1.5"></span>
                        Activé
                    </span>
                    <span class="inline-flex items-center ml-3">
                        <span class="h-2.5 w-2.5 rounded-full bg-gray-300 mr-1.5"></span>
                        Désactivé
                    </span>
                </div>
                <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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-list mr-2"></i> Vue Liste
                </a>
                <button id="regenerate-json-btn"
                   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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
                    <i class="fas fa-sync-alt mr-2"></i> Régénérer JSON
                </button>
                <a href="{{ route('admin.metadatas.list') }}?action=create"
                   class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fas fa-plus mr-2"></i> Créer
                </a>
            </div>
        </div>
    </div>

    <!-- Filtres par module -->
    <div class="border-b border-gray-200 px-6 py-3">
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-3">
                <label for="module-filter" class="text-sm font-medium text-gray-700">
                    <i class="fas fa-filter mr-1"></i> Filtrer par module :
                </label>
                <select id="module-filter" class="module-select-filter" style="width: 400px;">
                    <option value="all">Tous les modules</option>
                    @foreach($modules as $module)
                        <option value="{{ $module->id }}" {{ $defaultModule == $module->id ? 'selected' : '' }}>
                            {{ $module->label }}
                        </option>
                    @endforeach
                </select>
            </div>
            <button id="organizer-btn" data-module-id="{{ $defaultModule }}"
               data-modules='@json($modules->pluck('name', 'id'))'
               class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 transform hover:scale-105 transition-all disabled:opacity-50">
                <i class="fas fa-magic mr-2"></i> Organiser les vues
            </button>
        </div>
    </div>

    <!-- Conteneur avec scroll interne -->
    <div class="p-6">
        <div class="overflow-auto matrix-container" style="max-height: calc(100vh - 280px);">
            <table class="min-w-full divide-y divide-gray-200 text-xs">
                <thead class="bg-gray-50 sticky top-0 sticky-header-shadow z-20">
                    <tr>
                        <th scope="col" class="px-2 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider sticky left-0 bg-gray-50 z-30 w-[40px]">
                            <i class="fas fa-grip-vertical text-gray-400"></i>
                        </th>
                        <th scope="col" class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sticky left-[40px] bg-gray-50 z-30 min-w-[200px]">
                            Champ
                        </th>
                        <th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[180px]">
                            Display Name
                        </th>
                        <th scope="col" class="px-2 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[150px]">
                            Bloc
                        </th>
                        @foreach($tinyintFields as $field => $label)
                            <th scope="col" class="px-2 py-2 text-center text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[80px]">
                                <div class="flex flex-col items-center">
                                    <span class="whitespace-nowrap">{{ $label }}</span>
                                </div>
                            </th>
                        @endforeach
                    </tr>
                </thead>
            <tbody id="sortable-tbody" class="bg-white divide-y divide-gray-200">
                @php $currentObject = null; @endphp
                @foreach($metadatas as $metadata)
                    @if($currentObject !== $metadata->object)
                        @php $currentObject = $metadata->object; @endphp
                        <tr class="bg-indigo-50 object-header-row" data-module-id="{{ $metadata->modules_id ?? 'null' }}">
                            <td colspan="{{ count($tinyintFields) + 4 }}" class="px-3 py-2 text-sm font-bold text-indigo-900 sticky left-0 bg-indigo-50 z-10">
                                <i class="fas fa-folder mr-2"></i>{{ ucfirst($metadata->object) }}
                            </td>
                        </tr>
                    @endif
                    <tr class="hover:bg-gray-50 transition-colors sortable-row" data-metadata-id="{{ $metadata->id }}" data-module-id="{{ $metadata->modules_id ?? 'null' }}">
                        <td class="px-2 py-2 text-center cursor-move drag-handle sticky left-0 bg-white z-10">
                            <i class="fas fa-grip-vertical text-gray-400"></i>
                        </td>
                        <td class="px-3 py-2 whitespace-nowrap text-sm font-medium text-gray-900 sticky left-[40px] bg-white z-10">
                            <div>
                                <div class="font-semibold">{{ $metadata->fieldname }}</div>
                                @if($metadata->module)
                                    <div class="text-xs text-indigo-600">
                                        <i class="fas fa-cube text-xs mr-1"></i>{{ $metadata->module->name ?? '' }}
                                    </div>
                                @endif
                            </div>
                        </td>
                        <td class="px-2 py-2 text-left">
                            <input
                                type="text"
                                class="displayname-input text-xs w-full border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"
                                data-metadata-id="{{ $metadata->id }}"
                                data-original-value="{{ $metadata->displayname }}"
                                value="{{ $metadata->displayname }}"
                            >
                        </td>
                        <td class="px-2 py-2 text-center">
                            <select class="bloc-select text-xs border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" data-metadata-id="{{ $metadata->id }}" data-original-value="{{ $metadata->blocs_id }}">
                                <option value="">-- Aucun --</option>
                                @foreach($blocs as $bloc)
                                    <option value="{{ $bloc->id }}" {{ $metadata->blocs_id == $bloc->id ? 'selected' : '' }}>
                                        {{ $bloc->label }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                        @foreach($tinyintFields as $field => $label)
                            <td class="px-2 py-2 text-center">
                                <div class="flex items-center justify-center">
                                    <label class="relative inline-flex items-center cursor-pointer">
                                        <input
                                            type="checkbox"
                                            class="metadata-toggle sr-only peer"
                                            data-metadata-id="{{ $metadata->id }}"
                                            data-field="{{ $field }}"
                                            {{ $metadata->{$field} ? 'checked' : '' }}
                                        >
                                        <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>
                                </div>
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
            </table>
        </div>
    </div>
</div>

@include('partials.toast')
@endsection

@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
@include('partials.save-button-styles')
<style>
    .sticky-header-shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
    .matrix-container { position: relative; }
    .select2-container--default .select2-selection--single { border: 1px solid #d1d5db; border-radius: 0.375rem; height: 38px; padding: 4px 8px; }
    .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 28px; padding-left: 8px; }
    .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; }
    .select2-dropdown { border: 1px solid #d1d5db; border-radius: 0.375rem; }
    .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #4f46e5; }
</style>
@endpush

@push('scripts')
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script src="{{ asset('js/batch-save.js') }}"></script>
<script>
jQuery(document).ready(function($) {
    // Select2
    $('.module-select-filter').select2({
        placeholder: 'Sélectionner un module',
        allowClear: false,
        language: { noResults: function() { return "Aucun module trouvé"; }, searching: function() { return "Recherche en cours..."; } }
    });

    // Filtrage par module
    function filterByModule(moduleId) {
        document.querySelectorAll('.sortable-row, .object-header-row').forEach(row => {
            row.style.display = (moduleId === 'all' || row.dataset.moduleId == moduleId) ? '' : 'none';
        });
    }

    const modulesMap = JSON.parse(document.getElementById('organizer-btn').dataset.modules || '{}');

    function updateOrganizerButton(moduleId) {
        const btn = document.getElementById('organizer-btn');
        btn.dataset.moduleId = (moduleId && moduleId !== 'all') ? moduleId : '';
        btn.disabled = !moduleId || moduleId === 'all';
    }

    document.getElementById('organizer-btn').addEventListener('click', function() {
        const moduleId = this.dataset.moduleId;
        if (moduleId && moduleId !== 'all' && modulesMap[moduleId]) {
            window.location.href = '{{ route('admin.metadatas.organizer') }}?object=' + modulesMap[moduleId];
        }
    });

    $('.module-select-filter').on('change', function() {
        const moduleId = $(this).val();
        filterByModule(moduleId);
        updateOrganizerButton(moduleId);
    });

    const defaultModule = '{{ $defaultModule }}';
    filterByModule(defaultModule);
    updateOrganizerButton(defaultModule);

    // BatchSave pour les toggles
    const batcher = new BatchSave({
        toggleSelector: '.metadata-toggle',
        batchUrl: '{{ route('admin.metadatas.batchUpdate') }}',
        csrfToken: '{{ csrf_token() }}',
        buildChange: function(toggle) {
            return { id: parseInt(toggle.dataset.metadataId), field: toggle.dataset.field, value: toggle.checked ? 1 : 0 };
        },
        changeKey: function(toggle) {
            return toggle.dataset.metadataId + '_' + toggle.dataset.field;
        }
    });

    // Displayname inputs - aussi dans le batch
    document.querySelectorAll('.displayname-input').forEach(input => {
        input.addEventListener('blur', function() {
            const displayname = this.value.trim();
            if (displayname === this.dataset.originalValue) return;
            const metadataId = this.dataset.metadataId;
            batcher.push(metadataId + '_displayname', { id: parseInt(metadataId), field: 'displayname', value: displayname });
        });
        input.addEventListener('keypress', function(e) { if (e.key === 'Enter') this.blur(); });
    });

    // Bloc selects - aussi dans le batch
    document.querySelectorAll('.bloc-select').forEach(select => {
        select.addEventListener('change', function() {
            const metadataId = this.dataset.metadataId;
            const blocsId = this.value || null;
            batcher.push(metadataId + '_blocs_id', { id: parseInt(metadataId), field: 'blocs_id', value: blocsId });
        });
    });

    // Drag & drop
    const tbody = document.getElementById('sortable-tbody');
    new Sortable(tbody, {
        animation: 150,
        handle: '.drag-handle',
        draggable: '.sortable-row',
        ghostClass: 'bg-indigo-100',
        dragClass: 'opacity-50',
        filter: '.object-header-row',
        onEnd: async function() {
            const rows = tbody.querySelectorAll('.sortable-row');
            const metadataIds = Array.from(rows).map(row => row.dataset.metadataId);
            try {
                const response = await fetch('{{ route('admin.metadatas.reorder') }}', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ metadata_ids: metadataIds })
                });
                const data = await response.json();
                if (data.success) showToast(data.message, 'success');
                else throw new Error(data.message);
            } catch (error) {
                console.error('Erreur:', error);
                showToast('Erreur lors du réordonnancement', 'error');
            }
        }
    });

    // Régénérer JSON
    document.getElementById('regenerate-json-btn').addEventListener('click', async function() {
        const icon = this.querySelector('i');
        const originalIcon = icon.className;
        this.disabled = true;
        icon.className = 'fas fa-spinner fa-spin mr-2';
        try {
            const response = await fetch('{{ route('admin.metadatas.regenerateJson') }}', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' }
            });
            const data = await response.json();
            if (data.success) showToast(data.message, 'success');
            else throw new Error(data.message);
        } catch (error) {
            console.error('Erreur:', error);
            showToast('Erreur lors de la régénération des JSON', 'error');
        } finally {
            this.disabled = false;
            icon.className = originalIcon;
        }
    });
});
</script>
@endpush