@extends('layouts.admin')

@section('title', 'Configuration des Roles')
@section('header', 'Configuration des Roles - Permissions par module')

@section('content')
<div class="bg-white shadow rounded-lg">
    {{-- Header --}}
    <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">Permissions par role</h3>
                <p class="text-sm text-gray-500 mt-1">Selectionnez un role puis activez/desactivez les menus et actions par module</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>
                        Actif
                    </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>
                        Inactif
                    </span>
                </div>
            </div>
        </div>
    </div>

    {{-- Selecteur de role --}}
    <div class="border-b border-gray-200 px-6 py-4 bg-gray-50">
        <div class="flex items-center gap-4">
            <span class="text-sm font-medium text-gray-700">
                <i class="fas fa-user-shield mr-1"></i> Role :
            </span>
            <div class="flex rounded-lg shadow-sm border border-gray-300 overflow-hidden">
                @foreach($roles as $roleKey => $roleLabel)
                    <a href="{{ route('admin.roles.index', ['role' => $roleKey]) }}"
                       class="role-btn px-4 py-2 text-sm font-medium border-r border-gray-300 last:border-r-0 transition-colors
                              {{ $selectedRole === $roleKey ? 'bg-indigo-600 text-white' : 'bg-white text-gray-700 hover:bg-gray-50' }}">
                        {{ $roleLabel }}
                    </a>
                @endforeach
            </div>
        </div>
        <div class="mt-2 text-xs text-gray-500">
            <i class="fas fa-info-circle mr-1"></i>
            Les modifications s'appliquent au role <strong>{{ $roles[$selectedRole] }}</strong>.
            La colonne <strong>Menu</strong> controle la visibilite dans la navigation. Les colonnes d'actions controlent les operations autorisees.
        </div>
    </div>

    {{-- Matrice Modules x Permissions --}}
    <div class="p-6 overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
            <thead class="bg-gray-50 sticky top-0 z-10">
                <tr>
                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider sticky left-0 bg-gray-50 z-20 min-w-[200px]">
                        Module
                    </th>
                    <th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[100px]">
                        <div class="flex flex-col items-center">
                            <i class="fas fa-bars text-gray-400 mb-1"></i>
                            <span>Menu</span>
                            <span class="text-gray-400 font-normal normal-case text-xs mt-0.5">Navigation</span>
                        </div>
                    </th>
                    @foreach($actionTypes as $action)
                        <th scope="col" class="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider min-w-[100px]">
                            <div class="flex flex-col items-center">
                                @switch($action)
                                    @case('read')
                                        <i class="fas fa-eye text-blue-400 mb-1"></i>
                                        @break
                                    @case('create')
                                        <i class="fas fa-plus text-green-400 mb-1"></i>
                                        @break
                                    @case('update')
                                        <i class="fas fa-edit text-yellow-400 mb-1"></i>
                                        @break
                                    @case('delete')
                                        <i class="fas fa-trash text-red-400 mb-1"></i>
                                        @break
                                    @case('mass_update')
                                        <i class="fas fa-pen-nib text-yellow-600 mb-1"></i>
                                        @break
                                    @case('mass_delete')
                                        <i class="fas fa-trash-alt text-red-600 mb-1"></i>
                                        @break
                                    @case('report')
                                        <i class="fas fa-chart-bar text-purple-400 mb-1"></i>
                                        @break
                                    @case('execute')
                                        <i class="fas fa-play text-indigo-400 mb-1"></i>
                                        @break
                                    @case('mass_execute')
                                        <i class="fas fa-forward text-indigo-600 mb-1"></i>
                                        @break
                                @endswitch
                                <span>{{ $actionLabels[$action] ?? ucfirst($action) }}</span>
                            </div>
                        </th>
                    @endforeach
                </tr>
            </thead>
            <tbody class="bg-white divide-y divide-gray-200">
                @php $currentDomaine = null; @endphp
                @foreach($config as $moduleConfig)
                    {{-- Separateur par domaine --}}
                    @if($moduleConfig['domaine'] !== $currentDomaine)
                        @php $currentDomaine = $moduleConfig['domaine']; @endphp
                        <tr class="bg-indigo-50">
                            <td colspan="{{ 2 + count($actionTypes) }}" class="px-6 py-2 text-xs font-semibold text-indigo-700 uppercase tracking-wider">
                                <i class="fas fa-folder-open mr-1"></i>
                                {{ $currentDomaine ?? 'Sans domaine' }}
                            </td>
                        </tr>
                    @endif
                    <tr class="hover:bg-gray-50 transition-colors">
                        {{-- Nom module --}}
                        <td class="px-6 py-3 whitespace-nowrap text-sm font-medium text-gray-900 sticky left-0 bg-white z-10">
                            <div>
                                <div>{{ $moduleConfig['module_label'] }}</div>
                                <div class="text-xs text-gray-500 font-normal">{{ $moduleConfig['module_name'] }}</div>
                            </div>
                        </td>
                        {{-- Toggle menu --}}
                        <td class="px-4 py-3 text-center">
                            <div class="flex items-center justify-center">
                                <label class="relative inline-flex items-center cursor-pointer">
                                    <input
                                        type="checkbox"
                                        class="role-toggle sr-only peer"
                                        data-module-id="{{ $moduleConfig['module_id'] }}"
                                        data-field="menu_visible"
                                        {{ $moduleConfig['menu_visible'] ? 'checked' : '' }}
                                    >
                                    <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 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-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                                </label>
                            </div>
                        </td>
                        {{-- Toggles par action --}}
                        @foreach($actionTypes as $action)
                            <td class="px-4 py-3 text-center">
                                @if($moduleConfig['actions'][$action]['cta_id'])
                                    <div class="flex items-center justify-center">
                                        <label class="relative inline-flex items-center cursor-pointer">
                                            <input
                                                type="checkbox"
                                                class="role-toggle sr-only peer"
                                                data-module-id="{{ $moduleConfig['module_id'] }}"
                                                data-field="{{ $action }}"
                                                {{ $moduleConfig['actions'][$action]['enabled'] ? 'checked' : '' }}
                                            >
                                            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 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-5 after:w-5 after:transition-all peer-checked:bg-green-500"></div>
                                        </label>
                                    </div>
                                @else
                                    <span class="text-gray-300" title="Aucun CTA defini pour cette action">
                                        <i class="fas fa-minus"></i>
                                    </span>
                                @endif
                            </td>
                        @endforeach
                    </tr>
                @endforeach
            </tbody>
        </table>

        @if(empty($config))
            <div class="text-center py-12 text-gray-500">
                <i class="fas fa-cube text-4xl mb-4"></i>
                <p>Aucun module configure. Generez d'abord les metadonnees depuis le Dashboard.</p>
            </div>
        @endif
    </div>

    {{-- Stats resume --}}
    <div class="border-t border-gray-200 px-6 py-3 bg-gray-50">
        <div class="flex items-center gap-6 text-sm text-gray-600">
            @php
                $totalModules = count($config);
                $visibleMenus = collect($config)->where('menu_visible', true)->count();
                $totalActions = 0;
                foreach ($config as $m) {
                    foreach ($m['actions'] as $a) {
                        if ($a['enabled']) $totalActions++;
                    }
                }
            @endphp
            <span>
                <i class="fas fa-cube mr-1"></i>
                <strong>{{ $totalModules }}</strong> modules
            </span>
            <span>
                <i class="fas fa-bars mr-1"></i>
                <strong>{{ $visibleMenus }}</strong> menus visibles
            </span>
            <span>
                <i class="fas fa-check-circle mr-1 text-green-500"></i>
                <strong>{{ $totalActions }}</strong> actions actives
            </span>
        </div>
    </div>
