{% extends "base.html" %}

{% load crispy_forms_tags i18n static %}

{% block extra_script %}
  <script defer src="{% static 'js/accounts/notification-debug.js' %}"></script>
{% endblock extra_script %}

{% block breadcrumbs %}
  <li class="breadcrumb-item"><a href="{{ page_user.get_absolute_url }}">{{ page_user }}</a></li>
  <li class="breadcrumb-item">
    <a href="{% url 'user_notifications' user=page_user.username %}">{% translate "Notification diagnostics" %}</a>
  </li>
{% endblock breadcrumbs %}

{% block content %}
  <ul class="nav nav-pills" role="tablist">
    <li class="nav-item" role="presentation">
      <a class="nav-link active"
         id="diagnostics-tab"
         data-bs-toggle="tab"
         data-bs-target="#notifications"
         href="#notifications"
         role="tab"
         aria-controls="notifications"
         aria-selected="true">{% translate "Diagnostics" %}</a>
    </li>
    <li class="nav-item" role="presentation">
      <a class="nav-link"
         id="overview-tab"
         data-bs-toggle="tab"
         data-bs-target="#overview"
         href="#overview"
         role="tab"
         aria-controls="overview"
         aria-selected="false"
         tabindex="-1">{% translate "Overview" %}</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active"
         id="notifications"
         role="tabpanel"
         aria-labelledby="diagnostics-tab">
      <form method="get"
            action="{% url 'user_notifications' user=page_user.username %}#notifications">
        <div class="card">
          <div class="card-header">
            <h2 class="card-title">{% translate "Notification diagnostics" %}</h2>
          </div>
          <div class="card-body">
            <p>{% translate "Check subscription eligibility for hypothetical events. This does not send notifications. The user’s own actions do not trigger notifications; event details, digest content, and delivery rate limits can also affect delivery." %}</p>
            {{ notification_form|crispy }}
          </div>
          <div class="card-footer">
            <button type="submit" class="btn btn-primary">{% translate "Check notifications" %}</button>
          </div>
        </div>
      </form>

      {% if notification_debug_target %}
        <section class="card" aria-labelledby="notification-results-heading">
          <div class="card-header">
            <h2 class="card-title" id="notification-results-heading">{% blocktranslate with target=notification_debug_target %}Notification eligibility for {{ target }}{% endblocktranslate %}</h2>
          </div>
          <div class="card-body">
            {% if notification_summary.broad and not notification_summary.empty %}
              <p class="form-text">{% translate "Inherited project settings are shown once, alongside differences across accessible components. Choose a component or translation path for detailed eligibility checks." %}</p>
            {% endif %}
            {% if notification_results %}
              <div class="table-responsive"
                   tabindex="0"
                   role="region"
                   aria-labelledby="notification-results-heading">
                <table class="table table-listing table-striped overflow-wrap notification-eligibility-table">
                  <thead>
                    <tr>
                      <th scope="col" class="fw-bold">{% translate "Notification" %}</th>
                      <th scope="col" class="fw-bold">
                        {% if notification_summary.broad %}
                          {% translate "Inherited project settings" %}
                        {% else %}
                          {% translate "Settings and eligibility" %}
                        {% endif %}
                      </th>
                      {% if notification_summary.broad %}
                        <th scope="col" class="fw-bold">{% translate "Component exceptions" %}</th>
                      {% endif %}
                    </tr>
                  </thead>
                  <tbody>
                    {% for result in notification_results %}
                      <tr>
                        <th scope="row" class="fw-normal">{{ result.name }}</th>
                        <td>
                          {% if result.subscription %}
                            <p>
                              <a data-notification-subscription
                                 href="#overview__notification-subscription-{{ result.subscription.pk }}">{{ result.subscription.get_scope_display }}: {{ result.subscription.get_frequency_display }}</a>
                              {% if result.subscription.onetime %}
                                <span class="badge text-bg-secondary">{% translate "One-time" %}</span>
                              {% endif %}
                            </p>
                            <p>{{ result.reason }}</p>
                          {% elif notification_summary.broad %}
                            <p>{% translate "No inherited subscription. Matching settings are listed under component exceptions." %}</p>
                          {% endif %}
                          {% if result.subscription and result.conditions or result.subscription and result.overridden %}
                            {% if result.conditions %}<ul>{% for condition in result.conditions %}<li>{{ condition }}</li>{% endfor %}</ul>{% endif %}
                            {% if result.overridden %}
                              <p>{% translate "Overridden subscriptions" %}</p>
                              <ul>
                                {% for subscription in result.overridden %}
                                  <li>
                                    <a data-notification-subscription
                                       href="#overview__notification-subscription-{{ subscription.pk }}">{{ subscription.get_scope_display }}: {{ subscription.get_frequency_display }}</a>
                                  </li>
                                {% endfor %}
                              </ul>
                            {% endif %}
                          {% endif %}
                        </td>
                        {% if notification_summary.broad %}
                          <td>
                            {% if result.exceptions %}
                              {% for exception in result.exceptions %}
                                <div{% if not forloop.first %} class="border-top pt-2 mt-2"{% endif %}>
                                  <p>{% blocktranslate count count=exception.count %}Different settings in {{ count }} component.{% plural %}Different settings in {{ count }} components.{% endblocktranslate %}</p>
                                  {% if exception.outcome.subscription %}
                                    <p>
                                      {% if exception.subscription_id %}
                                        <a data-notification-subscription
                                           href="#overview__notification-subscription-{{ exception.subscription_id }}">{{ exception.outcome.subscription.get_scope_display }}: {{ exception.outcome.subscription.get_frequency_display }}</a>
                                      {% else %}
                                        {{ exception.outcome.subscription.get_scope_display }}: {{ exception.outcome.subscription.get_frequency_display }}
                                      {% endif %}
                                      {% if exception.outcome.subscription.onetime %}
                                        <span class="badge text-bg-secondary">{% translate "One-time" %}</span>
                                      {% endif %}
                                    </p>
                                  {% endif %}
                                  {% if exception.outcome.subscription %}
                                    <p>{{ exception.outcome.reason }}</p>
                                  {% else %}
                                    <p>{% translate "These components have no matching subscription, so this notification will not be sent." %}</p>
                                  {% endif %}
                                  {% if exception.shared_count %}
                                    <p class="form-text">{% translate "Shared components use subscriptions from their original project, not this project’s subscriptions." %}</p>
                                  {% endif %}
                                  {% if exception.outcome.subscription and exception.outcome.conditions %}
                                    <ul>{% for condition in exception.outcome.conditions %}<li>{{ condition }}</li>{% endfor %}</ul>
                                  {% endif %}
                                  <p class="mt-3 mb-1">
                                    {% if exception.count > notification_detail_limit %}
                                      {% translate "Inspect example components:" %}
                                    {% else %}
                                      {% translate "Inspect components:" %}
                                    {% endif %}
                                  </p>
                                  <ul class="list-unstyled mb-0">
                                    {% for component in exception.examples %}
                                      <li><a href="{% url 'user_notifications' user=page_user.username %}?notification_target={{ component.get_url_path|join:'/'|urlencode }}#notifications">{{ component }}</a></li>
                                    {% endfor %}
                                  </ul>
                                </div>
                              {% endfor %}
                            {% else %}
                              {% translate "None" %}
                            {% endif %}
                          </td>
                        {% endif %}
                      </tr>
                    {% endfor %}
                  </tbody>
                </table>
              </div>
            {% else %}
              <p>
                {% if notification_summary.empty %}
                  {% translate "No accessible components or translations in this target." %}
                {% else %}
                  {% translate "No matching subscriptions in this scope." %}
                {% endif %}
              </p>
            {% endif %}
          </div>
        </section>
      {% endif %}
    </div>
    <div class="tab-pane" id="overview" role="tabpanel" aria-labelledby="overview-tab">
      <div class="row">
        <div class="col-md-6">
          <div class="card">
            <div class="card-header">
              <h2 class="card-title">{% translate "Watched projects" %}</h2>
            </div>
            <div class="card-body">
              {% if notification_watched_count > notification_detail_limit %}
                <p class="mb-0">{% blocktranslate count count=notification_watched_count %}{{ count }} watched project.{% plural %}{{ count }} watched projects.{% endblocktranslate %}</p>
              {% else %}
                <ul class="list-unstyled mb-0">
                  {% for project in notification_watched_projects %}
                    <li><a href="{{ project.get_absolute_url }}">{{ project }}</a></li>
                  {% empty %}
                    <li>{% translate "No watched projects." %}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            </div>
          </div>
        </div>
        <div class="col-md-6">
          <div class="card">
            <div class="card-header">
              <h2 class="card-title">{% translate "Notification languages" %}</h2>
            </div>
            <div class="card-body">
              {% if notification_language_count > notification_detail_limit %}
                <p class="mb-0">{% blocktranslate count count=notification_language_count %}{{ count }} notification language.{% plural %}{{ count }} notification languages.{% endblocktranslate %}</p>
              {% else %}
                <ul class="list-unstyled mb-0">
                  {% for language in notification_languages %}
                    <li><a href="{{ language.get_absolute_url }}">{{ language }}</a></li>
                  {% empty %}
                    <li>{% translate "No notification languages selected. Language-filtered notifications will not be sent." %}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            </div>
          </div>
        </div>
      </div>

      <div class="card">
        <div class="card-header">
          <h2 class="card-title">{% translate "Subscriptions" %}</h2>
        </div>
        <div class="card-body">
          {% if notification_subscription_groups %}
            <div class="table-responsive">
              <table class="table table-listing">
                <thead>
                  <tr>
                    <th scope="col" class="fw-bold">{% translate "Notification" %}</th>
                    <th scope="col" class="fw-bold">{% translate "Frequency" %}</th>
                  </tr>
                </thead>
                {% for group in notification_subscription_groups %}
                  <tbody>
                    <tr class="table-light">
                      <th scope="rowgroup" colspan="2">
                        {{ group.label }}
                        {% if group.target %}
                          — <a href="{{ group.target.get_absolute_url }}">{{ group.target }}</a>
                        {% endif %}
                      </th>
                    </tr>
                    {% for subscription in group.subscriptions %}
                      <tr id="overview__notification-subscription-{{ subscription.pk }}" tabindex="-1">
                        <th scope="row" class="fw-normal">{{ subscription.get_notification_display }}</th>
                        <td>
                          {{ subscription.get_frequency_display }}
                          {% if subscription.onetime %}
                            <span class="badge text-bg-secondary">{% translate "One-time" %}</span>
                          {% endif %}
                        </td>
                      </tr>
                    {% endfor %}
                  </tbody>
                {% endfor %}
              </table>
            </div>
          {% else %}
            <p>{% translate "No subscriptions." %}</p>
          {% endif %}

        </div>
      </div>

    </div>
  </div>
{% endblock content %}