{% extends "layout/base.html" %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-3">
  <div>
    <h2 class="mb-1">{{ item.title }}</h2>
    <div class="text-muted" style="font-size: 0.9rem;">
      {% if item.item_type == 'bug' %}
        <span class="badge text-bg-danger">Bug</span>
      {% else %}
        <span class="badge text-bg-primary">Feature</span>
      {% endif %}
      {% if item.status == 'resolved' %}
        <span class="badge text-bg-success">Resolved</span>
      {% else %}
        <span class="badge text-bg-warning">Open</span>
      {% endif %}
      {% if item.deleted_at %}
        <span class="badge text-bg-dark">Deleted</span>
      {% endif %}
      <span class="ms-2">by {{ created_by_name }}</span>
    </div>
  </div>
  <a class="btn btn-outline-secondary" href="{{ url_for('main.feedback_page') }}">Back</a>
</div>

<div class="row g-3">
  <div class="col-12 col-lg-8">
    <div class="card">
      <div class="card-body">
        {% if item.component %}
          <div class="mb-2"><strong>Component:</strong> {{ item.component }}</div>
        {% endif %}
        <div style="white-space: pre-wrap;">{{ item.description }}</div>

        {% if item_attachments %}
          <div class="mt-3">
            <strong>Screenshots:</strong>
            <div class="d-flex flex-wrap gap-2 mt-2">
              {% for att in item_attachments %}
                <a href="{{ url_for('main.feedback_attachment', attachment_id=att.id) }}" target="_blank">
                  <img src="{{ url_for('main.feedback_attachment', attachment_id=att.id) }}"
                       alt="{{ att.filename }}"
                       class="img-thumbnail"
                       style="max-height: 200px; max-width: 300px; cursor: pointer;"
                       title="Click to view full size" />
                </a>
              {% endfor %}
            </div>
          </div>
        {% endif %}
      </div>
      <div class="card-footer d-flex justify-content-between align-items-center">
        <div class="text-muted" style="font-size: 0.9rem;">
          Created {{ item.created_at|local_datetime }}
          <span class="mx-1">•</span>
          Updated {{ item.updated_at|local_datetime }}
          {% if item.status == 'resolved' and item.resolved_at %}
            <span class="mx-1">•</span>
            Resolved {{ item.resolved_at|local_datetime }}{% if resolved_by_name %} by {{ resolved_by_name }}{% endif %}
          {% endif %}
        </div>
        <form method="post" action="{{ url_for('main.feedback_vote', item_id=item.id) }}">
          <button type="submit" class="btn btn-sm {% if user_voted %}btn-success{% else %}btn-outline-secondary{% endif %}">
            + {{ vote_count }}
          </button>
        </form>
      </div>
    </div>
  </div>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title mb-3">Replies</h5>
        {% if replies %}
          <div class="list-group list-group-flush">
            {% for r in replies %}
              <div class="list-group-item px-0">
                <div class="d-flex justify-content-between align-items-start">
                  <strong>{{ reply_user_map.get(r.user_id, '') or ('User #' ~ r.user_id) }}</strong>
                  <span class="text-muted" style="font-size: 0.85rem;">
                    {{ r.created_at|local_datetime('%d-%m-%Y %H:%M:%S') if r.created_at else '' }}
                  </span>
                </div>
                <div style="white-space: pre-wrap;">{{ r.message }}</div>

                {% if r.id in reply_attachments_map %}
                  <div class="mt-2">
                    <div class="d-flex flex-wrap gap-2">
                      {% for att in reply_attachments_map[r.id] %}
                        <a href="{{ url_for('main.feedback_attachment', attachment_id=att.id) }}" target="_blank">
                          <img src="{{ url_for('main.feedback_attachment', attachment_id=att.id) }}"
                               alt="{{ att.filename }}"
                               class="img-thumbnail"
                               style="max-height: 150px; max-width: 200px; cursor: pointer;"
                               title="Click to view full size" />
                        </a>
                      {% endfor %}
                    </div>
                  </div>
                {% endif %}
              </div>
            {% endfor %}
          </div>
        {% else %}
          <div class="text-muted">No replies yet.</div>
        {% endif %}
      </div>
    </div>

    <div class="card mb-3">
      <div class="card-body">
        <h5 class="card-title mb-3">Add reply</h5>
        {% if item.status == 'open' %}
          <form method="post" action="{{ url_for('main.feedback_reply', item_id=item.id) }}" enctype="multipart/form-data">
            <div class="mb-2">
              <textarea class="form-control" name="message" rows="4" required></textarea>
            </div>
            <div class="mb-2">
              <label class="form-label">Screenshots (optional)</label>
              <input type="file" name="screenshots" class="form-control" multiple accept="image/png,image/jpeg,image/jpg,image/gif,image/webp" />
              <div class="form-text">You can attach multiple screenshots (PNG, JPG, GIF, WEBP, max 5MB each)</div>
            </div>
            <button type="submit" class="btn btn-primary">Post reply</button>
          </form>
        {% else %}
          <div class="text-muted">Replies can only be added while the item is open.</div>
        {% endif %}
      </div>
    </div>


  <div class="col-12 col-lg-4">
    <div class="card">
      <div class="card-body">
        <h2 class="h6">Actions</h2>

        {% if active_role == 'admin' %}
          {% if item.deleted_at %}
            {# Item is deleted - show permanent delete option #}
            <div class="alert alert-warning mb-2" style="font-size: 0.9rem;">
              This item is deleted.
            </div>
            <form method="post" action="{{ url_for('main.feedback_permanent_delete', item_id=item.id) }}" onsubmit="return confirm('Permanently delete this item and all screenshots? This cannot be undone!');">
              <button type="submit" class="btn btn-danger w-100">Permanent Delete</button>
            </form>
          {% else %}
            {# Item is not deleted - show normal actions #}
            {% if item.status == 'resolved' %}
            <form method="post" action="{{ url_for('main.feedback_resolve', item_id=item.id) }}" class="mb-2">
              <input type="hidden" name="action" value="reopen" />
              <button type="submit" class="btn btn-outline-secondary w-100">Reopen</button>
            </form>
            {% else %}
            <form method="post" action="{{ url_for('main.feedback_resolve', item_id=item.id) }}" class="mb-2">
              <input type="hidden" name="action" value="resolve" />
              <button type="submit" class="btn btn-success w-100">Mark as resolved</button>
            </form>
            {% endif %}

            <form method="post" action="{{ url_for('main.feedback_delete', item_id=item.id) }}" onsubmit="return confirm('Delete this item?');">
              <button type="submit" class="btn btn-danger w-100">Delete</button>
            </form>
          {% endif %}
        {% else %}
          <div class="text-muted">Only administrators can resolve or delete items.</div>
        {% endif %}
      </div>
    </div>
  </div>
</div>
{% endblock %}