{% extends 'assistant/base.html' %}
{% load static %}
{% load i18n %}

{% block content %}
<div class="content" style="padding: 20px;">
    <div style="max-width: 1000px; margin: 0 auto;">
        <div style="background-color: white; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 30px;">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; border-bottom: 2px solid #009A6E; padding-bottom: 15px;">
                <h2 style="color: #009A6E; margin: 0;">{% trans "گزارش آنالیز ترکیب بدنی" %}</h2>
                <div style="display: flex; gap: 10px;">
                    {% if is_assistant %}
                    <button onclick="openEditModal()" class="btn btn-primary" style="padding: 8px 20px;">
                        <i class="fa fa-edit"></i> {% trans "ویرایش گزارش" %}
                    </button>
                    {% endif %}
                    <a href="{% if is_assistant %}{% url 'panel-assistant-show-patient' patient.id %}{% else %}#{% endif %}" class="btn btn-secondary">
                        <i class="fa fa-arrow-right"></i> {% trans "بازگشت" %}
                    </a>
                </div>
            </div>

            <div style="background-color: #f5f5f5; padding: 15px; border-radius: 5px; margin-bottom: 20px;">
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px;">
                    <div>
                        <strong>{% trans "بیمار:" %}</strong> {{ patient.profile.first_name }} {{ patient.profile.last_name }}
                    </div>
                    <div>
                        <strong>{% trans "تاریخ ایجاد:" %}</strong> {{ report.created_at|date:"Y/m/d - H:i" }}
                    </div>
                    <div>
                        <strong>{% trans "وضعیت:" %}</strong>
                        {% if report.status == 'shared' %}
                            <span style="color: #4CAF50; font-weight: bold;">{% trans "به اشتراک گذاشته شده" %}</span>
                        {% elif report.status == 'confirmed' %}
                            <span style="color: #FF9800; font-weight: bold;">{% trans "تایید شده" %}</span>
                        {% else %}
                            <span style="color: #9E9E9E; font-weight: bold;">{% trans "در انتظار بررسی" %}</span>
                        {% endif %}
                    </div>
                </div>
            </div>

            {% if report.image %}
            <div style="margin-bottom: 30px;">
                <h3 style="color: #00796B; margin-bottom: 15px;">{% trans "تصویر آنالیز" %}</h3>
                <div style="text-align: center; background-color: #f9f9f9; padding: 20px; border-radius: 5px;">
                    <img src="{{ report.image.url }}" alt="Body Analysis" style="max-width: 100%; height: auto; border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,0.2);">
                </div>
            </div>
            {% endif %}

            {% if report.report_data %}
            <div id="reportContent" style="direction: rtl; text-align: right; font-family: IranSansWeb, sans-serif;">
                <!-- Report will be rendered here by JavaScript -->
            </div>

            {{ report.report_data|json_script:"report-data" }}
            <script>
                const reportData = JSON.parse(document.getElementById('report-data').textContent);
                
                function renderReport() {
                    const container = document.getElementById('reportContent');
                    let html = '';
                    
                    if (reportData.report_title) {
                        html += `<h2 style="color: #009A6E; text-align: center; margin-bottom: 30px; font-size: 28px;">${reportData.report_title}</h2>`;
                    }
                    
                    if (reportData.sections && Array.isArray(reportData.sections)) {
                        reportData.sections.forEach((section, index) => {
                            html += `<div style="margin-bottom: 40px; background-color: ${index % 2 === 0 ? '#ffffff' : '#f5f5f5'}; padding: 20px; border-radius: 8px; border-right: 4px solid #009A6E;">`;
                            html += `<h3 style="color: #00796B; margin-bottom: 20px; font-size: 22px; border-bottom: 1px solid #e0e0e0; padding-bottom: 10px;">${section.title}</h3>`;
                            
                            if (section.data) {
                                html += '<div style="padding: 10px;">';
                                html += formatSectionData(section.data);
                                html += '</div>';
                            }
                            
                            html += '</div>';
                        });
                    }
                    
                    container.innerHTML = html;
                }
                
                function formatSectionData(data) {
                    if (typeof data === 'object' && data !== null) {
                        let html = '';
                        
                        for (const [key, value] of Object.entries(data)) {
                            if (Array.isArray(value)) {
                                // Check if it's an array of objects (like table data)
                                if (value.length > 0 && typeof value[0] === 'object') {
                                    html += `<div style="margin-bottom: 20px;">`;
                                    html += `<h4 style="color: #00796B; margin-bottom: 10px;">${key}:</h4>`;
                                    html += '<div style="overflow-x: auto;">';
                                    html += '<table style="width: 100%; border-collapse: collapse; background-color: white; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">';
                                    
                                    // Table header
                                    const headers = Object.keys(value[0]);
                                    html += '<thead><tr>';
                                    headers.forEach(header => {
                                        html += `<th style="border: 1px solid #ddd; padding: 12px; background-color: #009A6E; color: white; text-align: right;">${header}</th>`;
                                    });
                                    html += '</tr></thead>';
                                    
                                    // Table body
                                    html += '<tbody>';
                                    value.forEach((row, idx) => {
                                        html += `<tr style="background-color: ${idx % 2 === 0 ? '#ffffff' : '#f9f9f9'};">`;
                                        headers.forEach(header => {
                                            html += `<td style="border: 1px solid #ddd; padding: 12px; text-align: right;">${row[header] || '—'}</td>`;
                                        });
                                        html += '</tr>';
                                    });
                                    html += '</tbody>';
                                    
                                    html += '</table>';
                                    html += '</div>';
                                    html += '</div>';
                                } else {
                                    // Simple list
                                    html += `<div style="margin-bottom: 15px;">`;
                                    html += `<strong style="color: #00796B;">${key}:</strong>`;
                                    html += '<ul style="margin: 8px 0; padding-right: 25px; list-style-type: disc;">';
                                    value.forEach(item => {
                                        html += `<li style="margin: 5px 0; line-height: 1.6;">${item}</li>`;
                                    });
                                    html += '</ul></div>';
                                }
                            } else if (typeof value === 'object') {
                                html += `<div style="margin-bottom: 15px; padding: 10px; background-color: rgba(0, 154, 110, 0.05); border-radius: 5px;">`;
                                html += `<strong style="color: #00796B; display: block; margin-bottom: 10px;">${key}:</strong>`;
                                html += '<div style="margin-right: 15px;">' + formatSectionData(value) + '</div>';
                                html += '</div>';
                            } else {
                                html += `<div style="margin-bottom: 12px; padding: 8px; background-color: white; border-radius: 4px;">`;
                                html += `<strong style="color: #00796B;">${key}:</strong> <span style="color: #333;">${value}</span>`;
                                html += '</div>';
                            }
                        }
                        
                        return html;
                    }
                    
                    return `<p style="color: #666;">${String(data)}</p>`;
                }
                
                // Render the report on page load
                document.addEventListener('DOMContentLoaded', renderReport);
            </script>
            {% else %}
            <div style="background-color: #fff3cd; border: 1px solid #ffc107; border-radius: 5px; padding: 20px; text-align: center;">
                <i class="fa fa-exclamation-triangle" style="font-size: 48px; color: #ff9800; margin-bottom: 15px;"></i>
                <p style="font-size: 16px; color: #856404;">{% trans "داده‌های گزارش در دسترس نیست" %}</p>
                {% if report.error_message %}
                <p style="color: #721c24; margin-top: 10px;">{% trans "خطا:" %} {{ report.error_message }}</p>
                {% endif %}
            </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Edit Report Modal -->
{% if is_assistant %}
<div id="editReportModal" style="display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); overflow: auto;">
    <div style="background-color: #fefefe; margin: 5% auto; padding: 20px; border: 1px solid #888; border-radius: 10px; width: 90%; max-width: 900px; max-height: 85vh; overflow-y: auto; direction: rtl;">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #009A6E; padding-bottom: 15px;">
            <h2 style="color: #009A6E; margin: 0;">{% trans "ویرایش گزارش" %}</h2>
            <span onclick="closeEditModal()" style="color: #aaa; font-size: 28px; font-weight: bold; cursor: pointer;">&times;</span>
        </div>
        
        <div id="editFormContainer">
            <!-- Form will be generated by JavaScript -->
        </div>
        
        <div style="text-align: center; margin-top: 30px; display: flex; gap: 15px; justify-content: center;">
            <button onclick="saveReportChanges()" class="btn btn-success" style="padding: 12px 40px; font-size: 16px;">
                <i class="fa fa-save"></i> {% trans "ذخیره تغییرات" %}
            </button>
            <button onclick="closeEditModal()" class="btn btn-secondary" style="padding: 12px 40px; font-size: 16px;">
                <i class="fa fa-times"></i> {% trans "انصراف" %}
            </button>
        </div>
    </div>
