{% extends "base.html" %}
{% block title %}Dashboard - THU Home Alert{% endblock %}
{% block content %}
<h1>Dashboard</h1>

{% if latest %}
<div class="cards">
    <div class="card">
        <div class="card-label">Water</div>
        <div class="card-value">
            {% if latest.water_rmb is not none %}
                {{ latest.water_rmb }} <span class="unit">RMB</span>
            {% else %}
                N/A
            {% endif %}
        </div>
    </div>
    <div class="card">
        <div class="card-label">Electricity</div>
        <div class="card-value">
            {% if latest.electr_kwh is not none %}
                {{ latest.electr_kwh }} <span class="unit">kWh</span>
            {% else %}
                N/A
            {% endif %}
        </div>
    </div>
    <div class="card">
        <div class="card-label">Last Updated</div>
        <div class="card-value small">{{ latest.time }}</div>
    </div>
</div>
{% else %}
<p class="empty">No balance history yet. Run the monitor to populate data.</p>
{% endif %}

{% if account %}
<div class="thresholds">
    <h3>Thresholds</h3>
    <p>Water: {{ account.water_threshold if account.water_threshold is not none else 'disabled' }}
       {% if account.water_threshold is not none %}RMB{% endif %} |
       Electricity: {{ account.electr_threshold if account.electr_threshold is not none else 'disabled' }}
       {% if account.electr_threshold is not none %}kWh{% endif %}</p>
</div>
{% endif %}

<div class="actions">
    <button onclick="runNow()" id="run-btn">Run Now</button>
    <span id="run-status"></span>
</div>

{% if history %}
<div class="chart-container">
    <h3>Balance History</h3>
    <canvas id="historyChart"></canvas>
</div>
{% endif %}

<script>
function runNow() {
    const btn = document.getElementById('run-btn');
    const status = document.getElementById('run-status');
    btn.disabled = true;
    status.textContent = 'Running...';
    fetch('{{ url_for("run_now") }}', { method: 'POST' })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                status.textContent = 'Done! Water: ' + (data.water_rmb || 'N/A') + ', Electricity: ' + (data.electr_kwh || 'N/A');
                setTimeout(() => location.reload(), 2000);
            } else {
                status.textContent = 'Failed: ' + (data.message || 'unknown error');
            }
        })
        .catch(err => { status.textContent = 'Error: ' + err; })
        .finally(() => { btn.disabled = false; });
}

{% if history %}
const ctx = document.getElementById('historyChart').getContext('2d');
fetch('{{ url_for("api_history") }}')
    .then(r => r.json())
    .then(data => {
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.labels,
                datasets: [
                    {
                        label: 'Water (RMB)',
                        data: data.water,
                        borderColor: 'rgb(54, 162, 235)',
                        yAxisID: 'y',
                        tension: 0.1,
                    },
                    {
                        label: 'Electricity (kWh)',
                        data: data.electricity,
                        borderColor: 'rgb(255, 159, 64)',
                        yAxisID: 'y1',
                        tension: 0.1,
                    }
                ]
            },
            options: {
                responsive: true,
                scales: {
                    x: { display: true, title: { text: 'Date' } },
                    y: {
                        type: 'linear',
                        display: true,
                        position: 'left',
                        title: { text: 'Water (RMB)' }
                    },
                    y1: {
                        type: 'linear',
                        display: true,
                        position: 'right',
                        title: { text: 'Electricity (kWh)' },
                        grid: { drawOnChartArea: false }
                    }
                }
            }
        });
    });
{% endif %}
</script>
{% endblock %}