{% extends "base.html" %}

{% block title %}Agents & roles - Agent Kanban PM{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4" style="animation: fadeIn 0.4s ease-out;">
    <div>
        <h2 style="font-weight: 800; font-size: 1.75rem; letter-spacing: -0.02em; margin: 0; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Agents &amp; Roles</h2>
        <p class="text-secondary" style="font-size: 0.9rem; margin-top: 0.25rem;">Configured agent roles, available CLI tools, and workspace team members</p>
    </div>
</div>

<!-- Section 1: Configured Roles -->
<div class="card glass-card mb-4" style="padding: 1.5rem;">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h3 style="margin:0; font-size:1.2rem; font-weight:700;">Configured Roles</h3>
            <p class="text-secondary" style="font-size:0.85rem; margin:0.25rem 0 0 0;">Roles map workflow responsibilities to specific agent CLIs, models, and autonomy modes.</p>
        </div>
        <button class="btn btn-primary btn-sm" type="button" id="toggle-role-editor-btn" onclick="toggleRoleEditor()">
            <span id="role-editor-btn-text">Configure roles</span>
        </button>
    </div>

    <div class="table-container mb-2" id="roles-summary-view">
        <table class="table">
            <thead>
                <tr>
                    <th>Role</th>
                    <th>Assigned Agent</th>
                    <th>Tool / CLI</th>
                    <th>Model</th>
                    <th>Mode</th>
                    <th>Availability</th>
                    <th>Current work</th>
                    <th>Role Type</th>
                </tr>
            </thead>
            <tbody>
                {% if role_payload and role_payload.roles %}
                {% for r in role_payload.roles %}
                <tr>
                    <td><strong>{{ r.role }}</strong></td>
                    <td>{{ r.display_name }}</td>
                    <td><code>{{ r.command }}</code></td>
                    <td><span class="badge" style="background:var(--bg-primary);border:1px solid var(--border-color);font-size:0.75rem;">{{ r.model }}</span></td>
                    <td style="font-size:0.82rem;color:var(--text-secondary);">{{ r.mode }} ({{ r.autonomy }})</td>
                    <td>
                        {% if r.installed %}
                        <span class="badge badge-success" style="font-size:0.72rem;">Available</span>
                        {% else %}
                        <span class="badge badge-danger" style="font-size:0.72rem;" title="CLI not found on PATH">Not on PATH</span>
                        {% endif %}
                    </td>
                    <td>
                        {% set work = current_work.get(r.agent) %}
                        {% if work %}
                        <a href="/ui/projects/{{ work.project_id }}/workbench" title="{{ work.project_name }} · {{ work.status }}">{{ work.task_title or 'Project session' }}</a>
                        <small class="text-secondary d-block">{{ work.status | capitalize }}</small>
                        {% else %}
                        <span class="text-secondary">Idle</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if r.role in ('orchestrator', 'manager') %}
                        <span class="badge badge-warning" style="font-size:0.68rem;">Manager</span>
                        {% else %}
                        <span class="text-secondary" style="font-size:0.82rem;">Worker</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% else %}
                <tr>
                    <td colspan="8" class="text-center text-secondary py-3">No roles configured. Click Configure roles above to assign agent CLIs.</td>
                </tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    <!-- Interactive Role Editor (using role-settings.js) -->
    <div id="role-editor-container" style="display:none; border-top: 1px solid var(--border-color); padding-top: 1.25rem; margin-top: 1rem;">
        <h4 style="margin: 0 0 0.5rem 0; font-size: 1rem;">Edit Role Assignments</h4>
        <small class="text-secondary d-block mb-3">Assign installed CLI tools to each role. Saving one role preserves settings on others.</small>
        <div id="team-list" class="team-list">
            <p class="text-secondary">Loading role settings...</p>
        </div>
    </div>
</div>

<!-- Section 2: Team Members & Entities -->
<div class="card glass-card" style="padding: 1.5rem;">
    <div class="mb-3">
        <h3 style="margin:0; font-size:1.2rem; font-weight:700;">Team Members &amp; Entities</h3>
        <p class="text-secondary" style="font-size:0.85rem; margin:0.25rem 0 0 0;">Registered human users and agent entities in the local runtime</p>
    </div>

    <div class="table-container">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Email / ID</th>
                    <th>Skills</th>
                    <th>Registration</th>
                </tr>
            </thead>
            <tbody>
                {% for user in users %}
                <tr>
                    <td>
                        <strong>{{ user.name }}</strong>
                        {% if manager_agent and user.name == manager_agent %}
                        <span class="badge badge-warning" style="font-size: 0.65rem; margin-left: 0.35rem;">MANAGER</span>
                        {% endif %}
                    </td>
                    <td>
                        <span class="badge badge-{{ user.entity_type }}">
                            {{ user.entity_type | capitalize }}
                        </span>
                    </td>
                    <td style="font-size: 0.85rem; color: var(--text-secondary);">{{ user.email or 'N/A' }}</td>
                    <td>
                        {% if user.skills %}
                        {% for skill in user.skills.split(',') %}
                        <span class="badge" style="background: rgba(var(--accent-primary-rgb), 0.08); color: var(--accent-primary); border: 1px solid rgba(var(--accent-primary-rgb), 0.15); padding: 0.15rem 0.5rem; font-size: 0.72rem; border-radius: 2rem;">{{ skill.strip() }}</span>
                        {% endfor %}
                        {% else %}
                        <small class="text-secondary" style="font-size: 0.8rem;">No skills listed</small>
                        {% endif %}
                    </td>
                    <td>
                        <div style="display: flex; align-items: center; gap: 0.4rem;">
                            <span class="status-indicator {% if user.is_active %}status-enabled{% else %}status-disabled{% endif %}"></span>
                            <span style="font-size: 0.85rem; font-weight: 500;">{{ 'Enabled' if user.is_active else 'Disabled' }}</span>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
    .status-indicator {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .status-enabled { background-color: var(--success); }
    .status-disabled { background-color: var(--danger); }
</style>
{% endblock %}

{% block extra_js %}
<script src="/static/js/role-settings.js"></script>
<script>
    var CURRENT_ENTITY_ID = {{ (current_entity.id if current_entity else 'null') }};
    var roleEditorLoaded = false;
    var roleEditorDirty = false;
    window.onRoleSettingsSaved = function() { roleEditorDirty = true; };

    function toggleRoleEditor() {
        var container = document.getElementById('role-editor-container');
        var btnText = document.getElementById('role-editor-btn-text');
        if (!container) return;

        if (container.style.display === 'none') {
            container.style.display = 'block';
            if (btnText) btnText.textContent = 'Hide editor';
            if (!roleEditorLoaded) {
                roleEditorLoaded = true;
                apiFetch('/ui/api/roles', {}, 'Failed to load roles').then(function(data) {
                    if (window.renderRoleCliPanel) {
                        window.renderRoleCliPanel(data);
                    }
                }).catch(function(err) {
                    var list = document.getElementById('team-list');
                    if (list) list.innerHTML = '<p class="text-danger">Failed to load roles: ' + err.message + '</p>';
                });
            }
        } else {
            if (roleEditorDirty) {
                window.location.reload();
                return;
            }
            container.style.display = 'none';
            if (btnText) btnText.textContent = 'Configure roles';
        }
    }
</script>
{% endblock %}