{% extends 'base.html' %}
{% block title %}Accountant Dashboard{% endblock %}
{% block content %}
<div class="space-y-6">
  <div class="flex flex-wrap justify-between items-center gap-3">
    <div>
      <h1 class="text-2xl font-bold">Accountant Dashboard</h1>
      <p class="text-sm opacity-70">Financial focus: purchases, balances, profitability, and cash flow.</p>
    </div>
    <div class="flex gap-2">
      <a href="{% url 'sales:invoice_list' %}" class="btn btn-primary btn-sm">Record Payment</a>
      <a href="{% url 'sales:invoice_list' %}" class="btn btn-outline btn-sm">View Invoices</a>
      <a href="{% url 'finance:profit_loss' %}" class="btn btn-outline btn-sm">Financial Reports</a>
      <a href="{% url 'finance:dashboard_data' %}?start={{ start_date|date:'Y-m-d' }}&end={{ end_date|date:'Y-m-d' }}" class="btn btn-outline btn-sm">Live JSON</a>
    </div>
  </div>

  <form method="get" class="bg-base-100 border border-base-200 rounded-box p-3 flex flex-wrap items-end gap-2">
    <label class="form-control">
      <span class="label-text text-xs">Start</span>
      <input type="date" name="start" value="{{ start_date|date:'Y-m-d' }}" class="input input-bordered input-sm">
    </label>
    <label class="form-control">
      <span class="label-text text-xs">End</span>
      <input type="date" name="end" value="{{ end_date|date:'Y-m-d' }}" class="input input-bordered input-sm">
    </label>
    <button type="submit" class="btn btn-primary btn-sm">Apply</button>
    <a href="{% url 'finance:dashboard_accountant' %}" class="btn btn-ghost btn-sm">Reset</a>
  </form>

  <div class="grid grid-cols-2 lg:grid-cols-5 gap-4">
    <div class="stat bg-base-100 rounded-box shadow"><div class="stat-title">Total Purchases</div><div class="stat-value text-2xl">{{ business.currency }} {{ total_purchases|floatformat:0 }}</div></div>
    <div class="stat bg-base-100 rounded-box shadow"><div class="stat-title">Supplier Balances</div><div class="stat-value text-warning text-2xl">{{ business.currency }} {{ outstanding_payables|floatformat:0 }}</div></div>
    <div class="stat bg-base-100 rounded-box shadow"><div class="stat-title">Customer Balances</div><div class="stat-value text-error text-2xl">{{ business.currency }} {{ outstanding_receivables|floatformat:0 }}</div></div>
    <div class="stat bg-base-100 rounded-box shadow"><div class="stat-title">Monthly Profit</div><div class="stat-value {% if monthly_profit >= 0 %}text-success{% else %}text-error{% endif %} text-2xl">{{ business.currency }} {{ monthly_profit|floatformat:0 }}</div></div>
    <div class="stat bg-base-100 rounded-box shadow"><div class="stat-title">Outstanding Payments</div><div class="stat-value text-secondary text-2xl">{{ notifications.pending_supplier_payment_count }}</div></div>
  </div>

  <div class="grid grid-cols-1 xl:grid-cols-3 gap-4">
    <div class="card bg-base-100 shadow border border-base-200">
      <div class="card-body">
        <h2 class="card-title text-base">Revenue vs Expenses (Chart)</h2>
        <div class="h-72"><canvas id="acRevenueExpenseChart"></canvas></div>
      </div>
    </div>
    <div class="card bg-base-100 shadow border border-base-200">
      <div class="card-body">
        <h2 class="card-title text-base">Cash Flow Trend (Chart)</h2>
        <div class="h-72"><canvas id="acCashFlowChart"></canvas></div>
      </div>
    </div>
    <div class="card bg-base-100 shadow border border-base-200">
      <div class="card-body">
        <h2 class="card-title text-base">Payables vs Receivables</h2>
        <div class="h-72"><canvas id="acBalancePieChart"></canvas></div>
      </div>
    </div>
  </div>

  <div class="grid grid-cols-1 xl:grid-cols-2 gap-4">
    <div class="card bg-base-100 shadow border border-base-200"><div class="card-body"><h2 class="card-title text-base">Revenue vs Expenses</h2><table class="table table-sm"><thead><tr><th>Month</th><th>Revenue</th><th>Expenses</th></tr></thead><tbody>{% for row in monthly_revenue_expense %}<tr><td>{{ row.month }}</td><td class="text-success">{{ business.currency }} {{ row.revenue|floatformat:0 }}</td><td class="text-error">{{ business.currency }} {{ row.expense|floatformat:0 }}</td></tr>{% empty %}<tr><td colspan="3" class="text-center opacity-70">No data</td></tr>{% endfor %}</tbody></table></div></div>
    <div class="card bg-base-100 shadow border border-base-200"><div class="card-body"><h2 class="card-title text-base">Cash Flow Trend</h2><table class="table table-sm"><thead><tr><th>Month</th><th>Cash In</th><th>Cash Out</th></tr></thead><tbody>{% for row in cash_flow_trend %}<tr><td>{{ row.month }}</td><td class="text-success">{{ business.currency }} {{ row.cash_in|floatformat:0 }}</td><td class="text-warning">{{ business.currency }} {{ row.cash_out|floatformat:0 }}</td></tr>{% empty %}<tr><td colspan="3" class="text-center opacity-70">No data</td></tr>{% endfor %}</tbody></table></div></div>
    <div class="card bg-base-100 shadow border border-base-200"><div class="card-body"><h2 class="card-title text-base">Top Supplier Payables</h2><table class="table table-sm"><thead><tr><th>Supplier</th><th>Balance</th></tr></thead><tbody>{% for row in supplier_balances %}<tr><td>{{ row.supplier }}</td><td>{{ business.currency }} {{ row.balance|floatformat:0 }}</td></tr>{% empty %}<tr><td colspan="2" class="text-center opacity-70">No outstanding supplier balances</td></tr>{% endfor %}</tbody></table></div></div>
    <div class="card bg-base-100 shadow border border-base-200"><div class="card-body"><h2 class="card-title text-base">Top Customer Receivables</h2><table class="table table-sm"><thead><tr><th>Customer</th><th>Balance</th></tr></thead><tbody>{% for row in customer_balances %}<tr><td>{{ row.customer.name }}</td><td>{{ business.currency }} {{ row.balance|floatformat:0 }}</td></tr>{% empty %}<tr><td colspan="2" class="text-center opacity-70">No outstanding customer balances</td></tr>{% endfor %}</tbody></table></div></div>
  </div>

  <div class="card bg-base-100 shadow border border-base-200"><div class="card-body"><h2 class="card-title text-base">Recent Financial Activity</h2><ul class="text-sm space-y-1">{% for tx in recent_financial_activity %}<li>{{ tx.date }} — {{ tx.account.name }} | {{ tx.get_direction_display }} {{ business.currency }} {{ tx.amount|floatformat:0 }} ({{ tx.tx_type }})</li>{% empty %}<li class="opacity-70">No recent financial activity.</li>{% endfor %}</ul></div></div>