</div>

<script>
    let originalReportData = null;
    const reportId = {{ report.id }};
    
    function openEditModal() {
        originalReportData = JSON.parse(JSON.stringify(reportData)); // Deep copy
        generateEditForm();
        document.getElementById('editReportModal').style.display = 'block';
    }
    
    function closeEditModal() {
        document.getElementById('editReportModal').style.display = 'none';
    }
    
    function generateEditForm() {
        const container = document.getElementById('editFormContainer');
        let html = '';
        
        // Edit report title
        html += '<div style="margin-bottom: 25px;">';
        html += '<label style="display: block; margin-bottom: 8px; font-weight: bold; color: #00796B;">{% trans "عنوان گزارش:" %}</label>';
        html += `<input type="text" id="editReportTitle" value="${reportData.report_title || ''}" style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 16px;">`;
        html += '</div>';
        
        // Edit sections
        if (reportData.sections && Array.isArray(reportData.sections)) {
            reportData.sections.forEach((section, sectionIndex) => {
                html += `<div style="margin-bottom: 30px; padding: 20px; background-color: #f9f9f9; border-radius: 8px; border-right: 4px solid #009A6E;">`;
                html += `<h3 style="color: #00796B; margin-bottom: 15px;">${section.title}</h3>`;
                
                // Section title input
                html += '<div style="margin-bottom: 15px;">';
                html += '<label style="display: block; margin-bottom: 8px; font-weight: bold; color: #666;">{% trans "عنوان بخش:" %}</label>';
                html += `<input type="text" class="section-title-input" data-section="${sectionIndex}" value="${section.title || ''}" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 5px;">`;
                html += '</div>';
                
                // Section data editor
                if (section.data) {
                    html += '<div style="margin-bottom: 15px;">';
                    html += '<label style="display: block; margin-bottom: 8px; font-weight: bold; color: #666;">{% trans "محتوای بخش (JSON):" %}</label>';
                    html += `<textarea class="section-data-input" data-section="${sectionIndex}" style="width: 100%; min-height: 150px; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-family: monospace; font-size: 14px;">${JSON.stringify(section.data, null, 2)}</textarea>`;
                    html += '<small style="color: #666;">{% trans "می‌توانید محتوای بخش را به صورت JSON ویرایش کنید" %}</small>';
                    html += '</div>';
                }
                
                html += '</div>';
            });
        }
        
        container.innerHTML = html;
    }
    
    function saveReportChanges() {
        // Collect edited data
        const editedData = {
            report_title: document.getElementById('editReportTitle').value,
            sections: []
        };
        
        // Get all section titles
        const sectionTitleInputs = document.querySelectorAll('.section-title-input');
        const sectionDataInputs = document.querySelectorAll('.section-data-input');
        
        sectionTitleInputs.forEach((titleInput, index) => {
            const sectionIndex = parseInt(titleInput.getAttribute('data-section'));
            const section = originalReportData.sections[sectionIndex];
            
            let sectionData = section.data || {};
            // Try to parse the edited JSON data
            if (sectionDataInputs[index]) {
                try {
                    const editedJson = sectionDataInputs[index].value.trim();
                    if (editedJson) {
                        sectionData = JSON.parse(editedJson);
                    }
                } catch (e) {
                    alert(`{% trans 'خطا در پارس کردن JSON بخش' %} ${titleInput.value}: ${e.message}`);
                    return;
                }
            }
            
            editedData.sections.push({
                title: titleInput.value,
                data: sectionData
            });
        });
        
        // Send update request
        fetch(`/panel/assistant/edit/body-analysis/${reportId}/`, {
            method: 'POST',
            headers: {
                'X-CSRFToken': '{{ csrf_token }}',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(editedData)
        })
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                alert("{% trans 'گزارش با موفقیت به‌روزرسانی شد' %}");
                // Update the reportData and re-render
                reportData.report_title = editedData.report_title;
                reportData.sections = editedData.sections;
                renderReport();
                closeEditModal();
                // Reload page to show updated data
                window.location.reload();
            } else {
                alert("{% trans 'خطا در به‌روزرسانی گزارش: ' %}" + (data.error || "{% trans 'خطای ناشناخته' %}"));
            }
        })
        .catch(error => {
            console.error('Error:', error);
            alert("{% trans 'خطا در ارتباط با سرور' %}");
        });
    }
    
    // Close modal when clicking outside
    window.onclick = function(event) {
        const modal = document.getElementById('editReportModal');
        if (event.target == modal) {
            closeEditModal();
        }
    }
</script>
{% endif %}
{% endblock %}