{% extends 'sb_sync/base.html' %}
{% load sb_sync_extras %}

{% block title %}Permission Matrix - SB Sync Configuration{% endblock %}
{% block page_title %}Permission Matrix{% endblock %}

{% block page_actions %}
<div class="btn-group" role="group">
    <button type="button" class="btn btn-success" id="saveChangesBtn">
        <i class="fas fa-save me-1"></i>Save Changes
    </button>
</div>
{% endblock %}

{% block content %}
<!-- Organization Selector -->
<div class="row mb-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-building me-2"></i>
                    Organization
                </h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <label for="organizationSelect" class="form-label">Select Organization:</label>
                        <select class="form-select" id="organizationSelect">
                            {% for org in organizations %}
                                <option value="{{ org.id }}" {% if org.id == organization.id %}selected{% endif %}>
                                    {{ org.name }} ({{ org.slug }})
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label class="form-label">Current Organization:</label>
                        <div class="d-flex align-items-center">
                            <span class="badge bg-primary fs-6">{{ organization.name }}</span>
                            <span class="badge bg-light text-dark ms-2">{{ organization.slug }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Permission Matrix -->
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">
                    <i class="fas fa-shield-alt me-2"></i>
                    Model Permissions Matrix
                </h5>
                <small class="text-muted">Use column header checkboxes to select/deselect all permissions for that group</small>
            </div>
            <div class="card-body">
                <div class="permission-matrix">
                    <div class="table-responsive">
                        <table class="table table-bordered table-hover" id="permissionTable">
                            <thead class="table-light">
                                <tr>
                                    <th style="min-width: 200px;">Model / Group</th>
                                    {% for group in groups %}
                                        <th class="text-center" style="min-width: 120px;">
                                            <div class="d-flex flex-column align-items-center">
                                                <div class="form-check mb-2">
                                                    <input class="form-check-input column-select-all" 
                                                           type="checkbox" 
                                                           id="select_all_{{ group.id }}"
                                                           data-group="{{ group.id }}">
                                                    <label class="form-check-label small fw-bold" 
                                                           for="select_all_{{ group.id }}">
                                                        {{ group.name }}
                                                    </label>
                                                </div>
                                                <small class="text-muted">{{ group.user_set.count }} users</small>
                                            </div>
                                        </th>
                                    {% endfor %}
                                </tr>
                            </thead>
                            <tbody>
                                {% for model in models %}
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-database text-primary me-2"></i>
                                            <div>
                                                <strong>{{ model }}</strong>
                                                <br>
                                                <small class="text-muted">{{ model.split.0 }}</small>
                                            </div>
                                        </div>
                                    </td>
                                    {% for group in groups %}
                                        <td class="text-center">
                                            <div class="permission-group" data-model="{{ model }}" data-group="{{ group.id }}">
                                                {% for perm_type, perm_label in permission_types %}
                                                    <div class="form-check form-check-inline d-block mb-1">
                                                        <input class="form-check-input permission-checkbox" 
                                                               type="checkbox" 
                                                               id="perm_{{ model|slugify }}_{{ group.id }}_{{ perm_type }}"
                                                               data-model="{{ model }}"
                                                               data-group="{{ group.id }}"
                                                               data-permission="{{ perm_type }}"
                                                               {% with key=group.id|add:"_"|add:model %}
                                                             {% if existing_permissions|lookup:key|lookup:perm_type %}checked{% endif %}
                                                         {% endwith %}>
                                                         <label class="form-check-label small" 
                                                                for="perm_{{ model|slugify }}_{{ group.id }}_{{ perm_type }}">
                                                             {{ perm_label }}
                                                         </label>
                                                    </div>
                                                {% endfor %}
                                            </div>
                                        </td>
                                    {% endfor %}
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Legend -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header">
                <h6 class="card-title mb-0">
                    <i class="fas fa-info-circle me-2"></i>
                    Permission Types
                </h6>
            </div>
            <div class="card-body">
                <div class="row">
                    {% for perm_type, perm_label in permission_types %}
                    <div class="col-md-2 mb-2">
                        <div class="d-flex align-items-center">
                            <input type="checkbox" class="form-check-input me-2" disabled>
                            <small class="fw-bold">{{ perm_label }}</small>
                        </div>
                        <small class="text-muted">
                            {% if perm_type == 'can_push' %}
                                Allow pushing data to this model
                            {% elif perm_type == 'can_pull' %}
                                Allow pulling data from this model
                            {% endif %}
                        </small>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Status Messages -->
<div id="statusMessages"></div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    let pendingChanges = [];
    let isSaving = false;
    let saveTimeout = null;
    
    // Organization selector
    $('#organizationSelect').change(function() {
        const orgId = $(this).val();
        window.location.href = `/api/sync/config/permissions/${orgId}/`;
    });
    
    // Column header checkbox functionality
    $('.column-select-all').change(function() {
        const groupId = $(this).data('group');
        const isChecked = $(this).is(':checked');
        
        // Select/deselect all checkboxes in this column
        $(`.permission-checkbox[data-group="${groupId}"]`).prop('checked', isChecked).trigger('change');
        
        // Update the column header checkbox state based on individual checkboxes
        updateColumnHeaderState(groupId);
    });
    
    // Permission checkbox change handler - Optimized for bulk operations
    $('.permission-checkbox').change(function() {
        const model = $(this).data('model');
        const group = $(this).data('group');
        const permission = $(this).data('permission');
        const value = $(this).is(':checked');
        
        // Add to pending changes
        const changeKey = `${model}_${group}_${permission}`;
        const existingIndex = pendingChanges.findIndex(c => c.key === changeKey);
        
        if (existingIndex >= 0) {
            pendingChanges[existingIndex].value = value;
        } else {
            pendingChanges.push({
                key: changeKey,
                model: model,
                group: group,
                permission: permission,
                value: value
            });
        }
        
        // Update column header state
        updateColumnHeaderState(group);
        
        updateSaveButton();
        
        // Auto-save after 2 seconds of inactivity (debounced)
        clearTimeout(saveTimeout);
        saveTimeout = setTimeout(() => {
            if (pendingChanges.length > 0) {
                saveChanges();
            }
        }, 2000);
    });
    
    // Function to update column header checkbox state
    function updateColumnHeaderState(groupId) {
        const checkboxes = $(`.permission-checkbox[data-group="${groupId}"]`);
        const checkedCount = checkboxes.filter(':checked').length;
        const totalCount = checkboxes.length;
        const columnHeader = $(`#select_all_${groupId}`);
        
        if (checkedCount === 0) {
            columnHeader.prop('indeterminate', false).prop('checked', false);
        } else if (checkedCount === totalCount) {
            columnHeader.prop('indeterminate', false).prop('checked', true);
        } else {
            columnHeader.prop('indeterminate', true).prop('checked', false);
        }
    }
    
    // Optimized save function
    function saveChanges() {
        if (isSaving || pendingChanges.length === 0) return;
        
        isSaving = true;
        $('#saveChangesBtn').prop('disabled', true).html('<i class="fas fa-spinner fa-spin me-1"></i>Saving...');
        
        const organizationId = $('#organizationSelect').val();
        
        // Group changes by group_id for efficient processing
        const changesByGroup = {};
        pendingChanges.forEach(change => {
            if (!changesByGroup[change.group]) {
                changesByGroup[change.group] = [];
            }
            changesByGroup[change.group].push({
                model_name: change.model,
                permission_type: change.permission,
                value: change.value,
                group_id: change.group
            });
        });
        
        // Process each group's changes
        const savePromises = Object.values(changesByGroup).map(groupChanges => {
            return $.ajax({
                url: '{% url "sb_sync:bulk_update_permissions" %}',
                method: 'POST',
                data: JSON.stringify({
                    organization_id: organizationId,
                    permissions: groupChanges
                }),
                contentType: 'application/json',
                headers: {
                    'X-CSRFToken': getCookie('csrftoken')
                }
            });
        });
        
        // Wait for all saves to complete
        Promise.all(savePromises)
            .then(responses => {
                let totalUpdated = 0;
                let hasErrors = false;
                
                responses.forEach(response => {
                    if (response.success) {
                        totalUpdated += response.updated_count || 0;
                    } else {
                        hasErrors = true;
                        showStatusMessage('danger', `Error: ${response.error}`);
                    }
                });
                
                if (!hasErrors) {
                    showStatusMessage('success', `Successfully updated ${totalUpdated} permissions`);
                    pendingChanges = [];
                    updateSaveButton();
                }
            })
            .catch(error => {
                showStatusMessage('danger', `Error saving changes: ${error}`);
            })
            .finally(() => {
                isSaving = false;
                $('#saveChangesBtn').prop('disabled', false).html('<i class="fas fa-save me-1"></i>Save Changes');
            });
    }
    
    // Manual save button
    $('#saveChangesBtn').click(function() {
        saveChanges();
    });
    
    function updateSaveButton() {
        const btn = $('#saveChangesBtn');
        if (pendingChanges.length > 0) {
            btn.removeClass('btn-success').addClass('btn-warning')
                .html(`<i class="fas fa-save me-1"></i>Save Changes (${pendingChanges.length})`);
        } else {
            btn.removeClass('btn-warning').addClass('btn-success')
                .html('<i class="fas fa-save me-1"></i>Save Changes');
        }
    }
    
    function showStatusMessage(type, message) {
        const alertId = 'alert-' + Date.now();
        const alertHtml = `
            <div class="alert alert-${type} alert-dismissible fade show" id="${alertId}" role="alert">
                ${message}
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        `;
        
        $('#statusMessages').append(alertHtml);
        
        // Auto-remove after 5 seconds
        setTimeout(() => {
            $(`#${alertId}`).fadeOut();
        }, 5000);
    }
    
    function getCookie(name) {
        let cookieValue = null;
        if (document.cookie && document.cookie !== '') {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    
    // Initialize column header states
    {% for group in groups %}
        updateColumnHeaderState({{ group.id }});
    {% endfor %}
    
    // Initialize
    updateSaveButton();
});
</script>
{% endblock %}