{% 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>
    {% if history|length >= 2 %}
    <p class="chart-hint">Click on a point to set the regression start date for ETA estimation.</p>
    {% endif %}
    <canvas id="historyChart"></canvas>
</div>
{% endif %}

{% if eta %}
<div class="eta-section">
    <h3>Estimated Threshold Arrival</h3>
    <div class="eta-controls">
        <span id="eta-mode-label">Auto (last peak)</span>
        <button id="eta-reset-btn" onclick="resetEta()" style="display:none; font-size:0.85rem; padding:0.3rem 0.8rem;">Reset to auto</button>
    </div>
    <div class="eta-cards" id="eta-cards">
        <div class="eta-card eta-{{ eta.water.status }}">
            <div class="card-label">Water</div>
            {% if eta.water.status == 'ok' %}
                <div class="eta-date">{{ eta.water.eta }}</div>
                <div class="eta-detail">~{{ "%.1f"|format(eta.water.rate|abs) }} RMB/day</div>
                {% if eta.water.start_date %}
                <div class="eta-interval">From {{ eta.water.start_date }}</div>
                {% endif %}
            {% elif eta.water.status == 'below' %}
                <div class="eta-date">Already below!</div>
            {% elif eta.water.status == 'safe' %}
                <div class="eta-date">Recharging</div>
                <div class="eta-detail">Balance trending up</div>
            {% elif eta.water.status == 'unknown' %}
                <div class="eta-date">Need more data</div>
            {% else %}
                <div class="eta-date">Disabled</div>
            {% endif %}
        </div>
        <div class="eta-card eta-{{ eta.electricity.status }}">
            <div class="card-label">Electricity</div>
            {% if eta.electricity.status == 'ok' %}
                <div class="eta-date">{{ eta.electricity.eta }}</div>
                <div class="eta-detail">~{{ "%.1f"|format(eta.electricity.rate|abs) }} kWh/day</div>
                {% if eta.electricity.start_date %}
                <div class="eta-interval">From {{ eta.electricity.start_date }}</div>
                {% endif %}
            {% elif eta.electricity.status == 'below' %}
                <div class="eta-date">Already below!</div>
            {% elif eta.electricity.status == 'safe' %}
                <div class="eta-date">Recharging</div>
                <div class="eta-detail">Balance trending up</div>
            {% elif eta.electricity.status == 'unknown' %}
                <div class="eta-date">Need more data</div>
            {% else %}
                <div class="eta-date">Disabled</div>
            {% endif %}
        </div>
    </div>
</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; });
}

var etaChart = null;
var selectedStartIndex = null;
var historyLabels = [];

function refreshEta(start) {
    const qs = start ? '?start=' + encodeURIComponent(start) : '';
    fetch('{{ url_for("api_eta") }}' + qs)
        .then(r => r.json())
        .then(eta => {
            updateEtaCards(eta);
            updateEtaMode(start);
        })
        .catch(err => console.error('ETA refresh failed:', err));
}

function resetEta() {
    selectedStartIndex = null;
    refreshEta(null);
    if (etaChart) etaChart.update();
}

function updateEtaMode(start) {
    const label = document.getElementById('eta-mode-label');
    const resetBtn = document.getElementById('eta-reset-btn');
    if (start) {
        label.textContent = 'From ' + start + ' (click chart to change)';
        resetBtn.style.display = 'inline-block';
    } else {
        label.textContent = 'Auto (last peak)';
        resetBtn.style.display = 'none';
    }
}

function updateEtaCards(eta) {
    const container = document.getElementById('eta-cards');
    if (!container) return;
    const cards = container.querySelectorAll('.eta-card');
    if (cards.length < 2) return;
    renderEtaCard(cards[0], eta.water, 'RMB');
    renderEtaCard(cards[1], eta.electricity, 'kWh');
}

function renderEtaCard(card, info, unit) {
    card.className = 'eta-card eta-' + info.status;
    let html = '<div class="card-label">' + (unit === 'RMB' ? 'Water' : 'Electricity') + '</div>';
    if (info.status === 'ok') {
        html += '<div class="eta-date">' + info.eta + '</div>';
        html += '<div class="eta-detail">~' + Math.abs(info.rate).toFixed(1) + ' ' + unit + '/day</div>';
        if (info.start_date) {
            html += '<div class="eta-interval">From ' + info.start_date + '</div>';
        }
    } else if (info.status === 'below') {
        html += '<div class="eta-date">Already below!</div>';
    } else if (info.status === 'safe') {
        html += '<div class="eta-date">Recharging</div>';
        html += '<div class="eta-detail">Balance trending up</div>';
    } else if (info.status === 'unknown') {
        html += '<div class="eta-date">Need more data</div>';
    } else {
        html += '<div class="eta-date">Disabled</div>';
    }
    card.innerHTML = html;
}

{% if history %}
const ctx = document.getElementById('historyChart').getContext('2d');
fetch('{{ url_for("api_history") }}')
    .then(r => r.json())
    .then(data => {
        historyLabels = data.labels;

        // Custom plugin: draw vertical line at selected index
        const verticalLinePlugin = {
            id: 'verticalLine',
            afterDraw: function(chart) {
                if (selectedStartIndex === null) return;
                const xScale = chart.scales.x;
                if (!xScale) return;
                const x = xScale.getPixelForValue(selectedStartIndex);
                const top = chart.chartArea.top;
                const bottom = chart.chartArea.bottom;
                const ctx2 = chart.ctx;
                ctx2.save();
                ctx2.strokeStyle = 'rgba(200, 0, 0, 0.6)';
                ctx2.lineWidth = 2;
                ctx2.setLineDash([5, 5]);
                ctx2.beginPath();
                ctx2.moveTo(x, top);
                ctx2.lineTo(x, bottom);
                ctx2.stroke();
                ctx2.restore();
            }
        };

        etaChart = 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,
                        pointRadius: 3,
                        pointHoverRadius: 6,
                    },
                    {
                        label: 'Electricity (kWh)',
                        data: data.electricity,
                        borderColor: 'rgb(255, 159, 64)',
                        yAxisID: 'y1',
                        tension: 0.1,
                        pointRadius: 3,
                        pointHoverRadius: 6,
                    }
                ]
            },
            options: {
                responsive: true,
                onClick: function(event, elements) {
                    // Use nearest mode to find the closest data point
                    const points = etaChart.getElementsAtEventForMode(
                        event, 'index', { intersect: false }, true
                    );
                    if (points.length > 0) {
                        const idx = points[0].index;
                        const date = historyLabels[idx];
                        if (date) {
                            selectedStartIndex = idx;
                            refreshEta(date);
                            etaChart.update();
                        }
                    }
                },
                onHover: function(event, elements) {
                    const points = etaChart.getElementsAtEventForMode(
                        event, 'index', { intersect: false }, true
                    );
                    event.native.target.style.cursor = points.length > 0 ? 'pointer' : 'default';
                },
                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 }
                    }
                }
            },
            plugins: [verticalLinePlugin]
        });
    });
{% endif %}
</script>
{% endblock %}