{% extends "base.html" %}
{% block content %}
<div class="max-w-6xl">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;">
    <div>
      <a href="{{ url_for('teams.manage_team', team_id=team['id']) }}" style="color:#6b7280;text-decoration:none;font-size:0.875rem;margin-bottom:0.5rem;display:inline-block;">
        ← Back to {{ team['name'] }}
      </a>
      <h1>Team Analytics</h1>
      <p class="text-muted">Aggregated across all team sites</p>
    </div>
    <a href="{{ url_for('teams.manage_team', team_id=team['id']) }}" class="btn btn-secondary">Manage Team</a>
  </div>

  <!-- Summary Cards -->
  <div style="display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:1rem;margin-bottom:2rem;">
    <div class="card">
      <div style="font-size:0.875rem;color:#6b7280;">Total Submissions</div>
      <div style="font-size:2.5rem;font-weight:700;margin-top:0.5rem;">{{ analytics['total_submissions'] }}</div>
      <div style="font-size:0.75rem;color:#10b981;margin-top:0.25rem;">all time</div>
    </div>
    <div class="card">
      <div style="font-size:0.875rem;color:#6b7280;">This Month</div>
      <div style="font-size:2.5rem;font-weight:700;margin-top:0.5rem;">{{ analytics['this_month_submissions'] }}</div>
      <div style="font-size:0.75rem;color:#6b7280;margin-top:0.25rem;">submissions</div>
    </div>
    <div class="card">
      <div style="font-size:0.875rem;color:#6b7280;">Team Sites</div>
      <div style="font-size:2.5rem;font-weight:700;margin-top:0.5rem;">{{ analytics['sites'] }}</div>
      <div style="font-size:0.75rem;color:#6b7280;margin-top:0.25rem;">active forms</div>
    </div>
    <div class="card">
      <div style="font-size:0.875rem;color:#6b7280;">Spam Filtered</div>
      <div style="font-size:2.5rem;font-weight:700;margin-top:0.5rem;">{{ analytics['total_spam'] }}</div>
      <div style="font-size:0.75rem;color:#ef4444;margin-top:0.25rem;">blocked</div>
    </div>
  </div>

  <!-- Top Sites -->
  <div class="card" style="margin-bottom:2rem;">
    <h2 style="font-size:1.25rem;margin-bottom:1rem;">Top Sites by Submissions</h2>
    {% if analytics['top_sites'] %}
    <div style="display:grid;gap:0.75rem;">
      {% for site in analytics['top_sites'] %}
      <div style="display:flex;justify-content:space-between;align-items:center;padding:0.75rem;background:#f9fafb;border-radius:0.5rem;">
        <div>
          <div style="font-weight:600;">{{ site['name'] }}</div>
          <div style="font-size:0.875rem;color:#6b7280;">
            <a href="{{ url_for('user_sites.edit_site', site_id=site['id']) }}" style="color:#0066ff;text-decoration:none;">View Site →</a>
          </div>
        </div>
        <div style="text-align:right;">
          <div style="font-size:1.5rem;font-weight:700;">{{ site['submissions'] }}</div>
          <div style="font-size:0.75rem;color:#6b7280;">submissions</div>
        </div>
      </div>
      {% endfor %}
    </div>
    {% else %}
    <div style="text-align:center;padding:2rem;color:#6b7280;">
      <p>No sites in this team yet.</p>
      <a href="{{ url_for('teams.manage_team', team_id=team['id']) }}" class="btn" style="margin-top:1rem;">Add Your First Site</a>
    </div>
    {% endif %}
  </div>

  <!-- Monthly Trend -->
  <div class="card" style="margin-bottom:2rem;">
    <h2 style="font-size:1.25rem;margin-bottom:1rem;">Monthly Trend</h2>
    <div style="display:flex;align-items:flex-end;gap:0.5rem;height:200px;padding:1rem 0;">
      {% set max_subs = analytics['monthly_trend']|map(attribute='submissions')|max or 1 %}
      {% for item in analytics['monthly_trend'] %}
        {% set height = (item['submissions'] / max_subs * 100) if max_subs > 0 else 0 %}
        <div style="flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;position:relative;">
          <div style="position:absolute;bottom:calc({{ height }}% + 5px);font-size:0.75rem;font-weight:600;color:#0066ff;">
            {{ item['submissions'] }}
          </div>
          <div style="width:100%;background:#0066ff;border-radius:0.25rem 0.25rem 0 0;height:{{ height }}%;min-height:2px;transition:height 0.3s;"></div>
          <div style="font-size:0.625rem;color:#6b7280;margin-top:0.25rem;text-align:center;">
            {{ item['month'] }}
          </div>
        </div>
      {% endfor %}
    </div>
  </div>

  <!-- Daily Activity (Last 30 Days) -->
  <div class="card">
    <h2 style="font-size:1.25rem;margin-bottom:1rem;">Daily Activity (Last 30 Days)</h2>
    {% if analytics['daily_data'] %}
    <div style="overflow-x:auto;">
      <table style="width:100%;border-collapse:collapse;">
        <thead>
          <tr style="border-bottom:2px solid #e5e7eb;">
            <th style="text-align:left;padding:0.75rem;font-size:0.75rem;color:#6b7280;text-transform:uppercase;">Date</th>
            <th style="text-align:right;padding:0.75rem;font-size:0.75rem;color:#6b7280;text-transform:uppercase;">Submissions</th>
            <th style="text-align:right;padding:0.75rem;font-size:0.75rem;color:#6b7280;text-transform:uppercase;">Spam</th>
          </tr>
        </thead>
        <tbody>
          {% for day in analytics['daily_data']|reverse %}
          <tr style="border-bottom:1px solid #f3f4f6;">
            <td style="padding:0.75rem;">{{ day['day'] }}</td>
            <td style="padding:0.75rem;text-align:right;font-weight:600;">{{ day['subs'] }}</td>
            <td style="padding:0.75rem;text-align:right;color:#ef4444;">{{ day['spam'] }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <div style="text-align:center;padding:2rem;color:#6b7280;">
      <p>No daily activity data yet.</p>
      <p style="font-size:0.875rem;margin-top:0.5rem;">Data will appear here as your team receives submissions.</p>
    </div>
    {% endif %}
  </div>
</div>
{% endblock %}