{% extends "base.html" %}

{% block title %}Visualizations{% endblock %}

{% block content %}
<script src="https://cdn.plot.ly/plotly-2.27.0.min.js"></script>

<div class="container" style="padding-top: 24px;">
    <div class="dashboard-header">
        <div>
            <h1 class="dashboard-title">📈 Visualizations</h1>
            <p style="color: var(--text-muted); margin-top: 4px;">Interactive charts and plots from your data</p>
        </div>
    </div>

    {% if not has_data %}
    <div class="no-data">
        <div class="no-data-icon">📊</div>
        <div class="no-data-title">No Visualizations Yet</div>
        <p class="no-data-desc">Upload a dataset to generate automatic interactive visualizations.</p>
        <a href="/upload" class="btn-liquid"><i class="fas fa-cloud-upload-alt"></i> Upload Dataset</a>
    </div>
    {% else %}

    <div class="tabs">
        <button class="tab-btn active" onclick="switchTab(this, 'overview')">📊 Overview</button>
        <button class="tab-btn" onclick="switchTab(this, 'numeric')">🔢 Numeric</button>
        <button class="tab-btn" onclick="switchTab(this, 'categorical')">📁 Categorical</button>
        <button class="tab-btn" onclick="switchTab(this, 'advanced')">🔗 Advanced</button>
        <button class="tab-btn" onclick="switchTab(this, 'custom')">✨ Custom</button>
    </div>

    <div class="tab-content active" id="tab-overview">
        {% set has_corr = namespace(found=false) %}
        {% set has_missing = namespace(found=false) %}
        {% for item in viz_list %}
            {% if item.key == 'correlation' %}
                {% set has_corr.found = true %}
                <div class="plotly-chart">
                    <h3 style="margin-bottom: 16px;"><i class="fas fa-fire" style="margin-right: 8px;"></i> Correlation Heatmap</h3>
                    <div id="chart-{{ item.safe_key }}" style="width:100%; height:500px;"></div>
                </div>
            {% elif item.key == 'missing_heatmap' %}
                {% set has_missing.found = true %}
                <div class="plotly-chart">
                    <h3 style="margin-bottom: 16px;"><i class="fas fa-exclamation-triangle" style="margin-right: 8px;"></i> Missing Value Pattern</h3>
                    <div id="chart-{{ item.safe_key }}" style="width:100%; height:400px;"></div>
                </div>
            {% endif %}
        {% endfor %}
        {% if not has_corr.found and not has_missing.found %}
        <div class="no-data">
            <div class="no-data-icon">📊</div>
            <div class="no-data-title">No Overview Charts</div>
            <p class="no-data-desc">Not enough data for correlation or missing value analysis.</p>
        </div>
        {% endif %}
    </div>

    <div class="tab-content" id="tab-numeric">
        {% set num_count = namespace(value=0) %}
        {% for item in viz_list %}
            {% if item.key.startswith('dist_') %}
                {% set num_count.value = num_count.value + 1 %}
                <div class="plotly-chart">
                    <h3 style="margin-bottom: 16px;"><i class="fas fa-chart-bar" style="margin-right: 8px;"></i> Distribution: {{ item.key[5:] }}</h3>
                    <div id="chart-{{ item.safe_key }}" style="width:100%; height:350px;"></div>
                </div>
            {% endif %}
        {% endfor %}
        {% if num_count.value == 0 %}
        <div class="no-data">
            <div class="no-data-icon">🔢</div>
            <div class="no-data-title">No Numeric Columns</div>
            <p class="no-data-desc">Your dataset doesn't contain any numeric columns for distribution analysis.</p>
        </div>
        {% endif %}
    </div>

    <div class="tab-content" id="tab-categorical">
        {% set cat_count = namespace(value=0) %}
        {% for item in viz_list %}
            {% if item.key.startswith('cat_') %}
                {% set cat_count.value = cat_count.value + 1 %}
                <div class="plotly-chart">
                    <h3 style="margin-bottom: 16px;"><i class="fas fa-chart-pie" style="margin-right: 8px;"></i> Categories: {{ item.key[4:] }}</h3>
                    <div id="chart-{{ item.safe_key }}" style="width:100%; height:350px;"></div>
                </div>
            {% endif %}
        {% endfor %}
        {% if cat_count.value == 0 %}
        <div class="no-data">
            <div class="no-data-icon">📁</div>
            <div class="no-data-title">No Categorical Columns</div>
            <p class="no-data-desc">Your dataset doesn't contain any categorical columns for analysis.</p>
        </div>
        {% endif %}
    </div>

    <div class="tab-content" id="tab-advanced">
        {% set adv_count = namespace(value=0) %}
        {% for item in viz_list %}
            {% if item.key == 'pca' %}
                {% set adv_count.value = adv_count.value + 1 %}
                <div class="plotly-chart">
                    <h3 style="margin-bottom: 16px;"><i class="fas fa-project-diagram" style="margin-right: 8px;"></i> PCA Analysis</h3>
                    <div id="chart-{{ item.safe_key }}" style="width:100%; height:450px;"></div>
                </div>
            {% elif item.key == 'clusters' %}
                {% set adv_count.value = adv_count.value + 1 %}
                <div class="plotly-chart">
                    <h3 style="margin-bottom: 16px;"><i class="fas fa-object-group" style="margin-right: 8px;"></i> K-Means Clustering</h3>
                    <div id="chart-{{ item.safe_key }}" style="width:100%; height:450px;"></div>
                </div>
            {% elif item.key == 'pairplot' %}
                {% set adv_count.value = adv_count.value + 1 %}
                <div class="plotly-chart">
                    <h3 style="margin-bottom: 16px;"><i class="fas fa-th" style="margin-right: 8px;"></i> Pairwise Relationships</h3>
                    <div id="chart-{{ item.safe_key }}" style="width:100%; height:600px;"></div>
                </div>
            {% endif %}
        {% endfor %}
        {% if adv_count.value == 0 %}
        <div class="no-data">
            <div class="no-data-icon">🔗</div>
            <div class="no-data-title">No Advanced Visualizations</div>
            <p class="no-data-desc">Need more numeric columns or rows for advanced analysis (PCA, Clustering, Pairplot).</p>
        </div>
        {% endif %}
    </div>

    <div class="tab-content" id="tab-custom">
        <div class="glass-card">
            <h3 style="margin-bottom: 20px;"><i class="fas fa-magic" style="margin-right: 8px;"></i> Custom Visualization Builder</h3>

            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 24px;">
                <div class="form-group">
                    <label class="form-label">Chart Type</label>
                    <select class="form-select" id="viz-type">
                        <option value="bar">Bar Chart</option>
                        <option value="line">Line Chart</option>
                        <option value="scatter">Scatter Plot</option>
                        <option value="pie">Pie Chart</option>
                        <option value="histogram">Histogram</option>
                        <option value="box">Box Plot</option>
                        <option value="heatmap">Correlation Heatmap</option>
                        <option value="3d">3D Scatter</option>
                    </select>
                </div>
            </div>

            <div id="viz-columns" style="margin-bottom: 24px;">
                <label class="form-label">Select Columns (click to select multiple)</label>
                <div style="display: flex; flex-wrap: wrap; gap: 8px;" id="column-checkboxes">
                    {% for col in columns %}
                    <label style="display: flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); cursor: pointer; transition: all 0.3s ease;">
                        <input type="checkbox" value="{{ col }}" class="viz-col-check" style="accent-color: var(--primary);">
                        <span style="font-size: 0.85rem;">{{ col }}</span>
                        <span class="badge badge-info" style="font-size: 0.65rem;">{{ dtypes[col] }}</span>
                    </label>
                    {% endfor %}
                </div>
            </div>

            <div id="viz-info" style="margin-bottom: 16px; color: var(--text-muted); font-size: 0.85rem;">
                <p><strong>Bar:</strong> 1 or 2 columns | <strong>Scatter:</strong> 2-3 columns | <strong>Pie:</strong> 1-2 columns | <strong>Histogram/Box:</strong> 1-2 columns | <strong>Heatmap:</strong> auto numeric | <strong>3D:</strong> 3-4 columns</p>
            </div>

            <button class="btn-liquid" id="generate-viz-btn">
                <i class="fas fa-magic"></i> Generate Visualization
            </button>
        </div>

        <div id="custom-viz-container" style="margin-top: 24px;"></div>
    </div>
    {% endif %}
