@extends('layouts.admin')

@section('title', 'Configuration')
@section('header', 'Configuration')

@section('content')
<!-- Header with back button -->
<div class="mb-6 flex justify-between items-center">
    <div>
        <p class="text-sm text-gray-600">Paramètres du système de métadonnées</p>
    </div>
    <a href="{{ route('admin.metadata-setup.index') }}" class="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-arrow-left mr-2"></i>Retour au dashboard
    </a>
</div>

<!-- Configuration Sections -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- API Estair -->
    <div class="bg-white shadow rounded-lg">
        <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-lg font-medium text-gray-900">🌐 API Estair</h3>
        </div>
        <div class="p-6 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">URL de base</label>
                <input type="text" class="block w-full rounded-md border-gray-300 bg-gray-50 shadow-sm sm:text-sm" value="{{ $settings['estair_base_url'] }}" readonly>
                <p class="mt-1 text-xs text-gray-500">Configuré via la variable d'environnement ESTAIR_BASE_URL</p>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1">Clé API</label>
                <input type="password" class="block w-full rounded-md border-gray-300 bg-gray-50 shadow-sm sm:text-sm" value="{{ str_repeat('•', 20) }}" readonly>
                <p class="mt-1 text-xs text-gray-500">Configurée via la variable d'environnement ESTAIR_API_KEY</p>
            </div>
            <button onclick="testConnection()" class="px-4 py-2 border border-indigo-600 rounded-md shadow-sm text-sm font-medium text-indigo-600 bg-white hover:bg-indigo-50">
                <i class="fas fa-plug mr-2"></i>Tester la connexion
            </button>
        </div>
    </div>

    <!-- Règles de visibilité -->
    <div class="bg-white shadow rounded-lg">
        <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-lg font-medium text-gray-900">👁️ Règles de Visibilité</h3>
        </div>
        <div class="p-6 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Champs masqués en création</label>
                <div class="flex flex-wrap gap-2">
                    @foreach($settings['field_visibility']['hidden_in_create'] as $field)
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                            {{ $field }}
                        </span>
                    @endforeach
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Champs masqués en modification</label>
                <div class="flex flex-wrap gap-2">
                    @foreach($settings['field_visibility']['hidden_in_update'] as $field)
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                            {{ $field }}
                        </span>
                    @endforeach
                </div>
            </div>
            <p class="text-xs text-gray-500">
                Ces règles sont appliquées automatiquement lors de la génération des métadonnées.
                Modifiez le fichier config/chaps.php pour les personnaliser.
            </p>
        </div>
    </div>

    <!-- Configuration CTAs -->
    <div class="bg-white shadow rounded-lg">
        <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-lg font-medium text-gray-900">⚡ Configuration CTAs</h3>
        </div>
        <div class="p-6 space-y-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Actions standards</label>
                <div class="flex flex-wrap gap-2">
                    @foreach($settings['ctas']['standard_actions'] as $action)
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                            {{ $action }}
                        </span>
                    @endforeach
                </div>
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">Vues supportées</label>
                <div class="flex flex-wrap gap-2">
                    @foreach($settings['ctas']['views'] as $view)
                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                            {{ $view }}
                        </span>
                    @endforeach
                </div>
            </div>
            <a href="{{ route('admin.metadata-setup.index') }}" class="inline-flex items-center px-4 py-2 border border-indigo-600 rounded-md shadow-sm text-sm font-medium text-indigo-600 bg-white hover:bg-indigo-50">
                <i class="fas fa-cog mr-2"></i>Gérer les CTAs
            </a>
        </div>
    </div>

    <!-- Informations système -->
    <div class="bg-white shadow rounded-lg">
        <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-lg font-medium text-gray-900">ℹ️ Informations Système</h3>
        </div>
        <div class="p-6 space-y-3">
            <div class="flex justify-between">
                <span class="text-sm font-medium text-gray-700">Version Laravel:</span>
                <span class="text-sm text-gray-900">{{ app()->version() }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-sm font-medium text-gray-700">Version PHP:</span>
                <span class="text-sm text-gray-900">{{ PHP_VERSION }}</span>
            </div>
            <div class="flex justify-between">
                <span class="text-sm font-medium text-gray-700">Environnement:</span>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ app()->environment('production') ? 'bg-red-100 text-red-800' : 'bg-yellow-100 text-yellow-800' }}">
                    {{ app()->environment() }}
                </span>
            </div>
            <div class="flex justify-between">
                <span class="text-sm font-medium text-gray-700">Mode debug:</span>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {{ config('app.debug') ? 'bg-yellow-100 text-yellow-800' : 'bg-green-100 text-green-800' }}">
                    {{ config('app.debug') ? 'Activé' : 'Désactivé' }}
                </span>
            </div>

            <div class="border-t border-gray-200 pt-4 mt-4">
                <h6 class="text-sm font-medium text-gray-900 mb-3">📊 Tables principales</h6>
                <div class="grid grid-cols-2 gap-4 text-center">
                    <div>
                        <div class="text-2xl font-semibold text-gray-900">{{ \Illuminate\Support\Facades\DB::table('domaines')->count() }}</div>
                        <div class="text-sm text-gray-500">Domaines</div>
                    </div>
                    <div>
                        <div class="text-2xl font-semibold text-gray-900">{{ \Illuminate\Support\Facades\DB::table('modules')->count() }}</div>
                        <div class="text-sm text-gray-500">Modules</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Guide de Configuration -->
