{% extends "base.html" %}
{% block title %}Notification Recipients — {{ project.name }}{% endblock %}

{% block content %}
<div class="row mb-4 align-items-center">
    <div class="col">
        <h2><i class="bi bi-bell"></i> Notification Recipients</h2>
        <p class="text-muted mb-0">
            Additional recipients notified for events in
            <strong>{{ project.name }}</strong> facilities — on top of the
            global {% if current_user.role == 'admin' %}<a href="{{ url_for('auth.notification_matrix') }}">notification matrix</a>{% else %}notification matrix (admin-managed){% endif %}.
        </p>
    </div>
    <div class="col-auto d-flex gap-2">
        <a href="{{ url_for('projects.view', project_id=project.id) }}" class="btn btn-outline-primary">
            <i class="bi bi-arrow-left"></i> Back to Contract
        </a>
    </div>
</div>

{# ── Recipient list ── #}
<div class="card shadow-sm mb-4">
    <div class="card-header bg-light d-flex justify-content-between align-items-center">
        <span class="fw-semibold">
            <i class="bi bi-bell"></i> Additional Notification Recipients
            <span class="badge bg-secondary rounded-pill ms-1">{{ recipients|length }}</span>
        </span>
        <button class="btn btn-sm btn-primary" type="button"
                data-bs-toggle="collapse" data-bs-target="#addRecipientForm"
                aria-expanded="false" aria-controls="addRecipientForm">
            <i class="bi bi-plus-lg"></i> Add Recipient
        </button>
    </div>

    {# ── Add / update form (collapsed) ── #}
    <div class="collapse border-bottom" id="addRecipientForm">
        <form method="POST" action="{{ url_for('projects.add_recipient', project_id=project.id) }}"
              class="card-body bg-light-subtle">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

            <div class="row g-3 align-items-end">
                <div class="col-md-3">
                    <label class="form-label small fw-semibold">Recipient type</label>
                    <div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="recipient_type"
                                   id="typeStaff" value="staff" checked>
                            <label class="form-check-label small" for="typeStaff">Staff user</label>
                        </div>
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="radio" name="recipient_type"
                                   id="typeExternal" value="external">
                            <label class="form-check-label small" for="typeExternal">External email</label>
                        </div>
                    </div>
                </div>
                <div class="col-md-4" id="staffPicker">
                    <label class="form-label small fw-semibold" for="user_id">Staff user</label>
                    <select class="form-select" name="user_id" id="user_id">
                        {% for u in staff_users %}
                        <option value="{{ u.id }}">{{ u.display_name }} ({{ u.email or 'no email' }})</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-4 d-none" id="emailPicker">
                    <label class="form-label small fw-semibold" for="email">Email address</label>
                    <input type="email" class="form-control" name="email" id="email"
                           placeholder="name@example.com">
                </div>
            </div>

            <div class="mt-3">
                <label class="form-label small fw-semibold mb-1">Notified events</label>
                <div class="row">
                    {% for key, label in matrix_events.items() %}
                    <div class="col-12 col-sm-6 col-lg-4">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" name="events"
                                   value="{{ key }}" id="ev_{{ key }}">
                            <label class="form-check-label small" for="ev_{{ key }}">{{ label }}</label>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            <div class="mt-3 d-flex gap-2">
                <button type="submit" class="btn btn-primary btn-sm">
                    <i class="bi bi-check-lg"></i> Save Recipient
                </button>
                <button type="button" class="btn btn-outline-secondary btn-sm"
                        data-bs-toggle="collapse" data-bs-target="#addRecipientForm">
                    Cancel
                </button>
            </div>
            <div class="form-text mt-2">
                Adding an existing recipient again replaces their event list.
                Staff users receive in-app + email notifications; external
                addresses receive email only.
            </div>
        </form>
    </div>

    <div class="card-body p-0">
        {% if recipients %}
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="table-light">
                    <tr>
                        <th style="min-width:180px;">Recipient</th>
                        <th style="min-width:150px;">Type</th>
                        <th>Notified Events</th>
                        <th width="60"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for r in recipients %}
                    <tr>
                        <td>
                            {% if r.is_staff %}
                            <strong>{{ r.user.display_name }}</strong>
                            <div class="text-muted small">{{ r.user.email or 'no email on file' }}</div>
                            {% else %}
                            <strong>{{ r.email }}</strong>
                            {% endif %}
                        </td>
                        <td>
                            {% if r.is_staff %}
                            <span class="badge bg-primary">Staff · in-app + email</span>
                            {% else %}
                            <span class="badge bg-secondary">External · email</span>
                            {% endif %}
                        </td>
                        <td>
                            <div class="d-flex flex-wrap gap-1">
                                {% for ev in r.get_events() %}
                                <span class="badge bg-light text-dark border">{{ matrix_events.get(ev, ev) }}</span>
                                {% endfor %}
                            </div>
                        </td>
                        <td>
                            <form method="POST"
                                  action="{{ url_for('projects.remove_recipient', recipient_id=r.id) }}"
                                  onsubmit="return confirm('Remove this recipient?');">
                                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                                <button type="submit" class="btn btn-sm btn-outline-danger"
                                        title="Remove recipient">
                                    <i class="bi bi-trash"></i>
                                </button>
                            </form>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% else %}
        <div class="p-3 text-muted small">
            No additional recipients configured for this contract yet.
            Events fall through to the global notification matrix only.
        </div>
        {% endif %}
    </div>
</div>

<script>
(function () {
    var staffRadio    = document.getElementById('typeStaff');
    var externalRadio = document.getElementById('typeExternal');
    var staffPicker   = document.getElementById('staffPicker');
    var emailPicker   = document.getElementById('emailPicker');

    function togglePickers() {
        var staff = staffRadio.checked;
        staffPicker.classList.toggle('d-none', !staff);
        emailPicker.classList.toggle('d-none', staff);
    }
    staffRadio.addEventListener('change', togglePickers);
    externalRadio.addEventListener('change', togglePickers);
    togglePickers();
})();
</script>
{% endblock %}