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

{% block content %}
<h2 class="page-title">Report Konsumsi Energi per Area</h2>

<!-- TOOLBAR FILTER -->
<div class="toolbar-container" style="background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #e5e7eb; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px;">
    <div style="display: flex; align-items: center; gap: 15px; flex-wrap: wrap;">
        <!-- Dropdown Pilih Area -->
        <div style="display: flex; flex-direction: column; gap: 4px;">
            <label style="font-size: 12px; font-weight: 600; color: #4b5563;">Pilih Area:</label>
            <select id="filter-area" style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db; min-width: 150px;" onchange="loadReportArea()">
                <option value="">-- Pilih Area --</option>
                {% for area in areas %}
                    <option value="{{ area.id }}">{{ area.nama_area }}</option>
                {% endfor %}
            </select>
        </div>

        <!-- Dropdown Pilih Bulan -->
        <div style="display: flex; flex-direction: column; gap: 4px;">
            <label style="font-size: 12px; font-weight: 600; color: #4b5563;">Pilih Bulan:</label>
            <select id="filter-bulan" style="padding: 6px 12px; border-radius: 6px; border: 1px solid #d1d5db; min-width: 180px;" onchange="loadReportArea()">
                {% for m in months %}
                    <option value="{{ m.value }}">{{ m.label }}</option>
                {% endfor %}
            </select>
        </div>
    </div>

    <!-- Tombol Export Excel -->
    <button class="btn-export" onclick="downloadExcelArea()" style="align-self: flex-end; padding: 8px 16px; background: #10b981; color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer;">
        <i class="fa-solid fa-file-excel"></i> Export Excel Area
    </button>
</div>

<!-- KOTAK SUMMARY -->
<div style="display: flex; justify-content: flex-start; margin-bottom: 20px;">
    <div style="background: #eff6ff; border: 1px solid #bfdbfe; padding: 12px 20px; border-radius: 8px; display: flex; align-items: center; gap: 12px;">
        <span style="font-size: 14px; font-weight: 600; color: #1e3a8a;">
            <i class="fa-solid fa-charging-station"></i> Total Konsumsi Seluruh Mesin di Area:
        </span>
        <span id="txt-total-area-kwh" style="font-size: 18px; font-weight: 700; color: #1d4ed8;">
            0.0000 kWh
        </span>
    </div>
</div>

<!-- GRAFIK COMPARISON MESIN -->
<div class="card" style="margin-bottom: 25px; background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
    <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 15px; color: #374151;">Grafik Perbandingan Konsumsi Mesin</h3>
    <div class="chart-container" style="height: 300px; position: relative;">
        <canvas id="chartAreaKwh"></canvas>
    </div>
</div>

<!-- TABEL DATA DETIL -->
<div class="card" style="background: #fff; padding: 20px; border-radius: 8px; border: 1px solid #e5e7eb;">
    <h3 style="font-size: 14px; font-weight: 600; margin-bottom: 15px; color: #374151;">Rincian Data kWh Mesin</h3>
    <table style="width: 100%; border-collapse: collapse; text-align: left; font-size: 14px;">
        <thead>
            <tr style="background: #1f2937; color: white;">
                <th style="padding: 10px; border: 1px solid #374151; text-align: center;">No</th>
                <th style="padding: 10px; border: 1px solid #374151;">Nama Mesin</th>
                <th style="padding: 10px; border: 1px solid #374151;">Keterangan</th>
                <th style="padding: 10px; border: 1px solid #374151; text-align: right;">Min kWh Mula</th>
                <th style="padding: 10px; border: 1px solid #374151; text-align: right;">Max kWh Akhir</th>
                <th style="padding: 10px; border: 1px solid #374151; text-align: right; background: #d97706;">Total Konsumsi (kWh)</th>
            </tr>
        </thead>
        <tbody id="tabel-body-report">
            <tr>
                <td colspan="6" style="text-align: center; padding: 20px; color: #6b7280;">Silakan pilih Area dan Bulan terlebih dahulu.</td>
            </tr>
        </tbody>
    </table>
</div>

<!-- PEMANGGILAN CHART.JS LOKAL: Memaksa halaman report membaca file js lokal Anda secara mandiri -->
{% load static %}
<script src="{% static 'js/chart.js' %}"></script>

