{% extends 'base.html' %}
{% block title %}Performance{% endblock %}
{% block page_title %}Post Performance{% endblock %}

{% block content %}
<div class="page-header" style="display:flex;align-items:center;justify-content:space-between">
  <div>
    <h1>Performance Analytics</h1>
    <p>View static reach and engagement for your published pages</p>
  </div>
  
  <form method="GET" action="{{ url_for('performance.index') }}" style="display:flex;gap:10px;align-items:center;">
    <select name="page_id" class="form-control" style="min-width:200px" onchange="this.form.submit()">
      <option value="">— Select a Page —</option>
      {% for p in pages %}
        <option value="{{ p.id }}" {% if selected_page_id == p.id %}selected{% endif %}>{{ p.page_name }}</option>
      {% endfor %}
    </select>
    {% if selected_page_id %}
    <button type="submit" class="btn btn-secondary" title="Refresh">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
    </button>
    {% endif %}
  </form>
</div>

{% if not selected_page_id %}
<div class="empty-state">
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg>
  <h3>Select a Page</h3>
  <p>Please select a Facebook page from the dropdown above to view its analytics and performance metrics.</p>
</div>
{% else %}

<div class="card" style="margin-bottom:20px">
  <div class="table-wrap">
    <table>
      <thead>
        <tr>
          <th>Published Date</th>
          <th>Page</th>
          <th>Post Content</th>
          <th>Reach</th>
          <th>Engagements</th>
          <th>Clicks</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for info in insights %}
        <tr>
          <td style="white-space:nowrap">{{ info.log.executed_at.strftime('%Y-%m-%d %H:%M') }}</td>
          <td>
            <div style="display:flex;align-items:center;gap:8px">
              <div class="page-avatar" style="width:24px;height:24px;font-size:0.6rem">
                {% if info.page.picture_url %}
                  <img src="{{ info.page.picture_url }}" />
                {% else %}
                  {{ info.page.page_name[0] }}
                {% endif %}
              </div>
              <span style="font-size:0.8rem;white-space:nowrap">{{ info.page.page_name }}</span>
            </div>
          </td>
          <td>
            <div style="max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-primary)">
              {{ info.post.title or info.post.content[:40] }}...
            </div>
          </td>
          <td>
            <div style="font-weight:700;color:var(--text-primary)">{{ "{:,}".format(info.reach) }}</div>
            <div class="progress" style="margin-top:6px;width:60px">
              <div class="progress-bar" style="width:100%;background:var(--accent-glow)"></div>
            </div>
          </td>
          <td>
            <div style="color:var(--text-primary)">{{ "{:,}".format(info.engagements) }}</div>
            <div style="font-size:0.7rem;color:var(--success)">
              {% if info.reach > 0 %}
                {{ "%.1f"|format(info.engagements / info.reach * 100) }}% rate
              {% else %}
                0.0% rate
              {% endif %}
            </div>
          </td>
           <td>
            <div style="color:var(--text-primary)">{{ "{:,}".format(info.clicks) }}</div>
          </td>
          <td>
            <a href="https://facebook.com/{{ info.log.fb_post_id }}" target="_blank" class="btn btn-secondary btn-sm">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
              View on FB
            </a>
          </td>
        </tr>
        {% else %}
        <tr>
          <td colspan="7" style="text-align:center;padding:32px 0;color:var(--text-muted)">
            <p>No published posts with valid Facebook IDs found.</p>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endif %}

{% if pagination and pagination.pages > 1 %}
<div style="display:flex;justify-content:center;gap:8px;margin-top:24px">
  {% if pagination.has_prev %}
    <a href="{{ url_for('performance.index', page=pagination.prev_num, page_id=selected_page_id) }}" class="btn btn-secondary">&laquo; Prev</a>
  {% else %}
    <button class="btn btn-secondary" disabled>&laquo; Prev</button>
  {% endif %}

  <div class="btn btn-secondary" style="pointer-events:none">
    Page {{ pagination.page }} of {{ pagination.pages }}
  </div>

  {% if pagination.has_next %}
    <a href="{{ url_for('performance.index', page=pagination.next_num, page_id=selected_page_id) }}" class="btn btn-secondary">Next &raquo;</a>
  {% else %}
    <button class="btn btn-secondary" disabled>Next &raquo;</button>
  {% endif %}
</div>
{% endif %}

{% endblock %}