{% extends "base.html" %}

{% block title %}Accounts{% endblock %}

{% block content %}
<div class="page-header">
  <h1>Tracked Accounts</h1>
  <span class="badge">{{ total | format_number }} total</span>
</div>

{# ── Search bar ──────────────────────────────────────────────────────── #}
<form method="get" action="{{ url_for('accounts.index') }}" class="search-form">
  {# Preserve current sort parameters #}
  <input type="hidden" name="sort" value="{{ sort }}">
  <input type="hidden" name="dir" value="{{ direction }}">
  <div class="search-row">
    <input
      type="text"
      name="search"
      value="{{ search }}"
      placeholder="Search by handle..."
      class="search-input"
      aria-label="Search accounts"
    >
    <button type="submit" class="btn btn-primary">Search</button>
    {% if search %}
      <a href="{{ url_for('accounts.index', sort=sort, dir=direction) }}" class="btn btn-secondary">Clear</a>
    {% endif %}
  </div>
</form>

{# ── Sortable column header macro ────────────────────────────────────── #}
{% macro sort_header(col, label) %}
  {% set new_dir = 'desc' if (sort == col and direction == 'asc') else 'asc' %}
  <a href="{{ url_for('accounts.index', search=search, sort=col, dir=new_dir, page=1) }}" class="sort-link{% if sort == col %} active{% endif %}">
    {{ label }}
    {% if sort == col %}
      <span class="sort-arrow">{% if direction == 'asc' %}&#9650;{% else %}&#9660;{% endif %}</span>
    {% endif %}
  </a>
{% endmacro %}

{# ── Accounts table ──────────────────────────────────────────────────── #}
{% if accounts %}
<div class="table-wrap">
  <table class="data-table">
    <thead>
      <tr>
        <th>{{ sort_header('handle', 'Handle') }}</th>
        <th class="num">{{ sort_header('posts', 'Posts') }}</th>
        <th class="num">{{ sort_header('mentions', 'Mentions') }}</th>
        <th>{{ sort_header('last_feed', 'Last Feed') }}</th>
        <th>{{ sort_header('last_mention', 'Last Mention') }}</th>
      </tr>
    </thead>
    <tbody>
      {% for acct in accounts %}
      <tr>
        <td class="handle-cell">
          <a href="https://bsky.app/profile/{{ acct.handle }}" target="_blank" rel="noopener" class="handle-link">
            @{{ acct.handle }}
          </a>
          {% if acct.display_name %}
            <span class="display-name">{{ acct.display_name | truncate_text }}</span>
          {% endif %}
        </td>
        <td class="num">
          <a href="{{ url_for('statuses.index', account=acct.did) }}" class="count-link">
            {{ acct.post_count | format_number }}
          </a>
        </td>
        <td class="num">
          <a href="{{ url_for('mentions.index', account=acct.did) }}" class="count-link">
            {{ acct.mention_count | format_number }}
          </a>
        </td>
        <td title="{{ acct.last_feed_collected | format_dt }}">
          {{ acct.last_feed_collected | time_ago }}
        </td>
        <td title="{{ acct.last_mention_collected | format_dt }}">
          {{ acct.last_mention_collected | time_ago }}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="empty-state">
  {% if search %}
    <p>No accounts found matching "{{ search }}".</p>
  {% else %}
    <p>No tracked accounts yet.</p>
  {% endif %}
</div>
{% endif %}

{# ── Pagination ──────────────────────────────────────────────────────── #}
{% if total_pages > 1 %}
<nav class="pagination" aria-label="Page navigation">
  {# Previous button #}
  {% if page > 1 %}
    <a href="{{ url_for('accounts.index', search=search, sort=sort, dir=direction, page=page - 1) }}" class="page-link">&laquo; Previous</a>
  {% else %}
    <span class="page-link disabled">&laquo; Previous</span>
  {% endif %}

  {# Page numbers #}
  {% set start_page = [1, page - 2] | max %}
  {% set end_page = [total_pages, page + 2] | min %}

  {% if start_page > 1 %}
    <a href="{{ url_for('accounts.index', search=search, sort=sort, dir=direction, page=1) }}" class="page-link">1</a>
    {% if start_page > 2 %}
      <span class="page-ellipsis">&hellip;</span>
    {% endif %}
  {% endif %}

  {% for p in range(start_page, end_page + 1) %}
    {% if p == page %}
      <span class="page-link current">{{ p }}</span>
    {% else %}
      <a href="{{ url_for('accounts.index', search=search, sort=sort, dir=direction, page=p) }}" class="page-link">{{ p }}</a>
    {% endif %}
  {% endfor %}

  {% if end_page < total_pages %}
    {% if end_page < total_pages - 1 %}
      <span class="page-ellipsis">&hellip;</span>
    {% endif %}
    <a href="{{ url_for('accounts.index', search=search, sort=sort, dir=direction, page=total_pages) }}" class="page-link">{{ total_pages }}</a>
  {% endif %}

  {# Next button #}
  {% if page < total_pages %}
    <a href="{{ url_for('accounts.index', search=search, sort=sort, dir=direction, page=page + 1) }}" class="page-link">Next &raquo;</a>
  {% else %}
    <span class="page-link disabled">Next &raquo;</span>
  {% endif %}
</nav>
{% endif %}
{% endblock %}

{% block extra_css %}
<style>
  .page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
  }
  .page-header h1 {
    margin: 0;
    font-size: 1.5rem;
  }
  .badge {
    background: #0f3460;
    color: #00b4d8;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
  }

  /* Search */
  .search-form {
    margin-bottom: 1.5rem;
  }
  .search-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
  }
  .search-input {
    flex: 1;
    max-width: 400px;
    padding: 0.5rem 0.75rem;
    border: 1px solid #2a2a4a;
    border-radius: 0.375rem;
    background: #1a1a2e;
    color: #e0e0e0;
    font-size: 0.95rem;
  }
  .search-input::placeholder {
    color: #666;
  }
  .search-input:focus {
    outline: none;
    border-color: #00b4d8;
    box-shadow: 0 0 0 2px rgba(0, 180, 216, 0.2);
  }
  .btn {
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
  }
  .btn-primary {
    background: #00b4d8;
    color: #1a1a2e;
    font-weight: 600;
  }
  .btn-primary:hover {
    background: #0096b7;
  }
  .btn-secondary {
    background: #2a2a4a;
    color: #e0e0e0;
  }
  .btn-secondary:hover {
    background: #3a3a5a;
  }

  /* Table */
  .table-wrap {
    overflow-x: auto;
    border-radius: 0.5rem;
    background: #16213e;
    border: 1px solid #2a2a4a;
  }
  .data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }
  .data-table thead {
    background: #0f3460;
  }
  .data-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    color: #e0e0e0;
  }
  .data-table th.num {
    text-align: right;
  }
  .data-table td {
    padding: 0.6rem 1rem;
    border-top: 1px solid #2a2a4a;
    color: #e0e0e0;
  }
  .data-table td.num {
    text-align: right;
  }
  .data-table tbody tr:hover {
    background: rgba(0, 180, 216, 0.05);
  }

  /* Sort links */
  .sort-link {
    color: #e0e0e0;
    text-decoration: none;
    white-space: nowrap;
  }
  .sort-link:hover {
    color: #00b4d8;
  }
  .sort-link.active {
    color: #00b4d8;
  }
  .sort-arrow {
    font-size: 0.7rem;
    margin-left: 0.25rem;
  }

  /* Handle cell */
  .handle-cell {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
  }
  .handle-link {
    color: #00b4d8;
    text-decoration: none;
    font-weight: 500;
  }
  .handle-link:hover {
    text-decoration: underline;
  }
  .display-name {
    font-size: 0.8rem;
    color: #888;
  }

  /* Count links */
  .count-link {
    color: #e0e0e0;
    text-decoration: none;
  }
  .count-link:hover {
    color: #00b4d8;
    text-decoration: underline;
  }

  /* Empty state */
  .empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
    background: #16213e;
    border-radius: 0.5rem;
    border: 1px solid #2a2a4a;
  }

  /* Pagination */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.25rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
  }
  .page-link {
    padding: 0.4rem 0.75rem;
    border-radius: 0.375rem;
    background: #16213e;
    color: #e0e0e0;
    text-decoration: none;
    font-size: 0.9rem;
    border: 1px solid #2a2a4a;
    transition: background 0.15s, color 0.15s;
  }
  .page-link:hover:not(.disabled):not(.current) {
    background: #0f3460;
    color: #00b4d8;
    border-color: #00b4d8;
  }
  .page-link.current {
    background: #00b4d8;
    color: #1a1a2e;
    font-weight: 600;
    border-color: #00b4d8;
  }
  .page-link.disabled {
    color: #555;
    cursor: default;
    opacity: 0.5;
  }
  .page-ellipsis {
    padding: 0.4rem 0.25rem;
    color: #888;
  }
</style>
{% endblock %}