@extends('layouts.atelier')

@section('title', 'Connecteurs ESL')
@section('page-title', 'Connecteurs & Agents')

@section('content')

{{-- ═══════════════════════════════════════════════════════════════
     AGENTS LOCAUX
     ═══════════════════════════════════════════════════════════════ --}}
<div>
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1rem;">
        <h2 style="font-size:0.75rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;color:#64748b;margin:0;">
            Agents locaux
        </h2>
        <button id="new-token-btn" class="btn btn-primary btn-sm">+ Nouvel agent</button>
    </div>

    {{-- ── Formulaire création ── --}}
    <div id="new-token-form" class="card" style="max-width:480px;margin-bottom:1.25rem;display:none;">
        <div style="font-weight:700;margin-bottom:0.75rem;">Nouveau token agent</div>
        <div style="display:flex;gap:0.5rem;">
            <input type="text" id="new-token-name" class="form-input" placeholder="Nom de l'agent (ex: Atelier-01)">
            <button id="create-token-btn" class="btn btn-success">Créer</button>
        </div>
        <label style="display:flex;align-items:center;gap:0.4rem;font-size:0.82rem;cursor:pointer;margin-top:0.5rem;">
            <input type="checkbox" id="new-token-share-all" value="1">
            Partager avec tous les utilisateurs
        </label>
        <div id="token-created" style="margin-top:0.75rem;display:none;">
            <div class="alert alert-success" style="margin:0;">
                Token créé — copiez-le maintenant, il ne sera plus affiché :
                <div style="margin-top:0.5rem;font-family:monospace;font-size:0.82rem;word-break:break-all;background:rgba(0,0,0,0.05);padding:0.5rem;border-radius:0.375rem;" id="token-value"></div>
            </div>
        </div>
    </div>

    {{-- ── Liste agents ── --}}
    @forelse($agents as $agent)
    <div class="card" id="agent-card-{{ $agent->id }}" style="margin-bottom:1rem;">
        {{-- En-tête --}}
        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;margin-bottom:1rem;">
            <div style="display:flex;align-items:center;gap:0.75rem;">
                <span class="agent-dot {{ $agent->isOnline() ? 'online' : 'offline' }}"></span>
                <div>
                    <div style="font-weight:700;font-size:0.95rem;">
                        <a href="{{ route('admin.agents.show', $agent) }}" style="color:inherit;text-decoration:none;">
                            {{ $agent->name }}
                        </a>
                    </div>
                    <div style="font-size:0.78rem;color:#64748b;margin-top:2px;">
                        Propriétaire : {{ $agent->owner?->full_name ?? 'Système' }}
                        @if($agent->isOnline())
                            <span style="color:#10b981;">· En ligne</span>
                        @else
                            <span style="color:#94a3b8;">· Hors ligne</span>
                        @endif
                    </div>
                </div>
            </div>
            <button class="btn btn-ghost btn-sm revoke-btn" data-id="{{ $agent->id }}"
                    style="color:#ef4444;">
                Révoquer
            </button>
        </div>

        {{-- Connecteurs par marque --}}
        <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0.75rem;margin-bottom:0.75rem;">
            @php $brands = ['hanshow' => 'Hanshow', 'vusion' => 'SES-imagotag', 'pricer' => 'Pricer']; @endphp
            @foreach($brands as $brandKey => $brandLabel)
                @php $conn = $agent->eslConnectors->firstWhere('brand', $brandKey); @endphp

                @if($conn)
                <div style="background:#f8fafc;border:1px solid #e2e8f0;border-radius:0.625rem;padding:0;display:flex;flex-direction:column;">
                    {{-- Résumé --}}
                    <div class="connector-summary" data-target="cfg-{{ $conn->id }}"
                         style="padding:0.75rem;cursor:pointer;display:flex;flex-direction:column;gap:0.35rem;
                                border-bottom:1px solid #e2e8f0;">
                        <div style="display:flex;align-items:center;justify-content:space-between;">
                            <span style="font-size:0.78rem;font-weight:700;color:#475569;">{{ $brandLabel }}</span>
                            <span style="font-size:0.78rem;color:#94a3b8;cursor:pointer;padding:2px 6px;border-radius:4px;"
                                  title="Configurer" onclick="event.stopPropagation();toggleConfig('cfg-{{ $conn->id }}')">⚙</span>
                        </div>
                        @php
                            $invCount = $conn->esl_count ?? 0;
                            $syncAgo = $conn->last_sync_at ? $conn->last_sync_at->diffForHumans() : null;
                        @endphp
                        <div style="display:flex;align-items:baseline;gap:0.35rem;">
                            <span style="font-size:1.2rem;font-weight:800;color:#10b981;">{{ $invCount }}</span>
                            <span style="font-size:0.72rem;color:#64748b;">ESL{{ $invCount > 1 ? 's' : '' }}</span>
                            @if($invCount > 0)
                                <span style="color:#10b981;font-size:0.72rem;">✓</span>
                            @else
                                <span style="color:#94a3b8;font-size:0.72rem;">⚪</span>
                            @endif
                        </div>
                        <div style="font-size:0.72rem;color:#94a3b8;">
                            @if($syncAgo)
                                Sync : {{ $syncAgo }}
                            @else
                                Jamais synchronisé
                            @endif
                        </div>
                        @if($invCount > 0)
                        <a href="{{ route('inventaire.index', ['brand' => $brandKey, 'connector_id' => $conn->id]) }}"
                           style="font-size:0.72rem;color:#2563eb;text-decoration:none;font-weight:600;">
                            Voir l'inventaire →
                        </a>
                        @endif
                    </div>

                    {{-- Config (caché) --}}
                    <div id="cfg-{{ $conn->id }}" style="display:none;padding:0.75rem;">
                        <form class="connector-form" data-id="{{ $conn->id }}">
                            @csrf @method('PUT')

                            @if($brandKey === 'hanshow')
                            <div style="margin-bottom:0.5rem;">
                                <label class="form-label" style="font-size:0.7rem;">URL ESL-Working</label>
                                <input type="url" name="eslworking_url" class="form-input"
                                       placeholder="http://192.168.1.x:9000"
                                       value="{{ $conn->eslworking_url }}"
                                       style="font-size:0.78rem;padding:0.35rem 0.5rem;">
                            </div>
                            <div style="margin-bottom:0.5rem;">
                                <label class="form-label" style="font-size:0.7rem;">URL API Proxy</label>
                                <input type="url" name="apiproxy_url" class="form-input"
                                       placeholder="http://192.168.1.x:9001"
                                       value="{{ $conn->apiproxy_url }}"
                                       style="font-size:0.78rem;padding:0.35rem 0.5rem;">
                            </div>
                            @else
                            <div style="margin-bottom:0.5rem;">
                                <label class="form-label" style="font-size:0.7rem;">URL API</label>
                                <input type="url" name="eslworking_url" class="form-input"
                                       placeholder="http://192.168.1.x:5001"
                                       value="{{ $conn->eslworking_url }}"
                                       style="font-size:0.78rem;padding:0.35rem 0.5rem;">
                            </div>
                            @endif

                            <div style="margin-bottom:0.5rem;">
                                <label class="form-label" style="font-size:0.7rem;">Clé API</label>
                                <input type="text" name="api_key" class="form-input" placeholder="Laisser vide pour conserver"
                                       autocomplete="off" style="font-size:0.78rem;padding:0.35rem 0.5rem;">
                                <div style="font-size:0.65rem;color:#94a3b8;margin-top:2px;">
                                    {{ $conn->api_key ? '• Clé enregistrée' : 'Non configurée' }}
                                </div>
                            </div>
                            <div style="margin-bottom:0.5rem;">
                                <label class="form-label" style="font-size:0.7rem;">Secret API</label>
                                <input type="password" name="api_secret" class="form-input" placeholder="Laisser vide pour conserver"
                                       autocomplete="off" style="font-size:0.78rem;padding:0.35rem 0.5rem;">
                            </div>
                            <div style="margin-bottom:0.5rem;">
                                <label class="form-label" style="font-size:0.7rem;">ID template RESET</label>
                                <input type="text" name="reset_template_id" class="form-input"
                                       value="{{ $conn->reset_template_id }}" placeholder="reset_template"
                                       style="font-size:0.78rem;padding:0.35rem 0.5rem;">
                            </div>

                            @if($brandKey === 'hanshow')
                            <div style="margin-bottom:0.5rem;">
                                <label class="form-label" style="font-size:0.7rem;">User Code ESL-Working</label>
                                <input type="text" name="user_code" class="form-input"
                                       value="{{ $conn->user_code ?? 'default' }}" placeholder="default"
                                       style="font-size:0.78rem;padding:0.35rem 0.5rem;">
                                <div style="font-size:0.65rem;color:#94a3b8;margin-top:2px;">
                                    Utilisé dans /api3/{user_code}/esls/
                                </div>
                            </div>
                            @endif

                            <div style="display:flex;gap:1rem;margin-bottom:0.5rem;">
                                <label style="display:flex;align-items:center;gap:0.35rem;font-size:0.78rem;cursor:pointer;">
                                    <input type="hidden" name="mock_mode" value="0">
                                    <input type="checkbox" name="mock_mode" value="1" {{ $conn->mock_mode ? 'checked' : '' }}>
                                    Démo
                                </label>
                                <label style="display:flex;align-items:center;gap:0.35rem;font-size:0.78rem;cursor:pointer;">
                                    <input type="hidden" name="enabled" value="0">
                                    <input type="checkbox" name="enabled" value="1" {{ $conn->enabled ? 'checked' : '' }}>
                                    Actif
                                </label>
                            </div>

                            <div style="display:flex;gap:0.4rem;">
                                <button type="submit" class="btn btn-primary btn-sm"
                                        style="font-size:0.75rem;padding:0.3rem 0.7rem;">Enregistrer</button>
                                <button type="button" class="btn btn-ghost btn-sm test-btn"
                                        data-id="{{ $conn->id }}"
                                        style="font-size:0.75rem;padding:0.3rem 0.7rem;">Tester</button>
                            </div>
                            <div class="test-result-{{ $conn->id }}" style="font-size:0.75rem;display:none;margin-top:0.35rem;"></div>
                        </form>
                    </div>
                </div>

                @else
                {{-- Pas de connecteur — bouton créer --}}
                <div style="background:#f8fafc;border:1px dashed #d1d5db;border-radius:0.625rem;padding:0.75rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem;text-align:center;">
                    <div style="font-size:0.78rem;font-weight:700;color:#94a3b8;">{{ $brandLabel }}</div>
                    <div style="font-size:0.85rem;color:#94a3b8;">—</div>
                    <button type="button" class="btn btn-ghost btn-sm create-connector-btn"
                            data-agent="{{ $agent->id }}"
                            data-brand="{{ $brandKey }}"
                            style="font-size:0.72rem;">
                        + Créer
                    </button>
                </div>
                @endif

            @endforeach
        </div>

        {{-- Pied --}}
        <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;font-size:0.78rem;color:#94a3b8;padding-top:0.5rem;border-top:1px solid #f1f5f9;">
            <span>
                Dernier contact :
                {{ $agent->last_seen_at ? $agent->last_seen_at->diffForHumans() : 'Jamais' }}
                @if($agent->last_ip)
                    · IP : <code style="font-size:0.72rem;">{{ $agent->last_ip }}</code>
                @endif
            </span>
            <a href="{{ route('admin.agents.show', $agent) }}" class="btn btn-ghost btn-sm">
                Voir fiche agent →
            </a>
        </div>
    </div>
    @empty
    <div class="card" style="text-align:center;padding:2.5rem;color:#94a3b8;">
        Aucun agent configuré. Créez un token pour votre agent local.
    </div>
    @endforelse
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const csrf = document.querySelector('meta[name=csrf-token]').content;

    // ── Toggle config ──
    window.toggleConfig = function (id) {
        const el = document.getElementById(id);
        if (!el) return;
        const isHidden = el.style.display === 'none' || el.style.display === '';
        el.style.display = isHidden ? 'block' : 'none';
    };

    // ── Click sur le résumé pour toggle ──
    document.querySelectorAll('.connector-summary').forEach(el => {
        el.addEventListener('click', () => {
            const targetId = el.dataset.target;
            if (targetId) toggleConfig(targetId);
        });
    });

    // ── Sauvegarder connecteur ──
    document.querySelectorAll('.connector-form').forEach(form => {
        form.addEventListener('submit', async (e) => {
            e.preventDefault();
            const id  = form.dataset.id;
            const btn = form.querySelector('[type=submit]');
            btn.disabled = true;
            btn.textContent = '…';
            try {
                const fd = new FormData(form);
                const body = {};
                for (const [k, v] of fd.entries()) body[k] = v;
                body.mock_mode = form.querySelector('[name=mock_mode]:checked') ? '1' : '0';
                body.enabled   = form.querySelector('[name=enabled]:checked')   ? '1' : '0';

                const resp = await fetch(`/admin/connecteurs/${id}`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify(body),
                });
                const data = await resp.json();
                if (!resp.ok) {
                    btn.textContent = '✗ ' + (data.message ?? `Erreur HTTP ${resp.status}`);
                    setTimeout(() => { btn.textContent = 'Enregistrer'; btn.disabled = false; }, 3000);
                    return;
                }
                btn.textContent = data.success ? '✓ Enregistré' : '✗ Erreur';
                setTimeout(() => { btn.textContent = 'Enregistrer'; btn.disabled = false; }, 2000);
            } catch (err) {
                btn.textContent = '✗ Erreur réseau';
                btn.disabled = false;
            }
        });
    });

    // ── Tester connexion ──
    document.querySelectorAll('.test-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            const id  = btn.dataset.id;
            const res = document.querySelector(`.test-result-${id}`);
            btn.disabled = true;
            btn.textContent = 'Test…';
            res.style.display = 'block';
            res.textContent = '…';
            try {
                const resp = await fetch(`/admin/connecteurs/${id}/test`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
                });
                const data = await resp.json();
                res.textContent = (data.success ? '✓ ' : '✗ ') + (data.message ?? '');
                res.style.color = data.success ? '#10b981' : '#ef4444';
            } catch (err) {
                res.textContent = '✗ Erreur réseau';
                res.style.color = '#ef4444';
            } finally {
                btn.disabled = false;
                btn.textContent = 'Tester';
            }
        });
    });

    // ── Créer connecteur ──
    document.querySelectorAll('.create-connector-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            const agentId = btn.dataset.agent;
            const brand = btn.dataset.brand;
            btn.disabled = true;
            btn.textContent = '…';
            try {
                const resp = await fetch(`/admin/agents/${agentId}/connectors`, {
                    method: 'POST',
                    headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json', 'Accept': 'application/json' },
                    body: JSON.stringify({ brand }),
                });
                const data = await resp.json();
                if (data.success) {
                    location.reload();
                } else {
                    btn.textContent = '✗ Erreur';
                    setTimeout(() => { btn.textContent = '+ Créer'; btn.disabled = false; }, 2000);
                }
            } catch (err) {
                btn.textContent = '✗ Erreur réseau';
                setTimeout(() => { btn.textContent = '+ Créer'; btn.disabled = false; }, 2000);
            }
        });
    });

    // ── Nouveau token ──
    document.getElementById('new-token-btn').addEventListener('click', () => {
        const f = document.getElementById('new-token-form');
        f.style.display = f.style.display === 'none' ? 'block' : 'none';
    });

    document.getElementById('create-token-btn').addEventListener('click', async () => {
        const name = document.getElementById('new-token-name').value.trim();
        if (!name) return;
        const shareAll = document.getElementById('new-token-share-all').checked;
        const resp = await fetch('/admin/tokens', {
            method: 'POST',
            headers: { 'X-CSRF-TOKEN': csrf, 'Content-Type': 'application/json', 'Accept': 'application/json' },
            body: JSON.stringify({ name, share_all: shareAll }),
        });
        const data = await resp.json();
        if (data.success) {
            document.getElementById('token-value').textContent = data.token;
            document.getElementById('token-created').style.display = 'block';
        }
    });

    // ── Révoquer token ──
    document.querySelectorAll('.revoke-btn').forEach(btn => {
        btn.addEventListener('click', async () => {
            if (!confirm('Révoquer ce token ? L\'agent ne pourra plus se connecter.')) return;
            const id = btn.dataset.id;
            await fetch(`/admin/tokens/${id}`, {
                method: 'POST',
                headers: { 'X-CSRF-TOKEN': csrf, 'Accept': 'application/json' },
            });
            const card = document.getElementById(`agent-card-${id}`);
            if (card) {
                card.style.transition = 'opacity 0.3s';
                card.style.opacity = '0';
                setTimeout(() => card.remove(), 300);
            }
        });
    });
});
</script>

@endsection