{% extends "base.html" %}
{% from "partials/css_helpers.html" import thread_kind_badge, thread_status_badge, thread_kind_accent %}

{% block content %}
  <div class="d-flex flex-column gap-3">
    <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3">
      {% include "partials/repo_heading.html" %}
      {% set repo_tab = "threads" %}
      {% include "partials/repo_tabs.html" %}
    </div>

    <div class="card shadow-sm border-start border-4 {{ thread_kind_accent(thread.kind) }}">
      <div class="card-body">
        <div class="d-flex flex-column flex-md-row align-items-start justify-content-between gap-3">
          <div
            class="pearing-thread-reply-header flex-grow-1"
            role="button"
            tabindex="0"
            data-reply-body-toggle
            aria-expanded="true"
          >
            <div class="pearing-thread-reply-meta d-flex flex-wrap align-items-center gap-2 small">
              <span class="pearing-thread-reply-permalink fw-semibold">#{{ thread.number }}</span>
              {% with user_link_href = thread_creator_href, user_link_username = thread_creator, user_link_label = thread_creator, user_link_class = "fw-semibold text-decoration-none" %}
                {% include "partials/hover_card_user_link.html" %}
              {% endwith %}
              <span class="text-muted">{{ thread.created_at | humantime }}</span>
              {% if thread.updated_at != thread.created_at %}
                <span class="text-muted">· updated {{ thread.updated_at | humantime }}</span>
              {% endif %}
            </div>
            <div class="fw-semibold mt-1">{{ thread.title }}</div>
            <div class="d-flex flex-wrap align-items-center gap-2 mt-2">
              <span class="badge {{ thread_kind_badge(thread.kind) }} text-uppercase">{{ thread.kind }}</span>
              <span class="badge {{ thread_status_badge(thread.status) }} text-uppercase">{{ thread.status }}</span>
              {% if thread.priority == "now" %}
                <span class="badge text-bg-warning text-dark text-uppercase">Now</span>
              {% endif %}
              <span class="badge text-bg-light text-dark text-uppercase">{{ thread.size }}</span>
            </div>
            <div class="d-flex flex-wrap align-items-center gap-3 mt-2">
              {% with lifecycle=thread_lifecycle %}
                {% include "repo/partials/thread_lifecycle.html" %}
              {% endwith %}
              <div class="text-muted small">{{ thread_summary_line }}</div>
            </div>
          </div>
          <div class="pearing-thread-detail-actions d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">
            {% if current_user and (thread_can_edit or thread_can_update_metadata) %}
              <a class="btn btn-sm btn-outline-secondary" href="{{ thread_edit_href }}">Edit</a>
            {% endif %}
            {% if current_user and thread_can_delete %}
              <button
                class="btn btn-sm btn-outline-danger"
                data-bs-toggle="modal"
                data-bs-target="#confirm-delete-thread"
              >Delete</button>
            {% endif %}
          </div>
        </div>
        <div class="pearing-thread-reply-body collapse show" data-reply-body>
          {% if thread.body and thread.body | trim != "" %}
            <div class="pearing-markdown mt-3" data-quote-source-kind="thread" data-quote-source-number="{{ thread.number }}" data-quote-source-author="{{ thread_creator }}">{{ thread.body | markdown | linkify(is_private=linkify_is_private, current_team_slug=linkify_current_team_slug) }}</div>
          {% endif %}
        </div>
      </div>
    </div>

    {% if linked_pulls | length > 0 %}
      <div class="card shadow-sm">
        <div class="card-body py-3">
          <div class="small text-muted text-uppercase fw-semibold mb-2">Linked pulls</div>
          <div class="d-flex flex-column gap-2">
            {% for pull in linked_pulls %}
              <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2">
                <a class="fw-semibold text-decoration-none" href="{{ pull.href }}">#{{ pull.number }} {{ pull.title }}</a>
                <span class="badge text-bg-secondary text-uppercase">{{ pull.status }}</span>
              </div>
            {% endfor %}
          </div>
        </div>
      </div>
    {% endif %}

    {% if reply_context %}
      <div class="card shadow-sm">
        <div class="card-body">
          <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-between gap-2 mb-3">
            <div>
              <div class="small text-muted text-uppercase fw-semibold">Focused reply context</div>
              <div class="small text-muted">Showing the focused {{ reply_context.focused_kind }} reply in branch view.</div>
            </div>
            <a class="btn btn-sm btn-outline-secondary" href="{{ reply_context.back_href }}">Back to thread root</a>
          </div>
          {% if reply_context.parent_reply %}
            <div class="small text-muted mb-2">Parent reply</div>
            {% with reply=reply_context.parent_reply %}
              <div class="pearing-thread-reply" id="reply-{{ reply.number }}">
                <div data-reply-fragment>
                  {% include "repo/partials/thread_reply_card.html" %}
                </div>
              </div>
            {% endwith %}
          {% endif %}
          <div class="small text-muted mb-2">Focused reply</div>
          {% with reply=reply_context.focused_reply %}
            <div class="pearing-thread-reply" id="reply-{{ reply.number }}">
              <div data-reply-fragment>
                {% include "repo/partials/thread_reply_card.html" %}
              </div>
            </div>
          {% endwith %}
        </div>
      </div>
    {% endif %}

    <div class="card shadow-sm">
      <div class="card-header d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center justify-content-between gap-2">
        <span class="fw-semibold">Replies</span>
        <div class="d-flex flex-column flex-sm-row align-items-stretch align-items-sm-center gap-2">
          {% if not reply_context %}
            <input type="hidden" name="sort" id="reply-sort-value" value="{{ reply_sort }}" form="thread-replies-paging-form">
            <div class="d-flex align-items-center gap-2">
              <label class="small text-muted" for="reply-sort-field">Sort</label>
              <div class="input-group input-group-sm">
                <select class="form-select" id="reply-sort-field">
                  <option value="activity" {% if reply_sort == "activity" or reply_sort == "-activity" %}selected{% endif %}>Activity</option>
                  <option value="created" {% if reply_sort == "created" or reply_sort == "-created" %}selected{% endif %}>Created</option>
                </select>
                <button
                  class="btn btn-outline-secondary"
                  id="reply-sort-direction"
                  type="button"
                  data-direction="{% if reply_sort == "activity" or reply_sort == "created" %}asc{% else %}desc{% endif %}"
                  aria-label="{% if reply_sort == "activity" or reply_sort == "created" %}Ascending{% else %}Descending{% endif %}"
                >
                  {% if reply_sort == "activity" or reply_sort == "created" %}&uarr;{% else %}&darr;{% endif %}
                </button>
              </div>
            </div>
          {% endif %}
          <button class="btn btn-sm btn-outline-secondary" type="button" data-thread-replies-toggle>Collapse all</button>
          {% if not current_user %}
            <a class="btn btn-sm btn-primary" href="{{ signin_href }}">Sign in to reply</a>
          {% endif %}
        </div>
      </div>
      <div class="card-body d-flex flex-column gap-3">
        {% if current_user %}
          <details class="mb-1" data-thread-reply-composer>
            <summary class="btn btn-sm btn-primary" data-thread-reply-form-toggle>Reply</summary>
            {% with form=top_reply_form %}
              {% include "repo/partials/thread_reply_form.html" %}
            {% endwith %}
          </details>
        {% endif %}
        {% if replies | length == 0 %}
          <p class="text-muted mb-0">No replies in this view yet.</p>
        {% else %}
          {% for reply in replies %}
            {% include "repo/partials/thread_reply_item.html" %}
          {% endfor %}
        {% endif %}
      </div>
      {% with page=reply_page, query=reply_paging, per_page_id="thread-replies-per-page", per_page_form="thread-replies-paging-form" %}
        {% include "partials/paging_footer.html" %}
      {% endwith %}
    </div>

    {% if current_user and thread_can_delete %}
      <div class="modal" id="confirm-delete-thread" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title">Delete thread</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
              <p>Delete thread <span class="fw-semibold">#{{ thread.number }}</span>?</p>
              <p class="text-muted small">This will delete the thread and all replies.</p>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <form method="post" action="{{ thread_delete_href }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
                <button type="submit" class="btn btn-danger">Delete thread</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    {% endif %}

    {% with
      modal_id="confirm-delete-reply",
      modal_title="Delete reply",
      modal_body='Delete <span class="fw-semibold" data-confirm-name></span>?',
      modal_confirm_text="Delete reply",
      modal_desc="This keeps the reply in the thread tree but scrubs its body and author.",
      modal_manual_submit=true
    %}
      {% include "partials/confirm_modal.html" %}
    {% endwith %}

    <form id="thread-replies-paging-form" method="get" action="{{ repo_path }}/threads/{{ thread.number }}">
      {% if query.reply_root %}
        <input type="hidden" name="reply_root" value="{{ query.reply_root }}" />
      {% endif %}
    </form>
  </div>
{% endblock %}

