@component('v2-cms::components.box', ['title' => 'Suporte a Usuários (Helpdesk)'])
    <p class="text-muted mb-4">
        Ferramentas para resetar senhas, ajustar perfis corrompidos e analisar trilhas de auditoria específicas de um usuário.
    </p>

    {{-- ═══════════════════════════════════════════════════════
         FORMULÁRIO DE BUSCA
         ═══════════════════════════════════════════════════════ --}}
    <form action="{{ route('v2.supportconfigs.users.search') }}" method="GET" class="mb-4">
        <div class="input-group input-group-lg shadow-sm">
            <span class="input-group-text bg-white border-end-0" aria-hidden="true">
                <i class="bi bi-search text-muted"></i>
            </span>
            <input type="text" name="q" class="form-control border-start-0 ps-0"
                   placeholder="Buscar usuário por e-mail ou nome..."
                   value="{{ session('search_term', '') }}"
                   minlength="2" required
                   aria-label="Buscar usuário">
            <button class="btn btn-primary fw-bold px-4 d-inline-flex align-items-center gap-1" type="submit">
                <i class="bi bi-search" aria-hidden="true"></i> Buscar
            </button>
        </div>
        <div class="form-text mt-1">Digite ao menos 2 caracteres para iniciar a busca.</div>
    </form>

    {{-- ═══════════════════════════════════════════════════════
         RESULTADOS DA BUSCA
         ═══════════════════════════════════════════════════════ --}}
    @php $searchResults = session('search_results'); @endphp
    @if($searchResults && $searchResults->isNotEmpty())
        <div class="table-responsive border rounded-3 shadow-sm">
            <table class="table align-middle table-striped table-hover mb-0" aria-label="Configurações de suporte">
                <thead class="table-light">
                    <tr>
                        <th scope="col" width="50">#</th>
                        <th scope="col">Nome</th>
                        <th scope="col">E-mail</th>
                        <th scope="col">Papéis (Roles)</th>
                        <th scope="col">Último Login</th>
                        <th scope="col" width="120" class="text-center">Ações</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($searchResults as $user)
                        <tr>
                            <td class="fw-bold text-muted small">{{ $user['id'] }}</td>
                            <td class="fw-semibold">{{ $user['full_name'] }}</td>
                            <td><code>{{ $user['email'] }}</code></td>
                            <td><span class="small">{{ $user['roles'] }}</span></td>
                            <td class="small text-muted">{{ $user['last_login'] }}</td>
                            <td class="text-center">
                                <div class="d-flex gap-1 justify-content-center">
                                    <button type="button" class="btn btn-sm btn-outline-info"
                                            onclick="showUserDetail({{ $user['id'] }})"
                                            title="Ver detalhes e activity_log"
                                            aria-label="Detalhes de {{ $user['full_name'] }}">
                                        <i class="bi bi-eye-fill" aria-hidden="true"></i>
                                    </button>
                                    <button type="button" class="btn btn-sm btn-outline-warning"
                                            onclick="showPasswordReset({{ $user['id'] }}, '{{ $user['full_name'] }}')"
                                            title="Resetar senha"
                                            aria-label="Resetar senha de {{ $user['full_name'] }}">
                                        <i class="bi bi-key-fill" aria-hidden="true"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @elseif(session('search_term'))
        <div class="alert alert-info d-flex align-items-center gap-2 p-3 mt-3 mb-0 border-0 shadow-sm" role="alert">
            <i class="bi bi-info-circle-fill fs-5" aria-hidden="true"></i>
            <div>
                Nenhum usuário encontrado para o termo "<strong>{{ session('search_term') }}</strong>".
            </div>
        </div>
    @endif

    {{-- ═══════════════════════════════════════════════════════
         DETALHES DO USUÁRIO (AJAX)
         ═══════════════════════════════════════════════════════ --}}
    <div id="user-detail-container" style="display:none;" class="mt-4">
        <hr class="my-4">
        <div class="d-flex align-items-center gap-2 mb-3">
            <i class="bi bi-person-fill fs-4 text-primary" aria-hidden="true"></i>
            <h4 class="h5 fw-bold text-dark mb-0">Detalhes do Usuário</h4>
        </div>
        <div id="user-detail-content" class="bg-light p-4 rounded-3 border" style="max-height: 600px; overflow-y: auto;">
            {{-- Preenchido via AJAX --}}
        </div>
    </div>

    {{-- ═══════════════════════════════════════════════════════
         MODAL DE RESET DE SENHA
         ═══════════════════════════════════════════════════════ --}}
