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

{% block content %}

<!-- Date Range Filter -->
<form method="get" class="flex flex-wrap gap-2 items-end mb-6">
  <div>
    <label class="label label-text text-xs">From</label>
    <input type="date" name="start" value="{{ start_date|date:'Y-m-d' }}" class="input input-bordered input-sm"/>
  </div>
  <div>
    <label class="label label-text text-xs">To</label>
    <input type="date" name="end" value="{{ end_date|date:'Y-m-d' }}" class="input input-bordered input-sm"/>
  </div>
  <button class="btn btn-primary btn-sm">Filter</button>
  <a href="?" class="btn btn-ghost btn-sm">Reset</a>
</form>

<!-- KPI Cards -->
<div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-6">

  <div class="stat bg-base-100 rounded-box shadow">
    <div class="stat-title">Revenue</div>
    <div class="stat-value text-primary text-2xl">{{ business.currency }} {{ revenue|floatformat:0 }}</div>
    <div class="stat-desc">{{ sales_count }} sales</div>
  </div>

  <div class="stat bg-base-100 rounded-box shadow">
    <div class="stat-title">COGS</div>
    <div class="stat-value text-warning text-2xl">{{ business.currency }} {{ cogs|floatformat:0 }}</div>
    <div class="stat-desc">Cost of goods sold</div>
  </div>

  <div class="stat bg-base-100 rounded-box shadow">
    <div class="stat-title">Gross Profit</div>
    <div class="stat-value text-success text-2xl">{{ business.currency }} {{ gross_profit|floatformat:0 }}</div>
    <div class="stat-desc">Revenue - COGS</div>
  </div>

  <div class="stat bg-base-100 rounded-box shadow">
    <div class="stat-title">Net Profit</div>
    <div class="stat-value {% if net_profit >= 0 %}text-success{% else %}text-error{% endif %} text-2xl">
      {{ business.currency }} {{ net_profit|floatformat:0 }}
    </div>
    <div class="stat-desc">After expenses</div>
  </div>

</div>

<!-- Account Balances -->
<div class="card bg-base-100 shadow mb-6">
  <div class="card-body">
    <h2 class="card-title text-base">🏦 Account Balances</h2>
    <div class="flex flex-wrap gap-4">
      {% for account in accounts %}
      <div class="flex flex-col items-center bg-base-200 rounded-box px-6 py-3">
        <span class="text-xs text-base-content/50">{{ account.name }}</span>
        <span class="font-bold text-lg">{{ business.currency }} {{ account.balance|floatformat:0 }}</span>
        <span class="badge badge-ghost badge-sm">{{ account.get_account_type_display }}</span>
      </div>
      {% endfor %}
    </div>
    <div class="text-sm text-base-content/60 mt-2">
      Total: <strong>{{ business.currency }} {{ total_balance|floatformat:0 }}</strong>
    </div>
  </div>
</div>

