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

{% load static %}

{% block content %}
<script src="{% static 'js/chart.js' %}"></script>

<style>
    .grid-cards { 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
        gap: 20px; 
        margin-bottom: 25px; 
    }
    .card { 
        background: #fff; 
        padding: 24px; 
        border-radius: 12px; 
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); 
        border: 1px solid #e5e7eb;
    }
    .card h3 {
        font-size: 16px;
        font-weight: 600;
        color: #374151;
        margin-bottom: 15px;
    }
    .card-digital { text-align: center; padding: 20px 15px; }
    .card-digital h4 { margin: 0 0 8px 0; color: #9ca3af; font-size: 12px; text-transform: uppercase; font-weight: 600; }
    .card-digital h1 { margin: 0; font-size: 24px; font-weight: 700; }
    .page-title { font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 25px; }
    
    /* Style Baru untuk Membagi Area Grafik Menjadi 2 Kolom Sejajar */
    .chart-row-split {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        width: 100%;
    }
    .chart-col-half {
        flex: 1;
        min-width: 300px;
        height: 380px;
        position: relative;
    }
    
    .chart-row-split {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 25px; /* <-- TAMBAHKAN INI: Memberi jarak ke bawah agar grafik kWh tidak menempel */
    }

    .chart-container { position: relative; width: 100%; height: 320px; }

</style>

<!-- 1. SISPISKAN LIBRARY HTML2PDF  -->
<script src="{% static 'js/html2pdf.bundle.min.js' %}"></script>

<!-- 2. BUNGKUS SELURUH KONTEN UTAMA DENGAN ID KHUSUS UNTUK DICETAK -->
<div id="konten-dashboard-pdf" style="padding: 10px; background: transparent;">

    <!-- 3. STRUKTUR BARU HEADER: JUDUL DAN TOMBOL BERDAMPINGAN -->
    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; flex-wrap: wrap; gap: 15px;">
        <h2 class="page-title" style="margin: 0;">Dashboard Monitoring kWh Meter Real-time</h2>
        
        <!-- Tombol Download PDF Merah (Sama persis gayanya dengan report_all Anda) -->
        <button id="btn-download-pdf-utama" onclick="exportDashboardToPDF()" style="padding: 8px 16px; background: #ef4444; color: white; border: none; border-radius: 6px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; transition: background 0.2s;">
            <i class="fa-solid fa-file-pdf"></i> Download PDF Dashboard
        </button>
    </div>

    <!-- 4. KOTAK INDIKATOR DIGITAL (Tetap utuh, tidak tersentuh) -->
    <div class="grid-cards">
        <div class="card card-digital" style="border-top: 4px solid #e74c3c;">
            <h4>Active Power</h4>
            <h1 id="txt-active" style="color: #e74c3c;">0.00 kWh</h1>
        </div>
        <div class="card card-digital" style="border-top: 4px solid #9b59b6;">
            <h4>Apparent Power / Voltage</h4>
            <h1 id="txt-apparent" style="color: #9b59b6;">0 V / VA</h1>
        </div>
        <div class="card card-digital" style="border-top: 4px solid #34495e;">
            <h4>Power Factor</h4>
            <h1 id="txt-pf" style="color: #34495e;">0.00</h1>
        </div>
        <div class="card card-digital" style="border-top: 4px solid #27ae60;">
            <h4>Total Current</h4>
            <h1 id="txt-current" style="color: #27ae60;">0.0000 A</h1>
        </div>
    </div>


<!-- STRUKTUR BARU: MEMISAHKAN GRAFIK MENJADI DUA PANEL MANDIRI DENGAN JUDUL JELAS -->
<div class="chart-row-split">
    
    <!-- Panel Kiri Khusus: Power Factor -->
    <div class="card chart-col-half">
        <h3 style="margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid #f3f4f6; padding-bottom: 8px;">
            <i class="fa-solid fa-gauge-high" style="color: #34495e; margin-right: 8px;"></i>
            Grafik Faktor Daya (Power Factor / Cos φ)
        </h3>
        <div style="height: 300px; position: relative;">
            <canvas id="chartPowerFactor"></canvas>
        </div>
    </div>
    
    <!-- Panel Kanan Khusus: Apparent Power & Current -->
    <div class="card chart-col-half">
        <h3 style="margin-top: 0; margin-bottom: 15px; border-bottom: 1px solid #f3f4f6; padding-bottom: 8px;">
            <i class="fa-solid fa-bolt" style="color: #9b59b6; margin-right: 8px;"></i>
            Grafik Arus (Amper) & Daya Semu (VA)
        </h3>
        <div style="height: 300px; position: relative;">
            <canvas id="chartApparentCurrent"></canvas>
        </div>
    </div>

</div>

<!-- 3. GRAFIK AKUMULASI TOTAL ENERGI (KWH) - DENGAN TAMBAHAN MARGIN ATAS -->
<div class="card" style="margin-top: 5px;"> <!-- <-- Tambahkan style margin-top ini -->
    <h3>
        <i class="fa-solid fa-chart-line" style="color: #2980b9; margin-right: 8px;"></i>
        Grafik Akumulasi Total Energi (kWh)
    </h3>
    <div class="chart-container">
        <canvas id="chartTotalKwh"></canvas>
    </div>
</div>


<script>
        // Konfigurasi umum grafik
        const commonOptions = {
        responsive: true,
        maintainAspectRatio: false,
        animation: false,
        scales: {
            x: {
                type: 'category',
                title: { display: true, text: 'Waktu Pembacaan', font: { weight: 'bold', size: 11 } },
                ticks: { 
                    maxRotation: 45, 
                    minRotation: 45, 
                    font: { size: 10 },
                    // Tambahkan opsi autoSkip agar Chart.js otomatis menyembunyikan sebagian label jam 
                    // jika data terlalu padat, sehingga teks sumbu X tidak saling tabrakan.
                    autoSkip: true,
                    maxTicksLimit: 15 // Membatasi maksimal hanya 15 label jam yang terlihat di layar
                },
                grid: { display: false }
            },
            y: {
                type: 'linear',
                display: true,
                title: { display: true, text: 'Nilai Sensor', font: { weight: 'bold', size: 11 } },
                grid: { color: '#f3f4f6' }
            }
        }
    };


    // 1. Inisialisasi Grafik Kiri: Power Factor
    const ctxPF = document.getElementById('chartPowerFactor').getContext('2d');
    const chartPowerFactor = new Chart(ctxPF, {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                {
                    label: 'Power Factor',
                    data: [],
                    borderColor: '#34495e',
                    backgroundColor: 'rgba(52, 73, 94, 0.2)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 1
                }
            ]
        },
        options: {
            ...commonOptions,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { usePointStyle: true, boxWidth: 10, font: { size: 12, weight: '500' } }
                }
            }
        }
    });

    // 2. Inisialisasi Grafik Kanan: Apparent Power & Total Current
    const ctxAC = document.getElementById('chartApparentCurrent').getContext('2d');
    const chartApparentCurrent = new Chart(ctxAC, {
        type: 'line',
        data: {
            labels: [],
            datasets: [
                {
                    label: 'Apparent Power (VA) / Voltage (V)',
                    data: [],
                    borderColor: '#9b59b6',
                    backgroundColor: 'rgba(155, 89, 182, 0.25)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 1
                },
                {
                    label: 'Total Current (A)',
                    data: [],
                    borderColor: '#27ae60',
                    backgroundColor: 'rgba(39, 174, 96, 0.25)',
                    fill: true,
                    tension: 0.4,
                    pointRadius: 1
                }
            ]
        },
        options: {
            ...commonOptions,
            plugins: {
                legend: {
                    position: 'bottom',
                    labels: { usePointStyle: true, boxWidth: 10, font: { size: 12, weight: '500' } }
                }
            }
        }
    });

    // 3. Inisialisasi Grafik Akumulasi Total Energi (Bawah - Asli)
    const ctxTotalKwh = document.getElementById('chartTotalKwh').getContext('2d');
    const chartTotalKwh = new Chart(ctxTotalKwh, {
        type: 'line',
        data: { labels: [], datasets: [
            { 
                label: 'Total Konsumsi Energi (kWh)', 
                data: [], 
                borderColor: '#2980b9', 
                backgroundColor: 'rgba(41, 128, 185, 0.04)', 
                tension: 0.1, 
                fill: true, 
                pointRadius: 2 
            }
        ]},
        options: {
            ...commonOptions,
            plugins: {
                legend: {
                    position: 'top',
                    labels: { boxWidth: 12, font: { size: 11, weight: '500' } }
                }
            }
        }
    });
    // Fetch Data dari API Django dengan menyertakan parameter mesin_id
    function updateData() {
        // 1. Ambil parameter mesin_id dari URL browser saat ini
        const urlParams = new URLSearchParams(window.location.search);
        let mesinId = urlParams.get('mesin_id');

        // PENGAMAN SINKRONISASI: Jika URL masih kosong saat fungsi ini dipanggil pertama kali,
        // langsung ambil dari localStorage agar tidak menembak ke data 'all'
        if (!mesinId) {
            mesinId = localStorage.getItem('selected_machine_id') || '';
        }

        // 2. Kirimkan parameter tersebut sebagai query string ke endpoint API Django
        fetch(`/api/data/?mesin_id=${mesinId}`)
            .then(res => res.json())
            .then(data => {
                // Pastikan data timestamps tersedia dan tidak kosong
                if (data.timestamps && data.timestamps.length > 0) {
                    const labels = data.timestamps;

                    // A. Update Grafik Chart.js
                    chartPowerFactor.data.labels = labels;
                    chartPowerFactor.data.datasets[0].data = data.power_factor;
                    chartPowerFactor.update('none');

                    chartApparentCurrent.data.labels = labels;
                    chartApparentCurrent.data.datasets[0].data = data.apparent_power;
                    chartApparentCurrent.data.datasets[1].data = data.total_current;
                    chartApparentCurrent.update('none');

                    chartTotalKwh.data.labels = labels;
                    chartTotalKwh.data.datasets[0].data = data.active_power_kwh;
                    chartTotalKwh.update('none');

                    // B. Logika Sinkronisasi Angka Kotak Indikator Digital
                    const len = labels.length;
                    
                    const valTotalKwh = parseFloat(data.active_power_kwh[len - 1]) || 0;
                    const valApparent = parseFloat(data.apparent_power[len - 1]) || 0;
                    const valPf       = parseFloat(data.power_factor[len - 1]) || 0;
                    const valCurrent  = parseFloat(data.total_current[len - 1]) || 0;

                    document.getElementById('txt-active').innerText   = valTotalKwh.toFixed(2) + " kWh";
                    document.getElementById('txt-apparent').innerText = valApparent.toFixed(2) + " V / VA";
                    document.getElementById('txt-pf').innerText       = valPf.toFixed(2);
                    document.getElementById('txt-current').innerText  = valCurrent.toFixed(2) + " A";
                    
                } else {
                    // C. Reset Tampilan Menjadi Nol Jika Mesin belum Memiliki Data
                    document.getElementById('txt-active').innerText   = "0.00 kWh";
                    document.getElementById('txt-apparent').innerText = "0.00 V / VA";
                    document.getElementById('txt-pf').innerText       = "0.000";
                    document.getElementById('txt-current').innerText  = "0.0000 A";
                    
                    chartPowerFactor.data.labels = [];
                    chartPowerFactor.data.datasets[0].data = [];
                    chartPowerFactor.update('none');

                    chartApparentCurrent.data.labels = [];
                    chartApparentCurrent.data.datasets[0].data = [];
                    chartApparentCurrent.data.datasets[1].data = [];
                    chartApparentCurrent.update('none');

                    chartTotalKwh.data.labels = [];
                    chartTotalKwh.data.datasets[0].data = [];
                    chartTotalKwh.update('none');
                }
            })
            .catch(err => console.error("Gagal mengambil data dari API:", err));
    }

    // SOLUSI UTAMA: Jalankan fungsi setelah DOM benar-benar siap (antre setelah script base.html selesai)
    document.addEventListener("DOMContentLoaded", function() {
        // Berikan delay sangat kecil (0 milidetik) agar history.replaceState di base.html selesai dieksekusi lebih dulu
        setTimeout(updateData, 0);
        
        // Lakukan pembaruan otomatis setiap 5 detik agar tetap real-time
        setInterval(updateData, 5000);
    });

   // Export Dashboard PDF - BAGIAN 1
