{% extends "psynet_dashboard.html" %}
{% block scripts %}
{{ super() }}
<script>
async function postSyncDashboardAction(url, data) {
    const requestUrl = new URL(url, window.location.origin);
    const response = await fetch(requestUrl.href, {
        method: "POST",
        body: data || new FormData(),
        credentials: "same-origin",
    });
    const payload = await response.json().catch(() => ({}));
    if (!response.ok || payload.status === "error") {
        throw new Error(payload.error || payload.message || "Dashboard action failed.");
    }
    return payload;
}

function showParticipantActionModal(button) {
    const participantId = button.dataset.participantId;
    const modal = document.getElementById("participantActionModal");
    modal.querySelector("[data-participant-id]").textContent = participantId;
    modal.querySelector("[data-confirm-failure]").dataset.participantId = participantId;
    modal.querySelector("[data-confirm-failure]").dataset.url = button.dataset.failUrl;
    modal.querySelector("[data-confirm-kick]").dataset.participantId = participantId;
    modal.querySelector("[data-confirm-kick]").dataset.url = button.dataset.kickUrl;
    if (window.bootstrap && window.bootstrap.Modal && window.bootstrap.Modal.getOrCreateInstance) {
        window.bootstrap.Modal.getOrCreateInstance(modal).show();
    } else if (window.bootstrap && window.bootstrap.Modal) {
        new window.bootstrap.Modal(modal).show();
    } else {
        $("#participantActionModal").modal("show");
    }
}

async function kickSyncGroupParticipant(button) {
    const data = new FormData();
    data.append("kick_reason", "manual_kick");
    button.disabled = true;
    try {
        await postSyncDashboardAction(button.dataset.url, data);
        window.location.reload();
    } catch (error) {
        button.disabled = false;
        window.alert(error.message);
    }
}

async function failSyncGroupParticipant(button) {
    const data = new FormData();
    data.append("fail_reason", "manual_failure");
    button.disabled = true;
    try {
        await postSyncDashboardAction(button.dataset.url, data);
        window.location.reload();
    } catch (error) {
        button.disabled = false;
        window.alert(error.message);
    }
}
</script>
{% endblock %}
{% block body %}
<h1>{{ title }}</h1>

{% if grouper_progress and grouper_progress | length > 0 %}
<h2 class="h5 mt-3">Grouper progress</h2>
<p class="text-muted">Participants currently waiting at each grouper; groups form when the required number is reached.</p>
<div class="table-responsive mb-4">
    <table class="table table-sm table-striped">
        <thead>
            <tr>
                <th>Grouper</th>
                <th>Group type</th>
                <th>Waiting</th>
                <th>Required</th>
            </tr>
        </thead>
        <tbody>
            {% for r in grouper_progress %}
            <tr>
                <td><code>{{ r.barrier_id }}</code></td>
                <td>{{ r.group_type }}</td>
                <td>
                    <strong>{{ r.waiting_count }}</strong>
                    <span class="text-muted">({{ r.participant_ids | join(", ") or "—" }})</span>
                </td>
                <td>{% if r.batch_size is not none %}{{ r.batch_size }}{% else %}—{% endif %}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endif %}

{% if groups | length == 0 %}
    <p class="text-muted">No sync groups found.</p>
{% else %}
    <p class="text-muted">Showing up to 500 most recent sync groups (newest first).</p>
    <div class="table-responsive">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Participants</th>
                    <th>Leader</th>
                    <th>Waiting at barrier</th>
                    {% if has_simple_groups %}
                    <th>Min / Max size</th>
                    {% endif %}
                    <th>Last barrier pass</th>
                    <th>End time</th>
                </tr>
            </thead>
            <tbody>
                {% for g in groups %}
                <tr>
                    <td><code>{{ g.id }}</code></td>
                    <td>{{ g.group_type }}</td>
                    <td>
                        {% if g.active %}
                        <span class="badge bg-success">Active</span>
                        {% else %}
                        <span class="badge bg-secondary">Closed</span>
                        {% endif %}
                    </td>
                    <td>
                        <strong>{{ g.n_active_participants }}</strong>
                        <span class="text-muted">(</span>{% for p in g.participants %}{% if p.can_fail_manually %}<button
                            type="button"
                            class="btn btn-link btn-sm p-0 align-baseline text-success"
                            data-fail-url="{{ url_for('dashboard.manual_fail_sync_group_participant', sync_group_id=g.id, participant_id=p.id) }}"
                            data-kick-url="{{ url_for('dashboard.manual_kick_sync_group_participant', sync_group_id=g.id, participant_id=p.id) }}"
                            data-participant-id="{{ p.id }}"
                            title="Status: {{ p.status }}"
                            onclick="showParticipantActionModal(this)"
                        >{{ p.id }}</button>{% else %}<span class="{% if not p.active_in_group %}text-decoration-line-through text-muted{% elif p.failed %}text-danger{% else %}text-success{% endif %}" title="{% if not p.active_in_group %}Removed from group{% endif %}{% if p.active_in_group %}Status: {{ p.status }}{% if p.failed_reason %} — Reason: {{ p.failed_reason }}{% endif %}{% endif %}">{{ p.id }}</span>{% endif %}{% if not loop.last %}, {% endif %}{% endfor %}<span class="text-muted">)</span>
                    </td>
                    <td>
                        {% if g.leader_id is not none %}
                        P{{ g.leader_id }}
                        {% if g.leader_worker_id != "—" %}
                        <span class="text-muted">({{ g.leader_worker_id }})</span>
                        {% endif %}
                        {% else %}
                        —
                        {% endif %}
                    </td>
                    <td>
                        {% if g.waiting_at_barriers %}
                        {% for b in g.waiting_at_barriers %}
                        <span><strong>{{ b.waiting_count }}</strong> at <code>{{ b.barrier_id }}</code> <span class="text-muted">({{ b.participant_ids | join(", ") }})</span></span>{% if not loop.last %}, {% endif %}
                        {% endfor %}
                        {% else %}
                        —
                        {% endif %}
                    </td>
                    {% if has_simple_groups %}
                    <td>
                        {% if g.min_group_size is not none %}
                        {{ g.min_group_size }} / {{ g.max_group_size }}
                        {% if g.initial_group_size is not none %}
                        <span class="text-muted">(init: {{ g.initial_group_size }})</span>
                        {% endif %}
                        {% else %}
                        —
                        {% endif %}
                    </td>
                    {% endif %}
                    <td>{{ g.last_barrier_pass_time.strftime("%Y-%m-%d %H:%M:%S") if g.last_barrier_pass_time else "—" }}</td>
                    <td>{{ g.end_time.strftime("%Y-%m-%d %H:%M:%S") if g.end_time else "—" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endif %}

<div class="modal fade" id="participantActionModal" tabindex="-1" aria-labelledby="participantActionModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="participantActionModalLabel">Manage participant</h5>
                <button type="button" class="close btn-close" data-bs-dismiss="modal" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Choose an action for participant <strong>P<span data-participant-id></span></strong>.
                Kicking removes them from the sync group without failing them; failing marks them with
                <code>manual_failure</code>.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-warning" data-confirm-kick onclick="kickSyncGroupParticipant(this)">
                    Kick participant
                </button>
                <button type="button" class="btn btn-danger" data-confirm-failure onclick="failSyncGroupParticipant(this)">
                    Fail participant
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}