{% extends 'dashboard/base.html' %}

{% load static %}

{% block content %}
<script src="{% static 'js/chart.js' %}"></script>
<!-- Panggilan File Kalender Secara Lokal (Tanpa Perlu Internet) -->
<link rel="stylesheet" href="{% static 'css/flatpickr.min.css' %}">
<script src="{% static 'js/flatpickr.js' %}"></script>

<style>
    .card { background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); border: 1px solid #e5e7eb; }
    .page-title { font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 20px; }
    
    .toolbar-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .filter-container { display: flex; gap: 10px; }
    .btn-filter { padding: 8px 16px; border: 1px solid #d1d5db; background: white; border-radius: 6px; cursor: pointer; font-weight: 500; font-size: 14px; transition: all 0.2s; }
    .btn-filter.active { background: #f59e0b; color: white; border-color: #f59e0b; }
    
    .btn-export { background-color: #10b981; color: white; border: none; padding: 9px 16px; border-radius: 6px; cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: 8px; transition: background 0.2s; }
    .btn-export:hover { background-color: #059669; }
    
    .chart-container { position: relative; width: 100%; height: 400px; }
</style>

<h2 class="page-title">Log Riwayat Data kWh</h2>

<!-- TOOLBAR (FILTER DAN TOMBOL EXPORT DALAM SATU BARIS) -->
<div class="toolbar-container">
    <!-- Tombol Filter Navigasi & Custom Date -->
    <div class="filter-container" style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
        <button class="btn-filter active" onclick="changePeriod('hourly', this)">Per Jam</button>
        <button class="btn-filter" onclick="changePeriod('daily', this)">Per Hari</button>
        <button class="btn-filter" onclick="changePeriod('monthly', this)">Per Bulan</button>
        
        <!-- Input Custom Date-Time -->
        <div class="custom-range-container" style="display: flex; align-items: center; gap: 8px; margin-left: 10px; background: #f3f4f6; padding: 4px 12px; border-radius: 6px; border: 1px solid #e5e7eb;">
            <label style="font-size: 13px; font-weight: 500; color: #4b5563;">Custom:</label>
            <input type="text" id="startDate" placeholder="Pilih Waktu Mulai" style="border: 1px solid #d1d5db; padding: 4px 8px; border-radius: 4px; font-size: 13px; background: #fff;">
            <span style="color: #9ca3af;">s/d</span>
            <input type="text" id="endDate" placeholder="Pilih Waktu Akhir" style="border: 1px solid #d1d5db; padding: 4px 8px; border-radius: 4px; font-size: 13px; background: #fff;">
            <button class="btn-filter" style="padding: 4px 12px; background: #111827; color: white; border: none;" onclick="applyCustomRange(this)">Terapkan</button>
        </div>
    </div>

    <!-- Tombol Export Excel -->
    <button class="btn-export" onclick="downloadExcel()">
        <i class="fa-solid fa-file-excel"></i> Export Excel
    </button>
</div>

<!-- KOTAK RINGKASAN TOTAL KONSUMSI DI ATAS GRAFIK -->
<div style="display: flex; justify-content: flex-start; margin-bottom: 15px;">
    <div style="background: #fffdf5; border: 1px solid #fde68a; padding: 12px 20px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.05); display: flex; align-items: center; gap: 12px;">
        <span style="font-size: 14px; font-weight: 600; color: #b45309;">
            <i class="fa-solid fa-bolt"></i> Total Konsumsi Periode Ini:
        </span>
        <span id="txt-total-summary-kwh" style="font-size: 18px; font-weight: 700; color: #d97706;">
            0.0000 kWh
        </span>
    </div>
</div>

<!-- Tempat Grafik Log -->
<div class="card">
    <div class="chart-container">
        <canvas id="chartLogKwh"></canvas>
    </div>
</div>

<script>
    // Inisialisasi Flatpickr 24 Jam
    flatpickr("#startDate", {
        enableTime: true,
        dateFormat: "Y-m-d H:i",
        time_24hr: true
    });

    flatpickr("#endDate", {
        enableTime: true,
        dateFormat: "Y-m-d H:i",
        time_24hr: true
    });

    let currentPeriod = 'hourly';
    let autoRefreshTimeout = null; 
    const ctxLog = document.getElementById('chartLogKwh').getContext('2d');
    
    const chartLog = new Chart(ctxLog, {
        type: 'bar',
        data: { labels: [], datasets: [
            { label: 'Total Konsumsi (kWh)', data: [], backgroundColor: 'rgba(245, 158, 11, 0.7)', borderColor: '#f59e0b', borderWidth: 1 }
        ]},
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                x: { title: { display: true, text: 'Waktu / Periode' } },
                y: { title: { display: true, text: 'Total kWh' }, beginAtZero: true }
            }
        }
    });

    // Fungsi Fetch Data Utama
    function fetchLogData(period) {
        const urlParams = new URLSearchParams(window.location.search);
        let mesinId = urlParams.get('mesin_id');
        
        // PENGAMAN: Jika URL kosong, langsung contek dari memori browser
        if (!mesinId) {
            mesinId = localStorage.getItem('selected_machine_id') || '';
        }

        let url = `/api/log-data/?period=${period}&mesin_id=${mesinId}`;

        
        if (period === 'custom') {
            const start = document.getElementById('startDate').value;
            const end = document.getElementById('endDate').value;
            if (!start || !end) {
                alert("Silakan pilih Tanggal & Jam Awal serta Akhir terlebih dahulu!");
                return;
            }
            url += `&start_date=${start}&end_date=${end}`;
        }

        fetch(url)
            .then(res => res.json())
            .then(data => {
                // Mengisi label dan dataset grafik secara eksplisit
                chartLog.data.labels = data.labels;
                chartLog.data.datasets[0].data = data.values; 
                
                // FIX FINAL: Menggunakan mode 'none' agar Chart.js merender data seketika tanpa jeda animasi
                chartLog.update('none');

                // Menyuntikkan nilai ringkasan total kWh ke elemen HTML
                const totalSumElement = document.getElementById('txt-total-summary-kwh');
                if (totalSumElement) {
                    const totalVal = parseFloat(data.total_sum) || 0;
                    totalSumElement.innerText = parseFloat(totalVal.toFixed(4)) + " kWh";
                }
            })
            .catch(err => console.error("Gagal mengambil data log:", err));
    }

    // Fungsi Pengulangan Timeout Mandiri yang Aman (Anti-Hang)
    function startAutoRefresh() {
        if (autoRefreshTimeout) {
            clearTimeout(autoRefreshTimeout); 
        }

        autoRefreshTimeout = setTimeout(function run() {
            if (currentPeriod !== 'custom') {
                fetchLogData(currentPeriod); 
                autoRefreshTimeout = setTimeout(run, 10000); // Sinkronisasi otomatis berkala tiap 10 detik
            }
        }, 10000);
    }

    function changePeriod(period, element) {
        document.querySelectorAll('.btn-filter').forEach(btn => btn.classList.remove('active'));
        element.classList.add('active');
        currentPeriod = period;
        
        if (period !== 'custom') {
            document.getElementById('startDate').value = '';
            document.getElementById('endDate').value = '';
        }
        
        fetchLogData(period);
        startAutoRefresh(); 
    }

    function applyCustomRange(element) {
        document.querySelectorAll('.btn-filter').forEach(btn => btn.classList.remove('active'));
        element.classList.add('active');
        currentPeriod = 'custom';
        
        if (autoRefreshTimeout) {
            clearTimeout(autoRefreshTimeout); 
        }
        
        fetchLogData(currentPeriod);
    }

    function downloadExcel() {
        const urlParams = new URLSearchParams(window.location.search);
        const mesinId = urlParams.get('mesin_id') || '';
        let url = `/api/export-excel/?period=${currentPeriod}&mesin_id=${mesinId}`;
        
        if (currentPeriod === 'custom') {
            const start = document.getElementById('startDate').value;
            const end = document.getElementById('endDate').value;
            url += `&start_date=${start}&end_date=${end}`;
        }
        window.location.href = url;
    }

        // ─── RUN SETELAH HALAMAN SIAP (DENGAN DELAY AMAN) ───
        document.addEventListener("DOMContentLoaded", function() {
        // 1. Baca parameter periode aktif awal dari URL
        const urlParamsInit = new URLSearchParams(window.location.search);
        currentPeriod = urlParamsInit.get('period') || 'hourly';

        // 2. Menyesuaikan class active pada tombol navigasi filter di HTML
        document.querySelectorAll('.btn-filter').forEach(btn => {
            btn.classList.remove('active');
            const onclickAttr = btn.getAttribute('onclick');
            if (onclickAttr && onclickAttr.includes(`'${currentPeriod}'`)) {
                btn.classList.add('active');
            }
        });

        // 3. TRIK UTAMA: Beri jeda 0 milidetik agar base.html kerja duluan mengisi URL
        setTimeout(function() {
            fetchLogData(currentPeriod);
            startAutoRefresh();
        }, 0);
    });

</script>
{% endblock content %}