{% 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: 420px; }
</style>

<h2 class="page-title">Analisis Grafik Parameter Listrik</h2>

<!-- TOOLBAR FILTER & EXPORT (SAMA SEPERTI LOG KWH) -->
<div class="toolbar-container">
    <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 Menggunakan Flatpickr -->
        <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>

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

<!-- CONTAINER GRAFIK BATANG -->
<div class="card">
    <div class="chart-container">
        <canvas id="chartAnalysisBar"></canvas>
    </div>
</div>


<script>
    // Inisialisasi Kalender Lokal 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';
    const ctxBar = document.getElementById('chartAnalysisBar').getContext('2d');
    
    const chartBar = new Chart(ctxBar, {
        type: 'bar',
        data: {
            labels: [],
            datasets: [
                {
                    label: 'Rata-rata Apparent Power (VA)',
                    data: [],
                    backgroundColor: 'rgba(155, 89, 182, 0.85)',
                    borderColor: '#9b59b6',
                    borderWidth: 1
                },
                {
                    label: 'Rata-rata Power Factor',
                    data: [],
                    backgroundColor: 'rgba(52, 73, 94, 0.85)',
                    borderColor: '#34495e',
                    borderWidth: 1
                },
                {
                    label: 'Rata-rata Total Current (A)',
                    data: [],
                    backgroundColor: 'rgba(39, 174, 96, 0.85)',
                    borderColor: '#27ae60',
                    borderWidth: 1
                }
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { position: 'top' }
            },
            scales: {
                x: { title: { display: true, text: 'Waktu / Periode' } },
                y: { title: { display: true, text: 'Nilai Rata-rata' }, beginAtZero: true }
            }
        }
    });

        // Fetch Data Pendukung Custom Date serta Filter Mesin
        function fetchAnalysisData(period) {
        // 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, langsung ambil dari memori browser
        if (!mesinId) {
            mesinId = localStorage.getItem('selected_machine_id') || '';
        }

        // 2. Tambahkan mesin_id ke dalam query string URL API
        let url = `/api/analysis-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;
            }

            if (new Date(start) > new Date(end)) {
                alert("Peringatan: Tanggal awal tidak boleh lebih maju daripada tanggal akhir!");
                return;
            }

            url += `&start_date=${start}&end_date=${end}`;
        }

        fetch(url)
            .then(res => res.json())
            .then(data => {
                chartBar.data.labels = data.labels || [];
                chartBar.data.datasets[0].data = data.apparent_power || [];
                chartBar.data.datasets[1].data = data.power_factor || [];
                chartBar.data.datasets[2].data = data.total_current || [];
                chartBar.update();
            })
            .catch(err => console.error("Gagal mengambil data analisis:", err));
    }


    // ─── FITUR PERBAIKAN: MENAMBAHKAN KEMBALI FUNGSI TOMBOL FILTER PERIODE ───
    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 = '';
        }
        fetchAnalysisData(period);
    }

    // ─── FITUR PERBAIKAN: MENAMBAHKAN KEMBALI FUNGSI TOMBOL TERAPKAN CUSTOM RANGE ───
    function applyCustomRange(element) {
        document.querySelectorAll('.btn-filter').forEach(btn => btn.classList.remove('active'));
        element.classList.add('active');
        currentPeriod = 'custom';
        fetchAnalysisData(currentPeriod);
    }

    // Fungsi Download Excel Otomatis membawa parameter Mesin Id dan Tanggal Kustom jika aktif
    function downloadExcel() {
        const urlParams = new URLSearchParams(window.location.search);
        const mesinId = urlParams.get('mesin_id') || '';

        let url = `/api/export-analysis-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() {
        // Berikan delay 0 milidetik agar inisialisasi URL di base.html selesai diproses
        setTimeout(function() {
            fetchAnalysisData(currentPeriod);
        }, 0);
    });

    </script>

{% endblock content %}