{% extends "base.html" %}
{% block title %}Dashboard{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
{% endblock %}

{% block content %}
<h1>Dashboard</h1>

{# ── Date Period Filter ── #}
<form id="date-filter-form" method="GET" action="{{ url_for('dashboard.index') }}">
  <div class="filter-bar">
    <div>
      <label for="period">Period</label>
      <select id="period" name="period" onchange="handlePeriodChange(this)">
        {% for code, label in period_presets %}
        <option value="{{ code }}" {% if active_period == code %}selected{% endif %}>{{ label }}</option>
        {% endfor %}
        <option value="custom" {% if active_period == 'custom' %}selected{% endif %}>Custom range</option>
      </select>
    </div>
    <div id="custom-dates" {% if active_period != 'custom' %}style="display:none"{% endif %}>
      <label for="date_from">From</label>
      <input type="date" id="date_from" name="date_from" value="{{ date_from.isoformat() if date_from else '' }}">
    </div>
    <div id="custom-dates-to" {% if active_period != 'custom' %}style="display:none"{% endif %}>
      <label for="date_to">To</label>
      <input type="date" id="date_to" name="date_to" value="{{ date_to.isoformat() if date_to else '' }}">
    </div>
    <div id="custom-apply" {% if active_period != 'custom' %}style="display:none"{% endif %}>
      <button type="submit" class="btn btn-primary btn-sm">Apply</button>
    </div>
  </div>
</form>
<script>
function handlePeriodChange(sel) {
  var custom = sel.value === 'custom';
  document.getElementById('custom-dates').style.display = custom ? '' : 'none';
  document.getElementById('custom-dates-to').style.display = custom ? '' : 'none';
  document.getElementById('custom-apply').style.display = custom ? '' : 'none';
  if (!custom) {
    document.getElementById('date_from').value = '';
    document.getElementById('date_to').value = '';
    sel.form.submit();
  }
}
</script>

{# ── 1. KPI Cards ── #}
<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-content">
      <div class="stat-value">{{ kpi.total_contacts }}</div>
      <div class="stat-label">Total Contacts</div>
    </div>
  </div>
  <div class="stat-card kpi-icp">
    <div class="stat-content">
      <div class="stat-value">{{ kpi.icp }}</div>
      <div class="stat-label">ICP</div>
    </div>
  </div>
  <div class="stat-card kpi-poi">
    <div class="stat-content">
      <div class="stat-value">{{ kpi.poi }}</div>
      <div class="stat-label">POI</div>
    </div>
  </div>
  <div class="stat-card kpi-noticp">
    <div class="stat-content">
      <div class="stat-value">{{ kpi.not_icp }}</div>
      <div class="stat-label">Not ICP</div>
    </div>
  </div>
  <div class="stat-card kpi-review">
    <div class="stat-content">
      <div class="stat-value">{{ kpi.review }}</div>
      <div class="stat-label">Review</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-content">
      <div class="stat-value">{{ kpi.coverage_pct }}%</div>
      <div class="stat-label">Coverage</div>
    </div>
  </div>
</div>

{# ── 2. Monthly Top Performer ── #}
{% if top_performer %}
<div class="top-performer">
  <strong>Top Performer{% if not has_date_filter %} This Month{% endif %}:</strong>
  {{ top_performer.name }} — {{ top_performer.icp_this_month }} ICP interactions
  {% if top_performer.trend_pct > 0 %}
    <span class="trend-up">+{{ top_performer.trend_pct }}%</span>
  {% elif top_performer.trend_pct < 0 %}
    <span class="trend-down">{{ top_performer.trend_pct }}%</span>
  {% endif %}
</div>
{% endif %}

{# ── 3. Executive Leaderboard ── #}
<section>
  <div class="card">
    <div class="card-header">
      <h2>Executive Leaderboard</h2>
    </div>
    <div class="overflow-auto">
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Executive</th>
            <th>{% if has_date_filter %}ICP (Period){% else %}ICP This Month{% endif %}</th>
            <th>{% if has_date_filter %}ICP (Prior){% else %}ICP Last Month{% endif %}</th>
            <th>Trend</th>
            <th>Posts</th>
            <th>New ICPs</th>
          </tr>
        </thead>
        <tbody>
          {% for e in leaderboard %}
          <tr>
            <td>{{ loop.index }}</td>
            <td>{{ e.name }} ({{ e.code }})</td>
            <td>{{ e.icp_this_month }}</td>
            <td>{{ e.icp_last_month }}</td>
            <td>
              {% if e.trend_pct > 0 %}
                <span class="trend-up">+{{ e.trend_pct }}%</span>
              {% elif e.trend_pct < 0 %}
                <span class="trend-down">{{ e.trend_pct }}%</span>
              {% else %}
                <span class="trend-flat">0%</span>
              {% endif %}
            </td>
            <td>{{ e.posts }}</td>
            <td>{{ e.new_icps }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>

{# ── 4. Posting Frequency ── #}
<section>
  <div class="card">
    <div class="card-header">
      <h2>Posting Frequency</h2>
    </div>
    <div class="overflow-auto">
      <table>
        <thead>
          <tr>
            <th>Executive</th>
            <th>{% if has_date_filter %}Posts (Period){% else %}Posts (30 days){% endif %}</th>
            <th>Days Since Last Post</th>
          </tr>
        </thead>
        <tbody>
          {% for p in posting %}
          <tr>
            <td>{{ p.name }} ({{ p.code }})</td>
            <td>{{ p.posts_30d }}</td>
            <td>{{ p.days_since_last_post if p.days_since_last_post is not none else "—" }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>

{# ── 5–7. Charts ── #}
<section class="chart-grid">
  <div class="card card-sm">
    <h3>ICP Interactions by Executive{% if has_date_filter %} ({{ active_period_label }}){% endif %}</h3>
    <canvas id="executiveBarChart"></canvas>
  </div>
  <div class="card card-sm">
    <h3>Monthly ICP Trend</h3>
    <canvas id="monthlyTrendChart"></canvas>
  </div>
  <div class="card card-sm">
    <h3>Status Distribution</h3>
    <canvas id="statusDoughnutChart"></canvas>
  </div>
</section>

{# ── Status Distribution Table ── #}
<section>
  <div class="card">
    <div class="card-header">
      <h2>Status Distribution</h2>
    </div>
    <div class="overflow-auto">
      <table>
        <thead>
          <tr><th>Status</th><th>Count</th><th>%</th></tr>
        </thead>
        <tbody>
          {% for s in status_dist %}
          <tr>
            <td><span class="status-badge status-{{ s.status|lower|replace(' ', '') }}">{{ s.status }}</span></td>
            <td>{{ s.count }}</td>
            <td>{{ s.percentage }}%</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>

{# ── 8. Recent Activity ── #}
{% if has_date_filter %}
<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-content">
      <div class="stat-value">{{ activity.interactions_7d }}</div>
      <div class="stat-label">Interactions (Period)</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-content">
      <div class="stat-value">{{ activity.active_icps_7d }}</div>
      <div class="stat-label">Active ICPs (Period)</div>
    </div>
  </div>
</div>
{% else %}
<div class="stats-grid">
  <div class="stat-card">
    <div class="stat-content">
      <div class="stat-value">{{ activity.interactions_7d }}</div>
      <div class="stat-label">Interactions (7 days)</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-content">
      <div class="stat-value">{{ activity.interactions_30d }}</div>
      <div class="stat-label">Interactions (30 days)</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-content">
      <div class="stat-value">{{ activity.active_icps_7d }}</div>
      <div class="stat-label">Active ICPs (7 days)</div>
    </div>
  </div>
  <div class="stat-card">
    <div class="stat-content">
      <div class="stat-value">{{ activity.active_icps_30d }}</div>
      <div class="stat-label">Active ICPs (30 days)</div>
    </div>
  </div>
</div>
{% endif %}

{# ── 9. Top 10 ICP Engagers ── #}
<section>
  <div class="card">
    <div class="card-header">
      <h2>Top 10 ICP Engagers</h2>
    </div>
    <div class="overflow-auto">
      <table>
        <thead>
          <tr><th>#</th><th>Name</th><th>Company</th><th>Interactions</th><th>Last Active</th></tr>
        </thead>
        <tbody>
          {% for e in top_engagers %}
          <tr>
            <td>{{ loop.index }}</td>
            <td><a href="{{ url_for('contacts.detail', contact_id=e.id) }}">{{ e.name }}</a></td>
            <td>{{ e.company }}</td>
            <td>{{ e.total_interactions }}</td>
            <td>{{ e.latest_interaction }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>

{# ── 10. Top 10 Companies ── #}
<section>
  <div class="card">
    <div class="card-header">
      <h2>Top 10 Companies by ICP Engagement</h2>
    </div>
    <div class="overflow-auto">
      <table>
        <thead>
          <tr><th>#</th><th>Company</th><th>ICP Contacts</th><th>Total Interactions</th></tr>
        </thead>
        <tbody>
          {% for c in top_companies %}
          <tr>
            <td>{{ loop.index }}</td>
            <td>{{ c.company }}</td>
            <td>{{ c.icp_count }}</td>
            <td>{{ c.total_interactions }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>

{# ── 11. Top 5 Posts ── #}
<section>
  <div class="card">
    <div class="card-header">
      <h2>Top 5 Posts by ICP Reactions</h2>
    </div>
    <div class="overflow-auto">
      <table>
        <thead>
          <tr><th>#</th><th>Post</th><th>By</th><th>Reactions</th><th>Unique ICPs</th></tr>
        </thead>
        <tbody>
          {% for p in top_posts %}
          <tr>
            <td>{{ loop.index }}</td>
            <td>{{ p.post_hook[:80] }}{% if p.post_hook|length > 80 %}…{% endif %}</td>
            <td>{{ p.source_profile }}</td>
            <td>{{ p.reaction_count }}</td>
            <td>{{ p.unique_icps }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</section>
{% endblock %}

{% block scripts %}
<script>window.CHART_DATA_URL = '{{ chart_data_url }}';</script>
<script src="{{ url_for('static', filename='charts.js') }}"></script>
{% endblock %}