{% extends 'admin_panel/base.html' %}
{% load static %}

{% block page_title %}Data Stunting{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/admin/posyandu/posyandu_list.css' %}">
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
{% endblock %}

{% block content %}
<div class="container-fluid">
    {% csrf_token %}

    <div class="row mb-3">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-start mb-2">
                <div>
                    <h2 class="mb-1">
                        <i class="fas fa-chart-line text-primary mr-2"></i>
                        Data Stunting
                    </h2>
                    <p class="text-muted mb-0 d-none d-md-block">Kelola data stunting balita dan anak</p>
                </div>
                <div>
                    <a href="{% url 'admin_panel:posyandu:stunting_data_create' %}" class="btn btn-primary">
                        <i class="fas fa-plus mr-1"></i>
                        <span class="d-none d-sm-inline">Tambah</span>
                    </a>
                </div>
            </div>
            <a href="{% url 'admin_panel:posyandu:posyandu_admin' %}" class="btn btn-outline-primary btn-sm">
                <i class="fas fa-arrow-left mr-1"></i>
                Kembali
            </a>
        </div>
    </div>

    <div class="row mb-3">
        <div class="col-6 col-md-3 mb-2">
            <div class="stats-card">
                <div class="stats-number" id="totalStuntingData">0</div>
                <div class="stats-label">Total</div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-2">
            <div class="stats-card" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); color: white;">
                <div class="stats-number" id="stuntingCases">0</div>
                <div class="stats-label">Kasus</div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-2">
            <div class="stats-card" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); color: white;">
                <div class="stats-number" id="severeStunting">0</div>
                <div class="stats-label">Berat</div>
            </div>
        </div>
        <div class="col-6 col-md-3 mb-2">
            <div class="stats-card" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); color: white;">
                <div class="stats-number" id="normalGrowth">0</div>
                <div class="stats-label">Normal</div>
            </div>
        </div>
    </div>

    <div class="filter-section">
        <div class="row">
            <div class="col-12 col-md-4 mb-2">
                <div class="search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" class="form-control" id="searchInput" placeholder="Cari nama anak...">
                </div>
            </div>
            <div class="col-6 col-md-3 mb-2">
                <select class="form-control" id="statusFilter">
                    <option value="">Semua Status</option>
                    <option value="normal">Normal</option>
                    <option value="stunting">Stunting</option>
                    <option value="severe-stunting">Stunting Berat</option>
                    <option value="risk">Berisiko</option>
                </select>
            </div>
            <div class="col-6 col-md-3 mb-2">
                <select class="form-control" id="ageFilter">
                    <option value="">Semua Usia</option>
                    <option value="0-12">0-12 bulan</option>
                    <option value="12-24">12-24 bulan</option>
                    <option value="24-36">24-36 bulan</option>
                    <option value="36-60">36-60 bulan</option>
                </select>
            </div>
            <div class="col-12 col-md-2 mb-2">
                <button class="btn btn-outline-secondary btn-block w-100" id="clearFilters">
                    <i class="fas fa-times mr-1"></i>
                    Reset
                </button>
            </div>
        </div>

        <div class="age-group-filter">
            <button class="btn btn-outline-primary active" data-age="all">Semua</button>
            <button class="btn btn-outline-primary" data-age="0-12">0-12 bulan</button>
            <button class="btn btn-outline-primary" data-age="12-24">12-24 bulan</button>
            <button class="btn btn-outline-primary" data-age="24-36">24-36 bulan</button>
            <button class="btn btn-outline-primary" data-age="36-60">36-60 bulan</button>
        </div>
    </div>

    <div class="stunting-chart">
        <h5 class="mb-3">
            <i class="fas fa-chart-pie mr-2"></i>
            Distribusi Status Stunting
        </h5>
        <div class="chart-container">
            <canvas id="stuntingChart"></canvas>
        </div>
        <div class="stunting-legend" id="stuntingLegend">

        </div>
    </div>

    <div class="row" id="stuntingDataList">
        {% if page_obj %}
            {% for stunting in page_obj %}
            <div class="col-md-6 mb-3">
                <div class="stunting-card">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div>
                            <h6 class="mb-1 font-weight-bold">{{ stunting.balita.nama }}</h6>
                            <small class="text-muted">NIK: {{ stunting.balita.nik }}</small>
                        </div>
                        <span class="stunting-status stunting-{{ stunting.status_stunting }}">
                            {{ stunting.get_status_stunting_display }}
                        </span>
                    </div>

                    <div class="row text-center mb-3">
                        <div class="col-4">
                            <div class="metric-value">{{ stunting.tinggi_badan }} cm</div>
                            <div class="metric-label">Tinggi</div>
                        </div>
                        <div class="col-4">
                            <div class="metric-value">{{ stunting.berat_badan }} kg</div>
                            <div class="metric-label">Berat</div>
                        </div>
                        <div class="col-4">
                            <div class="metric-value">{{ stunting.usia_bulan }} bln</div>
                            <div class="metric-label">Usia</div>
                        </div>
                    </div>

                    <div class="stunting-meta mb-3">
                        <div class="meta-item">
                            <i class="fas fa-calendar-alt text-primary"></i>
                            <span>{{ stunting.tanggal_ukur|date:"d M Y" }}</span>
                        </div>
                        {% if stunting.z_score_tb_u %}
                        <div class="meta-item">
                            <i class="fas fa-chart-line text-info"></i>
                            <span>Z-Score: {{ stunting.z_score_tb_u }}</span>
                        </div>
                        {% endif %}
                    </div>

                    <div class="action-buttons">
                        <a href="{% url 'admin_panel:posyandu:stunting_data_detail' stunting.id %}" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-eye"></i>
                        </a>
                        <a href="{% url 'admin_panel:posyandu:stunting_data_update' stunting.id %}" class="btn btn-sm btn-outline-warning">
                            <i class="fas fa-edit"></i>
                        </a>
                        <button class="btn btn-sm btn-outline-danger" onclick="deleteStuntingData({{ stunting.id }})">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="col-12">
                <div class="empty-state">
                    <i class="fas fa-chart-line"></i>
                    <h5>Belum ada data stunting</h5>
                    <p>Mulai dengan menambahkan data stunting pertama</p>
                    <a href="{% url 'admin_panel:posyandu:stunting_data_create' %}" class="btn btn-primary">
                        <i class="fas fa-plus mr-1"></i>
                        Tambah Data
                    </a>
                </div>
            </div>
        {% endif %}
    </div>

    {% if page_obj.has_other_pages %}
    <div class="pagination-wrapper">
        <nav aria-label="Paginasi data stunting">
            <ul class="pagination">
                {% if page_obj.has_previous %}
                    <li class="page-item">
                        <a class="page-link" href="?page=1">&laquo; Awal</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Sebelumnya</a>
                    </li>
                {% endif %}

                {% for num in page_obj.paginator.page_range %}
                    {% if page_obj.number == num %}
                        <li class="page-item active">
                            <span class="page-link">{{ num }}</span>
                        </li>
                    {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ num }}">{{ num }}</a>
                        </li>
                    {% endif %}
                {% endfor %}

                {% if page_obj.has_next %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.next_page_number }}">Selanjutnya</a>
                    </li>
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Akhir &raquo;</a>
                    </li>
                {% endif %}
            </ul>
        </nav>
    </div>
    {% endif %}