<!-- Bottom Section: Top Products + Expenses by Category -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">

  <!-- Top Products -->
  <div class="card bg-base-100 shadow">
    <div class="card-body">
      <h2 class="card-title text-base">🏆 Top Products</h2>
      <table class="table table-sm">
        <thead>
          <tr><th>Product</th><th>Qty</th><th>Revenue</th></tr>
        </thead>
        <tbody>
          {% for p in top_products %}
          <tr>
            <td>{{ p.product__name }}</td>
            <td>{{ p.total_qty|floatformat:0 }}</td>
            <td>{{ business.currency }} {{ p.total_revenue|floatformat:0 }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="3" class="text-center text-base-content/40">No data</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Expenses by Category -->
  <div class="card bg-base-100 shadow">
    <div class="card-body">
      <h2 class="card-title text-base">💸 Expenses by Category</h2>
      <table class="table table-sm">
        <thead>
          <tr><th>Category</th><th>Amount</th></tr>
        </thead>
        <tbody>
          {% for e in expenses_by_category %}
          <tr>
            <td>{{ e.category__name }}</td>
            <td>{{ business.currency }} {{ e.total|floatformat:0 }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="2" class="text-center text-base-content/40">No expenses</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>

<!-- Recent Activity -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">

  <!-- Recent Sales -->
  <div class="card bg-base-100 shadow">
    <div class="card-body">
      <div class="flex justify-between items-center mb-2">
        <h2 class="card-title text-base">🧾 Recent Sales</h2>
        <a href="{% url 'sales:sale_list' %}" class="btn btn-ghost btn-xs">View all</a>
      </div>
      <table class="table table-sm">
        <thead><tr><th>Ref</th><th>Customer</th><th>Total</th><th>Date</th></tr></thead>
        <tbody>
          {% for sale in recent_sales %}
          <tr>
            <td><a href="{% url 'sales:sale_detail' sale.pk %}" class="link link-primary">{{ sale.reference }}</a></td>
            <td>{{ sale.customer_display }}</td>
            <td>{{ business.currency }} {{ sale.total|floatformat:0 }}</td>
            <td>{{ sale.date|date:"d M" }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="4" class="text-center text-base-content/40">No sales yet</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <!-- Recent Expenses -->
  <div class="card bg-base-100 shadow">
    <div class="card-body">
      <div class="flex justify-between items-center mb-2">
        <h2 class="card-title text-base">💸 Recent Expenses</h2>
        <a href="{% url 'finance:expense_list' %}" class="btn btn-ghost btn-xs">View all</a>
      </div>
      <table class="table table-sm">
        <thead><tr><th>Description</th><th>Category</th><th>Amount</th><th>Date</th></tr></thead>
        <tbody>
          {% for expense in recent_expenses %}
          <tr>
            <td>{{ expense.description }}</td>
            <td>{{ expense.category.name }}</td>
            <td>{{ business.currency }} {{ expense.amount|floatformat:0 }}</td>
            <td>{{ expense.date|date:"d M" }}</td>
          </tr>
          {% empty %}
          <tr><td colspan="4" class="text-center text-base-content/40">No expenses yet</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

</div>
<!-- Low Stock Alerts -->
{% if low_stock_products %}
<div class="card bg-warning/10 border border-warning shadow mt-6">
  <div class="card-body">
    <h2 class="card-title text-base text-warning">⚠ Low Stock Alert</h2>
    <div class="flex flex-wrap gap-3">
      {% for product in low_stock_products %}
        <a href="{% url 'inventory:product_detail' product.pk %}"
           class="badge badge-warning gap-1 p-3">
          {{ product.name }} —
          <strong>{{ product.stock_quantity }} {{ product.unit }}</strong>
        </a>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}

{% if expired_batches or expiring_soon_batches %}
<div class="card bg-error/10 border border-error shadow mt-6">
  <div class="card-body">
    <h2 class="card-title text-base text-error">⏰ Expiry Alerts</h2>
    {% if expired_batches %}
      <div class="mb-3">
        <div class="font-semibold text-sm mb-1">Expired Batches</div>
        <div class="flex flex-wrap gap-2">
          {% for batch in expired_batches %}
            <span class="badge badge-error p-3">
              {{ batch.product.name }} ({{ batch.batch_number }}) - {{ batch.expiry_date }}
            </span>
          {% endfor %}
        </div>
      </div>
    {% endif %}
    {% if expiring_soon_batches %}
      <div>
        <div class="font-semibold text-sm mb-1">Expiring Within 30 Days</div>
        <div class="flex flex-wrap gap-2">
          {% for batch in expiring_soon_batches %}
            <span class="badge badge-warning p-3">
              {{ batch.product.name }} ({{ batch.batch_number }}) - {{ batch.expiry_date }}
            </span>
          {% endfor %}
        </div>
      </div>
    {% endif %}
  </div>
</div>
{% endif %}

{% if overstock_products %}
<div class="card bg-info/10 border border-info shadow mt-6">
  <div class="card-body">
    <h2 class="card-title text-base text-info">📦 Overstock Alerts</h2>
    <div class="flex flex-wrap gap-3">
      {% for product in overstock_products %}
        <a href="{% url 'inventory:product_detail' product.pk %}"
           class="badge badge-info p-3">
          {{ product.name }} — {{ product.stock_quantity }} {{ product.unit }}
        </a>
      {% endfor %}
    </div>
  </div>
</div>
{% endif %}

{% if pending_supplier_payments %}
<div class="card bg-secondary/10 border border-secondary shadow mt-6">
  <div class="card-body">
    <h2 class="card-title text-base text-secondary">🏭 Pending Supplier Payments</h2>
    <div class="overflow-x-auto">
      <table class="table table-sm">
        <thead>
          <tr>
            <th>PO</th>
            <th>Supplier</th>
            <th>Due Date</th>
            <th>Balance</th>
          </tr>
        </thead>
        <tbody>
          {% for po in pending_supplier_payments %}
          <tr>
            <td>
              <a class="link link-primary" href="{% url 'inventory:po_detail' po.pk %}">
                {{ po.reference }}
              </a>
            </td>
            <td>{{ po.supplier.name }}</td>
            <td>
              {% if po.due_date %}{{ po.due_date }}{% else %}—{% endif %}
              {% if po.due_date and po.due_date < today %}
                <span class="badge badge-error badge-xs ml-1">Overdue</span>
              {% endif %}
            </td>
            <td>{{ business.currency }} {{ po.balance_due|floatformat:0 }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endif %}
{% endblock %}