<%- include("partials/layout-top", { title }) %>
<section class="card">
  <%- include("partials/page-header", {
    eyebrow: "Community",
    pageTitle: "Feedback",
    description: "Submit one clear report per issue and track your own feedback."
  }) %>
  <div class="feedback-page-actions">
    <button type="button" class="button" data-feedback-open data-feedback-scope="page">Send feedback</button>
    <p class="hint">Small, specific reports are easier to review than broad combined lists.</p>
  </div>
</section>

<section class="card feedback-notification-summary">
  <h2>Your feedback notifications</h2>
  <div class="feedback-badge-row">
    <span class="feedback-status-pill solved">Solved <strong><%= feedbackNotifications.solved || 0 %></strong></span>
    <span class="feedback-status-pill needs-context">Needs more context <strong><%= feedbackNotifications.needs_context || 0 %></strong></span>
    <span class="feedback-status-pill not-worked">Not being worked on <strong><%= feedbackNotifications.not_worked || 0 %></strong></span>
  </div>
  <p class="hint">Opening this page marks current feedback updates as viewed.</p>
</section>

<section class="card">
  <h2>My feedback</h2>
  <% if (!myFeedback.length) { %>
  <div class="empty-state">You have not submitted feedback yet.</div>
  <% } else { %>
  <div class="feedback-list">
    <% myFeedback.forEach((item) => { %>
    <article class="feedback-row <%= selectedFeedback && selectedFeedback.id === item.id ? 'is-selected' : '' %>">
      <div>
        <h3><a href="/feedback?id=<%= encodeURIComponent(item.id) %>"><%= item.summary %></a></h3>
        <p class="hint"><%= item.category_label %> · <%= item.scope_label_display %> · <%= new Date(item.updated_at).toLocaleString() %></p>
      </div>
      <span class="status-indicator feedback-status-<%= item.status %>" title="<%= item.status_help %>"><%= item.status_label %></span>
    </article>
    <% }) %>
  </div>
  <% } %>
</section>

