{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <div class="d-flex justify-content-between align-items-center">
            <h2>WGCNA Analysis Results</h2>
            <button class="btn btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#parameterSettings">
                Advanced Parameter Settings
            </button>
        </div>

        <div class="collapse mt-3" id="parameterSettings">
            <div class="card card-body">
                {% if user_id == 2 %}
                    <div class="alert alert-warning py-2 mb-3">
                        <i class="fas fa-lock"></i> <strong>Read-Only Mode:</strong> This is a public Demo project and is read-only. If you want to test different parameters, please create your own project.
                    </div>
                    <fieldset disabled>
                {% endif %}
                <form action="{% url 'coexpression_wgcna' project_id=project_id %}" method="POST" class="row g-3" onsubmit="sessionStorage.removeItem('wgcna_start_{{ project_id }}');">
                    {% csrf_token %}
                    <div class="col-md-4">
                        <label class="fw-bold">Gene Set:</label>
                        <div class="input-group input-group-sm">
                            <select name="gene_set" id="geneSetSelect" class="form-select" onchange="const input = document.getElementById('topNInput'); if(this.value === 'all') { input.disabled = true; input.value = ''; } else { input.disabled = false; input.value = '2000'; }">
                                <option value="all" {% if job.gene_set == 'all' or not job %}selected{% endif %}>All Genes</option>
                                <option value="top" {% if job.gene_set == 'top' %}selected{% endif %}>Top Genes</option>
                            </select>
                            <input type="number" name="top_n" id="topNInput" class="form-control" 
                                   value="{{ job.top_n|default:'' }}" 
                                   {% if job.gene_set != 'top' %}disabled{% endif %}>
                        </div>
                        <div class="form-text text-muted" style="font-size: 0.8rem;">Select all or filter by highest variance.</div>
                    </div>
                    
                    <div class="col-md-4">
                        <label class="fw-bold">Soft Power (β):</label>
                        <input type="number" name="beta" class="form-control form-control-sm" 
                               value="{{ job.beta|default:'' }}" placeholder="Auto-select (Leave blank)">
                        <div class="form-text text-muted" style="font-size: 0.8rem;">Manual threshold (e.g., 6 or 12).</div>
                    </div>
                    <div class="col-md-4">
                        <label class="fw-bold">Scale-Free Topology (R²):</label>
                        <input type="number" step="0.01" name="r2_cut" class="form-control form-control-sm" 
                               value="{{ job.r2_cut|default:0.8 }}" placeholder="0.8">
                        <div class="form-text text-muted" style="font-size: 0.8rem;">Target R² for network topology (default: 0.8).</div>
                    </div>

                    <div class="col-md-4">
                        <label class="fw-bold">Min Module Size:</label>
                        <input type="number" name="min_size" class="form-control form-control-sm" 
                               value="{{ job.min_size|default:30 }}">
                        <div class="form-text text-muted" style="font-size: 0.8rem;">Minimum genes per module (default: 30).</div>
                    </div>
                    <div class="col-md-4">
                        <label class="fw-bold">Merge Cut Height:</label>
                        <input type="number" step="0.01" name="merge_cut" class="form-control form-control-sm" 
                               value="{{ job.merge_cut|default:0.2 }}" placeholder="0.2">
                        <div class="form-text text-muted" style="font-size: 0.8rem;">Threshold to merge similar modules (default: 0.2).</div>
                    </div>

                    <div class="col-md-4 d-flex align-items-end">
                        <button type="submit" class="btn btn-primary w-100 mb-4">Recalculate</button>
                    </div>
                </form>
                {% if user_id == 2 %}
                    </fieldset>
                {% endif %}
            </div>
        </div>

        <hr>

        <div id="result-area">
            {% if status == 'idle' %}
                <script>sessionStorage.removeItem('wgcna_start_{{ project_id }}');</script>
                <div class="alert alert-info text-center mt-4">
                    <h4><i class="fas fa-info-circle"></i> No Analysis Data</h4>
                    <p>It seems your project doesn't have the required data yet, or the analysis hasn't started.</p>
                    <p class="mb-0">Please ensure you have uploaded the Expression, GO, and Pathway files, then click "Recalculate".</p>
                </div>
            
            {% elif status == 'processing' %}
                <div class="text-center" style="padding: 150px 0; min-height: 500px;">
                    <p class="text-muted"><i class="fas fa-cogs"></i> Analysis running in background...</p>
                </div>

                <script>
                    document.addEventListener("DOMContentLoaded", function() {
                        const projId = '{{ project_id }}';
                        const storageKey = 'wgcna_start_' + projId;
                        
                        // 1. 取得或設定開始時間
                        let startTime = sessionStorage.getItem(storageKey);
                        if (!startTime) {
                            startTime = Date.now();
                            sessionStorage.setItem(storageKey, startTime);
                        }

                        let initialSeconds = Math.floor((Date.now() - startTime) / 1000);

                        // 2. 呼叫 SweetAlert2 懸浮視窗 
                        Swal.fire({
                            title: 'Calculating WGCNA Network',
                            html: `
                                <div class="mt-2 text-muted" style="font-size: 0.95rem; line-height: 1.6;">
                                    WGCNA in progress: Expression dataset containing <strong>{{ gene_count|default:'thousands of' }}</strong> genes across <strong>{{ condition_count|default:'multiple' }}</strong> conditions.<br><br>
                                    It may take <strong>a long time</strong>. You can close this page and come back later.<br>
                                    <small class="text-secondary d-block mt-2">
                                        (An expression dataset containing 30,000 genes across 7 conditions takes about one hour.)
                                    </small>
                                </div>
                                <div class="mt-4">
                                    <span id="swal-timer" class="badge bg-secondary" style="font-size: 1.2rem; width: 80px;">${initialSeconds}s</span>
                                </div>
                            `,
                            allowOutsideClick: false, 
                            allowEscapeKey: false,    
                            showConfirmButton: false, 
                            didOpen: () => {
                                Swal.showLoading(); 
                                
                                const timerDisplay = Swal.getHtmlContainer().querySelector('#swal-timer');
                                
                                setInterval(() => {
                                    let elapsedSeconds = Math.floor((Date.now() - startTime) / 1000);
                                    if (timerDisplay) {
                                        timerDisplay.innerText = elapsedSeconds + 's';
                                    }
                                }, 1000);
                            }
                        });

                        // 每 10 秒自動重整
                        setTimeout(function(){ location.reload(); }, 10000);
                    });
                </script>
            
            {% elif status == 'failed' %}
                <script>sessionStorage.removeItem('wgcna_start_{{ project_id }}');</script>
                <div class="alert alert-danger text-center mt-4">
                    <h4><i class="fas fa-exclamation-triangle"></i> Analysis Failed</h4>
                    <p>{{ error_msg }}</p>
                    <p class="mb-0">Please adjust the Advanced Parameters above and recalculate.</p>
                </div>
                <script>
                    document.addEventListener("DOMContentLoaded", function() {
                        Swal.fire({
                            icon: 'error',
                            title: 'Analysis Failed',
                            text: '{{ error_msg|escapejs }}',
                            confirmButtonColor: '#0d6efd'
                        });
                    });
                </script>

            {% elif status == 'success' %}
                <script>sessionStorage.removeItem('wgcna_start_{{ project_id }}');</script>
                <!-- Dendrogram -->
                {% comment %} <div class="row mt-5">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h4 class="mb-0">Hierarchical Clustering Dendrogram</h4>
                        </div>
                        <img id="dendrogram-img" src="" alt="Cluster Dendrogram" class="img-fluid rounded" style="max-height: 600px; width: 100%; object-fit: contain; border: 1px solid #ddd; background-color: #fff; border-radius: 5px;">
                    </div>
                </div> {% endcomment %}
                <!-- Module-Trait Heatmap -->
                <div class="row mt-5" id="trait-heatmap-section">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h4 class="mb-0">Module-Trait Relationships</h4>
                        </div>
                        <p class="text-muted small mb-2">
                            Displays the correlation between gene modules and your experimental conditions. Red indicates positive correlation, blue indicates negative correlation.
                        </p>
                        <div id="trait-heatmap-container" style="height: 600px; border: 1px solid #ddd; background-color: #fff; border-radius: 5px;"></div>
                    </div>
                </div>
                <br>
                <!-- Module List & Network -->
                <div class="row">
                    <div class="col-md-4">
                        <h4>Gene Module Overview</h4>
                        <ul class="list-group" id="module-list" style="max-height: 600px; overflow-y: auto; padding-right: 5px;">
                            {% for module in modules %}
                            <li class="list-group-item d-flex justify-content-between align-items-center module-item" 
                                id="mod-{{ module.color }}"
                                style="cursor: pointer; transition: all 0.2s;" 
                                onclick="drawNetwork('{{ module.color }}', this)">
                                
                                <span>Module <strong style="color: {{ module.color }}; text-shadow: 0px 0px 1px rgba(0,0,0,0.2);">{{ module.color }}</strong></span>
                                
                                <span class="badge rounded-pill" 
                                    style="background-color: {{ module.color }}; color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.8); border: 1px solid #ccc;">
                                    {{ module.count }} genes
                                </span>
                            </li>
                            {% endfor %}
                        </ul>
                        <div class="mt-3">
                            <a href="{% url 'download_full_wgcna_list' project_id %}" class="btn btn-success w-100 shadow-sm">
                                <i class="fas fa-file-export"></i> Download Full Module List
                            </a>
                            <small class="text-muted d-block text-center mt-2">
                                Export all genes and their assigned modules.
                            </small>
                        </div>
                    </div>
                    
                    <div class="col-md-8">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h4 class="mb-0">Hub Gene Network</h4>
                            <div class="d-flex"> 
                                <div class="input-group input-group-sm me-3">
                                    <input type="text" id="geneSearchInput" class="form-control" placeholder="Search Gene ID...">
                                    <button class="btn btn-primary" type="button" onclick="findAndHighlightGene()">
                                        <i class="fas fa-search"></i>
                                    </button>
                                </div>
                                <button id="searchTsvBtn" class="btn btn-sm btn-outline-success me-2 d-none" onclick="downloadSearchTSV()">
                                    <i class="fas fa-file-alt"></i> Download Connections
                                </button>
                                <button class="btn btn-sm btn-outline-primary" onclick="downloadNetworkImage()">
                                    <i class="fas fa-download"></i> PNG
                                </button>
                            </div>
                        </div>
                        <div id="network-container" style="height: 600px; border: 1px solid #ddd; background-color: #fafafa; border-radius: 5px;">
                        </div>
                    </div>
                </div> 
                <!-- Genes in Module & Selected genes -->
                <div id="module-genes-card" style="display: none;" class="mt-4">
                    <div class="row g-3">
                        
                        <div class="col-8">
                            <div class="card shadow-sm border-0 h-100">
                                <div class="card-header bg-white d-flex justify-content-between align-items-start border-bottom-0 pt-3">
                                    <h5 class="mb-0 mt-1" id="module-genes-title">Genes in Module</h5>
                                    <div class="d-flex flex-column align-items-end">
                                        <button class="btn btn-sm btn-outline-dark mb-2" onclick="triggerExpression('module')">
                                            Expression profiles
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary mb-2" onclick="triggerEnrichment('module', 'pathway')">
                                            Pathway Enrichment
                                        </button>
                                        <button class="btn btn-sm btn-outline-primary" onclick="triggerEnrichment('module', 'go')">
                                            GO Enrichment
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body bg-light rounded m-3 mt-0 p-3">
                                    <div id="module-genes-content" style="max-height: 200px; overflow-y: auto; font-size: 13px; color: #555; word-wrap: break-word;">
                                        </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-4">
                            <div class="card shadow-sm border-0 h-100">
                                <div class="card-header bg-white d-flex justify-content-between align-items-start border-bottom-0 pt-3">
                                    <h5 class="mb-0 mt-1">Selected genes</h5>
                                    <div class="d-flex flex-column align-items-end">
                                        <button class="btn btn-sm btn-outline-dark mb-2" onclick="triggerExpression('selected')">
                                            Expression profiles
                                        </button>
                                        <button class="btn btn-sm btn-outline-secondary mb-2" onclick="triggerEnrichment('selected', 'pathway')">
                                            Pathway Enrichment
                                        </button>
                                        <button class="btn btn-sm btn-outline-primary" onclick="triggerEnrichment('selected', 'go')">
                                            GO Enrichment
                                        </button>
                                    </div>
                                </div>
                                <div class="card-body bg-light rounded m-3 mt-0 p-3 d-flex flex-column">
                                    <textarea id="selected-genes-content" class="form-control border-0 bg-transparent p-0 flex-grow-1" 
                                              style="min-height: 200px; font-size: 13px; color: #555; resize: none;" 
                                              placeholder="Selected genes will appear here. You can manually edit or delete them before analysis..."></textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- Module-Module Correlation Heatmap -->
                <div class="row mt-5">
                    <div class="col-12">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <h4 class="mb-0">Module-Module Correlation Heatmap</h4>
                        </div>
                        <div id="heatmap-container" style="height: 700px; border: 1px solid #ddd; background-color: #fff; border-radius: 5px;"></div>
                    </div>
                </div>
            {% endif %}
        </div>
        <!-- list -->
        <div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
            <div class="modal-dialog modal-dialog-scrollable modal-custom">
                <div class="modal-content ">
                    <div class="modal-header">
                        <h2 class="modal-title" id="staticBackdropLabel">Matched gene list</h2>
                    </div>
                    <div class="modal-body">
                        <div>
                            <button id="select-all-btn" class="btn btn-primary">Select All</button>
                            <button id="deselect-all-btn" class="btn btn-secondary">Deselect All</button>
                        </div><br>
                        <table id="expression-table" class="display table table-striped"  style="width: 100%;">
                            <thead></thead>
                            <tbody></tbody>
                        </table>
                        <div class="dataTables_info"></div>
                        <div id="no-annotation-section" class="no-annotation-section mt-4"></div>
                    </div>
                    <div class="modal-footer">
                        <button id="modal-next" class="btn btn-primary">Next</button>
                        <button id="modal-enrich-submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- condition_list -->
        <div class="modal fade" id="condition_list" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
            <div class="modal-dialog modal-dialog-scrollable modal-custom">
                <div class="modal-content ">
                    <div class="modal-header">
                        <h2 class="modal-title" id="staticBackdropLabel">Condition Selection</h2>
                    </div>
                    <div class="modal-body">
                        <form  method="POST">
                            <div>
                                <label>
                                    <input type="checkbox" id="select-all-checkbox" onclick="toggleCheckboxes(this.checked)"> Select All/Delete All
                                </label>
                            </div><br>
                            <div id="condition-options-container">
                                <!-- Dynamically populated conditions will be inserted here -->
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button id="modal-submit" class="btn btn-primary">Submit</button>
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    window.WGCNA_CONFIG = {
        networkJsonString: '{{ network_json|escapejs }}',
    };
</script>
<script src="{% static 'js/analysis/coexpression_wgcna.js' %}"></script>
<style>
    .modal-custom {
        max-width: 80%;
    }
    #condition_list .modal-dialog {
        max-width: 40%;
        margin-top: 10%;
    }
</style>    
{% endblock %}