{% extends 'base.html' %}
{% load static %}

{% block content %}

<main class="content">
    <div class="container-fluid p-0">

        <div class="mb-3 d-flex justify-content-between align-items-start flex-wrap gap-2">
            <div>
                <h1 class="h3 mb-1">Role Permissions Management</h1>
                <p class="text-muted mb-0">Create roles, update role names, delete unused roles, and assign only WILE project features.</p>
            </div>
            <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addRoleModal">
                <i data-feather="plus"></i> Add Role
            </button>
        </div>

        {% include 'partials/_messages.html' %}

        <div class="card shadow-sm border-0">
            <div class="card-header bg-white d-flex justify-content-between align-items-center flex-wrap gap-2">
                <h5 class="mb-0"><i data-feather="shield"></i> System Roles</h5>
                <div class="input-group role-search">
                    <span class="input-group-text"><i data-feather="search"></i></span>
                    <input type="text" id="searchRoles" class="form-control" placeholder="Search roles...">
                </div>
            </div>

            <div class="card-body p-0">
                <div class="table-responsive">
                    <table class="table table-hover align-middle mb-0" id="rolesTable">
                        <thead class="table-light">
                            <tr>
                                <th style="width:70px">ID</th>
                                <th>Role</th>
                                <th class="text-center">Assigned Features</th>
                                <th class="text-center">Users</th>
                                <th class="text-end">Actions</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for role in roles_data %}
                            <tr>
                                <td>{{ role.id }}</td>
                                <td>
                                    <div class="d-flex align-items-center">
                                        <div class="role-icon {{ role.icon_class }}">
                                            <i data-feather="user-check"></i>
                                        </div>
                                        <div class="ms-2">
                                            <strong>{{ role.role_name }}</strong>
                                            <div class="small text-muted">{{ role.role_description }}</div>
                                        </div>
                                    </div>
                                </td>
                                <td class="text-center">
                                    <span class="badge {{ role.badge_class }}">{{ role.assigned_features_count }} features</span>
                                </td>
                                <td class="text-center">
                                    <span class="badge bg-light text-dark">{{ role.user_count }}</span>
                                </td>
                                <td class="text-end">
                                    <button class="btn btn-outline-primary btn-sm assign-btn"
                                            data-role-id="{{ role.id }}"
                                            data-role-name="{{ role.role_name }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#assignModal">
                                        Assign
                                    </button>
                                    <button class="btn btn-outline-secondary btn-sm edit-role-btn"
                                            data-role-id="{{ role.id }}"
                                            data-role-name="{{ role.role_name }}"
                                            data-role-description="{{ role.role_description }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#editRoleModal">
                                        Update
                                    </button>
                                    <button class="btn btn-outline-danger btn-sm delete-role-btn"
                                            data-role-id="{{ role.id }}"
                                            data-role-name="{{ role.role_name }}"
                                            data-can-delete="{{ role.can_delete|yesno:'1,0' }}"
                                            data-bs-toggle="modal"
                                            data-bs-target="#deleteRoleModal">
                                        Delete
                                    </button>
                                </td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="5" class="text-center text-danger py-4">No roles found</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>
</main>

<div class="modal fade" id="addRoleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="create_role">
                <div class="modal-header">
                    <h5 class="modal-title">Add New Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label">Role Name *</label>
                    <input type="text" name="role_name" class="form-control" required>
                    <label class="form-label mt-3">Description</label>
                    <input type="text" name="description" class="form-control" placeholder="Optional">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Create Role</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="editRoleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="update_role">
                <input type="hidden" name="role_id" id="editRoleId">
                <div class="modal-header">
                    <h5 class="modal-title">Update Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <label class="form-label">Role Name *</label>
                    <input type="text" name="role_name" id="editRoleName" class="form-control" required>
                    <label class="form-label mt-3">Description</label>
                    <input type="text" name="description" id="editRoleDescription" class="form-control">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary">Update Role</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="deleteRoleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content border-0 shadow">
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="delete_role">
                <input type="hidden" name="role_id" id="deleteRoleId">
                <div class="modal-header">
                    <h5 class="modal-title text-danger">Delete Role</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <p class="mb-1">Are you sure you want to delete <strong id="deleteRoleName"></strong>?</p>
                    <p class="text-muted mb-0" id="deleteRoleHelp">This will also remove all permissions assigned to this role.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-danger" id="confirmDeleteRoleBtn">Delete Role</button>
                </div>
            </form>
        </div>
    </div>
</div>