</div>

@include('partials.toast')
@endsection

@push('styles')
@include('partials.save-button-styles')
@endpush

@push('scripts')
<script src="{{ asset('js/batch-save.js') }}"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    const selectedRole = '{{ $selectedRole }}';

    const batcher = new BatchSave({
        toggleSelector: '.role-toggle',
        batchUrl: '{{ route('admin.roles.batchUpdate') }}',
        csrfToken: '{{ csrf_token() }}',
        buildChange: function(toggle) {
            return {
                module_id: parseInt(toggle.dataset.moduleId),
                field: toggle.dataset.field,
                value: toggle.checked ? 1 : 0
            };
        },
        changeKey: function(toggle) {
            return toggle.dataset.moduleId + '_' + toggle.dataset.field;
        }
    });

    // Override save pour injecter le role
    const originalSave = batcher.save.bind(batcher);
    batcher.save = async function() {
        if (this.pendingChanges.size === 0) return;

        this.saveBtn.disabled = true;
        this.saveBtnText.textContent = 'Sauvegarde...';

        try {
            const changes = Array.from(this.pendingChanges.values());
            const response = await fetch(this.batchUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': this.csrfToken
                },
                body: JSON.stringify({ role: selectedRole, changes: changes })
            });

            const data = await response.json();

            if (data.success) {
                this.pendingChanges.clear();
                this._updateButton();
                showToast(data.message, 'success');
            } else {
                showToast(data.message || 'Erreur lors de la sauvegarde', 'error');
            }
        } catch (error) {
            console.error('BatchSave erreur:', error);
            showToast('Erreur reseau. Vos modifications sont conservees, reessayez.', 'error');
        } finally {
            this.saveBtn.disabled = false;
            this.saveBtnText.textContent = 'Sauvegarder';
        }
    };
});
</script>
@endpush