<div class="mt-6 bg-white shadow rounded-lg">
    <div class="border-b border-gray-200 px-6 py-4">
        <h3 class="text-lg font-medium text-gray-900">📚 Guide de Configuration</h3>
    </div>
    <div class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Variables d'environnement -->
            <div>
                <h6 class="text-sm font-semibold text-gray-900 mb-2">
                    <i class="fas fa-server text-blue-500 mr-2"></i>Variables d'environnement
                </h6>
                <p class="text-xs text-gray-600 mb-3">
                    Configurez les variables dans votre fichier <code class="bg-gray-100 px-1 py-0.5 rounded">.env</code> :
                </p>
                <pre class="text-xs bg-gray-50 p-3 rounded border border-gray-200 overflow-x-auto"><code>ESTAIR_BASE_URL=http://127.0.0.1:8010/v1
ESTAIR_API_KEY=your_api_key_here</code></pre>
            </div>

            <!-- Configuration avancée -->
            <div>
                <h6 class="text-sm font-semibold text-gray-900 mb-2">
                    <i class="fas fa-cogs text-green-500 mr-2"></i>Configuration avancée
                </h6>
                <p class="text-xs text-gray-600 mb-3">
                    Personnalisez les règles dans <code class="bg-gray-100 px-1 py-0.5 rounded">config/chaps.php</code> :
                </p>
                <ul class="text-xs text-gray-600 space-y-1 list-disc list-inside">
                    <li>Règles de visibilité des champs</li>
                    <li>Actions CTA par défaut</li>
                    <li>Délai de rétention des backups</li>
                </ul>
            </div>

            <!-- Commandes utiles -->
            <div>
                <h6 class="text-sm font-semibold text-gray-900 mb-2">
                    <i class="fas fa-terminal text-yellow-500 mr-2"></i>Commandes utiles
                </h6>
                <p class="text-xs text-gray-600 mb-3">
                    Commandes Artisan disponibles :
                </p>
                <pre class="text-xs bg-gray-50 p-3 rounded border border-gray-200 overflow-x-auto"><code>php artisan migrate
php artisan metadata:regenerate-all --dry-run
php artisan metadata:regenerate-all --force</code></pre>
            </div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function testConnection() {
    const btn = event.target;
    const originalContent = btn.innerHTML;

    btn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Test en cours...';
    btn.disabled = true;

    fetch('{{ route("admin.metadata-setup.test-estair") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', '✅ Connexion réussie à l\'API Estair');
        } else {
            showAlert('danger', '❌ Erreur de connexion: ' + data.message);
        }
    })
    .catch(error => {
        showAlert('danger', '❌ Erreur: ' + error.message);
    })
    .finally(() => {
        btn.innerHTML = originalContent;
        btn.disabled = false;
    });
}

function showAlert(type, message) {
    const alertColors = {
        'success': 'bg-green-50 border-green-400 text-green-800',
        'danger': 'bg-red-50 border-red-400 text-red-800'
    };

    const alert = document.createElement('div');
    alert.className = `${alertColors[type]} border-l-4 p-4 mb-4 rounded`;
    alert.innerHTML = `
        <div class="flex items-center justify-between">
            <p class="text-sm font-medium">${message}</p>
            <button onclick="this.parentElement.parentElement.remove()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
    `;

    document.querySelector('main > div').prepend(alert);

    setTimeout(() => {
        alert.remove();
    }, 5000);
}
</script>
@endpush
@endsection