<div class="modal fade" id="assignModal" tabindex="-1">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content border-0 shadow">
            <form method="post">
                {% csrf_token %}
                <input type="hidden" name="action" value="assign_features">
                <input type="hidden" name="role_id" id="roleId">

                <div class="modal-header">
                    <div>
                        <h5 class="modal-title mb-1">Assign Features: <span id="roleName"></span></h5>
                        <div class="small text-muted">Select a main feature to select all related sub-features, or select individual sub-features.</div>
                    </div>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>

                <div class="modal-body">
                    <div class="d-flex justify-content-between flex-wrap gap-2 mb-3">
                        <div class="input-group permission-search">
                            <span class="input-group-text"><i data-feather="search"></i></span>
                            <input type="text" id="searchFeatures" class="form-control" placeholder="Search features...">
                        </div>
                        <div>
                            <button type="button" class="btn btn-sm btn-outline-primary" onclick="selectAllFeatures()">Select All</button>
                            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="deselectAllFeatures()">Deselect All</button>
                        </div>
                    </div>

                    <div class="row g-3" id="featureContainer">
                        {% for group in feature_groups %}
                        <div class="col-md-6 col-xl-4 feature-group-card" data-search-text="{{ group.feature_name }} {{ group.display_name }}">
                            <div class="card h-100 permission-card">
                                <div class="card-header bg-light d-flex justify-content-between align-items-center">
                                    <label class="mb-0 fw-bold">
                                        <input type="checkbox" class="main-feature me-1" data-main-id="{{ group.id }}">
                                        {{ group.display_name }}
                                    </label>
                                    <span class="badge bg-secondary">{{ group.sub_feature_count }}</span>
                                </div>
                                <div class="card-body">
                                    {% for sub in group.sub_features %}
                                    <label class="feature-option">
                                        <input type="checkbox"
                                               class="feature sub-feature main-{{ group.id }}"
                                               name="sub_features"
                                               value="{{ sub.id }}"
                                               data-main-id="{{ group.id }}"
                                               data-role-list="{% for p in sub.privilege_set.all %}{{ p.system_role_id }},{% endfor %}">
                                        <span>{{ sub.feature_name|title }}</span>
                                    </label>
                                    {% endfor %}
                                </div>
                            </div>
                        </div>
                        {% empty %}
                        <div class="col-12">
                            <div class="alert alert-warning mb-0">No valid WILE features found. Run the permission migration script first.</div>
                        </div>
                        {% endfor %}
                    </div>
                </div>

                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                    <button class="btn btn-success">Save Permissions</button>
                </div>
            </form>
        </div>
    </div>
</div>

<style>
    .role-icon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
    }
    
    .role-search {
        max-width: 360px;
    }
    
    .permission-search {
        max-width: 420px;
    }
    
    .permission-card {
        border: 1px solid #edf0f2;
    }
    
    /* ADD THESE */
    #assignModal .modal-body{
        height:70vh;
        overflow-y:auto;
        overflow-x:hidden;
    }
    
    #featureContainer{
        min-height:100%;
    }
    
    #assignModal .card-body{
        max-height:280px;
        overflow-y:auto;
    }
    
    .feature-option{
        display:flex;
        gap:.5rem;
        align-items:center;
        padding:.45rem .25rem;
        margin:0;
        border-bottom:1px solid #f3f4f6;
        cursor:pointer;
    }
    
    .feature-option:last-child{
        border-bottom:0;
    }
    
    .feature-option span{
        text-transform:capitalize;
        font-size:.92rem;
    }
    </style>

<script>
let currentRoleId = null;

function refreshMainCheckboxes() {
    document.querySelectorAll(".main-feature").forEach(main => {
        const mainId = main.dataset.mainId;
        const subs = Array.from(document.querySelectorAll(`.sub-feature[data-main-id="${mainId}"]`));
        const checkedCount = subs.filter(cb => cb.checked).length;
        main.checked = subs.length > 0 && checkedCount === subs.length;
        main.indeterminate = checkedCount > 0 && checkedCount < subs.length;
    });
}

document.querySelectorAll(".assign-btn").forEach(btn => {
    btn.addEventListener("click", function () {
        currentRoleId = this.dataset.roleId;
        document.getElementById("roleId").value = currentRoleId;
        document.getElementById("roleName").innerText = this.dataset.roleName;

        document.querySelectorAll(".feature").forEach(cb => cb.checked = false);

        document.querySelectorAll(".feature").forEach(cb => {
            const roles = cb.dataset.roleList.split(",");
            if (roles.includes(currentRoleId)) cb.checked = true;
        });

        refreshMainCheckboxes();
    });
});

document.querySelectorAll(".main-feature").forEach(main => {
    main.addEventListener("change", function () {
        const mainId = this.dataset.mainId;
        document.querySelectorAll(`.sub-feature[data-main-id="${mainId}"]`).forEach(cb => cb.checked = this.checked);
        refreshMainCheckboxes();
    });
});

document.querySelectorAll(".sub-feature").forEach(sub => {
    sub.addEventListener("change", refreshMainCheckboxes);
});

document.querySelectorAll(".edit-role-btn").forEach(btn => {
    btn.addEventListener("click", function () {
        document.getElementById("editRoleId").value = this.dataset.roleId;
        document.getElementById("editRoleName").value = this.dataset.roleName;
        document.getElementById("editRoleDescription").value = this.dataset.roleDescription === '-' ? '' : this.dataset.roleDescription;
    });
});

document.querySelectorAll(".delete-role-btn").forEach(btn => {
    btn.addEventListener("click", function () {
        const canDelete = this.dataset.canDelete === "1";
        document.getElementById("deleteRoleId").value = this.dataset.roleId;
        document.getElementById("deleteRoleName").innerText = this.dataset.roleName;
        document.getElementById("confirmDeleteRoleBtn").disabled = !canDelete;
        document.getElementById("deleteRoleHelp").innerText = canDelete
            ? "This will also remove all permissions assigned to this role."
            : "This role is assigned to users, so it cannot be deleted.";
    });
});

function selectAllFeatures() {
    document.querySelectorAll(".feature").forEach(cb => cb.checked = true);
    refreshMainCheckboxes();
}

function deselectAllFeatures() {
    document.querySelectorAll(".feature").forEach(cb => cb.checked = false);
    refreshMainCheckboxes();
}

document.getElementById("searchRoles").addEventListener("keyup", function () {
    const value = this.value.toLowerCase();
    document.querySelectorAll("#rolesTable tbody tr").forEach(row => {
        row.style.display = row.innerText.toLowerCase().includes(value) ? "" : "none";
    });
});

document.getElementById("searchFeatures").addEventListener("keyup", function () {
    const value = this.value.toLowerCase();
    document.querySelectorAll(".feature-group-card").forEach(card => {
        card.style.display = card.innerText.toLowerCase().includes(value) ? "" : "none";
    });
});

if (typeof feather !== "undefined") feather.replace();
</script>

{% endblock %}