</div>

<div class="modal fade" id="deleteStuntingDataModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title">
                    <i class="fas fa-exclamation-triangle mr-2"></i>
                    Konfirmasi Hapus
                </h5>
                <button type="button" class="close text-white" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p class="mb-0">Apakah Anda yakin ingin menghapus data stunting ini?</p>
                <p class="text-muted small mb-0">Tindakan ini tidak dapat dibatalkan.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
                <button type="button" class="btn btn-danger" id="confirmDelete">
                    <i class="fas fa-trash mr-1"></i>
                    Hapus
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script></script>
<script>$(document).ready(function() {
    let currentPage = 1;
    let currentFilters = {
        search: '',
        status: '',
        age: ''
    };
    let stuntingChart = null;

    initializeChart();
    loadStuntingData();

    $('#searchInput').on('input', function() {
        currentFilters.search = $(this).val();
        currentPage = 1;
        loadStuntingData();
    });

    $('#statusFilter').on('change', function() {
        currentFilters.status = $(this).val();
        currentPage = 1;
        loadStuntingData();
    });

    $('#ageFilter').on('change', function() {
        currentFilters.age = $(this).val();
        currentPage = 1;
        loadStuntingData();
    });

    $('.age-group-filter .btn').on('click', function() {
        $('.age-group-filter .btn').removeClass('active');
        $(this).addClass('active');
        currentFilters.age = $(this).data('age');
        currentPage = 1;
        loadStuntingData();
    });

    $('#clearFilters').on('click', function() {
        $('#searchInput').val('');
        $('#statusFilter').val('');
        $('#ageFilter').val('');
        $('.age-group-filter .btn').removeClass('active');
        $('.age-group-filter .btn[data-age="all"]').addClass('active');

        currentFilters = {
            search: '',
            status: '',
            age: ''
        };
        currentPage = 1;
        loadStuntingData();
    });

    function loadStuntingData() {
        $.ajax({
            url: '{% url "admin_panel:posyandu:api_stunting_data_list" %}',
            method: 'GET',
            data: {
                page: currentPage,
                search: currentFilters.search,
                status: currentFilters.status,
                age: currentFilters.age
            },
            success: function(response) {
                // Check if response exists and has the expected structure (API might use 'results' or 'data')
                if (response) {
                    const stuntingData = response.results || response.data || [];
                    displayStuntingData(stuntingData);
                    updatePagination(response.pagination);
                    updateStatistics(response.statistics);
                    updateChart(response.statistics);
                } else {
                    console.warn('Stunting data API response is invalid:', response);
                    displayStuntingData([]);
                    updateStatistics({});
                }
            },
            error: function(xhr, status, error) {
                console.error('Error loading stunting data:', error);
                showError('Gagal memuat data stunting');
            }
        });
    }

    function displayStuntingData(stuntingData) {
        const container = $('#stuntingDataList');

        // Check if stuntingData is valid and is an array
        if (!stuntingData || !Array.isArray(stuntingData) || stuntingData.length === 0) {
            container.html(`
                <div class="col-12">
                    <div class="empty-state">
                        <i class="fas fa-chart-line"></i>
                        <h4>Tidak ada data stunting</h4>
                        <p>Belum ada data stunting yang tersedia.</p>
                    </div>
                </div>
            `);
            return;
        }

        let html = '';
        stuntingData.forEach(function(data) {
            const statusLabels = {
                'normal': 'Normal',
                'stunting': 'Stunting',
                'severe-stunting': 'Stunting Berat',
                'risk': 'Berisiko'
            };

            const statusClasses = {
                'normal': 'normal',
                'stunting': 'stunting',
                'severe-stunting': 'severe-stunting',
                'risk': 'risk'
            };

            const interventionLabels = {
                'pemberian-makanan': 'Pemberian Makanan',
                'suplementasi': 'Suplementasi',
                'konseling': 'Konseling',
                'monitoring': 'Monitoring',
                'rujukan': 'Rujukan'
            };

            html += `
                <div class="col-md-6 mb-3">
                    <div class="stunting-card">
                        <div class="d-flex justify-content-between align-items-start mb-3">
                            <div>
                                <h6 class="mb-1">${data.child_name}</h6>
                                <small class="text-muted">${data.measurement_date}</small>
                            </div>
                            <span class="stunting-status ${statusClasses[data.stunting_status]}">
                                ${statusLabels[data.stunting_status]}
                            </span>
                        </div>

                        <div class="patient-info">
                            <div class="row">
                                <div class="col-6">
                                    <small class="text-muted">Usia:</small><br>
                                    <strong>${data.age_months} bulan</strong>
                                </div>
                                <div class="col-6">
                                    <small class="text-muted">Jenis Kelamin:</small><br>
                                    <strong>${data.gender === 'L' ? 'Laki-laki' : 'Perempuan'}</strong>
                                </div>
                            </div>
                        </div>

                        <div class="growth-chart">
                            <h6 class="mb-2">Data Pengukuran</h6>
                            <div class="chart-item">
                                <span class="chart-label">Berat Badan:</span>
                                <span class="chart-value">${data.weight} kg</span>
                            </div>
                            <div class="chart-item">
                                <span class="chart-label">Tinggi Badan:</span>
                                <span class="chart-value">${data.height} cm</span>
                            </div>
                            <div class="chart-item">
                                <span class="chart-label">BMI:</span>
                                <span class="chart-value">${data.bmi || '-'}</span>
                            </div>
                        </div>

                        ${data.intervention ? `
                            <div class="intervention-section">
                                <div class="intervention-title">Intervensi</div>
                                <ul class="intervention-list">
                                    <li>${interventionLabels[data.intervention] || data.intervention}</li>
                                </ul>
                            </div>
                        ` : ''}

                        <div class="action-buttons mt-3">
                            <button class="btn btn-sm btn-outline-primary" onclick="viewStuntingData(${data.id})">
                                <i class="fas fa-eye"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-warning" onclick="editStuntingData(${data.id})" title="Edit Data Stunting">
                                <i class="fas fa-edit"></i>
                            </button>
                            <button class="btn btn-sm btn-outline-danger" onclick="deleteStuntingData(${data.id})">
                                <i class="fas fa-trash"></i>
                            </button>
                        </div>
                    </div>
                </div>
            `;
        });

        container.html(html);
    }

    function initializeChart() {
        const ctx = document.getElementById('stuntingChart');
        if (!ctx) {
            console.error('Canvas element not found');
            return;
        }
        
        stuntingChart = new Chart(ctx.getContext('2d'), {
            type: 'doughnut',
            data: {
                labels: ['Normal', 'Stunting', 'Stunting Berat', 'Berisiko'],
                datasets: [{
                    data: [0, 0, 0, 0],
                    backgroundColor: [
                        '#43e97b',
                        '#f5576c',
                        '#c2185b',
                        '#ffc107'
                    ],
                    borderWidth: 3,
                    borderColor: '#fff'
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: true,
                        position: 'bottom',
                        labels: {
                            padding: 15,
                            font: {
                                size: 12,
                                weight: 500
                            },
                            usePointStyle: true,
                            pointStyle: 'circle'
                        }
                    },
                    tooltip: {
                        callbacks: {
                            label: function(context) {
                                const label = context.label || '';
                                const value = context.parsed || 0;
                                const total = context.dataset.data.reduce((a, b) => a + b, 0);
                                const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : 0;
                                return `${label}: ${value} (${percentage}%)`;
                            }
                        }
                    }
                }
            }
        });
    }
    
    function updateChart(stats) {
        if (!stuntingChart || !stats) return;
        
        const normalCount = stats.normal || 0;
        const stuntingCount = stats.stunting || 0;
        const severeCount = stats.severe_stunting || 0;
        const riskCount = stats.risk || 0;
        
        stuntingChart.data.datasets[0].data = [
            normalCount,
            stuntingCount,
            severeCount,
            riskCount
        ];
        
        stuntingChart.update();
        
        // Update legend
        updateChartLegend(normalCount, stuntingCount, severeCount, riskCount);
    }
    
    function updateChartLegend(normal, stunting, severe, risk) {
        const total = normal + stunting + severe + risk;
        const legendHtml = `
            <div class="row text-center">
                <div class="col-6 col-md-3 mb-2">
                    <div class="legend-item">
                        <div class="legend-color" style="background: #43e97b;"></div>
                        <div class="legend-label">Normal</div>
                        <div class="legend-value">${normal}</div>
                    </div>
                </div>
                <div class="col-6 col-md-3 mb-2">
                    <div class="legend-item">
                        <div class="legend-color" style="background: #f5576c;"></div>
                        <div class="legend-label">Stunting</div>
                        <div class="legend-value">${stunting}</div>
                    </div>
                </div>
                <div class="col-6 col-md-3 mb-2">
                    <div class="legend-item">
                        <div class="legend-color" style="background: #c2185b;"></div>
                        <div class="legend-label">Berat</div>
                        <div class="legend-value">${severe}</div>
                    </div>
                </div>
                <div class="col-6 col-md-3 mb-2">
                    <div class="legend-item">
                        <div class="legend-color" style="background: #ffc107;"></div>
                        <div class="legend-label">Berisiko</div>
                        <div class="legend-value">${risk}</div>
                    </div>
                </div>
            </div>
        `;
        $('#stuntingLegend').html(legendHtml);
    }

    window.viewStuntingData = function(id) {
        window.location.href = `{% url "admin_panel:posyandu:stunting_data_detail" 0 %}`.replace('0', id);
    };

    window.editStuntingData = function(id) {
        try {
            const editUrl = `{% url "admin_panel:posyandu:stunting_data_update" 0 %}`.replace('0', id);
            console.log('=== EDIT STUNTING DATA DEBUG ===');
            console.log('Redirecting to edit URL:', editUrl);
            console.log('Current URL:', window.location.href);
            console.log('Target ID:', id);
            console.log('User Agent:', navigator.userAgent);
            console.log('================================');
            
            // Validate URL before redirect
            if (!editUrl || editUrl.includes('0')) {
                console.error('Invalid edit URL generated:', editUrl);
                alert('URL edit tidak valid. Silakan refresh halaman dan coba lagi.');
                return;
            }
            
            // Check if URL is valid
            try {
                new URL(editUrl, window.location.origin);
            } catch (urlError) {
                console.error('Invalid URL format:', urlError);
                alert('URL format tidak valid. Silakan refresh halaman dan coba lagi.');
                return;
            }
            
            // Try multiple redirect methods to avoid browser blocking
            try {
                // Method 1: Direct assignment
                console.log('Trying method 1: window.location.href');
                window.location.href = editUrl;
            } catch (e1) {
                console.warn('Method 1 failed, trying method 2:', e1);
                try {
                    // Method 2: Using assign
                    console.log('Trying method 2: window.location.assign');
                    window.location.assign(editUrl);
                } catch (e2) {
                    console.warn('Method 2 failed, trying method 3:', e2);
                    try {
                        // Method 3: Using replace
                        console.log('Trying method 3: window.location.replace');
                        window.location.replace(editUrl);
                    } catch (e3) {
                        console.error('All redirect methods failed:', e3);
                        // Method 4: Create a link and click it
                        console.log('Trying method 4: Create link and click');
                        const link = document.createElement('a');
                        link.href = editUrl;
                        link.target = '_self';
                        document.body.appendChild(link);
                        link.click();
                        document.body.removeChild(link);
                    }
                }
            }
        } catch (error) {
            console.error('Error redirecting to edit page:', error);
            alert('Terjadi kesalahan saat membuka halaman edit. Silakan coba lagi.');
        }
    };

    window.deleteStuntingData = function(id) {
        $('#deleteStuntingDataModal').modal('show');
        $('#confirmDelete').off('click').on('click', function() {
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
            
            $.ajax({
                url: `{% url "admin_panel:posyandu:api_stunting_data_delete" 0 %}`.replace('0', id),
                method: 'DELETE',
                headers: {
                    'X-CSRFToken': csrfToken
                },
                success: function(response) {
                    $('#deleteStuntingDataModal').modal('hide');
                    showSuccess('Data stunting berhasil dihapus');
                    loadStuntingData();
                },
                error: function(xhr, status, error) {
                    showError('Gagal menghapus data stunting');
                }
            });
        });
    };

    function updateStatistics(stats) {
        $('#totalStuntingData').text(stats.total || 0);
        $('#stuntingCases').text(stats.stunting || 0);
        $('#severeStunting').text(stats.severe_stunting || 0);
        $('#normalGrowth').text(stats.normal || 0);
    }

    function updatePagination(pagination) {
        // TODO: Implement pagination if needed
    }

    // Alert functions
    function showSuccess(message) {
        showAlert(message, 'success');
    }

    function showError(message) {
        showAlert(message, 'error');
    }

    function showAlert(message, type = 'info') {
        const alertTypes = {
            'success': 'alert-success',
            'error': 'alert-danger',
            'warning': 'alert-warning',
            'info': 'alert-info'
        };

        const alertClass = alertTypes[type] || alertTypes['info'];
        const icons = {
            'success': 'fa-check-circle',
            'error': 'fa-exclamation-circle',
            'warning': 'fa-exclamation-triangle',
            'info': 'fa-info-circle'
        };
        const icon = icons[type] || icons['info'];

        const alertHtml = `
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert" style="position: fixed; top: 20px; right: 20px; z-index: 9999; min-width: 300px;">
                <i class="fas ${icon} me-2"></i>
                <strong>${message}</strong>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        `;

        // Remove existing alerts
        $('.alert').remove();

        // Add new alert
        $('body').append(alertHtml);

        // Auto dismiss after 3 seconds
        setTimeout(function() {
            $('.alert').fadeOut(300, function() {
                $(this).remove();
            });
        }, 3000);
    }

});
</script>
{% endblock %}