@extends('layouts.app')

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

@section('content')
<div class="mb-4 flex gap-4">
    <a href="{{ route('admin.connecteurs.create') }}" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Nouveau connecteur</a>
</div>

@php $returnUrl = request()->fullUrl(); @endphp

<div class="bg-white rounded shadow overflow-x-auto">
    <table class="w-full text-sm">
        <thead class="bg-gray-50"><tr>
            <x-sortable-header field="nom" label="Nom" />
            <x-sortable-header field="type" label="Type" />
            <x-sortable-header field="actif" label="Actif" />
            <th class="px-4 py-3 text-right">Actions</th>
        </tr></thead>
        <tbody>
            @forelse ($connecteurs as $c)
            <tr class="border-t hover:bg-gray-50">
                <td class="px-4 py-3">{{ $c->nom }}</td>
                <td class="px-4 py-3">{{ $c->type }}</td>
                <td class="px-4 py-3">{{ $c->actif ? 'Oui' : 'Non' }}</td>
                <td class="px-4 py-3 text-right whitespace-nowrap">
                    <div class="flex items-center justify-end gap-1 flex-wrap">
                        <form method="POST" action="{{ route('admin.connecteurs.executer', $c) }}" class="inline" id="decouvrir-connecteur-{{ $c->id }}">
                            @csrf
                            <input type="hidden" name="action" value="decouvrir">
                            @php $decouvrirDisabled = $c->type === 'Partage' && $partageScanRunning; @endphp
                            <button type="submit" class="text-xs px-2 py-1 rounded border {{ $decouvrirDisabled ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-gray-100 hover:bg-gray-200' }}" {{ $decouvrirDisabled ? 'disabled title="Un scan partage est déjà en cours"' : '' }}>Découvrir</button>
                        </form>
                        <form method="POST" action="{{ route('admin.connecteurs.executer', $c) }}" class="inline" id="sync-connecteur-{{ $c->id }}">
                            @csrf
                            <input type="hidden" name="action" value="synchroniser">
                            <button type="button" @click="$dispatch('open-confirm', { message: 'Lancer la synchronisation complète du connecteur {{ $c->nom }} (ajout + mise à jour) ?', formId: 'sync-connecteur-{{ $c->id }}' })" class="text-xs px-2 py-1 rounded bg-green-100 hover:bg-green-200 text-green-800 border border-green-300">Synchroniser</button>
                        </form>
                        <form method="POST" action="{{ route('admin.connecteurs.executer', $c) }}" class="inline" id="import-connecteur-{{ $c->id }}">
                            @csrf
                            <input type="hidden" name="action" value="importer">
                            <button type="button" @click="$dispatch('open-confirm', { message: 'Lancer l\'import des nouveaux agents du connecteur {{ $c->nom }} (ajout uniquement) ?', formId: 'import-connecteur-{{ $c->id }}' })" class="text-xs px-2 py-1 rounded bg-blue-100 hover:bg-blue-200 text-blue-800 border border-blue-300">Importer</button>
                        </form>
                        @if ($c->type === 'Microsoft365')
                        <form method="POST" action="{{ route('admin.connecteurs.executer', $c) }}" class="inline" id="reconcile-connecteur-{{ $c->id }}">
                            @csrf
                            <input type="hidden" name="action" value="reconciliation">
                            <button type="button" @click="$dispatch('open-confirm', { message: 'Lancer la réconciliation AD vs Microsoft 365 ?', formId: 'reconcile-connecteur-{{ $c->id }}' })" class="text-xs px-2 py-1 rounded bg-purple-100 hover:bg-purple-200 text-purple-800 border border-purple-300">Réconcilier</button>
                        </form>
                        @endif
                        @if ($c->type === 'Microsoft365' || $c->type === 'Partage')
                        <form method="POST" action="{{ route('admin.connecteurs.executer', $c) }}" class="inline" id="scan-sp-connecteur-{{ $c->id }}">
                            @csrf
                            <input type="hidden" name="action" value="scanSharePoint">
                            <button type="button" @click="$dispatch('open-confirm', { message: 'Lancer le scan SharePoint ({{ $c->type === 'Partage' ? 'config du connecteur Microsoft365' : 'config du connecteur' }}) ?', formId: 'scan-sp-connecteur-{{ $c->id }}' })" class="text-xs px-2 py-1 rounded border {{ $spScanRunning ? 'bg-gray-200 text-gray-400 cursor-not-allowed' : 'bg-orange-100 hover:bg-orange-200 text-orange-800 border-orange-300' }}" {{ $spScanRunning ? 'disabled title="Un scan SharePoint est déjà en cours"' : '' }}>Scan SP</button>
                        </form>
                        @endif
                        <a href="{{ route('admin.connecteurs.edit', ['connecteur' => $c, 'return' => $returnUrl]) }}" class="text-indigo-600 hover:text-indigo-800 p-1" title="Modifier">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
                        </a>
                        <form method="POST" action="{{ route('admin.connecteurs.destroy', $c) }}" class="inline" id="delete-connecteur-{{ $c->id }}">
                            @csrf @method('DELETE')
                            <button type="button" @click="$dispatch('open-confirm', { message: 'Confirmer la suppression du connecteur {{ $c->nom }} ?', formId: 'delete-connecteur-{{ $c->id }}' })" class="text-red-600 hover:text-red-800 p-1" title="Supprimer">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
                            </button>
                        </form>
                    </div>
                </td>
            </tr>
            @empty <tr><td colspan="4" class="px-4 py-6 text-center text-gray-500">Aucun connecteur.</td></tr>
            @endforelse
        </tbody>
    </table>
