{% extends "base.html" %}

{% block title %}Account Toxicity Analysis{% endblock %}

{% macro sort_header(col, label) %}
  {% set new_dir = 'desc' if (sort == col and direction == 'asc') else 'asc' %}
  <a href="{{ url_for('analysis.accounts', 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 %}

{% block content %}
<div class="account-toxicity-container">
  <!-- Page Header -->
  <div class="page-header">
    <div>
      <h1>Account Toxicity Analysis</h1>
      <p class="page-subtitle">Toxicity metrics across monitored accounts</p>
    </div>
  </div>

  <!-- Chart Section -->
  <div class="chart-section">
    <div class="chart-card">
      <h2 class="chart-title">Most Targeted Accounts</h2>
      <p class="chart-subtitle">Average mention toxicity for top 20 most-targeted accounts</p>
      <div class="chart-container">
        <canvas id="toxicity-chart"></canvas>
      </div>
    </div>
  </div>

  <!-- Table Section -->
  <div class="table-section">
    <h2 class="section-title">Account Details</h2>

    {% if accounts %}
    <div class="table-wrapper">
      <table class="accounts-table">
        <thead>
          <tr>
            <th>{{ sort_header('handle', 'Account') }}</th>
            <th>{{ sort_header('post_tox', 'Avg Post Toxicity') }}</th>
            <th>{{ sort_header('flagged_posts', 'Flagged Posts') }}</th>
            <th>{{ sort_header('mention_tox', 'Avg Mention Toxicity') }}</th>
            <th>{{ sort_header('flagged_mentions', 'Flagged Mentions') }}</th>
          </tr>
        </thead>
        <tbody>
          {% for account in accounts %}
          <tr class="account-row">
            <!-- Account Name -->
            <td class="col-account">
              <div class="account-info">
                <a href="https://bsky.app/profile/{{ account.handle }}" target="_blank" rel="noopener" class="account-handle">
                  @{{ account.handle }}
                </a>
                {% if account.display_name %}
                <div class="account-display-name">{{ account.display_name }}</div>
                {% endif %}
              </div>
            </td>

            <!-- Avg Post Toxicity -->
            <td class="col-score">
              <div class="score-bar-container">
                {% set post_pct = (account.avg_post_tox * 100) | int %}
                {% if account.avg_post_tox < 0.3 %}
                  {% set bar_class = 'score-bar-low' %}
                {% elif account.avg_post_tox < 0.6 %}
                  {% set bar_class = 'score-bar-medium' %}
                {% else %}
                  {% set bar_class = 'score-bar-high' %}
                {% endif %}
                <div class="score-bar {{ bar_class }}" style="width: {{ post_pct }}%"></div>
                <span class="score-number">{{ "%.2f" | format(account.avg_post_tox) }}</span>
              </div>
            </td>

            <!-- Flagged Posts Count -->
            <td class="col-count">
              <span class="count-badge">
                {{ account.flagged_posts | format_number }}
                <span class="count-total">/ {{ account.scored_posts | format_number }}</span>
              </span>
            </td>

            <!-- Avg Mention Toxicity -->
            <td class="col-score">
              <div class="score-bar-container">
                {% set mention_pct = (account.avg_mention_tox * 100) | int %}
                {% if account.avg_mention_tox < 0.3 %}
                  {% set bar_class = 'score-bar-low' %}
                {% elif account.avg_mention_tox < 0.6 %}
                  {% set bar_class = 'score-bar-medium' %}
                {% else %}
                  {% set bar_class = 'score-bar-high' %}
                {% endif %}
                <div class="score-bar {{ bar_class }}" style="width: {{ mention_pct }}%"></div>
                <span class="score-number">{{ "%.2f" | format(account.avg_mention_tox) }}</span>
              </div>
            </td>

            <!-- Flagged Mentions Count -->
            <td class="col-count">
              <span class="count-badge">
                {{ account.flagged_mentions | format_number }}
                <span class="count-total">/ {{ account.scored_mentions | format_number }}</span>
              </span>
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <!-- Pagination -->
    {% if total_pages > 1 %}
    <div class="pagination">
      {% if page > 1 %}
      <a href="{{ url_for('analysis.accounts', page=1, sort=sort, dir=direction) }}" class="btn-pagination">First</a>
      <a href="{{ url_for('analysis.accounts', page=page-1, sort=sort, dir=direction) }}" 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.accounts', page=page+1, sort=sort, dir=direction) }}" class="btn-pagination">Next</a>
      <a href="{{ url_for('analysis.accounts', page=total_pages, sort=sort, dir=direction) }}" 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 accounts found</p>
      <p class="empty-subtext">Start monitoring accounts to see toxicity analysis</p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}

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

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

  /* Page Header */
  .page-header {
    margin-bottom: 2.5rem;
  }

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

  .page-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
  }

  /* Chart Section */
  .chart-section {
    margin-bottom: 3rem;
  }

  .chart-card {
    background: var(--dark-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    padding: 2rem;
  }

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

  .chart-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 1.5rem 0;
  }

  .chart-container {
    position: relative;
    height: 400px;
    width: 100%;
  }

  /* Table Section */
  .table-section {
    margin-top: 2rem;
  }

  .section-title {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--dark-text);
    margin: 0 0 1.5rem 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 */
  .accounts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }

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

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

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

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

  /* Column Styles */
  .col-account {
    min-width: 250px;
  }

  .col-score {
    width: 180px;
  }

  .col-count {
    width: 140px;
    text-align: center;
  }

  /* Account Info */
  .account-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
  }

  .account-handle {
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
  }

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

  .account-display-name {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
  }

  /* Sort Header */
  .sort-link {
    color: var(--dark-text);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s ease;
    cursor: pointer;
  }

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

  .sort-link.active {
    color: var(--accent-primary);
    font-weight: 700;
  }

  .sort-arrow {
    font-size: 0.75rem;
    display: inline-block;
  }

  /* 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;
  }

  /* Count Badge */
  .count-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: rgba(0, 180, 216, 0.1);
    color: var(--accent-primary);
    padding: 0.35rem 0.75rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.85rem;
  }

  .count-total {
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
  }

  /* 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);
  }

  /* Chart.js Custom Styling */
  canvas {
    max-height: 400px;
  }

  /* Responsive */
  @media (max-width: 1024px) {
    .col-account {
      min-width: 200px;
    }

    .col-score {
      width: 150px;
    }

    .col-count {
      width: 120px;
    }
  }

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

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

    .chart-container {
      height: 300px;
    }

    .chart-card {
      padding: 1.5rem;
    }

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

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

    .col-account {
      min-width: 160px;
    }

    .col-score,
    .col-count {
      width: auto;
      min-width: 100px;
    }

    .section-title {
      font-size: 1.1rem;
    }
  }

  @media (max-width: 480px) {
    .page-header h1 {
      font-size: 1.2rem;
    }

    .accounts-table {
      font-size: 0.75rem;
    }

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

    .pagination {
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .pagination-info {
      width: 100%;
      order: 3;
    }
  }
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.7/chart.umd.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const chartData = {{ top_targeted_json | safe }};

    if (chartData && chartData.length > 0) {
      const labels = chartData.map(item => '@' + item.handle);
      const scores = chartData.map(item => item.avg_mention_tox);
      const flagged = chartData.map(item => item.flagged_mentions);

      const ctx = document.getElementById('toxicity-chart');
      if (ctx) {
        new Chart(ctx, {
          type: 'bar',
          data: {
            labels: labels,
            datasets: [{
              label: 'Avg Mention Toxicity',
              data: scores,
              backgroundColor: scores.map(score => {
                if (score < 0.3) return 'rgba(46, 204, 113, 0.7)';
                if (score < 0.6) return 'rgba(243, 156, 18, 0.7)';
                return 'rgba(231, 76, 60, 0.7)';
              }),
              borderColor: scores.map(score => {
                if (score < 0.3) return 'rgba(46, 204, 113, 1)';
                if (score < 0.6) return 'rgba(243, 156, 18, 1)';
                return 'rgba(231, 76, 60, 1)';
              }),
              borderWidth: 1,
              borderRadius: 4
            }]
          },
          options: {
            indexAxis: 'y',
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
              legend: {
                display: false
              },
              tooltip: {
                callbacks: {
                  afterLabel: function(context) {
                    return 'Flagged: ' + flagged[context.dataIndex];
                  }
                }
              }
            },
            scales: {
              x: {
                beginAtZero: true,
                max: 1,
                ticks: {
                  color: 'rgba(224, 224, 224, 0.7)',
                  callback: function(value) {
                    return (value * 100).toFixed(0) + '%';
                  }
                },
                grid: {
                  color: 'rgba(255, 255, 255, 0.1)',
                  drawBorder: false
                }
              },
              y: {
                ticks: {
                  color: 'rgba(224, 224, 224, 0.9)'
                },
                grid: {
                  display: false,
                  drawBorder: false
                }
              }
            }
          }
        });
      }
    }
  });
</script>
{% endblock %}