{% extends LOWBONO_DASHBOARD_TEMPLATE_BASE|default:"lowbono/dashboard/base.html" %}
{% load static %}

{% block title %}Home · Staff Dashboard{% endblock %}

{% block content %}
  <div class="d-flex justify-content-between align-items-center mb-4">
    <h1 class="h3 mb-0">Overview</h1>
  </div>

  <!-- Headline stats -->
  <div class="row g-3 mb-4">
    <div class="col-6 col-lg-3">
      <div class="card stat-card stat--primary h-100"><div class="card-body">
        <div class="stat-value">{{ referrals_total }}</div>
        <div class="stat-label">Total Referrals</div>
      </div></div>
    </div>
    <div class="col-6 col-lg-3">
      <div class="card stat-card stat--danger h-100"><div class="card-body">
        <div class="stat-value">{{ overdue_total }}</div>
        <div class="stat-label">Overdue matters</div>
      </div></div>
    </div>
    {# One tile per registered profession, so the row is 2 + N wide rather than a fixed 4. #}
    {% for prof in profession_counts %}
    <div class="col-6 col-lg-3">
      <div class="card stat-card stat--info h-100"><div class="card-body">
        <div class="stat-value">{{ prof.count }}</div>
        <div class="stat-label">{{ prof.verbose }}s</div>
      </div></div>
    </div>
    {% endfor %}
  </div>

  <!-- New-referral intake across rolling windows -->
  <h2 class="h5 section-title mb-3">New Referrals</h2>
  <div class="row g-3 mb-4">
    {% for w in new_windows %}
    <div class="col-6 col-lg-3">
      <div class="card stat-card stat--primary h-100"><div class="card-body py-3">
        <div class="d-flex justify-content-between align-items-center">
          <span class="window-label">{{ w.label }}</span>
          <a class="window-link"
             href="{% url 'lowbono_dashboard:referrals' %}?received_after={{ w.since }}"
             target="_blank" rel="noopener">View <i class="bi bi-arrow-up-right"></i></a>
        </div>
        <div class="stat-value mt-1">{{ w.count }}</div>
        <div class="stat-label">Referrals</div>
      </div></div>
    </div>
    {% endfor %}
  </div>

  <!-- Trending: practice areas & professionals, side by side -->
  <div class="row g-4 mb-4">

    <div class="col-md-5">
      <div class="card h-100">
        <div class="card-header">Trending Professionals (30 Days)</div>
        {% if trending_professionals %}
          <div class="table-responsive">
            <table class="table trend-table mb-0">
              <tbody>
                {% for p in trending_professionals %}
                  <tr>
                    <td>{{ p.name }}</td>
                    <td class="text-end">
                      <a href="{% url 'lowbono_dashboard:referrals' %}?professional={{ p.id }}&amp;received_after={{ trending_since }}"
                         target="_blank" rel="noopener">
                        {{ p.count }} referrals <i class="bi bi-box-arrow-up-right"></i></a>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="card-body"><p class="text-muted mb-0">No referrals in the last 30 days.</p></div>
        {% endif %}
      </div>
    </div>
    <div class="col-md-7">
      <div class="card h-100">
        <div class="card-header">Trending Practice Areas (30 Days)</div>
        {% if trending_areas %}
          <div class="table-responsive">
            <table class="table trend-table mb-0">
              <tbody>
                {% for a in trending_areas %}
                  <tr>
                    <td>{{ a.name }} in <strong>{{ a.parent }}</strong></td>
                    <td class="text-end">
                      <a href="{% url 'lowbono_dashboard:referrals' %}?practice_area={{ a.id }}&amp;received_after={{ trending_since }}"
                         target="_blank" rel="noopener">
                        {{ a.count }} referrals <i class="bi bi-box-arrow-up-right"></i></a>
                    </td>
                  </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        {% else %}
          <div class="card-body"><p class="text-muted mb-0">No referrals in the last 30 days.</p></div>
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Hub entry cards -->
  <div class="row g-4">
    <div class="col-md-3">
      <div class="card hub-card h-100">
        <div class="card-body d-flex flex-column">
          <h2 class="h5"><i class="bi bi-people-fill me-2 text-primary"></i>Professionals</h2>
          <p class="text-muted mb-3">Search and filter registered professionals</p>
          <div class="text-end mt-auto">
            <a class="btn btn-link" href="{% url 'lowbono_dashboard:professionals' %}">
              View Professionals <i class="bi bi-box-arrow-up-right"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card hub-card h-100">
        <div class="card-body d-flex flex-column">
          <h2 class="h5"><i class="bi bi-inbox-fill me-2 text-primary"></i>Referrals</h2>
          <p class="text-muted mb-3">Search and filter clients &amp; referrals</p>
          <div class="text-end mt-auto">
            <a class="btn btn-link" href="{% url 'lowbono_dashboard:referrals' %}">
              View Referrals <i class="bi bi-box-arrow-up-right"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card hub-card h-100">
        <div class="card-body d-flex flex-column">
          <h2 class="h5"><i class="bi bi-tags-fill me-2 text-primary"></i>Practice Areas</h2>
          <p class="text-muted mb-3">Coverage &amp; demand per practice area</p>
          <div class="text-end mt-auto">
            <a class="btn btn-link" href="{% url 'lowbono_dashboard:practice-areas' %}">
              View Practice Areas <i class="bi bi-box-arrow-up-right"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="col-md-3">
      <div class="card hub-card h-100">
        <div class="card-body d-flex flex-column">
          <h2 class="h5"><i class="bi bi-bar-chart-fill me-2 text-primary"></i>Referral Status</h2>
          <p class="text-muted mb-3">Referrals status across &amp; stages</p>
          <div class="text-end mt-auto">
            <a class="btn btn-link" href="{% url 'lowbono_dashboard:referral-status' %}">
              View Referral Status <i class="bi bi-box-arrow-up-right"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Referrals by stage: one bar chart per profession, side by side -->
  <h2 class="h5 section-title mt-4 mb-3">Referrals by Stage</h2>
  <div class="row g-4">
    {% for chart in stage_charts %}
    <div class="col-md-6">
      <div class="card h-100">
        <div class="card-header">{{ chart.title }}</div>
        <div class="card-body">
          <div style="position: relative; height: 300px;">
            <canvas class="stage-chart" id="{{ chart.canvas_id }}"
                    data-labels="{{ chart.labels_id }}" data-values="{{ chart.data_id }}"
                    data-color="{{ chart.color }}"></canvas>
          </div>
        </div>
      </div>
      {{ chart.labels|json_script:chart.labels_id }}
      {{ chart.data|json_script:chart.data_id }}
    </div>
    {% endfor %}
  </div>
{% endblock %}

{% block extra_js %}
{% comment %} The chart library loads from the base; only this configuration is
   page-local. Requires chart.js >= 4. {% endcomment %}
<script>
  // Referrals-by-stage bars: dull semi-transparent fills, no outlines, no
  // gridlines behind the bars.
  document.querySelectorAll('canvas.stage-chart').forEach(function (cv) {
    var labels = JSON.parse(document.getElementById(cv.dataset.labels).textContent);
    var data = JSON.parse(document.getElementById(cv.dataset.values).textContent);
    var color = cv.dataset.color;
    new Chart(cv.getContext('2d'), {
      type: 'bar',
      data: { labels: labels, datasets: [{
        label: 'Referrals', data: data,
        backgroundColor: color, borderColor: color, borderWidth: 0
      }]},
      options: {
        responsive: true, maintainAspectRatio: false,
        plugins: { legend: { display: false } },
        scales: {
          x: { grid: { display: false }, border: { display: false } },
          y: {
            grid: { display: false },
            border: { display: false },
            beginAtZero: true,
            ticks: { precision: 0 }
          }
        }
      }
    });
  });
</script>
{% endblock %}