</div>
<div class="mt-4">{{ $connecteurs->withQueryString()->links() }}</div>

{{-- Modal résultat --}}
@php $resultat = session('connecteur_result'); @endphp
@if ($resultat)
<div x-data="{
    show: true,
    data: @js($resultat),
    stats: @js($resultat)?.stats ?? null,
    details: @js($resultat)?.details ?? [],
    groupDetails: @js($resultat)?.group_details ?? [],
    tab: 'stats',
    formatted: JSON.stringify(@js($resultat), null, 2)
}" x-init="$nextTick(() => show = true)" x-show="show" x-transition class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="fixed inset-0 bg-black/50" @click="show = false"></div>
    <div class="bg-white rounded-lg shadow-xl z-10 max-w-2xl w-full mx-4 max-h-[85vh] flex flex-col">
        <div class="flex items-center justify-between p-4 border-b">
            <h3 class="text-lg font-semibold">Résultat de l'action</h3>
            <button @click="show = false" class="text-gray-400 hover:text-gray-600">&times;</button>
        </div>

        <template x-if="stats">
            <div class="flex border-b px-2">
                <button @click="tab='stats'" class="px-3 py-2 text-sm font-medium" :class="tab==='stats' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500 hover:text-gray-700'">Statistiques</button>
                <button @click="tab='fusion'" class="px-3 py-2 text-sm font-medium" :class="tab==='fusion' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500 hover:text-gray-700'">
                    Fusions
                    <span x-show="stats.fusion.personnes > 0 || stats.fusion.groupes > 0" class="ml-1 inline-flex items-center justify-center w-5 h-5 text-xs font-bold text-white bg-green-500 rounded-full" x-text="stats.fusion.personnes + stats.fusion.groupes"></span>
                </button>
                <button @click="tab='details'" class="px-3 py-2 text-sm font-medium" :class="tab==='details' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500 hover:text-gray-700'" x-text="`Utilisateurs (${details.length})`"></button>
                <button @click="tab='groupes'" class="px-3 py-2 text-sm font-medium" :class="tab==='groupes' ? 'border-b-2 border-blue-600 text-blue-600' : 'text-gray-500 hover:text-gray-700'" x-text="`Groupes (${groupDetails.length})`"></button>
            </div>
        </template>

        <div class="overflow-y-auto p-4">

            {{-- Onglet Statistiques --}}
            <template x-if="tab==='stats' && stats">
                <div class="space-y-4">
                    <div class="bg-blue-50 border border-blue-200 rounded p-3 -mx-1">
                        <h4 class="font-semibold text-sm text-blue-800 mb-1">Base Personnes (dédupliquée)</h4>
                        <div class="flex gap-6 text-sm">
                            <div><span class="text-gray-500">Total :</span> <strong class="text-lg" x-text="stats.total_personnes"></strong></div>
                            <div><span class="text-gray-500">Orphelins supprimés :</span> <strong class="text-lg text-red-600" x-text="stats.orphelins_supprimes"></strong></div>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-semibold text-sm text-gray-700 mb-1">Utilisateurs (comptes)</h4>
                        <table class="w-full text-sm">
                            <tr><td class="py-1 text-gray-500">Réconciliés (AD + M365)</td><td class="py-1 font-mono font-semibold" x-text="stats.utilisateurs.reconcilies"></td></tr>
                            <tr><td class="py-1 text-gray-500">AD seulement</td><td class="py-1 font-mono" x-text="stats.utilisateurs.ad_seulement"></td></tr>
                            <tr><td class="py-1 text-gray-500">M365 seulement</td><td class="py-1 font-mono" x-text="stats.utilisateurs.m365_seulement"></td></tr>
                            <tr class="border-t"><td class="py-1 font-semibold">Total comptes AD</td><td class="py-1 font-mono" x-text="stats.utilisateurs.total_ad"></td></tr>
                            <tr><td class="py-1 font-semibold">Total comptes M365</td><td class="py-1 font-mono" x-text="stats.utilisateurs.total_m365"></td></tr>
                        </table>
                    </div>
                    <div>
                        <h4 class="font-semibold text-sm text-gray-700 mb-1">Groupes</h4>
                        <table class="w-full text-sm">
                            <tr><td class="py-1 text-gray-500">Réconciliés (AD + M365)</td><td class="py-1 font-mono font-semibold" x-text="stats.groupes.reconcilies"></td></tr>
                            <tr><td class="py-1 text-gray-500">AD seulement</td><td class="py-1 font-mono" x-text="stats.groupes.ad_seulement"></td></tr>
                            <tr><td class="py-1 text-gray-500">M365 seulement</td><td class="py-1 font-mono" x-text="stats.groupes.m365_seulement"></td></tr>
                            <tr class="border-t"><td class="py-1 font-semibold">Total AD</td><td class="py-1 font-mono" x-text="stats.groupes.total_ad"></td></tr>
                            <tr><td class="py-1 font-semibold">Total M365</td><td class="py-1 font-mono" x-text="stats.groupes.total_m365"></td></tr>
                        </table>
                    </div>
                </div>
            </template>

            {{-- Onglet Fusions --}}
            <template x-if="tab==='fusion' && stats">
                <div class="space-y-4">
                    <div>
                        <h4 class="font-semibold text-sm text-gray-700 mb-1" x-text="`Personnes fusionnées (${stats.fusion.personnes})`"></h4>
                        <template x-if="stats.fusion.personnes_details.length === 0">
                            <p class="text-sm text-gray-400 italic">Aucune fusion de personne nécessaire.</p>
                        </template>
                        <template x-for="(f, i) in stats.fusion.personnes_details" :key="i">
                            <div class="text-sm bg-green-50 border border-green-200 rounded px-3 py-2 mb-1">
                                <span class="font-medium" x-text="f.nom"></span>
                                <span class="text-gray-500 text-xs ml-2">
                                    M365: <span class="font-mono" x-text="f.m365"></span>
                                    &rarr; AD: <span class="font-mono" x-text="f.ad"></span>
                                </span>
                                <br><span class="text-xs text-gray-400" x-text="`Champs copiés : ${f.champs.join(', ')}`"></span>
                            </div>
                        </template>
                    </div>
                    <div>
                        <h4 class="font-semibold text-sm text-gray-700 mb-1" x-text="`Appartenances groupes fusionnées (${stats.fusion.groupes})`"></h4>
                        <template x-if="stats.fusion.groupes_details.length === 0">
                            <p class="text-sm text-gray-400 italic">Aucune appartenance groupe fusionnée.</p>
                        </template>
                        <template x-for="(f, i) in stats.fusion.groupes_details" :key="i">
                            <div class="text-sm bg-blue-50 border border-blue-200 rounded px-3 py-1 mb-0.5">
                                <span class="font-mono" x-text="f.compte"></span>
                                <span class="text-gray-400 mx-1">&rarr;</span>
                                <span class="font-mono" x-text="f.groupe"></span>
                            </div>
                        </template>
                    </div>
                </div>
            </template>

            {{-- Onglet Détails utilisateurs --}}
            <template x-if="tab==='details'">
                <div>
                    <template x-for="(d, i) in details" :key="i">
                        <div class="text-sm border-b py-2 last:border-0">
                            <span class="font-medium" x-text="d.nom || d.login_m365"></span>
                            <span class="ml-2 text-xs px-1.5 py-0.5 rounded" :class="d.statut==='reconcilie' ? 'bg-green-100 text-green-700' : d.statut==='ad_seulement' ? 'bg-blue-100 text-blue-700' : 'bg-yellow-100 text-yellow-700'" x-text="d.statut"></span>
                            <div class="text-xs text-gray-400 mt-0.5">
                                <template x-if="d.login_m365">M365: <span class="font-mono" x-text="d.login_m365"></span><br></template>
                                <template x-if="d.login_ad">AD: <span class="font-mono" x-text="d.login_ad"></span><br></template>
                                Personne M365: <span x-text="d.personne_m365 || '—'"></span>
                                &middot; Personne AD: <span x-text="d.personne_ad || '—'"></span>
                            </div>
                        </div>
                    </template>
                </div>
            </template>

            {{-- Onglet Groupes --}}
            <template x-if="tab==='groupes'">
                <div>
                    <template x-for="(g, i) in groupDetails" :key="i">
                        <div class="text-sm border-b py-1.5 last:border-0">
                            <span x-text="g.nom"></span>
                            <span class="ml-2 text-xs px-1.5 py-0.5 rounded" :class="g.statut==='reconcilie' ? 'bg-green-100 text-green-700' : g.statut==='ad_seulement' ? 'bg-blue-100 text-blue-700' : 'bg-yellow-100 text-yellow-700'" x-text="g.statut"></span>
                        </div>
                    </template>
                </div>
            </template>

            {{-- Résultat Découvrir --}}
            <template x-if="!stats && data.success && (data.total_agents !== undefined || data.total_utilisateurs !== undefined || data.total_groupes !== undefined || data.domaine !== undefined || data.tenant !== undefined)">
                <div class="space-y-4">
                    <div class="flex items-center gap-2 mb-2">
                        <span class="px-2 py-0.5 text-xs font-semibold rounded" :class="data.success ? 'bg-green-100 text-green-700' : 'bg-red-100 text-red-700'" x-text="data.success ? 'Succès' : 'Échec'"></span>
                        <span x-show="data.tenant" class="text-sm text-gray-500">Tenant : <strong x-text="data.tenant"></strong></span>
                    </div>
                    <div class="grid grid-cols-2 gap-3">
                        <template x-for="(v, k) in data" :key="k">
                            <template x-if="k !== 'success' && !Array.isArray(v) && typeof v !== 'object'">
                                <div class="text-sm bg-gray-50 rounded px-3 py-2 flex justify-between">
                                    <span class="text-gray-500 capitalize" x-text="k.replace(/_/g, ' ')"></span>
                                    <span class="font-semibold" x-text="v"></span>
                                </div>
                            </template>
                        </template>
                    </div>
                    <template x-for="(v, k) in data" :key="k">
                        <template x-if="Array.isArray(v) && v.length > 0">
                            <div>
                                <h4 class="text-sm font-semibold text-gray-700 mb-1 capitalize" x-text="k.replace(/_/g, ' ')"></h4>
                                <div class="flex flex-wrap gap-1">
                                    <template x-for="(item, i) in v" :key="i">
                                        <span class="text-xs px-2 py-1 bg-blue-50 text-blue-700 rounded border border-blue-200" x-text="item"></span>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </template>
                </div>
            </template>

            {{-- Fallback --}}
            <template x-if="!stats && !(data.success && (data.total_agents !== undefined || data.total_utilisateurs !== undefined || data.total_groupes !== undefined || data.domaine !== undefined || data.tenant !== undefined))">
                <pre class="text-sm font-mono bg-gray-50 rounded p-4 overflow-x-auto max-h-[60vh]"><code x-text="formatted"></code></pre>
            </template>

        </div>

        <div class="flex justify-end p-4 border-t">
            <button @click="show = false" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">Fermer</button>
        </div>
    </div>
