{% extends 'base.html' %}
{% load static %}
{% block title %} EXPath Tool 2.0{% endblock %}
{% block content %}
<main>
    <div class="container">
        <ul class="nav nav-tabs" id="overviewTab" role="tablist">
            <li class="nav-item">
                <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#dataset-content" type="button">Dataset</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#pca-content" type="button">PCA</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#kmeans-content" type="button">K-means Heatmap</button>
            </li>
            <li class="nav-item">
                <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sd-content" type="button">Gene SD Distribution</button>
            </li>
        </ul>

        <div class="tab-content p-3 border border-top-0 rounded-bottom">
            <div class="tab-pane fade show active" id="dataset-content">
                {% if dataset_summary %}
                <div class="row mt-3">
                    <div class="col-md-5 mb-3">
                        <table class="table table-striped table-hover shadow-sm bg-white">
                            <thead class="table-light">
                                <tr>
                                    <th colspan="2" class="text-center text-muted">Summary</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td class="fw-bold w-50 align-middle">Total Genes</td>
                                    <td class="align-middle fs-5">{{ dataset_summary.total_genes }}</td>
                                </tr>
                                <tr>
                                    <td class="fw-bold align-middle">Total Samples</td>
                                    <td class="align-middle fs-5">{{ dataset_summary.total_samples }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="col-md-7 mb-3">
                        <table class="table table-striped table-hover shadow-sm bg-white text-center">
                            <thead class="table-light">
                                <tr>
                                    <th class="text-start text-muted">Condition</th>
                                    <th class="text-muted">Replicates</th>
                                </tr>
                            </thead>
                            <tbody>
                                {% for cond in dataset_summary.conditions %}
                                <tr>
                                    <td class="text-start align-middle">{{ cond.name }}</td>
                                    <td class="align-middle">{{ cond.reps }}</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
                {% else %}
                <div class="alert alert-warning mt-3">No dataset information available.</div>
                {% endif %}
            </div>
            
            <div class="tab-pane fade" id="pca-content">
                <div class="alert alert-light border mt-3">
                    <i class="fas fa-info-circle text-primary"></i> 
                    <strong>PCA Overview:</strong> The expression data is <code>log₂(x+1)</code> transformed prior to Principal Component Analysis. This stabilizes variance and prevents genes with extremely high expression from dominating the principal components.
                </div>
                <div class="row mb-3 align-items-center">
                    <div class="col-auto"><label>X-axis:</label></div>
                    <div class="col-auto">
                        <select id="pca-x-select" class="form-select w-auto">
                            {% for i in pc_range %}
                                <option value="{{ i }}" {% if i == 1 %}selected{% endif %}>{{ i }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-auto"><label>Y-axis:</label></div>
                    <div class="col-auto">
                        <select id="pca-y-select" class="form-select w-auto">
                            {% for i in pc_range %}
                                <option value="{{ i }}" {% if i == 2 %}selected{% endif %}>{{ i }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-auto">
                        <button id="update-pca-btn" class="btn btn-outline-primary">Update</button>
                    </div>
                </div>
                <div id="pca-chart-container">
                    {{ pca_plot_div|safe }}
                </div>
            </div>

            <div class="tab-pane fade" id="kmeans-content">
                <div class="row mb-3 align-items-center">
                    <div class="col-auto"><label>Number of clusters (K):</label></div>
                    <div class="col-auto">
                        <input type="number" id="k-input" class="form-control" value="{{ default_k }}" min="2" max="15" style="width: 80px;">
                    </div>
                    <div class="col-auto ms-3"><label class="fw-bold">Number of top variable genes:</label></div>
                    <div class="col-auto">
                        <input type="number" id="kmeans-top-n-input" class="form-control" value="2000" min="5" step="10" style="width: 100px;">
                    </div>
                    <div class="col-auto">
                        <button id="update-kmeans-btn" class="btn btn-primary">Update</button>
                    </div>
                    <div class="col-auto ms-3">
                        <button type="button" class="btn btn-info text-white" data-bs-toggle="modal" data-bs-target="#trendModal">
                            <i class="fas fa-chart-line"></i> Show Trends
                        </button>
                    </div>

                    <div class="col-auto ms-auto">
                        <button id="download-cluster-btn" class="btn btn-success">
                            <i class="fas fa-download"></i> Download Cluster Table
                        </button>
                    </div>
                </div>
                <div class="row flex-nowrap">
                    <div class="col-auto" style="max-width: 400px; position: relative;">
                        <div id="kmeans-title-overlay" style="text-align: center; margin-bottom: 15px; font-family: 'Open Sans', verdana, arial, sans-serif; font-size: 16px; color: #444; font-weight: bold;">
                            K-means Cluster Overview
                            <svg id="kmeans-zscore-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="#17a2b8" viewBox="0 0 16 16" style="cursor: help; margin-left: 4px; vertical-align: -2px; outline: none;">
                                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                            </svg>
                        </div>
                        <div id="overview-container" style="height: 600px;">
                            {{ kmeans_overview_div|safe }}
                        </div>
                    </div>
                    
                    <div class="col ps-3">
                        <h6 class="text-center text-muted fw-bold">Detailed View</h6>
                        <p class="text-center text-secondary mb-2" style="font-size: 0.85em;">
                            <em>Drag to select an area on the thumbnail to zoom in.</em>
                        </p>
                        <div id="detail-container" style="height: 800px; overflow-y: auto; border: 1px dashed #ccc; background: #fafafa;">
                            <div id="detail-wrapper" style="display: none; width: 100%;">
                                {{ kmeans_detail_div|safe }}
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 圖表 -->
                <div class="modal fade" id="trendModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="trendModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-fullscreen modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="trendModalLabel">Cluster Expression Trends
                                    <svg id="trend-zscore-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="#17a2b8" viewBox="0 0 16 16" style="cursor: help; margin-left: 4px; vertical-align: -2px; outline: none;">
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
                                    </svg>
                                </h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <div id="trend-container">
                                    {{ kmeans_trend_div|safe }}
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane fade" id="sd-content">
                <div class="alert alert-light border mt-3">
                    <i class="fas fa-info-circle text-primary"></i> 
                    Genes are ranked by standard deviations across samples based on the <strong>log₂-transformed data</strong>. 
                    By showing the patterns of the genes with most variability, this gives us a big picture view of the general pattern of gene expression.
                </div>
                
                <div class="row mb-3 align-items-center">
                    <div class="col-auto"><label class="fw-bold">Top variable genes:</label></div>
                    <div class="col-auto">
                        <input type="number" id="top-n-input" class="form-control" value="2000" min="10" step="10" style="width: 100px;">
                    </div>
                    <div class="col-auto">
                        <button id="update-sd-btn" class="btn btn-primary">Update</button>
                    </div>
                    <div class="col-auto ms-auto">
                        <button id="view-sd-genes-btn" class="btn btn-outline-secondary"><i class="fas fa-eye"></i> View IDs</button>
                        <button id="download-sd-genes-btn" class="btn btn-success"><i class="fas fa-download"></i> Download</button>
                    </div>
                </div>
                <div id="sd-chart-container">
                    {{ sd_plot_div|safe }}
                </div>
                <!-- SD Gene List  -->
                <div class="modal fade" id="sdGenesModal" tabindex="-1" aria-labelledby="sdGenesModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-lg modal-dialog-scrollable">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title" id="sdGenesModalLabel">Top Variable Genes</h5>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>
                            <div class="modal-body">
                                <textarea id="sdGenesTextarea" class="form-control" style="height: 60vh; resize: none;" readonly></textarea>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<script>
    window.OverviewConfig = {
        sdTopGenes: JSON.parse('{{ sd_top_genes_json|escapejs }}' || '[]'),
        clusterMapping: JSON.parse('{{ cluster_mapping_json|escapejs }}' || '{}') 
    };
    window.currentClusterMapping = window.OverviewConfig.clusterMapping;
</script>
<script src="{% static 'js/analysis/overview.js' %}"></script>
<style>
</style>
{% endblock %}