<script>
    // Variabel global instans grafik Chart.js
    let chartInstanceArea = null;

    // Fungsi Utama Penarik Data dan Render Halaman Dashboard Web
    function loadReportArea() {
        const areaId = document.getElementById('filter-area').value;
        const monthVal = document.getElementById('filter-bulan').value;
        const canvasEl = document.getElementById('chartAreaKwh');

        // Pengaman jika elemen kanvas tidak ditemukan di halaman
        if (!canvasEl) return;

        // KONDISI REVISI: Jika filter area kosong, bersihkan grafik dan tabel lalu berhenti
        if (!areaId) {
            if (chartInstanceArea) {
                chartInstanceArea.destroy();
                chartInstanceArea = null;
            }
            document.getElementById('txt-total-area-kwh').innerText = "0.0000 kWh";
            document.getElementById('tabel-body-report').innerHTML = `<tr><td colspan="6" style="text-align: center; padding: 20px; color: #6b7280;">Silakan pilih Area dan Bulan terlebih dahulu.</td></tr>`;
            return; 
        }

        // Ambil data menggunakan jalur routing yang terdaftar di config/urls.py
        let url = "{% url 'api_report_area_data' %}?month=" + monthVal + "&area_id=" + areaId;
        console.log("Meminta data laporan dari URL: ", url);

        fetch(url)
            .then(res => {
                if (!res.ok) throw new Error("HTTP error " + res.status);
                return res.json();
            })
            .then(data => {
                console.log("Data sukses diterima dari server:", data);

                // --- PROSES RENDER GRAFIK CHART.JS YANG AMAN ---
                // Langkah 1: Jika grafik lama sudah ada, hancurkan dahulu agar tidak konflik memori
                if (chartInstanceArea) {
                    chartInstanceArea.destroy();
                }

                // Langkah 2: Buat ulang grafik baru dengan data riil yang segar dari Django
                const ctxArea = canvasEl.getContext('2d');
                chartInstanceArea = new Chart(ctxArea, {
                    type: 'bar',
                    data: { 
                        labels: data.labels || [], 
                        datasets: [
                            { 
                                label: 'Konsumsi Energi Bulanan (kWh)', 
                                data: data.values || [], // Menyuntikkan array data langsung
                                backgroundColor: 'rgba(29, 78, 216, 0.7)', 
                                borderColor: '#1d4ed8', 
                                borderWidth: 1 
                            }
                        ]
                    },
                    options: {
                        responsive: true,
                        maintainAspectRatio: false,
                        scales: {
                            x: { title: { display: true, text: 'Daftar Mesin / KWH Unit' } },
                            y: { title: { display: true, text: 'Total kWh' }, beginAtZero: true }
                        }
                    }
                });

                // --- PROSES UPDATE RINGKASAN ANGKA ---
                const totalSum = parseFloat(data.total_sum) || 0;
                document.getElementById('txt-total-area-kwh').innerText = totalSum.toFixed(2) + " kWh";

                // --- PROSES UPDATE TABEL RINCIAN DATA ---
                const tbody = document.getElementById('tabel-body-report');
                tbody.innerHTML = '';

                if (!data.tabel_data || data.tabel_data.length === 0) {
                    tbody.innerHTML = `<tr><td colspan="6" style="text-align: center; padding: 20px; color: #6b7280;">Tidak ada data mesin terdaftar di area ini.</td></tr>`;
                    return;
                }

                data.tabel_data.forEach((row, index) => {
                    const minKwh = parseFloat(row.min_kwh) || 0;
                    const maxKwh = parseFloat(row.max_kwh) || 0;
                    const konsumsi = parseFloat(row.konsumsi) || 0;

                    tbody.innerHTML += `
                        <tr style="border-bottom: 1px solid #e5e7eb;">
                            <td style="padding: 10px; text-align:center;">${index + 1}</td>
                            <td style="padding: 10px; font-weight:600;">${row.nama_mesin}</td>
                            <td style="padding: 10px; color:#4b5563;">${row.keterangan || '-'}</td>
                            <td style="padding: 10px; text-align:right;">${minKwh.toFixed(2)}</td>
                            <td style="padding: 10px; text-align:right;">${maxKwh.toFixed(2)}</td>
                            <td style="padding: 10px; text-align:right; font-weight:700; background:#fef3c7;">${konsumsi.toFixed(2)}</td>
                        </tr>
                    `;
                });
            })
            .catch(err => {
                console.error("Terjadi eror fetch data di web:", err);
                document.getElementById('tabel-body-report').innerHTML = `<tr><td colspan="6" style="text-align: center; padding: 20px; color: red;">Gagal memuat data dari server API. Periksa Console Log (F12).</td></tr>`;
            });
    }

    // Fungsi Pengalihan Aksi Mengunduh Berkas Laporan Excel
    function downloadExcelArea() {
        const areaId = document.getElementById('filter-area').value;
        const monthVal = document.getElementById('filter-bulan').value;
        if (!areaId) {
            alert("Silakan pilih Area terlebih dahulu sebelum melakukan export!");
            return;
        }
        window.location.href = "{% url 'export_report_area_excel' %}?month=" + monthVal + "&area_id=" + areaId;
    }

    // Jalankan load data secara otomatis ketika halaman pertama kali selesai dirender browser
    document.addEventListener("DOMContentLoaded", function() {
        // Beri jeda 150ms agar parameter URL dari base.html terinjeksi sempurna terlebih dahulu
        setTimeout(function() {
            loadReportArea();
        }, 150);
    });
</script>
{% endblock content %}