{% extends "base.html" %}

{% block title %}Flagged Content{% endblock %}

{% block content %}
<div class="flagged-container">
  <!-- Page Header -->
  <div class="page-header">
    <h1>Flagged Content</h1>
    <span class="total-badge">{{ total | format_number }}</span>
  </div>

  <!-- Filter Bar -->
  <div class="filter-bar">
    <form method="get" action="{{ url_for('analysis.flagged') }}" class="filter-form">
      <div class="filter-group">
        <label for="content-type">Type:</label>
        <select id="content-type" name="content_type" class="filter-select">
          <option value="">All Types</option>
          <option value="post" {% if content_type == 'post' %}selected{% endif %}>Post</option>
          <option value="reply" {% if content_type == 'reply' %}selected{% endif %}>Reply</option>
          <option value="mention" {% if content_type == 'mention' %}selected{% endif %}>Mention</option>
        </select>
      </div>

      <div class="filter-group">
        <label for="category">Category:</label>
        <select id="category" name="category" class="filter-select">
          <option value="">All Categories</option>
          {% for cat in categories %}
          <option value="{{ cat }}" {% if category == cat %}selected{% endif %}>{{ cat }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-group">
        <label for="account-did">Account:</label>
        <select id="account-did" name="account_did" class="filter-select">
          <option value="">All Accounts</option>
          {% for acc in accounts %}
          <option value="{{ acc.did }}" {% if account_did == acc.did %}selected{% endif %}>{{ acc.handle }}</option>
          {% endfor %}
        </select>
      </div>

      <div class="filter-group">
        <label for="threshold">Threshold:</label>
        <input type="number" id="threshold" name="threshold" min="0.0" max="1.0" step="0.1" value="{{ threshold or 0.5 }}" class="filter-input" placeholder="0.5">
      </div>

      <button type="submit" class="btn-apply">Apply Filters</button>
    </form>
  </div>

  <!-- Content Table -->
  {% if items %}
  <div class="table-wrapper">
    <table class="flagged-table">
      <thead>
        <tr>
          <th>Type</th>
          <th>Author</th>
          <th>Content</th>
          <th>Score</th>
          <th>Category</th>
          <th>Created</th>
        </tr>
      </thead>
      <tbody>
        {% for item in items %}
        <tr class="item-row">
          <!-- Type Badge -->
          <td class="col-type">
            <span class="badge badge-{{ item.item_type }}">
              {% if item.item_type == 'post' %}
                Post
              {% elif item.item_type == 'reply' %}
                Reply
              {% elif item.item_type == 'mention' %}
                Mention
              {% endif %}
            </span>
          </td>

          <!-- Author -->
          <td class="col-author">
            {% if item.author_handle %}
            <a href="https://bsky.app/profile/{{ item.author_handle }}" target="_blank" rel="noopener" class="author-link">
              @{{ item.author_handle }}
            </a>
            {% else %}
            <span class="author-did" title="{{ item.author_did }}">{{ item.author_did[:30] }}…</span>
            {% endif %}
            {% if item.item_type == 'mention' and item.mentioned_handle %}
            <span class="mention-arrow">→</span>
            <a href="https://bsky.app/profile/{{ item.mentioned_handle }}" target="_blank" rel="noopener" class="author-link">
              @{{ item.mentioned_handle }}
            </a>
            {% endif %}
          </td>

          <!-- Content Text -->
          <td class="col-text">
            {% if item.source_type == 'post' %}
            <a href="{{ url_for('statuses.detail', encoded_uri=encode_uri(item.item_id)) }}" class="content-link">
              {{ item.text | truncate_text(200) }}
            </a>
            {% else %}
            <span class="content-text">{{ item.text | truncate_text(200) }}</span>
            {% endif %}
          </td>

          <!-- Score with Bar -->
          <td class="col-score">
            <div class="score-bar-container">
              {% set score_pct = (item.overall * 100) | int %}
              {% if item.overall < 0.3 %}
                {% set bar_class = 'score-bar-low' %}
              {% elif item.overall < 0.6 %}
                {% set bar_class = 'score-bar-medium' %}
              {% else %}
                {% set bar_class = 'score-bar-high' %}
              {% endif %}
              <div class="score-bar {{ bar_class }}" style="width: {{ score_pct }}%"></div>
              <span class="score-number">{{ "%.2f" | format(item.overall) }}</span>
            </div>
          </td>

          <!-- Top Category -->
          <td class="col-category">
            {% if item.top_category %}
            <span class="badge badge-category">{{ item.top_category }}</span>
            {% else %}
            <span class="text-muted">—</span>
            {% endif %}
          </td>

          <!-- Created Time -->
          <td class="col-created">
            <span class="time-ago" title="{{ item.created_at }}">
              {{ item.created_at | time_ago }}
            </span>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- Pagination -->
  {% if total_pages > 1 %}
  <div class="pagination">
    {% if page > 1 %}
    <a href="{{ url_for('analysis.flagged', page=1, content_type=content_type, category=category, account_did=account_did, threshold=threshold) }}" class="btn-pagination">First</a>
    <a href="{{ url_for('analysis.flagged', page=page-1, content_type=content_type, category=category, account_did=account_did, threshold=threshold) }}" class="btn-pagination">Previous</a>
    {% endif %}

    <span class="pagination-info">Page {{ page }} of {{ total_pages }}</span>

    {% if page < total_pages %}
    <a href="{{ url_for('analysis.flagged', page=page+1, content_type=content_type, category=category, account_did=account_did, threshold=threshold) }}" class="btn-pagination">Next</a>
    <a href="{{ url_for('analysis.flagged', page=total_pages, content_type=content_type, category=category, account_did=account_did, threshold=threshold) }}" class="btn-pagination">Last</a>
    {% endif %}
  </div>
  {% endif %}

  {% else %}
  <!-- Empty State -->
  <div class="empty-state">
    <p class="empty-icon">∅</p>
    <p class="empty-text">No flagged content found</p>
    <p class="empty-subtext">Try adjusting your filters or threshold</p>
  </div>
  {% endif %}
</div>
{% endblock %}

{% block extra_css %}
<style>
  :root {
    --dark-bg: #1a1a2e;
    --dark-card: #16213e;
    --dark-nav: #0f3460;
    --dark-text: #e0e0e0;
    --accent-primary: #00b4d8;
    --badge-post: #00b4d8;
    --badge-reply: #9b59b6;
    --badge-mention: #2ecc71;
    --tox-low: #2ecc71;
    --tox-medium: #f39c12;
    --tox-high: #e74c3c;
  }

  .flagged-container {
    padding: 2rem;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Page Header */
  .page-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .page-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--dark-text);
    margin: 0;
  }

  .total-badge {
    background: var(--accent-primary);
    color: var(--dark-bg);
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.9rem;
  }

  /* Filter Bar */
  .filter-bar {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
  }

  .filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 150px;
  }

  .filter-group label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark-text);
  }

  .filter-select,
  .filter-input {
    background: var(--dark-bg);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.375rem;
    color: var(--dark-text);
    padding: 0.625rem;
    font-size: 0.9rem;
    font-family: inherit;
  }

  .filter-select:hover,
  .filter-input:hover {
    border-color: rgba(255, 255, 255, 0.3);
  }

  .filter-select:focus,
  .filter-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    background: var(--dark-bg);
    color: var(--dark-text);
  }

  .btn-apply {
    background: var(--accent-primary);
    color: var(--dark-bg);
    border: none;
    border-radius: 0.375rem;
    padding: 0.625rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s ease;
  }

  .btn-apply:hover {
    opacity: 0.9;
    transform: translateY(-1px);
  }

  .btn-apply:active {
    transform: translateY(0);
  }

  /* Table Wrapper */
  .table-wrapper {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    overflow-x: auto;
    margin-bottom: 2rem;
  }

  /* Table Styles */
  .flagged-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

  .flagged-table thead {
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  }

  .flagged-table th {
    padding: 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--dark-text);
    white-space: nowrap;
  }

  .flagged-table td {
    padding: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--dark-text);
  }

  .flagged-table tbody tr:hover {
    background: rgba(0, 180, 216, 0.05);
  }

  /* Column Styles */
  .col-type {
    width: 90px;
  }

  .col-author {
    width: 200px;
  }

  .col-text {
    min-width: 300px;
  }

  .col-score {
    width: 150px;
  }

  .col-category {
    width: 140px;
  }

  .col-created {
    width: 120px;
  }

  /* Badges */
  .badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .badge-post {
    background: rgba(0, 180, 216, 0.2);
    color: var(--badge-post);
  }

  .badge-reply {
    background: rgba(155, 89, 182, 0.2);
    color: var(--badge-reply);
  }

  .badge-mention {
    background: rgba(46, 204, 113, 0.2);
    color: var(--badge-mention);
  }

  .badge-category {
    background: rgba(0, 180, 216, 0.15);
    color: var(--accent-primary);
  }

  /* Author Links */
  .author-link {
    color: var(--accent-primary);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .author-link:hover {
    color: rgba(0, 180, 216, 0.8);
    text-decoration: underline;
  }

  .mention-arrow {
    color: rgba(255, 255, 255, 0.3);
    margin: 0 0.5rem;
  }

  /* Content Link */
  .content-link {
    color: var(--dark-text);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  .content-link:hover {
    color: var(--accent-primary);
  }

  .content-text {
    color: rgba(255, 255, 255, 0.7);
  }

  /* Score Bar */
  .score-bar-container {
    position: relative;
    height: 30px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0.25rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
  }

  .score-bar {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    transition: width 0.3s ease;
  }

  .score-bar-low {
    background: linear-gradient(90deg, rgba(46, 204, 113, 0.3), rgba(46, 204, 113, 0.5));
  }

  .score-bar-medium {
    background: linear-gradient(90deg, rgba(243, 156, 18, 0.3), rgba(243, 156, 18, 0.5));
  }

  .score-bar-high {
    background: linear-gradient(90deg, rgba(231, 76, 60, 0.3), rgba(231, 76, 60, 0.5));
  }

  .score-number {
    position: relative;
    z-index: 1;
    font-weight: 600;
    color: var(--dark-text);
    font-size: 0.85rem;
  }

  /* Time Ago */
  .time-ago {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    cursor: help;
  }

  .time-ago:hover {
    color: var(--dark-text);
  }

  .text-muted {
    color: rgba(255, 255, 255, 0.3);
  }

  /* Empty State */
  .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--dark-card);
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 0.5rem;
  }

  .empty-icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.2);
    margin: 0 0 1rem 0;
  }

  .empty-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--dark-text);
    margin: 0 0 0.5rem 0;
  }

  .empty-subtext {
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
  }

  /* Pagination */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
  }

  .pagination-info {
    color: var(--dark-text);
    font-weight: 500;
    min-width: 150px;
    text-align: center;
  }

  .btn-pagination {
    background: var(--dark-card);
    color: var(--accent-primary);
    border: 1px solid var(--accent-primary);
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: pointer;
  }

  .btn-pagination:hover {
    background: var(--accent-primary);
    color: var(--dark-bg);
  }

  .btn-pagination:active {
    transform: scale(0.98);
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .filter-form {
      flex-direction: column;
    }

    .filter-group {
      width: 100%;
    }

    .col-text {
      min-width: 250px;
    }
  }

  @media (max-width: 768px) {
    .flagged-container {
      padding: 1rem;
    }

    .page-header {
      flex-direction: column;
      align-items: flex-start;
    }

    .page-header h1 {
      font-size: 1.5rem;
    }

    .table-wrapper {
      font-size: 0.8rem;
    }

    .flagged-table th,
    .flagged-table td {
      padding: 0.75rem 0.5rem;
    }

    .col-author,
    .col-text {
      min-width: 180px;
    }

    .col-created {
      width: 100px;
    }
  }
</style>
{% endblock %}