<% if (selectedFeedback) { %>
<section class="card feedback-detail">
  <div class="section-header">
    <div>
      <h2><%= selectedFeedback.summary %></h2>
      <p class="hint"><%= selectedFeedback.status_label %>: <%= selectedFeedback.status_help %></p>
    </div>
    <span class="status-indicator feedback-status-<%= selectedFeedback.status %>"><%= selectedFeedback.status_label %></span>
  </div>
  <div class="feedback-detail-grid">
    <div><span>Category</span><strong><%= selectedFeedback.category_label %></strong></div>
    <div><span>Severity</span><strong><%= selectedFeedback.severity_label %></strong></div>
    <div><span>Scope</span><strong><%= selectedFeedback.scope_label_display %></strong></div>
    <div><span>Submitted</span><strong><%= new Date(selectedFeedback.created_at).toLocaleString() %></strong></div>
  </div>
  <% if (selectedFeedback.merged_into) { %>
  <div class="callout info">
    <strong>This report was merged</strong>
    <p><%= selectedFeedback.merged_into.reason || "It describes the same issue as another report." %></p>
    <a class="button subtle" href="/feedback?id=<%= encodeURIComponent(selectedFeedback.merged_into.id) %>">Open the main report: <%= selectedFeedback.merged_into.summary %></a>
  </div>
  <% } %>
  <% if (selectedFeedback.merged_sources && selectedFeedback.merged_sources.length) { %>
  <details class="feedback-metadata">
    <summary><%= selectedFeedback.merged_sources.length %> related report(s) merged here · <%= selectedFeedback.reporter_count %> distinct reporter(s)</summary>
    <% selectedFeedback.merged_sources.forEach((source) => { %>
    <article class="feedback-copy-block">
      <strong><%= source.summary %></strong>
      <p><%= source.description %></p>
      <% source.comments.forEach((comment) => { %><p class="hint"><%= comment.kind_label %>: <%= comment.body %></p><% }) %>
    </article>
    <% }) %>
  </details>
  <% } %>
  <% if (!selectedFeedback.is_mine) { %>
  <div class="callout info"><strong>Public feedback</strong><p>You can mark that this affects you too or add public context without seeing private diagnostics or attachments.</p></div>
  <% } %>
  <div class="feedback-copy-block">
    <strong>Description</strong>
    <p><%= selectedFeedback.description %></p>
  </div>
  <% if (selectedFeedback.steps_to_reproduce) { %>
  <div class="feedback-copy-block"><strong>Steps to reproduce</strong><p><%= selectedFeedback.steps_to_reproduce %></p></div>
  <% } %>
  <% if (selectedFeedback.expected_behavior || selectedFeedback.actual_behavior) { %>
  <div class="feedback-two-col">
    <div class="feedback-copy-block"><strong>Expected</strong><p><%= selectedFeedback.expected_behavior || "-" %></p></div>
    <div class="feedback-copy-block"><strong>Actual</strong><p><%= selectedFeedback.actual_behavior || "-" %></p></div>
  </div>
  <% } %>
  <% if (selectedFeedback.admin_reply) { %>
  <div class="callout success"><strong>Admin reply</strong><p><%= selectedFeedback.admin_reply %></p></div>
  <% } %>
  <% if (selectedFeedback.screenshot) { %>
  <div class="feedback-copy-block">
    <strong>Attached screenshot</strong>
    <p><a class="button subtle" href="/feedback/<%= selectedFeedback.id %>/screenshot" target="_blank" rel="noopener">Open screenshot</a></p>
  </div>
  <% } %>
  <% if (selectedFeedback.attachments && selectedFeedback.attachments.length) { %>
  <div class="feedback-copy-block">
    <strong>Attachments</strong>
    <div class="feedback-attachment-list">
      <% selectedFeedback.attachments.forEach((attachment) => { %>
      <a class="button subtle" href="/feedback/<%= selectedFeedback.id %>/attachments/<%= attachment.id %>"><%= attachment.original_name %> (<%= Math.max(1, Math.round((attachment.size || 0) / 1024)) %> KB)</a>
      <% }) %>
    </div>
  </div>
  <% } %>
  <h3>Conversation</h3>
  <% if (!selectedFeedback.comments.length) { %>
  <p class="hint">No comments yet.</p>
  <% } else { %>
  <div class="feedback-comments">
    <% selectedFeedback.comments.forEach((comment) => { %>
    <article class="feedback-comment feedback-comment-<%= comment.kind %>">
      <strong><%= comment.kind_label %></strong>
      <p><%= comment.body %></p>
      <span class="hint"><%= comment.actor_name || "User" %> · <%= new Date(comment.created_at).toLocaleString() %></span>
    </article>
    <% }) %>
  </div>
  <% } %>
  <% if (!selectedFeedback.merged_into && !selectedFeedback.is_mine && !selectedFeedback.supported_by_me) { %>
  <form method="post" action="/feedback/<%= selectedFeedback.id %>/support" class="inline-form">
    <button type="submit" class="button subtle">This affects me too</button>
  </form>
  <% } else if (selectedFeedback.supported_by_me) { %>
  <span class="hint">Marked as affecting you too.</span>
  <% } %>
  <% if (!selectedFeedback.merged_into) { %><form method="post" action="/feedback/<%= selectedFeedback.id %>/comment" class="form-grid">
    <div class="field full">
      <label><%= selectedFeedback.is_mine ? "Add more context" : "Add public context" %></label>
      <textarea name="comment" rows="4" required></textarea>
      <span class="hint"><%= selectedFeedback.is_mine ? "Use this when an admin asks for more detail or you have extra context." : "Use this when you have the same issue or can add useful public detail." %></span>
    </div>
    <div class="field full">
      <button type="submit" class="button">Add comment</button>
    </div>
  </form><% } %>
</section>
<% } %>

<section class="card">
  <h2>Community feedback overview</h2>
  <p class="hint">This list hides submitter identity and detailed diagnostics.</p>
  <% if (!feedbackList.length) { %>
  <div class="empty-state">No feedback has been submitted yet.</div>
  <% } else { %>
  <div class="table-wrap">
    <table class="table">
      <thead>
        <tr>
          <th>Summary</th>
          <th>Category</th>
          <th>Scope</th>
          <th>Status</th>
          <th>Updated</th>
        </tr>
      </thead>
      <tbody>
        <% feedbackList.forEach((item) => { %>
        <tr>
          <td>
            <%= item.summary %>
            <% if (item.is_mine) { %><span class="badge">Mine</span><% } %>
            <% if (item.support_count) { %><span class="badge"><%= item.support_count %> also affected</span><% } %>
          </td>
          <td><%= item.category_label %></td>
          <td><%= item.scope_label_display %></td>
          <td><span class="status-indicator feedback-status-<%= item.status %>"><%= item.status_label %></span></td>
          <td>
            <%= new Date(item.updated_at).toLocaleString() %>
            <% if (item.status !== "duplicate" && !item.is_mine && !item.supported_by_me) { %>
            <form method="post" action="/feedback/<%= item.id %>/support" class="inline-form">
              <button type="submit" class="button subtle">This affects me too</button>
            </form>
            <% } else if (item.supported_by_me) { %>
            <span class="hint">Marked as affecting you too.</span>
            <% } %>
          </td>
        </tr>
        <% }) %>
      </tbody>
    </table>
  </div>
  <% } %>
</section>
<%- include("partials/layout-bottom") %>