</div>

<div id="loading-overlay" style="display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.7); backdrop-filter: blur(5px); z-index: 10000; align-items: center; justify-content: center; flex-direction: column;">
    <div style="width: 50px; height: 50px; border: 3px solid rgba(102, 126, 234, 0.3); border-top-color: #667eea; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 16px;"></div>
    <p style="color: #e0e0ff; font-size: 1rem;">Generating visualization...</p>
</div>

<script type="application/json" id="viz-data">
{{ viz_data_json | safe }}
</script>

<script>
(function() {
    'use strict';
    
    var dataEl = document.getElementById('viz-data');
    var VIZ_DATA = {};
    if (dataEl) {
        try {
            VIZ_DATA = JSON.parse(dataEl.textContent);
        } catch (e) {
            console.error('Failed to parse VIZ_DATA JSON:', e);
        }
    }
    
    function renderAllCharts() {
        if (typeof Plotly === 'undefined') {
            console.error('Plotly.js failed to load from CDN');
            return;
        }
        
        var keys = Object.keys(VIZ_DATA);
        for (var i = 0; i < keys.length; i++) {
            var key = keys[i];
            var div = document.getElementById('chart-' + key);
            if (!div || !VIZ_DATA[key]) continue;
            
            try {
                var fig = VIZ_DATA[key];
                Plotly.newPlot(div, fig.data, fig.layout, {
                    responsive: true,
                    displayModeBar: true,
                    displaylogo: false,
                    modeBarButtonsToRemove: ['lasso2d', 'select2d']
                });
            } catch (err) {
                console.error('Chart render error [' + key + ']:', err);
                div.innerHTML = '<div style="text-align:center;padding:40px;color:#ff6b6b;"><i class="fas fa-exclamation-triangle"></i> Failed to render: ' + key + '</div>';
            }
        }
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', renderAllCharts);
    } else {
        renderAllCharts();
    }
    
    window.switchTab = function(btn, tabName) {
        var btns = document.querySelectorAll('.tab-btn');
        for (var i = 0; i < btns.length; i++) {
            btns[i].classList.remove('active');
        }
        var contents = document.querySelectorAll('.tab-content');
        for (var i = 0; i < contents.length; i++) {
            contents[i].classList.remove('active');
        }
        btn.classList.add('active');
        document.getElementById('tab-' + tabName).classList.add('active');
        
        setTimeout(function() {
            var activeTab = document.getElementById('tab-' + tabName);
            if (!activeTab || typeof Plotly === 'undefined') return;
            var chartDivs = activeTab.querySelectorAll('[id^="chart-"]');
            for (var i = 0; i < chartDivs.length; i++) {
                try {
                    Plotly.Plots.resize(chartDivs[i]);
                } catch(e) {}
            }
        }, 150);
    };
    
    window.addEventListener('resize', function() {
        if (typeof Plotly === 'undefined') return;
        var chartDivs = document.querySelectorAll('[id^="chart-"]');
        for (var i = 0; i < chartDivs.length; i++) {
            try {
                Plotly.Plots.resize(chartDivs[i]);
            } catch(e) {}
        }
    });
})();
</script>
{% endblock %}