</div>
{% endblock %}
{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
<script>
  (function () {
    if (typeof Chart === "undefined") {
      return;
    }
    const dataUrl = "{% url 'finance:dashboard_data' %}" + (window.location.search || "");

    function buildChart(id, config) {
      const canvas = document.getElementById(id);
      if (!canvas) return;
      return new Chart(canvas, {
        ...config,
        options: {
          responsive: true,
          maintainAspectRatio: false,
          ...config.options
        }
      });
    }

    const monthLabels = [{% for row in monthly_revenue_expense %}"{{ row.month|escapejs }}",{% endfor %}];
    const revenueVals = [{% for row in monthly_revenue_expense %}Number("{{ row.revenue|default_if_none:0 }}"),{% endfor %}];
    const expenseVals = [{% for row in monthly_revenue_expense %}Number("{{ row.expense|default_if_none:0 }}"),{% endfor %}];

    const revenueExpenseChart = buildChart("acRevenueExpenseChart", {
      type: "line",
      data: {
        labels: monthLabels,
        datasets: [
          {
            label: "Revenue",
            data: revenueVals,
            borderColor: "#16a34a",
            backgroundColor: "rgba(22, 163, 74, 0.2)",
            tension: 0.3,
            fill: true
          },
          {
            label: "Expenses",
            data: expenseVals,
            borderColor: "#ef4444",
            backgroundColor: "rgba(239, 68, 68, 0.15)",
            tension: 0.3,
            fill: true
          }
        ]
      }
    });

    const cashLabels = [{% for row in cash_flow_trend %}"{{ row.month|escapejs }}",{% endfor %}];
    const cashInVals = [{% for row in cash_flow_trend %}Number("{{ row.cash_in|default_if_none:0 }}"),{% endfor %}];
    const cashOutVals = [{% for row in cash_flow_trend %}Number("{{ row.cash_out|default_if_none:0 }}"),{% endfor %}];

    const cashFlowChart = buildChart("acCashFlowChart", {
      type: "bar",
      data: {
        labels: cashLabels,
        datasets: [
          {
            label: "Cash In",
            data: cashInVals,
            backgroundColor: "rgba(34, 197, 94, 0.75)"
          },
          {
            label: "Cash Out",
            data: cashOutVals,
            backgroundColor: "rgba(245, 158, 11, 0.75)"
          }
        ]
      }
    });

    const balancePieChart = buildChart("acBalancePieChart", {
      type: "doughnut",
      data: {
        labels: ["Supplier Payables", "Customer Receivables"],
        datasets: [{
          data: [
            Number("{{ outstanding_payables|default_if_none:0 }}"),
            Number("{{ outstanding_receivables|default_if_none:0 }}")
          ],
          backgroundColor: ["#f59e0b", "#ef4444"]
        }]
      }
    });

    async function refreshFromApi() {
      try {
        const response = await fetch(dataUrl, { headers: { "X-Requested-With": "XMLHttpRequest" } });
        if (!response.ok) return;
        const payload = await response.json();
        const data = payload.data || {};

        if (revenueExpenseChart && data.monthly_revenue_expense) {
          revenueExpenseChart.data.labels = data.monthly_revenue_expense.map((row) => row.month);
          revenueExpenseChart.data.datasets[0].data = data.monthly_revenue_expense.map((row) => Number(row.revenue || 0));
          revenueExpenseChart.data.datasets[1].data = data.monthly_revenue_expense.map((row) => Number(row.expense || 0));
          revenueExpenseChart.update();
        }

        if (cashFlowChart && data.cash_flow_trend) {
          cashFlowChart.data.labels = data.cash_flow_trend.map((row) => row.month);
          cashFlowChart.data.datasets[0].data = data.cash_flow_trend.map((row) => Number(row.cash_in || 0));
          cashFlowChart.data.datasets[1].data = data.cash_flow_trend.map((row) => Number(row.cash_out || 0));
          cashFlowChart.update();
        }

        if (balancePieChart && data.summary) {
          const supplierTotal = (data.supplier_balances || []).reduce((sum, row) => sum + Number(row.balance || 0), 0);
          const customerTotal = (data.customer_balances || []).reduce((sum, row) => sum + Number(row.balance || 0), 0);
          balancePieChart.data.datasets[0].data = [supplierTotal, customerTotal];
          balancePieChart.update();
        }
      } catch (error) {
        // Keep fallback chart values from initial server render.
      }
    }

    refreshFromApi();
    setInterval(refreshFromApi, 60000);
  })();
</script>
{% endblock %}