{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block content %}
<div class="container py-4">
    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h2>{{ study.name }}</h2>
            <p class="text-muted mb-0">Study ID: <code>{{ study.pk }}</code> &bull; 
                {{ study.get_generation_mode_display }} &bull;
                {{ study.get_randomisation_mode_display }}
            </p>
        </div>
        <div class="d-flex gap-2">
            <a class="btn btn-outline-primary" href="{% url 'research:study_update' study.pk %}">Edit Study</a>
            <a class="btn btn-outline-secondary" href="{% url 'research:study_export_csv' study.pk %}">Export CSV</a>
            <a class="btn btn-outline-secondary" href="{% url 'research:study_export_json' study.pk %}">Export JSON</a>
            <a class="btn btn-outline-info" href="{% url 'research:study_bulk_generate' study.pk %}">Bulk Generate</a>
        </div>
    </div>

    <!-- Participant Entry URL -->
    <div class="card card-body bg-dark border-secondary mb-4">
        <h5 class="mb-2">Participant Entry URL Template</h5>
        <p class="small text-muted mb-2">Append the pseudo-anonymised ID to this base URL to share with participants:</p>
        <code>{{ request.scheme }}://{{ request.get_host }}{% url 'research:participant_entry' study.pk 'PSEUDO_ID' %}</code>
        <div class="mt-2">
            <small class="text-muted">
                Participants use CID + passcode generated at intake to access their results.
                {% if study.collect_demographics %}
                Demographics collected at intake.
                {% endif %}
            </small>
        </div>
    </div>

    <div class="row g-4">
        <!-- Arms -->
        <div class="col-12 col-lg-7">
            <div class="card card-body bg-dark border-secondary h-100">
                <h5>Arms / Packets</h5>
                {% if arm_rows %}
                <table class="table table-dark table-striped table-sm align-middle">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Collection</th>
                            <th>Assigned</th>
                            <th>Prerequisite</th>
                            <th>Mark Scheme</th>
                            <th></th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for arm, assigned_count in arm_rows %}
                        <tr>
                            <td>{{ arm.name }}</td>
                            <td>
                                <a href="{% url 'atlas:collection_detail' arm.packet.pk %}">{{ arm.packet.name }}</a>
                                {% if arm.packet.marking_scheme_name %}
                                <br><small class="text-muted">{{ arm.packet.marking_scheme_name }}</small>
                                {% endif %}
                            </td>
                            <td>{{ assigned_count }}</td>
                            <td>
                                {% if arm.required_previous_arm %}
                                    <span class="badge bg-warning text-dark">{{ arm.required_previous_arm.name }}</span>
                                {% else %}
                                    <span class="text-muted">-</span>
                                {% endif %}
                            </td>
                            <td>{{ arm.packet.marking_scheme_name|default:'-' }}</td>
                            <td>
                                <a class="btn btn-sm btn-outline-primary" href="{% url 'research:study_arm_update' study.pk arm.pk %}">Edit</a>
                            </td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
                {% else %}
                <div class="alert alert-warning">No packets configured. Add at least one packet before sharing participant links.</div>
                {% endif %}
            </div>
        </div>

        <!-- Add Arm -->
        <div class="col-12 col-lg-5">
            <div class="card card-body bg-dark border-secondary h-100">
                <h5>Add Arm</h5>
                <form method="post">
                    {% csrf_token %}
                    <input type="hidden" name="add_arm" value="1">
                    {{ arm_form|crispy }}
                    <button class="btn btn-primary" type="submit">Add Arm</button>
                </form>
            </div>
        </div>
    </div>

    <!-- Participants -->
    <div class="card card-body bg-dark border-secondary mt-4">
        <div class="d-flex justify-content-between align-items-center mb-2">
            <h5>Participants ({{ participants|length }})</h5>
        </div>
        {% if participants %}
        <div class="table-responsive">
            <table class="table table-dark table-striped table-sm">
                <thead>
                    <tr>
                        <th>Pseudo ID</th>
                        <th>Group</th>
                        <th>Assigned Arm</th>
                        <th>CID</th>
                        <th>Email</th>
                        <th>Consented</th>
                        <th>Assigned At</th>
                    </tr>
                </thead>
                <tbody>
                    {% for participant in participants %}
                    <tr>
                        <td><code>{{ participant.pseudo_id }}</code></td>
                        <td>{{ participant.candidate_group|default:'-' }}</td>
                        <td>
                            {% if participant.assigned_arm %}
                            {{ participant.assigned_arm.name }}
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if participant.cid_user %}
                            <code>{{ participant.cid_user.cid }}</code>
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if participant.email %}
                            {{ participant.email }}
                            {% else %}
                            <span class="text-muted">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if participant.consented %}
                            <span class="badge bg-success">Yes</span>
                            {% else %}
                            <span class="badge bg-danger">No</span>
                            {% endif %}
                        </td>
                        <td>{{ participant.assigned_at|default:'-' }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="alert alert-info mb-0">No participants yet. 
            {% if study.generation_mode == 'BULK' %}
            Use <a href="{% url 'research:study_bulk_generate' study.pk %}">Bulk Generate</a> to add participants.
            {% else %}
            Participants will be created automatically when they access the participant URL.
            {% endif %}
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}