{% extends "base.html" %}
{% block title %}Satisfaction Report{% endblock %}
{% block page_title %}Satisfaction Report{% endblock %}

{% block content %}

<!-- KPI row -->
<div class="row g-3 mb-4">
  <div class="col-sm-4">
    <div class="stat-card">
      <div class="stat-icon" style="background:rgba(251,191,36,.1);color:#f59e0b;">
        <i class="bi bi-star-fill"></i>
      </div>
      <div>
        <div class="stat-value">
          {% if avg_rating %}{{ avg_rating }} <span style="font-size:16px;">/ 5</span>{% else %}—{% endif %}
        </div>
        <div class="stat-label">Average Rating</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="stat-card">
      <div class="stat-icon" style="background:rgba(37,99,235,.1);color:var(--accent);">
        <i class="bi bi-clipboard-check"></i>
      </div>
      <div>
        <div class="stat-value">{{ total }}</div>
        <div class="stat-label">Responses Received</div>
      </div>
    </div>
  </div>
  <div class="col-sm-4">
    <div class="stat-card">
      <div class="stat-icon" style="background:rgba(100,116,139,.1);color:var(--muted);">
        <i class="bi bi-hourglass-split"></i>
      </div>
      <div>
        <div class="stat-value">{{ pending }}</div>
        <div class="stat-label">Awaiting Response</div>
      </div>
    </div>
  </div>
</div>

<!-- Rating distribution -->
{% if total %}
<div class="card mb-4">
  <div class="card-header"><i class="bi bi-bar-chart-fill me-2"></i>Rating Distribution</div>
  <div class="card-body">
    {% for star in [5,4,3,2,1] %}
    {% set count = dist[star] %}
    {% set pct = ((count / total) * 100)|round(1) if total else 0 %}
    <div class="d-flex align-items-center gap-3 mb-2">
      <div style="width:60px;text-align:right;font-size:13px;font-weight:600;color:var(--text2);flex-shrink:0;">
        {{ star }} ★
      </div>
      <div style="flex:1;background:var(--surface2);border-radius:4px;height:18px;overflow:hidden;">
        <div style="width:{{ pct }}%;height:100%;background:{% if star >= 4 %}var(--success){% elif star == 3 %}var(--warning){% else %}var(--danger){% endif %};border-radius:4px;transition:width .4s;"></div>
      </div>
      <div style="width:70px;font-size:12px;color:var(--muted);font-family:'Space Mono',monospace;">
        {{ count }} ({{ pct }}%)
      </div>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

<!-- Individual responses -->
<div class="card">
  <div class="card-header"><i class="bi bi-chat-square-text me-2"></i>Individual Responses</div>
  <div class="card-body p-0">
    {% if surveys %}
    <table class="table mb-0">
      <thead>
        <tr>
          <th>Ticket</th>
          <th>Submitted By</th>
          <th>Rating</th>
          <th>Comment</th>
          <th>Submitted</th>
        </tr>
      </thead>
      <tbody>
        {% for s in surveys %}
        <tr>
          <td>
            <a href="{{ url_for('tickets.ticket_detail', ticket_id=s.ticket_id) }}"
               class="mono" style="font-size:11px;color:var(--accent3);">
              {{ s.ticket.ticket_number }}
            </a>
            <div style="font-size:12px;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
              {{ s.ticket.title }}
            </div>
          </td>
          <td style="font-size:13px;">{{ s.user.full_name }}</td>
          <td>
            <span style="font-size:18px;color:#f59e0b;">
              {% for i in range(s.rating) %}★{% endfor %}{% for i in range(5 - s.rating) %}<span style="color:var(--border2);">★</span>{% endfor %}
            </span>
          </td>
          <td style="font-size:12px;color:var(--muted);max-width:220px;">
            {{ s.comment or '—' }}
          </td>
          <td style="font-size:11px;color:var(--muted);">
            {{ s.submitted_at | localtime("%b %d, %Y") }}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}
    <div class="p-5 text-center" style="color:var(--muted);">
      <i class="bi bi-star" style="font-size:40px;display:block;margin-bottom:12px;"></i>
      No satisfaction responses yet. Surveys are sent automatically when tickets are resolved.
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}