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

{% block content %}
<!-- Filter Bar -->
<div class="card mb-4">
  <div class="card-body py-2">
    <form method="get" class="d-flex flex-wrap align-items-center gap-2">
      <label class="fw-semibold text-muted small me-1">Year:</label>
      <select name="year" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
        {% for y in years %}
        <option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>{{ y }}</option>
        {% endfor %}
      </select>

      <label class="fw-semibold text-muted small ms-3 me-1">Period:</label>
      {% for key, label in filter_options %}
      <a href="?year={{ selected_year }}&filter={{ key }}"
         class="btn btn-sm {% if filter_type == key %}btn-primary{% else %}btn-outline-secondary{% endif %}">
        {{ label }}
      </a>
      {% endfor %}
    </form>
  </div>
</div>

<!-- Stats Row -->
<div class="row g-3 mb-4">
  <div class="col-sm-6 col-xl-3">
    <div class="stat-card">
      <div class="icon bg-success bg-opacity-10 text-success"><i class="bi bi-currency-exchange"></i></div>
      <div>
        <div class="label">Rent Collected</div>
        <div class="value">TSh {{ rent_collected|floatformat:0 }}</div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="stat-card">
      <div class="icon bg-danger bg-opacity-10 text-danger"><i class="bi bi-arrow-down-circle"></i></div>
      <div>
        <div class="label">Total Expenses</div>
        <div class="value">TSh {{ total_expenses|floatformat:0 }}</div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="stat-card">
      <div class="icon bg-primary bg-opacity-10 text-primary"><i class="bi bi-graph-up-arrow"></i></div>
      <div>
        <div class="label">Net Income</div>
        <div class="value {% if net_income < 0 %}text-danger{% endif %}">TSh {{ net_income|floatformat:0 }}</div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xl-3">
    <div class="stat-card">
      <div class="icon bg-warning bg-opacity-10 text-warning"><i class="bi bi-buildings"></i></div>
      <div>
        <div class="label">Houses / Rooms</div>
        <div class="value">{{ total_houses }} / {{ total_rooms }}</div>
        <div class="small text-muted">{{ occupied_rooms }} occupied</div>
      </div>
    </div>
  </div>
</div>

<!-- Charts Row -->
<div class="row g-3 mb-4">
  <div class="col-lg-8">
    <div class="card h-100">
      <div class="card-header px-3 py-2">Monthly Rent vs Expenses ({{ selected_year }})</div>
      <div class="card-body">
        <canvas id="rentExpenseChart" height="100"></canvas>
      </div>
    </div>
  </div>
  <div class="col-lg-4">
    <div class="card h-100">
      <div class="card-header px-3 py-2">Expenses by Category</div>
      <div class="card-body d-flex align-items-center justify-content-center">
        {% if category_labels %}
        <canvas id="categoryChart" height="200"></canvas>
        {% else %}
        <p class="text-muted text-center">No expense data for this period.</p>
        {% endif %}
      </div>
    </div>
  </div>
</div>

<!-- Recent Activity -->
<div class="row g-3">
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header px-3 py-2 d-flex justify-content-between">
        <span>Recent Payments</span>
        <a href="{% url 'house_list' %}" class="btn btn-sm btn-outline-primary">Houses</a>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm mb-0">
            <thead class="table-light">
              <tr>
                <th>Room</th><th>Months</th><th>Year</th><th class="text-end">Amount</th>
              </tr>
            </thead>
            <tbody>
              {% for p in recent_payments %}
              <tr>
                <td><a href="{% url 'room_detail' p.room.pk %}">{{ p.room.room_number }}</a></td>
                <td class="text-muted small">{{ p.get_months_display }}</td>
                <td>{{ p.year }}</td>
                <td class="text-end fw-semibold">{{ p.total_amount|floatformat:0 }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="4" class="text-center text-muted py-3">No payments yet</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="card">
      <div class="card-header px-3 py-2 d-flex justify-content-between">
        <span>Recent Expenses</span>
        <a href="{% url 'expense_list' %}" class="btn btn-sm btn-outline-primary">All Expenses</a>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm mb-0">
            <thead class="table-light">
              <tr>
                <th>Description</th><th>Category</th><th>Date</th><th class="text-end">Amount</th>
              </tr>
            </thead>
            <tbody>
              {% for e in recent_expenses %}
              <tr>
                <td>{{ e.description|truncatechars:25 }}</td>
                <td><span class="badge bg-secondary">{{ e.get_category_display }}</span></td>
                <td>{{ e.date|date:"d M Y" }}</td>
                <td class="text-end text-danger fw-semibold">{{ e.amount|floatformat:0 }}</td>
              </tr>
              {% empty %}
              <tr><td colspan="4" class="text-center text-muted py-3">No expenses yet</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const monthNames = {{ month_names|safe }};
const monthlyRent = {{ monthly_rent|safe }};
const monthlyExpenses = {{ monthly_expenses|safe }};

new Chart(document.getElementById('rentExpenseChart'), {
  type: 'bar',
  data: {
    labels: monthNames,
    datasets: [
      {
        label: 'Rent Collected',
        data: monthlyRent,
        backgroundColor: 'rgba(34,197,94,.7)',
        borderRadius: 4,
      },
      {
        label: 'Expenses',
        data: monthlyExpenses,
        backgroundColor: 'rgba(239,68,68,.7)',
        borderRadius: 4,
      }
    ]
  },
  options: {
    responsive: true,
    plugins: { legend: { position: 'top' } },
    scales: {
      y: { beginAtZero: true, ticks: { callback: v => 'TSh ' + v.toLocaleString() } }
    }
  }
});

{% if category_labels %}
new Chart(document.getElementById('categoryChart'), {
  type: 'doughnut',
  data: {
    labels: {{ category_labels|safe }},
    datasets: [{
      data: {{ category_values|safe }},
      backgroundColor: ['#3b82f6','#ef4444','#f59e0b','#22c55e','#8b5cf6','#06b6d4','#f97316'],
    }]
  },
  options: {
    responsive: true,
    plugins: { legend: { position: 'bottom', labels: { boxWidth: 12 } } }
  }
});
{% endif %}
</script>
{% endblock %}