</div>
@endif

<div id="loading-overlay" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.4);align-items:center;justify-content:center;flex-direction:column;gap:16px">
    <div style="width:48px;height:48px;border:4px solid #fff;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite"></div>
    <div style="color:#fff;font-size:18px;font-weight:600">Traitement en cours…</div>
</div>

@push('scripts')
<style>
@keyframes spin { to { transform: rotate(360deg); } }
</style>
<script>
function showLoading(formId) {
    const overlay = document.getElementById('loading-overlay');
    if (overlay) overlay.style.display = 'flex';
    if (formId) {
        const form = document.getElementById(formId);
        if (form) form.querySelectorAll('button').forEach(b => { b.disabled = true; });
    }
}
document.addEventListener('submit', function(e) {
    const form = e.target.closest('form');
    if (form && form.action && form.action.includes('connecteurs/executer')) {
        showLoading();
    }
});
window.addEventListener('confirmed', function(e) {
    const formId = e.detail.formId;
    const form = document.getElementById(formId);
    if (form && form.action && form.action.includes('connecteurs/executer')) {
        showLoading(formId);
        e.preventDefault();
        if (form.requestSubmit) {
            setTimeout(() => form.requestSubmit(), 50);
        } else {
            setTimeout(() => form.submit(), 50);
        }
    }
});
</script>
@endpush
@endsection