{% extends "base.html" %}

{% block title %}Report {{ report.public_id[:8] }} · Admin{% endblock %}

{% set status_badge = {'pending': 'warning', 'under_review': 'info', 'resolved': 'success', 'dismissed': 'secondary'} %}
{% set status = report.status.value %}
{% set is_open = status in ['pending', 'under_review'] %}
{% set listing = detail.listing %}
{% set listing_removed = listing and listing.deleted_at is not none %}
{% set assigned_to_me = report.moderator_id and report.moderator_id == current_user.id %}
{% set assigned_other = report.moderator_id and not assigned_to_me %}
{% set convos = detail.conversations %}
{% set sh = detail.seller_history %}

{% macro action(label, value, icon, cls, confirm=None, block=False, disabled=False, hint=None) %}
  <form method="post" action="{{ url_for('admin.report_action', public_id=report.public_id) }}"
        class="{{ 'd-grid' if block }} report-action-form"
        {% if confirm %}onsubmit="return confirm('{{ confirm|e }}');"{% endif %}>
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
    <input type="hidden" name="action" value="{{ value }}">
    <button class="btn btn-sm {{ cls }}" {{ 'disabled' if disabled }}><i class="bi {{ icon }} me-1"></i>{{ label }}</button>
    {% if hint %}<p class="report-action-hint">{{ hint }}</p>{% endif %}
  </form>
{% endmacro %}

{% macro disabled_action(label, icon, cls, hint) %}
  <div class="d-grid report-action-form">
    <button class="btn btn-sm {{ cls }}" disabled><i class="bi {{ icon }} me-1"></i>{{ label }}</button>
    <p class="report-action-hint">{{ hint }}</p>
  </div>
{% endmacro %}

