@extends('layouts.app')

@section('title', 'Groups - VPN Admin')

@push('styles')
<link rel="stylesheet" href="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.css') }}">
<style>
    .settings-row .form-control {
        margin-bottom: 0;
    }
    .settings-row .btn-remove-setting {
        padding: 0.375rem 0.6rem;
    }
</style>
@endpush

@section('content')
<!-- Page Loader -->
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="m-t-30"><img src="{{ asset('assets/images/logo-icon.svg') }}" width="48" height="48" alt="VPN Admin"></div>
        <p>Please wait...</p>
    </div>
</div>

<!-- main page content body part -->
<div id="main-content">
    <div class="container-fluid">
        <div class="block-header">
            <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <h2>Groups</h2>
                    <ul class="breadcrumb">
                        <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i class="fa fa-dashboard"></i></a></li>
                        <li class="breadcrumb-item">Settings</li>
                        <li class="breadcrumb-item active">Groups</li>
                    </ul>
                </div>
                <div class="col-lg-6 col-md-6 col-sm-12">
                    <div class="d-flex flex-row-reverse">
                        <div class="page_action">
                            @can('create groups')
                            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#groupModal" id="addGroupBtn"><i class="fa fa-plus"></i> Add Group</button>
                            @endcan
                            <button type="button" class="btn btn-secondary" id="refreshTable"><i class="fa fa-refresh"></i> Refresh</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Alerts -->
        @if(session('success'))
        <div class="alert alert-success alert-dismissible fade show" role="alert">
            {{ session('success') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        @if(session('error'))
        <div class="alert alert-danger alert-dismissible fade show" role="alert">
            {{ session('error') }}
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        @endif

        <!-- DataTable -->
        <div class="row clearfix">
            <div class="col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>Groups List</h2>
                    </div>
                    <div class="body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped table-hover js-basic-example dataTable" id="groupsTable" style="width:100%">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th>Protocols</th>
                                        <th>Settings</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <!-- Data will be loaded via AJAX -->
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Group Modal (Create/Edit/View) -->
<div class="modal fade" id="groupModal" tabindex="-1" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="groupModalTitle">Add Group</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form id="groupForm">
                @csrf
                <input type="hidden" id="group_id" name="group_id">
                <input type="hidden" id="_method" name="_method" value="POST">
                <div class="modal-body">
                    <div id="groupModalBody">
                        <div class="form-group">
                            <label for="modal_name">Group Name <span class="text-danger">*</span></label>
                            <input type="text" class="form-control" id="modal_name" name="name" required>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="modal_description">Description</label>
                            <textarea class="form-control" id="modal_description" name="description" rows="3"></textarea>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label for="modal_protocols">Protocols</label>
                            <select class="form-control" id="modal_protocols" name="protocols[]" multiple>
                                <!-- Populated via AJAX -->
                            </select>
                            <small class="form-text text-muted">Hold Ctrl/Cmd to select multiple protocols</small>
                            <div class="invalid-feedback"></div>
                        </div>

                        <div class="form-group">
                            <label>Settings</label>
                            <div id="settingsRows"></div>
                            <button type="button" class="btn btn-sm btn-outline-primary mt-2" id="addSettingRowBtn">
                                <i class="fa fa-plus"></i> Add Setting
                            </button>
                            <small class="form-text text-muted">Add key-value pairs that will be stored under settings.</small>
                            <div class="invalid-feedback d-block" id="settingsError"></div>
                        </div>
                    </div>
                    
                    <!-- View Mode Content -->
                    <div id="groupViewContent" style="display: none;">
                        <table class="table table-bordered">
                            <tr>
                                <th width="150">Group ID</th>
                                <td id="view_id">-</td>
                            </tr>
                            <tr>
                                <th>Name</th>
                                <td id="view_name">-</td>
                            </tr>
                            <tr>
                                <th>Description</th>
                                <td id="view_description">-</td>
                            </tr>
                            <tr>
                                <th>Protocols</th>
                                <td id="view_protocols">-</td>
                            </tr>
                            <tr>
                                <th>Settings</th>
                                <td id="view_settings">-</td>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="modal-footer" id="groupModalFooter">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary" id="groupSubmitBtn">
                        <i class="fa fa-spinner fa-spin" id="groupSubmitSpinner" style="display: none;"></i>
                        <span id="groupSubmitText">Save</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="{{ asset('assets/vendor/jquery-datatable/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('assets/vendor/jquery-datatable/dataTables.bootstrap4.min.js') }}"></script>
<script>
    var protocolsList = [];
    var protocolsMap = {};

    function buildProtocolsMap() {
        protocolsMap = {};
        protocolsList.forEach(function(protocol) {
            var id = protocol._id || protocol.id;
            if (id) {
                protocolsMap[String(id)] = protocol.name;
            }
            if (protocol.id) {
                protocolsMap[String(protocol.id)] = protocol.name;
            }
            if (protocol._id) {
                protocolsMap[String(protocol._id)] = protocol.name;
            }
        });
    }

    function populateProtocolsSelect() {
        var select = $('#modal_protocols');
        select.empty();
        protocolsList.forEach(function(protocol) {
            var id = protocol._id || protocol.id;
            select.append('<option value="' + id + '">' + protocol.name + ' (' + protocol.code + ')</option>');
        });
    }

    function loadProtocols(callback) {
        $.ajax({
            url: "{{ route('protocols.ajax.list') }}",
            method: 'GET',
            success: function(response) {
                if (response.data && Array.isArray(response.data)) {
                    protocolsList = response.data;
                    buildProtocolsMap();
                    populateProtocolsSelect();
                }
                if (typeof callback === 'function') {
                    callback();
                }
            },
            error: function() {
                console.error('Failed to load protocols');
                if (typeof callback === 'function') {
                    callback();
                }
            }
        });
    }

    function getProtocolIds(protocols) {
        if (!protocols || !Array.isArray(protocols)) {
            return [];
        }

        return protocols.map(function(item) {
            if (typeof item === 'object' && item !== null) {
                return String(item._id || item.id || '');
            }
            return String(item);
        }).filter(function(id) {
            return id !== '';
        });
    }

    function formatProtocolsDisplay(protocols) {
        if (!protocols || !Array.isArray(protocols) || protocols.length === 0) {
            return '-';
        }

        var names = protocols.map(function(item) {
            if (typeof item === 'object' && item !== null) {
                if (item.name) {
                    return item.name;
                }
                item = item._id || item.id || '';
            }

            return protocolsMap[String(item)] || String(item);
        });

        return names.join(', ');
    }

    function formatSettingsDisplay(settings) {
        if (!settings || typeof settings !== 'object' || Array.isArray(settings)) {
            return '-';
        }

        var keys = Object.keys(settings);
        if (keys.length === 0) {
            return '-';
        }

        var html = '<ul class="list-unstyled mb-0">';
        keys.forEach(function(key) {
            var value = settings[key];
            html += '<li><strong>' + $('<div>').text(key).html() + ':</strong> ' + $('<div>').text(value === null || value === undefined ? '' : String(value)).html() + '</li>';
        });
        html += '</ul>';

        return html;
    }

    function addSettingRow(key, value) {
        key = key || '';
        value = value === null || value === undefined ? '' : String(value);

        var row = $('<div class="row settings-row mb-2 align-items-center"></div>');
        row.append(
            '<div class="col-md-5">' +
                '<input type="text" class="form-control setting-key" placeholder="Key" value="' + $('<div>').text(key).html() + '">' +
            '</div>' +
            '<div class="col-md-5">' +
                '<input type="text" class="form-control setting-value" placeholder="Value" value="' + $('<div>').text(value).html() + '">' +
            '</div>' +
            '<div class="col-md-2">' +
                '<button type="button" class="btn btn-danger btn-sm btn-remove-setting" title="Remove"><i class="fa fa-trash"></i></button>' +
            '</div>'
        );

        $('#settingsRows').append(row);
    }

    function clearSettingsRows() {
        $('#settingsRows').empty();
    }

    function populateSettingsRows(settings) {
        clearSettingsRows();

        if (settings && typeof settings === 'object' && !Array.isArray(settings)) {
            var keys = Object.keys(settings);
            if (keys.length > 0) {
                keys.forEach(function(key) {
                    addSettingRow(key, settings[key]);
                });
                return;
            }
        }

        addSettingRow('', '');
    }

    function getSettingsFromForm() {
        var settings = {};
        var hasDuplicate = false;
        var seenKeys = {};

        $('#settingsRows .settings-row').each(function() {
            var key = $(this).find('.setting-key').val().trim();
            var value = $(this).find('.setting-value').val().trim();

            if (key === '') {
                return;
            }

            if (seenKeys[key]) {
                hasDuplicate = true;
            }

            seenKeys[key] = true;
            settings[key] = value;
        });

        return { settings: settings, hasDuplicate: hasDuplicate };
    }

    $(document).ready(function() {
        showFullScreenLoader();

        loadProtocols(function() {
            initGroupsTable();
        });

        function initGroupsTable() {
        var table = $('#groupsTable').DataTable({
            processing: false,
            serverSide: false,
            ajax: {
                url: "{{ route('groups.ajax.list') }}",
                cache: false,
                timeout: 30000,
                dataSrc: 'data',
                complete: function() {
                    hideFullScreenLoader();
                },
                error: function(xhr, error, thrown) {
                    console.error('DataTables Error:', error);
                    console.error('Response:', xhr.responseText);
                }
            },
            columns: [
                { data: 'name', name: 'name' },
                { data: 'description', name: 'description', defaultContent: '-' },
                {
                    data: 'protocols',
                    name: 'protocols',
                    orderable: false,
                    render: function(data) {
                        return formatProtocolsDisplay(data);
                    }
                },
                {
                    data: 'settings',
                    name: 'settings',
                    orderable: false,
                    render: function(data) {
                        return formatSettingsDisplay(data);
                    }
                },
                { 
                    data: 'id', 
                    name: 'actions',
                    orderable: false,
                    searchable: false,
                    render: function(data, type, row) {
                        var actions = '<div class="btn-group" role="group">';
                        actions += '<button type="button" class="btn btn-sm btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">';
                        actions += '<i class="fa fa-cog"></i> Actions ';
                        actions += '</button>';
                        actions += '<div class="dropdown-menu dropdown-menu-right">';
                        actions += '<a class="dropdown-item view-group" href="javascript:void(0);" data-id="' + data + '"><i class="fa fa-eye"></i> View</a>';
                        @can('edit groups')
                        actions += '<a class="dropdown-item edit-group" href="javascript:void(0);" data-id="' + data + '"><i class="fa fa-edit"></i> Edit</a>';
                        @endcan
                        @can('delete groups')
                        actions += '<a class="dropdown-item delete-group" href="javascript:void(0);" data-id="' + data + '"><i class="fa fa-trash"></i> Delete</a>';
                        @endcan
                        actions += '</div>';
                        actions += '</div>';
                        return actions;
                    }
                }
            ],
            order: [[0, 'asc']],
            pageLength: 20,
            lengthMenu: [[10, 20, 50, 100], [10, 20, 50, 100]],
            language: {
                processing: '',
                emptyTable: "No groups found",
                zeroRecords: "No matching groups found"
            }
        });

        $('#refreshTable').on('click', function() {
            var $btn = $(this);
            var originalHtml = $btn.html();
            $btn.prop('disabled', true).html('<i class="fa fa-spinner fa-spin"></i> Loading...');
            showFullScreenLoader();
            table.ajax.reload(function(json) {
                $btn.prop('disabled', false).html(originalHtml);
                hideFullScreenLoader();
            }, false);
        });

        $('#addSettingRowBtn').on('click', function() {
            addSettingRow('', '');
        });

        $(document).on('click', '.btn-remove-setting', function() {
            $(this).closest('.settings-row').remove();
        });

        $('#addGroupBtn').on('click', function() {
            resetGroupModal();
            $('#groupModalTitle').text('Add Group');
            $('#groupForm').attr('action', "{{ route('groups.store') }}");
            $('#_method').val('POST');
            $('#group_id').val('');
            $('#groupModalBody').show();
            $('#groupViewContent').hide();
            $('#groupModalFooter').show();
            $('#groupSubmitBtn').show();
            $('#groupSubmitText').text('Create Group');
            populateSettingsRows({});
            $('#groupModal').modal('show');
        });

        $(document).on('click', '.view-group', function() {
            var groupId = $(this).data('id');
            showFullScreenLoader();
            $('#groupModalBody').hide();
            $('#groupViewContent').show();
            $('#groupModalFooter').show();
            $('#groupSubmitBtn').hide();
            $('#groupModalTitle').text('Group Details');
            
            $.ajax({
                url: "{{ route('groups.show.ajax', ':id') }}".replace(':id', groupId),
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                success: function(response) {
                    hideFullScreenLoader();
                    if (response.success && response.data) {
                        var group = response.data;
                        $('#view_id').text(group.id || '-');
                        $('#view_name').text(group.name || '-');
                        $('#view_description').text(group.description || '-');
                        $('#view_protocols').text(formatProtocolsDisplay(group.protocols));
                        $('#view_settings').html(formatSettingsDisplay(group.settings));
                        $('#groupModal').modal('show');
                    } else {
                        showErrorToast('Failed to load group details.');
                    }
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error loading group:', error);
                    showErrorToast('Error loading group details.');
                }
            });
        });

        $(document).on('click', '.edit-group', function() {
            var groupId = $(this).data('id');
            showFullScreenLoader();
            resetGroupModal();
            $('#groupModalTitle').text('Edit Group');
            $('#groupForm').attr('action', "{{ route('groups.update', ':id') }}".replace(':id', groupId));
            $('#_method').val('PATCH');
            $('#group_id').val(groupId);
            $('#groupModalBody').show();
            $('#groupViewContent').hide();
            $('#groupModalFooter').show();
            $('#groupSubmitBtn').show();
            $('#groupSubmitText').text('Update Group');
            
            $.ajax({
                url: "{{ route('groups.show.ajax', ':id') }}".replace(':id', groupId),
                method: 'GET',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                },
                success: function(response) {
                    hideFullScreenLoader();
                    if (response.success && response.data) {
                        var group = response.data;
                        $('#modal_name').val(group.name || '');
                        $('#modal_description').val(group.description || '');
                        $('#modal_protocols').val(getProtocolIds(group.protocols));
                        populateSettingsRows(group.settings || {});
                        $('#groupModal').modal('show');
                    } else {
                        showErrorToast('Failed to load group details.');
                    }
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error loading group:', error);
                    showErrorToast('Error loading group details.');
                }
            });
        });

        function resetGroupModal() {
            $('#groupForm')[0].reset();
            $('#groupForm').find('.is-invalid').removeClass('is-invalid');
            $('#groupForm').find('.invalid-feedback').text('');
            $('#settingsError').text('');
            $('#group_id').val('');
            $('#_method').val('POST');
            clearSettingsRows();
            $('#modal_protocols').val([]);
        }

        $('#groupForm').on('submit', function(e) {
            e.preventDefault();
            
            var $submitBtn = $('#groupSubmitBtn');
            var $spinner = $('#groupSubmitSpinner');
            var $submitText = $('#groupSubmitText');
            var method = $('#_method').val();
            var url = $(this).attr('action');
            var settingsResult = getSettingsFromForm();

            $('#settingsError').text('');
            if (settingsResult.hasDuplicate) {
                $('#settingsError').text('Duplicate setting keys are not allowed.');
                return;
            }
            
            $submitBtn.prop('disabled', true);
            $spinner.show();
            $submitText.text(method === 'PATCH' ? 'Updating...' : 'Creating...');
            showFullScreenLoader();
            
            var selectedProtocols = $('#modal_protocols').val();
            if (!Array.isArray(selectedProtocols)) {
                selectedProtocols = selectedProtocols ? [selectedProtocols] : [];
            }

            var formData = {
                name: $('#modal_name').val(),
                description: $('#modal_description').val(),
                protocols: selectedProtocols,
                settings: settingsResult.settings,
                _token: $('meta[name="csrf-token"]').attr('content')
            };

            if (method === 'PATCH') {
                formData._method = 'PATCH';
            }
            
            $.ajax({
                url: url,
                method: 'POST',
                contentType: 'application/json',
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json',
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                data: JSON.stringify(formData),
                success: function(response) {
                    hideFullScreenLoader();
                    $('#groupModal').modal('hide');
                    showFullScreenLoader();
                    table.ajax.reload(function() {
                        hideFullScreenLoader();
                    }, false);
                    var message = response.message || (method === 'PATCH' ? 'Group updated successfully.' : 'Group created successfully.');
                    showSuccessToast(message);
                },
                error: function(xhr, status, error) {
                    hideFullScreenLoader();
                    console.error('Error saving group:', error);
                    if (xhr.status === 422 && xhr.responseJSON && xhr.responseJSON.errors) {
                        var errors = xhr.responseJSON.errors;
                        $.each(errors, function(field, messages) {
                            if (field.indexOf('settings') === 0) {
                                $('#settingsError').text(messages[0]);
                                return;
                            }
                            var $field = $('#modal_' + field);
                            $field.addClass('is-invalid');
                            $field.siblings('.invalid-feedback').text(messages[0]);
                        });
                    } else {
                        var errorMsg = xhr.responseJSON && xhr.responseJSON.message 
                            ? xhr.responseJSON.message 
                            : 'Error saving group. Please try again.';
                        showErrorToast(errorMsg);
                    }
                },
                complete: function() {
                    $submitBtn.prop('disabled', false);
                    $spinner.hide();
                    $submitText.text(method === 'PATCH' ? 'Update Group' : 'Create Group');
                }
            });
        });

        $(document).on('click', '.delete-group', function() {
            var groupId = $(this).data('id');
            var groupName = $(this).closest('tr').find('td:first').text();
            
            if (confirm('Are you sure you want to delete group "' + groupName + '"? This action cannot be undone.')) {
                showFullScreenLoader();
                $.ajax({
                    url: "{{ url('groups') }}/" + groupId,
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
                        'X-Requested-With': 'XMLHttpRequest',
                        'Accept': 'application/json'
                    },
                    success: function(response) {
                        showFullScreenLoader();
                        table.ajax.reload(function() {
                            hideFullScreenLoader();
                        }, false);
                        showSuccessToast('Group deleted successfully.');
                    },
                    error: function(xhr, status, error) {
                        hideFullScreenLoader();
                        console.error('Error deleting group:', error);
                        var errorMsg = xhr.responseJSON && xhr.responseJSON.message 
                            ? xhr.responseJSON.message 
                            : 'Error deleting group. Please try again.';
                        showErrorToast(errorMsg);
                    }
                });
            }
        });

        $('#groupModal').on('hidden.bs.modal', function() {
            resetGroupModal();
        });
        }
    });
</script>
@endpush