{% extends "layouts/base.html.jinja" %}

{% block title %}Role Management - {{ request.app.title }}{% endblock %}

{% block content %}
<style>
    .dashboard-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2.5rem;
    }

    .header-text h1 {
        font-size: 2rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
        letter-spacing: -0.025em;
    }

    /* Role Registry Table */
    .role-table {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .table-header {
        display: grid;
        grid-template-columns: 2fr 3fr 3fr 1fr;
        padding: 1.25rem 2rem;
        background: rgba(255, 255, 255, 0.02);
        border-bottom: 1px solid var(--border-color);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
    }

    .table-row {
        display: grid;
        grid-template-columns: 2fr 3fr 3fr 1fr;
        padding: 1.5rem 2rem;
        align-items: center;
        border-bottom: 1px solid var(--border-color);
        transition: all 0.2s ease;
    }

    .table-row:last-child {
        border-bottom: none;
    }

    .table-row:hover {
        background: rgba(255, 255, 255, 0.03);
    }

    .role-main {
        display: flex;
        flex-direction: column;
        gap: 0.375rem;
    }

    .role-name-display {
        font-weight: 700;
        font-size: 1rem;
        color: var(--text-main);
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

    .permission-chips {
        display: flex;
        flex-wrap: wrap;
        gap: 0.375rem;
    }

    .perm-chip {
        font-size: 0.7rem;
        padding: 0.125rem 0.5rem;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 4px;
        color: var(--text-muted);
        font-family: monospace;
    }

    .actions {
        display: flex;
        gap: 0.75rem;
        justify-content: flex-end;
    }

    .action-btn {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.75rem;
        border: 1px solid var(--border-color);
        background: rgba(255, 255, 255, 0.05);
        color: var(--text-muted);
        cursor: pointer;
        transition: all 0.2s;
    }

    .action-btn:hover {
        border-color: var(--accent-color);
        color: var(--accent-color);
        background: rgba(56, 189, 248, 0.1);
        transform: translateY(-2px);
    }

    .action-btn-danger:hover {
        border-color: var(--danger) !important;
        color: var(--danger) !important;
        background: rgba(239, 68, 68, 0.1) !important;
    }

    /* Modal - Consistent with index.html */
    .modal-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(12px);
        z-index: 1000;
        align-items: flex-start;
        justify-content: center;
        padding: 0.5rem 1.5rem;
        opacity: 0;
        transition: opacity 0.3s ease;
        overflow-y: auto;
    }

    .modal-content {
        width: 100%;
        max-width: 800px;
        margin-top: 0.5rem;
        margin-bottom: 0.25rem;
        transform: translateY(20px);
        transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.5);
    }

    .modal-backdrop.show {
        display: flex;
        opacity: 1;
    }

    .modal-backdrop.show .modal-content {
        transform: translateY(0);
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--border-color);
        margin-bottom: 2rem;
    }

    .modal-title {
        font-size: 1.5rem;
        font-weight: 700;
        letter-spacing: -0.025em;
    }

    .close-modal {
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--border-color);
        color: var(--text-muted);
        cursor: pointer;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
    }

    .close-modal:hover {
        background: rgba(239, 68, 68, 0.1);
        color: var(--danger);
        border-color: var(--danger);
    }

    .perms-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-height: 400px;
        overflow-y: auto;
        padding: 1.25rem;
        background: rgba(0, 0, 0, 0.25);
        border-radius: 1rem;
        border: 1px solid rgba(255, 255, 255, 0.05);
    }

    .perm-group {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
    }

    .group-label {
        font-size: 0.65rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--accent-color);
        opacity: 0.8;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid rgba(56, 189, 248, 0.1);
    }

    .group-items {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 0.5rem;
    }

    .perm-item {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.625rem;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 0.5rem;
        cursor: pointer;
        transition: all 0.2s;
    }

    .perm-item:hover {
        background: rgba(255, 255, 255, 0.06);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .perm-item input {
        width: 1rem;
        height: 1rem;
        accent-color: var(--accent-color);
    }

    .perm-label {
        font-size: 0.85rem;
        font-weight: 500;
        color: var(--text-main);
        font-family: monospace;
    }
</style>

<div class="dashboard-header animate-fade-in">
    <div class="header-text">
        <h1>{{ request.app.title }}</h1>
        <p class="text-muted">Define access levels and permission groups for your organization.</p>
    </div>
    <button class="btn btn-primary" onclick="toggleModal('createRoleModal')">
        <i class="fas fa-plus"></i>
        <span>Create New Role</span>
    </button>
</div>

<div class="glass-card animate-fade-in" style="overflow: hidden; animation-delay: 0.1s;">
    <div class="role-table">
        <div class="table-header">
            <div>Role Identity</div>
            <div>Description</div>
            <div>Granted Permissions</div>
            <div style="text-align: right;">Actions</div>
        </div>

        {% for role in roles %}
        <div class="table-row">
            <div class="role-main">
                <span class="role-name-display">
                    {{ role.name }}
                    {% if role.is_default %}
                    <span class="badge badge-success" style="font-size: 0.6rem; padding: 0.1rem 0.4rem;">SYSTEM</span>
                    {% endif %}
                </span>
                {% if role.parent %}
                <span class="text-xs text-muted"><i class="fas fa-level-up-alt"></i> Inherits from {{ role.parent.name
                    }}</span>
                {% endif %}
            </div>
            <div class="text-muted text-sm">
                {{ role.description or 'No description provided' }}
            </div>
            <div class="permission-chips">
                {% for perm in role.permissions %}
                <span class="perm-chip">{{ perm.name }}</span>
                {% endfor %}
                {% if not role.permissions %}
                <span class="text-muted italic text-xs">No direct permissions</span>
                {% endif %}
            </div>
            <div class="actions">
                {% if not role.is_default and 'roles:manage' in user_perms %}
                <button class="action-btn" title="Configure Role Permissions"
                    onclick="toggleModal('editRolePermsModal-{{ role.id }}')">
                    <i class="fas fa-sliders-h" style="font-size: 0.85rem;"></i>
                </button>
                <form action="{{ url_for('delete_role_action', role_id=role.id) }}" method="POST"
                    style="display:inline;"
                    onsubmit="return confirm('Are you sure you want to permanentely delete this role?')">
                    <button type="submit" class="action-btn action-btn-danger"
                        style="border-color: rgba(239, 68, 68, 0.2); color: var(--danger);"
                        title="Delete Role Identity">
                        <i class="fas fa-trash-alt" style="font-size: 0.85rem;"></i>
                    </button>
                </form>
                {% else %}
                <div class="action-btn" style="opacity: 0.3; cursor: default; border-style: dashed;"
                    title="Protected System Role">
                    <i class="fas fa-lock" style="font-size: 0.85rem;"></i>
                </div>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

<!-- Macros for permission grouping -->
{% macro permission_selector(perms, selected_ids=[]) %}
<div class="perms-container">
    {% set groups = {} %}
    {% for perm in perms %}
    {% set prefix = perm.name.split(':')[0] if ':' in perm.name else 'General' %}
    {% if prefix not in groups %}
    {% set _ = groups.update({prefix: []}) %}
    {% endif %}
    {% set _ = groups[prefix].append(perm) %}
    {% endfor %}

    {% for prefix, group_perms in groups.items() | sort %}
    <div class="perm-group">
        <div class="flex items-center justify-between">
            <span class="group-label" style="margin-bottom: 0; border: none; padding: 0;">{{ prefix }}</span>
            <span class="text-xs text-muted opacity-50">{{ group_perms|length }} permissions</span>
        </div>
        <div class="group-items">
            {% for perm in group_perms %}
            <label class="perm-item" title="{{ perm.description or '' }}">
                <input type="checkbox" name="permission_ids" value="{{ perm.id }}" {% if perm.id in selected_ids
                    %}checked{% endif %}>
                <span class="perm-label">{{ perm.name }}</span>
            </label>
            {% endfor %}
            {% if prefix != 'General' %}
            <div class="perm-item" style="border-style: dashed; opacity: 0.6; cursor: default;">
                <i class="fas fa-magic text-accent" style="font-size: 0.75rem;"></i>
                <span class="perm-label text-accent" style="font-size: 0.75rem;">{{ prefix }}:* wildcard</span>
            </div>
            {% endif %}
        </div>
    </div>
    {% endfor %}
</div>
{% endmacro %}

<!-- Create Role Modal -->
<div id="createRoleModal" class="modal-backdrop" onclick="if(event.target === this) toggleModal('createRoleModal')">
    <div class="modal-content glass-card" style="padding: 2.5rem;">
        <div class="modal-header">
            <span class="modal-title">Define New Role</span>
            <button class="close-modal" onclick="toggleModal('createRoleModal')">&times;</button>
        </div>
        <form action="{{ url_for('create_role_action') }}" method="POST">
            <div class="form-group">
                <label class="form-label">Role Identifier</label>
                <input type="text" name="name" class="form-control" placeholder="e.g. support_tier_1" required>
            </div>
            <div class="form-group">
                <label class="form-label">Description</label>
                <input type="text" name="description" class="form-control"
                    placeholder="Briefly describe what this role represents">
            </div>
            <div class="form-group">
                <label class="form-label">Configure Permissions</label>
                <p class="text-xs text-muted mb-4">Grant specific access capabilities to this role identity.</p>
                {{ permission_selector(all_permissions) }}
            </div>
            <div class="flex" style="gap: 1.25rem; margin-top: 2.5rem;">
                <button type="button" class="btn btn-outline w-full" style="justify-content: center; height: 3.5rem;"
                    onclick="toggleModal('createRoleModal')">Discard Changes</button>
                <button type="submit" class="btn btn-primary w-full"
                    style="justify-content: center; height: 3.5rem;">Create Role Identity</button>
            </div>
        </form>
    </div>
</div>

<!-- Edit Role Modals -->
{% for role in roles %}
{% if not role.is_default %}
<div id="editRolePermsModal-{{ role.id }}" class="modal-backdrop"
    onclick="if(event.target === this) toggleModal('editRolePermsModal-{{ role.id }}')">
    <div class="modal-content glass-card" style="padding: 2.5rem;">
        <div class="modal-header">
            <span class="modal-title">Configure Role: {{ role.name }}</span>
            <button class="close-modal" onclick="toggleModal('editRolePermsModal-{{ role.id }}')">&times;</button>
        </div>
        <form action="{{ url_for('update_role_permissions', role_id=role.id) }}" method="POST">
            <div class="form-group">
                <label class="form-label">Active Permissions</label>
                <p class="text-xs text-muted mb-2">Modify the granular access control list for this role.</p>
                {{ permission_selector(all_permissions, role.permissions | map(attribute='id') | list) }}
            </div>
            <div class="flex" style="gap: 1.25rem; margin-top: 2.5rem;">
                <button type="button" class="btn btn-outline w-full" style="justify-content: center; height: 3.5rem;"
                    onclick="toggleModal('editRolePermsModal-{{ role.id }}')">Cancel</button>
                <button type="submit" class="btn btn-primary w-full"
                    style="justify-content: center; height: 3.5rem;">Save Changes</button>
            </div>
        </form>
    </div>
</div>
{% endif %}
{% endfor %}

{% endblock %}