{% extends "base.html" %}

{% block title %}Dashboard{% endblock %}

{% block content %}
<div class="container" style="padding-top: 24px;">
    <div class="dashboard-header">
        <div>
            <h1 class="dashboard-title">📊 Dashboard</h1>
            <p style="color: var(--text-muted); margin-top: 4px;">Your data science command center</p>
        </div>

        {% if stats.has_data %}
        <div class="dataset-info-bar">
            <span><i class="fas fa-database"></i> <span class="dataset-name">{{ stats.dataset_name }}</span></span>
            <span class="badge badge-primary">{{ stats.rows }} rows</span>
            <span class="badge badge-primary">{{ stats.cols }} columns</span>
            <a href="/upload" class="btn-liquid" style="padding: 8px 16px; font-size: 0.8rem;">
                <i class="fas fa-exchange-alt"></i> Change Dataset
            </a>
        </div>
        {% endif %}
    </div>

    {% if not stats.has_data %}
    <div class="no-data">
        <div class="no-data-icon">📂</div>
        <div class="no-data-title">No Dataset Loaded</div>
        <p class="no-data-desc">
            Upload a CSV dataset to start your automated data analysis journey. 
            The AI will instantly profile, visualize, and analyze your data.
        </p>
        <a href="/upload" class="btn-liquid">
            <i class="fas fa-cloud-upload-alt"></i> Upload Dataset
        </a>
    </div>
    {% else %}

    <!-- Metrics -->
    <div class="metrics-grid">
        <div class="metric-card">
            <div class="metric-value">{{ stats.rows }}</div>
            <div class="metric-label">Rows</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">{{ stats.cols }}</div>
            <div class="metric-label">Columns</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">{{ stats.total_datasets }}</div>
            <div class="metric-label">Total Datasets</div>
        </div>
        <div class="metric-card">
            <div class="metric-value">{{ stats.total_reports }}</div>
            <div class="metric-label">Reports Generated</div>
        </div>
    </div>

    <div class="divider"></div>

    <!-- Quick Actions -->
    <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 24px;">Quick Actions</h2>
    <div class="features-grid" style="grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));">
        <a href="/explorer" class="feature-card" style="text-decoration: none; color: inherit;">
            <div class="feature-icon" style="background: var(--gradient-secondary);">📋</div>
            <div class="feature-title">Explore Data</div>
            <div class="feature-desc">View profiling, types, and statistics</div>
        </a>

        <a href="/visualizations" class="feature-card" style="text-decoration: none; color: inherit;">
            <div class="feature-icon" style="background: var(--gradient-primary);">📈</div>
            <div class="feature-title">Visualize</div>
            <div class="feature-desc">Interactive charts and plots</div>
        </a>

        <a href="/insights" class="feature-card" style="text-decoration: none; color: inherit;">
            <div class="feature-icon" style="background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);">🧠</div>
            <div class="feature-title">AI Insights</div>
            <div class="feature-desc">Smart data-driven recommendations</div>
        </a>

        <a href="/automl" class="feature-card" style="text-decoration: none; color: inherit;">
            <div class="feature-icon" style="background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);">🤖</div>
            <div class="feature-title">AutoML</div>
            <div class="feature-desc">Train ML models automatically</div>
        </a>

        <a href="/data-operations" class="feature-card" style="text-decoration: none; color: inherit;">
            <div class="feature-icon" style="background: linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%);">⚙️</div>
            <div class="feature-title">Operations</div>
            <div class="feature-desc">Transform and manipulate data</div>
        </a>

        <a href="/reports" class="feature-card" style="text-decoration: none; color: inherit;">
            <div class="feature-icon" style="background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);">📑</div>
            <div class="feature-title">Reports</div>
            <div class="feature-desc">Generate and export reports</div>
        </a>
    </div>

    <div class="divider"></div>

    <!-- Dataset Summary -->
    <div class="glass-card">
        <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 20px;">
            <span style="font-size: 1.5rem;">📊</span>
            <h3 style="font-size: 1.2rem; font-weight: 700;">Dataset Summary</h3>
        </div>
        <div id="dataset-summary" style="min-height: 200px;">
            <p style="color: var(--text-muted); text-align: center; padding: 40px;">
                <i class="fas fa-spinner fa-spin" style="margin-right: 8px;"></i>
                Loading dataset summary...
            </p>
        </div>
    </div>
    {% endif %}
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    {% if stats.has_data %}
    // Load dataset summary
    fetch('/api/summary-stats')
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                document.getElementById('dataset-summary').innerHTML = 
                    `<p style="color: var(--danger); text-align: center;">${data.error}</p>`;
                return;
            }

            let html = '<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px;">';

            html += `
                <div class="glass-card" style="padding: 16px;">
                    <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px;">Quality Score</div>
                    <div style="font-size: 1.8rem; font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">${data.quality.overall}%</div>
                </div>
                <div class="glass-card" style="padding: 16px;">
                    <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px;">Missing Values</div>
                    <div style="font-size: 1.8rem; font-weight: 800; color: ${data.quality.missing_cells > 0 ? 'var(--warning)' : 'var(--success)'};">${data.quality.missing_cells}</div>
                </div>
                <div class="glass-card" style="padding: 16px;">
                    <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px;">Duplicate Rows</div>
                    <div style="font-size: 1.8rem; font-weight: 800; color: ${data.quality.duplicate_rows > 0 ? 'var(--warning)' : 'var(--success)'};">${data.quality.duplicate_rows}</div>
                </div>
                <div class="glass-card" style="padding: 16px;">
                    <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 4px;">Memory Usage</div>
                    <div style="font-size: 1.8rem; font-weight: 800; color: var(--text-primary);">${data.memory_mb} MB</div>
                </div>
            `;

            html += '</div>';

            // Column types breakdown
            const numericCount = Object.values(data.dtypes).filter(t => t.includes('int') || t.includes('float')).length;
            const categoricalCount = Object.values(data.dtypes).filter(t => t.includes('object') || t.includes('category')).length;

            html += `
                <div style="margin-top: 20px; display: flex; gap: 12px; flex-wrap: wrap;">
                    <span class="badge badge-info"><i class="fas fa-hashtag" style="margin-right: 4px;"></i> ${numericCount} Numeric</span>
                    <span class="badge badge-warning"><i class="fas fa-font" style="margin-right: 4px;"></i> ${categoricalCount} Categorical</span>
                    <span class="badge badge-success"><i class="fas fa-columns" style="margin-right: 4px;"></i> ${data.columns.length} Total Columns</span>
                </div>
            `;

            document.getElementById('dataset-summary').innerHTML = html;
        })
        .catch(error => {
            document.getElementById('dataset-summary').innerHTML = 
                `<p style="color: var(--danger); text-align: center;">Failed to load summary: ${error.message}</p>`;
        });
    {% endif %}
});
</script>
{% endblock %}