{% block scripts %}
  <style>
    .pearing-quote-trigger {
      position: absolute;
      z-index: 1050;
    }
    .pearing-quoted {
      background-color: rgba(255, 193, 7, 0.2);
      border-bottom: 2px solid rgba(255, 193, 7, 0.5);
    }
    .pearing-quoted-block {
      border-left: 3px solid rgba(255, 193, 7, 0.5);
      background-color: rgba(255, 193, 7, 0.05);
    }
    .pearing-inline-quote-form {
      max-width: 600px;
    }
  </style>
  <script>
    (function () {
      PearingScripts.initHtmxDeleteConfirmModal("confirm-delete-reply");

      function syncExpandedState(toggle, body) {
        $(toggle).attr("aria-expanded", $(body).hasClass("show") ? "true" : "false");
      }

      function bindReplyHeader(toggle) {
        var $toggle = $(toggle);
        if ($toggle.data("replyHeaderBound")) {
          return;
        }
        $toggle.data("replyHeaderBound", true);
        var $fragment = $toggle.closest("[data-reply-fragment]");
        var body = $fragment.length ? $fragment.find("[data-reply-body]")[0] : null;
        if (!body) {
          return;
        }
        $toggle.on("click", function (event) {
          if ($(event.target).closest("a, button, input, select, textarea, summary, form, label").length) {
            return;
          }
          var collapse = bootstrap.Collapse.getOrCreateInstance(body, { toggle: false });
          collapse.toggle();
        });
        $toggle.on("keydown", function (event) {
          if (event.key !== "Enter" && event.key !== " ") {
            return;
          }
          event.preventDefault();
          var collapse = bootstrap.Collapse.getOrCreateInstance(body, { toggle: false });
          collapse.toggle();
        });
        $(body).on("shown.bs.collapse", function () {
          syncExpandedState(toggle, body);
        });
        $(body).on("hidden.bs.collapse", function () {
          syncExpandedState(toggle, body);
        });
        syncExpandedState(toggle, body);
      }

      function allReplyBodiesExpanded() {
        var $bodies = $(".pearing-thread-reply-body.collapse");
        return $bodies.length > 0 && $bodies.filter(function () {
          return !$(this).hasClass("show");
        }).length === 0;
      }

      function syncReplyBodiesToggleButton() {
        var $toggle = $("[data-thread-replies-toggle]");
        if (!$toggle.length) {
          return;
        }
        var expanded = allReplyBodiesExpanded();
        $toggle.text(expanded ? "Collapse all" : "Expand all");
        $toggle.attr(
          "aria-label",
          expanded ? "Collapse all replies" : "Expand all replies"
        );
      }

      function toggleAllReplyBodies(show) {
        $(".pearing-thread-reply-body.collapse").each(function () {
          var body = this;
          var collapse = bootstrap.Collapse.getOrCreateInstance(body, { toggle: false });
          if (show) {
            collapse.show();
          } else {
            collapse.hide();
          }
        });
      }

      function syncStatusToggleButtons($container) {
        var $ctx = $container || $(document);
        $ctx.find("[data-reply-status-input]").each(function () {
          var $input = $(this);
          var inputId = $input.attr("data-reply-status-input");
          var status = $input.val();
          $input.parent().find("[data-reply-status-toggle='" + inputId + "']").each(function () {
            var $b = $(this);
            var s = $b.attr("data-status");
            $b.attr("class", s === status
              ? "btn btn-sm " + (s === "accepted" ? "btn-success" : "btn-danger")
              : "btn btn-sm " + (s === "accepted" ? "btn-outline-success" : "btn-outline-danger"));
          });
        });
      }

      function syncReplyKindStatusGroup(prefix) {
        var $kind = $("[data-reply-kind-input='" + prefix + "']:checked");
        if (!$kind.length) {
          return;
        }
        var kind = $kind.val();
        var $statusGroup = $("[data-reply-status-group='" + prefix + "']");
        if (!$statusGroup.length) {
          return;
        }
        var $statusInput = $("[data-reply-status-input='" + prefix + "']");
        if (kind === "comment") {
          $statusInput.val("open");
          $statusGroup.addClass("d-none");
        } else {
          $statusGroup.removeClass("d-none");
        }
        syncStatusToggleButtons($statusGroup);
      }

      function bindReplyKindChange(input) {
        var $input = $(input);
        if ($input.data("replyKindBound")) {
          return;
        }
        $input.data("replyKindBound", true);
        $input.on("change", function () {
          if (!input.checked) {
            return;
          }
          syncReplyKindStatusGroup($input.attr("data-reply-kind-input"));
        });
      }

      function bindReplyFormCancel(button) {
        var $btn = $(button);
        if ($btn.data("replyFormCancelBound")) return;
        $btn.data("replyFormCancelBound", true);
        $btn.on("click", function () {
          var $form = $btn.closest("form");
          if ($form.length) $form[0].reset();
          syncStatusToggleButtons($form);
          var $details = $btn.closest("details");
          if ($details.length) {
            $details.prop("open", false);
            syncReplyComposerToggle($details[0]);
          }
        });
      }

      function syncReplyComposerToggle(details) {
        var $details = $(details);
        var $toggle = $details.children("summary[data-thread-reply-form-toggle]");
        if (!$toggle.length) {
          return;
        }
        $toggle.toggleClass("d-none", $details.prop("open"));
      }

      function focusReplyComposer(details) {
        var $textarea = $(details).find("textarea[name='body']").first();
        if (!$textarea.length) {
          return;
        }

        window.requestAnimationFrame(function () {
          if (details.open) {
            $textarea[0].focus();
          }
        });
      }

      function bindReplyComposer(details) {
        var $details = $(details);
        if ($details.data("replyComposerBound")) {
          return;
        }
        $details.data("replyComposerBound", true);
        $details.on("toggle", function () {
          syncReplyComposerToggle(details);
          if (details.open) {
            focusReplyComposer(details);
          }
        });
        syncReplyComposerToggle(details);
        if (details.open) {
          focusReplyComposer(details);
        }
      }

      function bindStatusToggle(btn) {
        var $btn = $(btn);
        $btn.on("click", function () {
          var $group = $btn.closest("[role=group]");
          var targetStatus = $btn.attr("data-status");
          var inputId = $btn.attr("data-reply-status-toggle");
          var $input = $("[data-reply-status-input='" + inputId + "']");
          if (!$input.length) return;
          var current = $input.val();
          var newStatus = current === targetStatus ? "open" : targetStatus;
          $input.val(newStatus);
          $group.find("[data-reply-status-toggle]").each(function () {
            var $b = $(this);
            var s = $b.attr("data-status");
            if (s === newStatus) {
              $b.attr("class", "btn btn-sm " + (s === "accepted" ? "btn-success" : "btn-danger"));
            } else {
              $b.attr("class", "btn btn-sm " + (s === "accepted" ? "btn-outline-success" : "btn-outline-danger"));
            }
          });
        });
      }

      function initReplyControls(root) {
        var $root = $(root || document);
        $root.find(".pearing-thread-reply-header[data-reply-body-toggle]").each(function () { bindReplyHeader(this); });
        $root.find("details[data-thread-reply-composer]").each(function () { bindReplyComposer(this); });
        $root.find("[data-thread-reply-form-cancel]").each(function () { bindReplyFormCancel(this); });
        $root.find("[data-reply-status-toggle]").each(function () { bindStatusToggle(this); });
        $root.find("[data-reply-kind-input]").each(function () { bindReplyKindChange(this); });
        var seenReplyKindPrefixes = {};
        $root.find("[data-reply-kind-input]").each(function () {
          var prefix = $(this).attr("data-reply-kind-input");
          if (seenReplyKindPrefixes[prefix]) {
            return;
          }
          seenReplyKindPrefixes[prefix] = true;
          syncReplyKindStatusGroup(prefix);
        });
      }

      $(function () {
        initReplyControls(document);
        PearingScripts.initQuoting();
        syncReplyBodiesToggleButton();
        $("[data-thread-replies-toggle]").on("click", function () {
          toggleAllReplyBodies(!allReplyBodiesExpanded());
        });
        $("body").on("shown.bs.collapse hidden.bs.collapse", ".pearing-thread-reply-body.collapse", function () {
          syncReplyBodiesToggleButton();
        });
      });
      $("body").on("htmx:afterSwap", function (event) {
        initReplyControls(event.target);
        PearingScripts.initQuoting();
        syncReplyBodiesToggleButton();
      });
    })();

    $(function () {
      var $form = $("#thread-replies-paging-form");
      var $sortField = $("#reply-sort-field");
      var $sortValue = $("#reply-sort-value");
      var $sortDirection = $("#reply-sort-direction");
      if (!$form.length || !$sortField.length || !$sortValue.length || !$sortDirection.length) return;

      function syncSort() {
        var direction = $sortDirection.attr("data-direction") === "asc" ? "asc" : "desc";
        $sortValue.val(direction === "desc" ? "-" + $sortField.val() : $sortField.val());
        $sortDirection.html(direction === "desc" ? "&darr;" : "&uarr;");
        $sortDirection.attr(
          "aria-label",
          direction === "desc" ? "Descending" : "Ascending"
        );
      }

      $sortField.on("change", function () {
        syncSort();
        $form[0].requestSubmit();
      });
      $sortDirection.on("click", function () {
        $sortDirection.attr("data-direction",
          $sortDirection.attr("data-direction") === "desc" ? "asc" : "desc");
        syncSort();
        $form[0].requestSubmit();
      });
      syncSort();
    });
  </script>
{% endblock %}