<div class="modal fade" id="passwordResetModal" tabindex="-1" role="dialog"
     aria-labelledby="passwordResetModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content border-0 shadow-lg">
                <div class="modal-header border-0 pb-0">
                    <h5 class="modal-title fw-bold text-dark d-flex align-items-center gap-2" id="passwordResetModalLabel">
                        <i class="bi bi-key-fill text-warning" aria-hidden="true"></i> Resetar Senha
                    </h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fechar"></button>
                </div>
                <form action="{{ route('v2.supportconfigs.users.reset_password') }}" method="POST">
                    {{ csrf_field() }}
                    <input type="hidden" name="user_id" id="reset_user_id" value="">
                    <div class="modal-body pt-3">
                        <p class="mb-3">Usuário: <strong id="reset_user_name" class="text-dark"></strong></p>
                        <div class="mb-3">
                            <label for="new_password" class="form-label fw-bold">Nova Senha</label>
                            <div class="input-group">
                                <span class="input-group-text bg-white" aria-hidden="true">
                                    <i class="bi bi-lock"></i>
                                </span>
                                <input type="text" name="new_password" id="new_password" class="form-control"
                                       placeholder="Digite a nova senha" minlength="6" required
                                       aria-describedby="passwordHelp">
                            </div>
                            <div class="form-text mt-1" id="passwordHelp">
                                Mínimo de 6 caracteres. A senha será alterada imediatamente e o usuário precisará usar a nova senha no próximo login.
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer border-0 pt-2">
                        <button type="button" class="btn btn-outline-secondary fw-bold" data-bs-dismiss="modal">
                            <i class="bi bi-x-lg me-1"></i> Cancelar
                        </button>
                        <button type="submit" class="btn btn-warning text-white fw-bold d-inline-flex align-items-center gap-1"
                                onclick="return confirm('Tem certeza que deseja forçar o reset de senha?')">
                            <i class="bi bi-check-lg" aria-hidden="true"></i> Resetar Senha
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    @push('scripts')
    <script>
        function showUserDetail(userId) {
            var container = document.getElementById('user-detail-container');
            var content = document.getElementById('user-detail-content');
            container.style.display = 'block';
            content.innerHTML = '<div class="text-center py-5"><span class="spinner-border text-primary mb-3" role="status" style="width: 2.5rem; height: 2.5rem;"></span><p class="text-muted mb-0">Carregando detalhes...</p></div>';

            fetch('/cms/infra/support-configs/users/detail/' + userId, {
                headers: { 'Accept': 'application/json' }
            })
            .then(function(r) { return r.json(); })
            .then(function(user) {
                if (user.error) {
                    content.innerHTML = '<div class="alert alert-danger border-0 shadow-sm">' +
                        '<i class="bi bi-exclamation-triangle-fill me-1"></i> ' + user.error + '</div>';
                    return;
                }

                var html = '';
                html += '<dl class="row mb-4 small">';
                html += '<dt class="col-sm-3 col-12 fw-bold text-secondary">ID</dt>' +
                        '<dd class="col-sm-9 col-12">' + user.id + '</dd>';
                html += '<dt class="col-sm-3 col-12 fw-bold text-secondary">Nome</dt>' +
                        '<dd class="col-sm-9 col-12">' + user.full_name + '</dd>';
                html += '<dt class="col-sm-3 col-12 fw-bold text-secondary">E-mail</dt>' +
                        '<dd class="col-sm-9 col-12"><code>' + user.email + '</code></dd>';
                html += '<dt class="col-sm-3 col-12 fw-bold text-secondary">Papéis</dt>' +
                        '<dd class="col-sm-9 col-12">' + (user.roles ? user.roles.join(', ') : '<span class="text-muted">Nenhum</span>') + '</dd>';
                html += '<dt class="col-sm-3 col-12 fw-bold text-secondary">Último Login</dt>' +
                        '<dd class="col-sm-9 col-12 text-muted">' + user.last_login + '</dd>';
                html += '<dt class="col-sm-3 col-12 fw-bold text-secondary">Criado em</dt>' +
                        '<dd class="col-sm-9 col-12 text-muted">' + user.created_at + '</dd>';
                html += '</dl>';

                if (user.activity_log && user.activity_log.length > 0) {
                    html += '<h5 class="h6 fw-bold text-dark d-flex align-items-center gap-2 mb-3">' +
                            '<i class="bi bi-clock-history" aria-hidden="true"></i> Últimas Atividades</h5>';
                    html += '<div class="table-responsive border rounded-3 bg-white">' +
                            '<table class="table align-middle table-striped table-sm mb-0 small" aria-label="Últimas atividades do usuário">';
                    html += '<thead><tr class="table-light">' +
                            '<th scope="col">Data</th><th scope="col">Ação</th><th scope="col">Alvo</th>' +
                            '</tr></thead><tbody>';
                    for (var i = 0; i < user.activity_log.length; i++) {
                        var log = user.activity_log[i];
                        html += '<tr><td class="text-nowrap">' + log.date + '</td>' +
                                '<td>' + log.description + '</td>' +
                                '<td><code>' + (log.subject || '-') + '</code></td></tr>';
                    }
                    html += '</tbody></table></div>';
                } else {
                    html += '<div class="alert alert-light border small" role="alert">' +
                            '<i class="bi bi-info-circle me-1"></i> Nenhuma atividade registrada.</div>';
                }

                content.innerHTML = html;
            })
            .catch(function() {
                content.innerHTML = '<div class="alert alert-danger border-0 shadow-sm">' +
                    '<i class="bi bi-exclamation-triangle-fill me-1"></i> Erro ao carregar detalhes do usuário.</div>';
            });
        }

        function showPasswordReset(userId, userName) {
            document.getElementById('reset_user_id').value = userId;
            document.getElementById('reset_user_name').textContent = userName;
            document.getElementById('new_password').value = '';
            var myModal = new bootstrap.Modal(document.getElementById('passwordResetModal'));
            myModal.show();
        }
    </script>
    @endpush
@endcomponent