{% block content %}
<div class="admin-page report-detail-page">
  <a class="premium-back" href="{{ url_for('admin.reports') }}"><i class="bi bi-arrow-left"></i> Back to reports</a>

  {# ================= Report summary (understand the report at a glance) ================= #}
  <div class="card border-0 shadow-sm report-summary mb-4">
    <div class="card-body p-4">
      <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
        <h1 class="h4 fw-bold mb-0">Report <code>{{ report.public_id[:8] }}</code></h1>
        <span class="badge text-bg-{{ status_badge.get(status, 'secondary') }}">{{ status.replace('_',' ')|title }}</span>
        <span class="badge text-bg-light">{{ detail.reason }}</span>
        <span class="badge text-bg-light text-capitalize">{{ report.entity_type.value }}</span>
        {% if assigned_to_me %}
          <span class="badge text-bg-success"><i class="bi bi-person-check-fill me-1"></i>Assigned to You</span>
        {% elif assigned_other %}
          <span class="badge text-bg-secondary"><i class="bi bi-person-fill me-1"></i>{{ detail.moderator_name }}</span>
        {% endif %}
      </div>

      <div class="report-summary-grid">
        <div class="report-stat"><span class="report-stat-label">Report ID</span><span class="report-stat-value"><code>{{ report.public_id[:12] }}</code></span></div>
        <div class="report-stat"><span class="report-stat-label">Status</span><span class="report-stat-value">{{ status.replace('_',' ')|title }}</span></div>
        <div class="report-stat"><span class="report-stat-label">Assigned moderator</span><span class="report-stat-value">{{ detail.moderator_name or 'Unassigned' }}</span></div>
        <div class="report-stat"><span class="report-stat-label">Reported</span><span class="report-stat-value">{{ report.created_at.strftime('%d %b %Y, %H:%M') }}</span></div>
        <div class="report-stat"><span class="report-stat-label">Reason</span><span class="report-stat-value">{{ detail.reason }}</span></div>
        <div class="report-stat">
          <span class="report-stat-label">Listing</span>
          <span class="report-stat-value text-truncate">
            {% if listing %}<a href="{{ url_for('admin.listing_detail', public_id=listing.public_id) }}">{{ listing.title }}</a>{% else %}—{% endif %}
          </span>
        </div>
        <div class="report-stat">
          <span class="report-stat-label">Seller</span>
          <span class="report-stat-value text-truncate">
            {% if detail.seller_public_id %}<a href="{{ url_for('admin.user_detail', public_id=detail.seller_public_id) }}">{{ detail.seller_name }}</a>{% else %}{{ detail.seller_name }}{% endif %}
          </span>
        </div>
        <div class="report-stat"><span class="report-stat-label">Reporter</span><span class="report-stat-value text-truncate">{{ detail.reporter_name }}</span></div>
        <div class="report-stat"><span class="report-stat-label">Conversations</span><span class="report-stat-value report-stat-num">{{ convos.conversation_count }}</span></div>
        <div class="report-stat"><span class="report-stat-label">Messages</span><span class="report-stat-value report-stat-num">{{ convos.total_messages }}</span></div>
        <div class="report-stat"><span class="report-stat-label">Offers</span><span class="report-stat-value report-stat-num">{{ convos.total_offers }}</span></div>
      </div>

      {% if report.description %}
        <div class="report-description mt-3"><i class="bi bi-quote me-1"></i>{{ report.description }}</div>
      {% endif %}
    </div>
  </div>

  {# ================= Conversation (wide) + sticky moderation action center ================= #}
  <div class="row g-4">
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm">
        <div class="card-header border-0 px-4 py-3">
          <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
            <div>
              <h2 class="h6 mb-1"><i class="bi bi-chat-dots me-1"></i> Conversation History</h2>
              {% if convos.conversation_count %}
                <div class="convo-subhead">
                  <span><i class="bi bi-chat-left-text"></i> {{ convos.total_messages }} Message{{ '' if convos.total_messages == 1 else 's' }}</span>
                  <span><i class="bi bi-tag"></i> {{ convos.total_offers }} Offer{{ '' if convos.total_offers == 1 else 's' }}</span>
                  {% if convos.conversation_count == 1 %}
                    <span><i class="bi bi-people"></i> {{ convos.groups[0].buyer_name }} &harr; {{ convos.groups[0].seller_name }}</span>
                  {% else %}
                    <span><i class="bi bi-people"></i> {{ convos.conversation_count }} conversations</span>
                  {% endif %}
                </div>
              {% endif %}
            </div>
            {% if convos.conversation_count %}
              <div class="btn-group btn-group-sm" role="group" aria-label="Jump within conversation">
                <button type="button" class="btn btn-outline-secondary" data-convo-top><i class="bi bi-arrow-up-short"></i> Beginning</button>
                <button type="button" class="btn btn-outline-secondary" data-convo-bottom><i class="bi bi-arrow-down-short"></i> Latest</button>
              </div>
            {% endif %}
          </div>
        </div>
        <div class="card-body p-0">
          {% if not convos.conversation_count %}
            <div class="report-empty p-4">
              <i class="bi bi-chat-left-text"></i>
              <p class="mb-0">No conversations occurred for this listing before the report.</p>
            </div>
          {% else %}
            <div class="admin-convo-scroll" data-convo-scroll tabindex="0" aria-label="Conversation history">
              {% for g in convos.groups %}
                <section class="admin-convo-group">
                  {% if convos.conversation_count > 1 %}
                    <header class="admin-convo-group-head">
                      <span><i class="bi bi-people-fill me-1"></i> {{ g.buyer_name }} <span class="text-muted">&harr;</span> {{ g.seller_name }}</span>
                      <span class="text-muted small">{{ g.message_count }} msg · {{ g.offer_count }} offer{{ '' if g.offer_count == 1 else 's' }}</span>
                    </header>
                  {% endif %}

                  {% for e in g.events %}
                    {% if e.kind == 'offer' %}
                      {% set right = e.offer_kind == 'counter' %}
                      <div class="chat-row d-flex mb-2 {{ 'justify-content-end' if right }}">
                        <div class="admin-offer-chip {{ 'is-counter' if right else 'is-offer' }}">
                          <div class="admin-offer-chip-top">
                            <span class="admin-offer-chip-kind"><i class="bi bi-tag-fill me-1"></i>{{ 'Counter Offer' if right else 'Offer' }}</span>
                            <span class="badge text-bg-light border">{{ e.status_label }}</span>
                          </div>
                          <div class="admin-offer-chip-amount">&#8377;{{ "{:,.0f}".format(e.amount) }}</div>
                          {% if e.content %}<div class="admin-offer-chip-note">&ldquo;{{ e.content }}&rdquo;</div>{% endif %}
                          <time class="chat-time">{{ e.sender }} · {{ e.timestamp.strftime('%d %b %Y, %H:%M') }}</time>
                        </div>
                      </div>
                    {% elif e.kind == 'system' %}
                      <div class="chat-system small text-muted text-center my-2">
                        <i class="bi bi-gear-fill me-1"></i>{{ e.content }} · {{ e.timestamp.strftime('%d %b, %H:%M') }}
                      </div>
                    {% else %}
                      {% set right = e.role == 'seller' %}
                      <div class="chat-row d-flex mb-2 {{ 'justify-content-end' if right }}">
                        <div class="chat-bubble {{ 'chat-bubble-own' if right else 'chat-bubble-other' }}">
                          <div class="chat-bubble-header">
                            <span class="chat-bubble-avatar {{ 'chat-bubble-avatar-own' if right else 'chat-bubble-avatar-other' }}">{{ e.sender[0]|upper }}</span>
                            <span class="chat-bubble-name">{{ e.sender }} <span class="chat-bubble-role">· {{ e.role|title }}</span></span>
                          </div>
                          <div class="chat-text">{{ e.content }}</div>
                          <time class="chat-time">{{ e.timestamp.strftime('%d %b %Y, %H:%M') }}</time>
                        </div>
                      </div>
                    {% endif %}
                  {% endfor %}
                </section>
              {% endfor %}
            </div>
            <p class="text-muted small mb-0 px-4 py-2 border-top"><i class="bi bi-shield-lock me-1"></i> Read-only · visible to moderators only.</p>
          {% endif %}
        </div>
      </div>
    </div>

    {# ---------- Sticky moderation action center ---------- #}
    <div class="col-lg-4">
      <div class="report-actions-sticky">
        <div class="card border-0 shadow-sm">
          <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0"><i class="bi bi-shield-check me-1"></i> Moderation Actions</h2></div>
          <div class="card-body p-4">
            {% if is_open %}
              {# Assignment #}
              <p class="report-action-group-label">Assignment</p>
              <div class="d-grid gap-2 mb-3">
                {% if not report.moderator_id %}
                  {{ action('Assign to Me', 'assign', 'bi-person-check', 'btn-primary', block=True) }}
                {% elif assigned_to_me %}
                  <span class="badge text-bg-success py-2"><i class="bi bi-person-check-fill me-1"></i> Assigned to You ✓</span>
                {% else %}
                  <div class="report-assignee"><i class="bi bi-person-fill me-1"></i> Assigned to: <strong>{{ detail.moderator_name }}</strong></div>
                  {{ action('Reassign to me', 'assign', 'bi-arrow-left-right', 'btn-outline-warning', block=True,
                            confirm='This report is assigned to ' ~ detail.moderator_name ~ '. Reassign it to yourself?') }}
                {% endif %}
                {% if status == 'pending' %}
                  {{ action('Mark Under Review', 'under_review', 'bi-search', 'btn-outline-info', block=True) }}
                {% endif %}
              </div>

              {# Resolution — all decisions in one place #}
              <p class="report-action-group-label">Resolution</p>
              <div class="d-grid gap-2">
                {% if detail.seller_public_id %}
                  <button class="btn btn-sm btn-outline-warning" data-bs-toggle="modal" data-bs-target="#warnSellerModal"><i class="bi bi-exclamation-triangle me-1"></i> Warn Seller</button>
                {% else %}
                  {{ disabled_action('Warn Seller', 'bi-exclamation-triangle', 'btn-outline-warning', 'No seller is associated with this report.') }}
                {% endif %}

                {% if listing and not listing_removed %}
                  {{ action('Remove Listing', 'remove_listing', 'bi-trash3', 'btn-outline-danger', block=True,
                            confirm='Remove the reported listing and resolve this report?') }}
                {% elif listing_removed %}
                  {{ disabled_action('Remove Listing', 'bi-trash3', 'btn-outline-danger', 'This listing has already been removed.') }}
                  <a class="btn btn-sm btn-outline-success" href="{{ url_for('admin.listing_detail', public_id=listing.public_id) }}"><i class="bi bi-arrow-counterclockwise me-1"></i> Restore Listing</a>
                {% else %}
                  {{ disabled_action('Remove Listing', 'bi-trash3', 'btn-outline-danger', 'No listing is attached to this report.') }}
                {% endif %}

                <form method="post" action="{{ url_for('admin.report_action', public_id=report.public_id) }}" class="report-resolve-form">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <label class="form-label small mb-1 mt-2" for="modNotes">Moderator notes <span class="text-muted">(optional)</span></label>
                  <textarea id="modNotes" name="notes" class="form-control form-control-sm mb-2" rows="2" placeholder="Record your decision rationale…"></textarea>
                  <div class="d-grid gap-2">
                    <button class="btn btn-sm btn-success" name="action" value="resolve"><i class="bi bi-check-circle me-1"></i> Resolve Report</button>
                    <button class="btn btn-sm btn-outline-secondary" name="action" value="dismiss"><i class="bi bi-slash-circle me-1"></i> Dismiss Report</button>
                  </div>
                </form>
              </div>
            {% else %}
              <div class="report-empty text-start">
                <i class="bi bi-lock"></i>
                <p class="mb-0">This report is <strong>{{ status.replace('_',' ')|title }}</strong> and closed to further action.</p>
              </div>
            {% endif %}

            {% if report.moderator_notes %}
              <div class="alert alert-light border small mt-3 mb-0"><strong>Notes:</strong> {{ report.moderator_notes }}</div>
            {% endif %}

            {# Notification delivery — makes it obvious that both parties have
               already been told the outcome (or why the reported user wasn't). #}
            {% set nd = detail.notification_delivery %}
            {% if nd.show %}
              <div class="report-delivery mt-3">
                <p class="report-action-group-label mb-2"><i class="bi bi-send-check me-1"></i> Notification Delivery</p>
                <ul class="report-delivery-list">
                  <li class="{{ 'is-ok' if nd.reporter_notified else 'is-off' }}">
                    <i class="bi {{ 'bi-check-circle-fill' if nd.reporter_notified else 'bi-dash-circle' }}"></i>
                    {{ 'Reporter notified' if nd.reporter_notified else 'Reporter not notified' }}
                  </li>
                  <li class="{{ 'is-ok' if nd.reported_notified else 'is-off' }}">
                    <i class="bi {{ 'bi-check-circle-fill' if nd.reported_notified else 'bi-dash-circle' }}"></i>
                    {{ 'Reported user notified' if nd.reported_notified else 'No notification sent to reported user' }}
                  </li>
                </ul>
                {% if not nd.reported_notified %}
                  <p class="report-delivery-reason">Reason: No moderation action taken.</p>
                {% endif %}
                {% if nd.sent_at %}
                  <p class="report-delivery-time">Sent <time data-relative datetime="{{ nd.sent_at.isoformat() }}">{{ nd.sent_at.strftime('%d %b %Y, %H:%M') }}</time></p>
                {% endif %}
              </div>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>

  {# ================= Reported listing + seller history / timeline + audit ================= #}
  <div class="row g-4 mt-0">
    <div class="col-lg-8">
      {# Reported listing #}
      <div class="card border-0 shadow-sm mb-4">
        <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0"><i class="bi bi-box-seam me-1"></i> Reported listing</h2></div>
        <div class="card-body p-4">
          {% if listing %}
            <div class="row g-3">
              <div class="col-sm-4">
                <div class="admin-gallery-main">
                  {% if listing.images %}<img src="{{ url_for('marketplace.listing_image', filename=listing.images[0].image_path) }}" alt="">{% else %}<i class="bi bi-image"></i>{% endif %}
                </div>
              </div>
              <div class="col-sm-8">
                <h3 class="h6 fw-bold mb-1">{{ listing.title }}</h3>
                <div class="text-primary fw-bold mb-2">&#8377;{{ "{:,.0f}".format(listing.price) }}</div>
                <p class="text-muted small mb-2">{{ listing.category.name if listing.category else '' }} ·
                  <span class="badge status-{{ listing.status.value }}">{{ listing.status.value|title }}</span>
                  {% if listing_removed %}<span class="badge text-bg-danger">Removed</span>{% endif %}
                </p>
                <a class="btn btn-sm btn-outline-primary" href="{{ url_for('admin.listing_detail', public_id=listing.public_id) }}">Open in Listing Management</a>
              </div>
            </div>
          {% else %}
            <p class="text-muted mb-0">The reported entity is a {{ report.entity_type.value }} ({{ report.entity_public_id[:8] }}).</p>
          {% endif %}
        </div>
      </div>

      {# Seller moderation history #}
      <div class="card border-0 shadow-sm">
        <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0"><i class="bi bi-clock-history me-1"></i> Seller moderation history</h2></div>
        <div class="card-body p-4">
          {% if sh %}
            <div class="seller-history-grid mb-3">
              <div class="seller-history-stat"><span class="seller-history-num">{{ sh.total_reports }}</span><span class="seller-history-lbl">Total reports</span></div>
              <div class="seller-history-stat"><span class="seller-history-num text-warning">{{ sh.open_reports }}</span><span class="seller-history-lbl">Open</span></div>
              <div class="seller-history-stat"><span class="seller-history-num">{{ sh.warnings }}</span><span class="seller-history-lbl">Warnings</span></div>
              <div class="seller-history-stat"><span class="seller-history-num text-success">{{ sh.active_listings }}</span><span class="seller-history-lbl">Active listings</span></div>
              <div class="seller-history-stat"><span class="seller-history-num text-danger">{{ sh.removed_listings }}</span><span class="seller-history-lbl">Removed listings</span></div>
            </div>
          {% endif %}

          <p class="report-action-group-label">Previous reports</p>
          {% if detail.previous_reports %}
            <ul class="list-unstyled mb-0">
              {% for p in detail.previous_reports %}
                <li class="d-flex align-items-center justify-content-between py-1 border-bottom">
                  <a href="{{ url_for('admin.report_detail', public_id=p.public_id) }}" class="text-decoration-none"><code class="small">{{ p.short_id }}</code> · {{ p.reason }}</a>
                  <span class="badge text-bg-{{ status_badge.get(p.status, 'secondary') }}">{{ p.status_label }}</span>
                </li>
              {% endfor %}
            </ul>
          {% else %}
            <div class="report-empty text-start py-3"><i class="bi bi-shield-check"></i><p class="mb-0">This seller has no previous moderation history.</p></div>
          {% endif %}
        </div>
      </div>
    </div>

    <div class="col-lg-4">
      {# Moderator timeline #}
      <div class="card border-0 shadow-sm mb-4">
        <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0"><i class="bi bi-diagram-3 me-1"></i> Timeline</h2></div>
        <div class="card-body p-3">
          <ul class="report-timeline">
            {% for t in detail.timeline %}
              <li class="report-timeline-item">
                <span class="report-timeline-ico"><i class="bi {{ t.icon }}"></i></span>
                <div><p class="report-timeline-text mb-0">{{ t.text }}</p>
                  <time class="report-timeline-time">{{ t.timestamp.strftime('%d %b %Y, %H:%M') }}</time></div>
              </li>
            {% endfor %}
          </ul>
        </div>
      </div>

      {# Audit history #}
      <div class="card border-0 shadow-sm">
        <div class="card-header border-0 px-4 py-3"><h2 class="h6 mb-0"><i class="bi bi-shield-check me-1"></i> Audit history</h2></div>
        <div class="card-body p-3">
          {% if detail.audit_history %}
            <ul class="report-timeline">
              {% for h in detail.audit_history %}
                <li class="report-timeline-item">
                  <span class="report-timeline-ico"><i class="bi {{ h.icon }}"></i></span>
                  <div><p class="report-timeline-text mb-0">{{ h.label }}</p>
                    <time class="report-timeline-time">{{ h.admin_name }} · {{ h.timestamp.strftime('%d %b %Y, %H:%M') }}</time></div>
                </li>
              {% endfor %}
            </ul>
          {% else %}
            <div class="report-empty text-start py-3"><i class="bi bi-shield-check"></i><p class="mb-0">No moderator actions have been recorded yet.</p></div>
          {% endif %}
        </div>
      </div>
    </div>
  </div>

  {# ---------- Warn Seller modal ---------- #}
  {% if is_open and detail.seller_public_id %}
    <div class="modal fade" id="warnSellerModal" tabindex="-1" aria-labelledby="warnSellerLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered">
        <form class="modal-content" method="post" action="{{ url_for('admin.report_action', public_id=report.public_id) }}">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <input type="hidden" name="action" value="warn_seller">
          <div class="modal-header">
            <h2 class="modal-title h5" id="warnSellerLabel"><i class="bi bi-exclamation-triangle-fill text-warning me-2"></i>Warn {{ detail.seller_name }}</h2>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
            <p class="text-muted small">Sends an in-app warning to the seller (no email). This does not resolve the report.</p>
            <div class="mb-3">
              <label class="form-label small mb-1" for="warnReason">Reason <span class="text-muted">(optional)</span></label>
              <select id="warnReason" name="warn_reason" class="form-select">
                <option value="" selected>— Select a reason —</option>
                {% for value, label in warn_reasons %}
                  <option value="{{ label }}">{{ label }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="mb-1">
              <label class="form-label small mb-1" for="warnMessage">Custom message <span class="text-muted">(optional)</span></label>
              <textarea id="warnMessage" name="warn_message" class="form-control" rows="4"
                        maxlength="400" placeholder="Your listing has been reported for violating CampusCart guidelines. Please review your listing. Repeated violations may result in account restrictions."></textarea>
              <div class="form-text">Leave blank to send the standard warning message.</div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
            <button type="submit" class="btn btn-warning"><i class="bi bi-send me-1"></i> Send Warning</button>
          </div>
        </form>
      </div>
    </div>
  {% endif %}
</div>
{% endblock %}

{% block scripts %}
<script>
  // Conversation history: start at the latest message, with explicit controls to
  // jump to the beginning or back to the latest. Read-only panel — no reply UI.
  (function () {
    var panel = document.querySelector("[data-convo-scroll]");
    if (!panel) return;
    panel.scrollTop = panel.scrollHeight;
    var top = document.querySelector("[data-convo-top]");
    var bottom = document.querySelector("[data-convo-bottom]");
    if (top) top.addEventListener("click", function () { panel.scrollTo({ top: 0, behavior: "smooth" }); });
    if (bottom) bottom.addEventListener("click", function () { panel.scrollTo({ top: panel.scrollHeight, behavior: "smooth" }); });
  })();
</script>
{% endblock %}