function exportDashboardToPDF() {
    const element = document.getElementById('konten-dashboard-pdf');
    const tombolPdf = document.getElementById('btn-download-pdf-utama');
    
    // 1. Sembunyikan tombol download agar tidak ikut tercetak
    if (tombolPdf) tombolPdf.style.display = 'none';

    // 2. FUNGSI SNAPSHOT OPTIMASI (Memaksa Chart.js merender SEMUA data sumbu X)
    function getFullSnapshot(chartInstance, targetWidth, targetHeight) {
        try {
            const tempCanvas = document.createElement('canvas');
            tempCanvas.width = targetWidth;
            tempCanvas.height = targetHeight;
            
            // Salin data secara aman tanpa merusak grafik asli di layar
            const konfigurasiData = chartInstance.data;

            const tempConfig = {
                type: chartInstance.config.type,
                data: konfigurasiData, 
                options: {
                    ...chartInstance.config.options,
                    responsive: false,
                    maintainAspectRatio: false,
                    animation: false,
                    scales: {
                        ...chartInstance.config.options.scales,
                        x: {
                            ...chartInstance.config.options.scales?.x,
                            ticks: {
                                // KUNCI UTAMA: Matikan autoSkip agar semua tanggal/waktu muncul 100%
                                autoSkip: false, 
                                maxRotation: 45,
                                minRotation: 45,
                                font: {
                                    size: 9 // Ukuran font sedikit dikecilkan agar muat di PDF
                                }
                            }
                        }
                    }
                }
            };

            // Render grafik bayangan di memori
            const tempChart = new Chart(tempCanvas.getContext('2d'), tempConfig);
            const base64Img = tempChart.toBase64Image();
            tempChart.destroy(); // Hapus dari memori setelah selesai
            
            return base64Img;
        } catch (err) {
            console.error("Gagal mengambil snapshot grafik:", err);
            return chartInstance.toBase64Image();
        }
    }

    // 3. Ambil Snapshot Gambar (Grafik bawah diberikan ruang sumbu X lebih lebar: 1600px)
    const imgPF = getFullSnapshot(chartPowerFactor, 900, 350);
    const imgAC = getFullSnapshot(chartApparentCurrent, 900, 350);
    const imgTotalKwh = getFullSnapshot(chartTotalKwh, 1600, 400); 
    // =========================================================================
    // BAGIAN 2: KONFIGURASI LAYOUT CLONE DAN EKSEKUSI DOWNLOAD PDF
    // =========================================================================
    const opsiCetak = {
        margin:       10, 
        filename:     'Dashboard_Realtime_Monitoring.pdf',
        image:        { type: 'jpeg', quality: 0.98 },
        pagebreak:    { mode: ['css', 'legacy'], avoid: ['.card'] }, 
        html2canvas:  { 
            scale: 2, 
            useCORS: true,
            logging: false,
            onclone: function(clonedDocument) {
                // A. Berikan lebar kontainer PDF yang ideal agar pas di A4 Landscape
                const clonedBody = clonedDocument.getElementById('konten-dashboard-pdf');
                if (clonedBody) {
                    clonedBody.style.setProperty('width', '1200px', 'important');
                    clonedBody.style.setProperty('max-width', '1200px', 'important');
                }

                // B. Susun indikator atas tetap dalam 4 kolom sejajar
                const clonedGrid = clonedDocument.querySelector('.grid-cards');
                if (clonedGrid) {
                    clonedGrid.style.setProperty('display', 'grid', 'important');
                    clonedGrid.style.setProperty('grid-template-columns', 'repeat(4, 1fr)', 'important');
                    clonedGrid.style.setProperty('gap', '15px', 'important');
                }

                // C. Atur baris grafik atas agar tetap berdampingan Kiri-Kanan
                const clonedRowSplit = clonedDocument.querySelector('.chart-row-split');
                if (clonedRowSplit) {
                    clonedRowSplit.style.setProperty('display', 'flex', 'important');
                    clonedRowSplit.style.setProperty('flex-wrap', 'nowrap', 'important'); 
                    clonedRowSplit.style.setProperty('gap', '20px', 'important');
                    clonedRowSplit.style.setProperty('width', '100%', 'important');
                }

                // D. Bagi area grafik atas masing-masing menjadi 50% ruang
                const clonedCols = clonedDocument.querySelectorAll('.chart-col-half');
                clonedCols.forEach((col) => {
                    col.style.setProperty('flex', '1', 'important');
                    col.style.setProperty('width', '50%', 'important');
                    col.style.setProperty('max-width', '50%', 'important');
                });

                // E. EKSEKUSI PENUKARAN: Ganti canvas dengan Gambar Snapshot Lebar kita
                // Grafik 1: Power Factor
                const canvasPF = clonedDocument.getElementById('chartPowerFactor');
                if (canvasPF) {
                    const imgElement = clonedDocument.createElement('img');
                    imgElement.src = imgPF;
                    imgElement.style.setProperty('width', '100%', 'important');
                    imgElement.style.setProperty('height', 'auto', 'important');
                    canvasPF.parentNode.replaceChild(imgElement, canvasPF);
                }

                // Grafik 2: Apparent & Current
                const canvasAC = clonedDocument.getElementById('chartApparentCurrent');
                if (canvasAC) {
                    const imgElement = clonedDocument.createElement('img');
                    imgElement.src = imgAC;
                    imgElement.style.setProperty('width', '100%', 'important');
                    imgElement.style.setProperty('height', 'auto', 'important');
                    canvasAC.parentNode.replaceChild(imgElement, canvasAC);
                }

                // Grafik 3: Akumulasi Total Energi
                const canvasTotalKwh = clonedDocument.getElementById('chartTotalKwh');
                if (canvasTotalKwh) {
                    const imgElement = clonedDocument.createElement('img');
                    imgElement.src = imgTotalKwh;
                    imgElement.style.setProperty('width', '100%', 'important');
                    imgElement.style.setProperty('height', 'auto', 'important');
                    canvasTotalKwh.parentNode.replaceChild(imgElement, canvasTotalKwh);
                }
            }
        },
        jsPDF:        { unit: 'mm', format: 'a4', orientation: 'landscape' }
    };

    // Eksekusi pembuatan dan pengunduhan PDF
    html2pdf().set(opsiCetak).from(element).save().then(() => {
        // Tampilkan kembali tombol download setelah berhasil
        if (tombolPdf) tombolPdf.style.display = 'flex';
    }).catch((error) => {
        console.error("Gagal mengekspor PDF:", error);
        // Tampilkan kembali tombol jika terjadi error di tengah jalan
        if (tombolPdf) tombolPdf.style.display = 'flex';
    });
}

</script>
{% endblock content %}