{% extends "base.html" %}
{% set title = "Enhanced Mapping Analytics" %}

{% block extra_head %}
<style>
.enhanced-container {
    background: linear-gradient(135deg, #1a1f2e 0%, #16213e 100%);
    min-height: 100vh;
    color: #ffffff;
}

.analytics-card {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
    backdrop-filter: blur(10px);
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.analytics-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 212, 170, 0.3);
    border-color: rgba(0, 212, 170, 0.5);
}

.hero-analytics {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 3rem 2rem;
    border-radius: 15px;
    text-align: center;
    margin-bottom: 3rem;
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.feature-icon {
    color: #00d4aa;
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(0, 212, 170, 0.5);
}

.btn-analytics {
    background: linear-gradient(135deg, #00d4aa, #00a085);
    border: none;
    color: white;
    padding: 1rem 2rem;
    border-radius: 10px;
    font-weight: bold;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    margin: 0.5rem;
}

.btn-analytics:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 212, 170, 0.4);
    color: white;
}

.stats-preview {
    background: rgba(0, 0, 0, 0.3);
    padding: 1.5rem;
    border-radius: 10px;
    margin-top: 1rem;
}

.metric-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.metric-value {
    color: #00d4aa;
    font-weight: bold;
    font-size: 1.1rem;
}

.loading-card {
    opacity: 0.7;
    background: linear-gradient(90deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.1) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.capability-badge {
    background: rgba(0, 212, 170, 0.2);
    color: #00d4aa;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    margin: 0.25rem;
    display: inline-block;
}
</style>
{% endblock %}

{% block content %}
<div class="enhanced-container">
    <div class="container py-5">
        <!-- Hero Section -->
        <div class="hero-analytics">
            <h1 class="display-4 mb-3"><i data-feather="trending-up"></i> <strong>Enhanced Mapping Analytics</strong></h1>
            <p class="lead mb-4">Advanced biodiversity analysis, species density mapping, and habitat correlation insights</p>
            <p class="text-light">Discover orchid biodiversity hotspots, analyze habitat patterns, and explore conservation priorities using cutting-edge analytical techniques</p>
        </div>

        <!-- Quick Analytics Overview -->
        <div class="analytics-card" id="overviewCard">
            <h3 class="mb-4"><i data-feather="bar-chart-2"></i> Analytics Overview</h3>
            <div class="row" id="analyticsOverview">
                <div class="col-md-3">
                    <div class="stats-preview loading-card">
                        <h4 class="metric-value">---</h4>
                        <small class="text-muted">Biodiversity Hotspots</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-preview loading-card">
                        <h4 class="metric-value">---</h4>
                        <small class="text-muted">Habitat Types</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-preview loading-card">
                        <h4 class="metric-value">---</h4>
                        <small class="text-muted">Regions Analyzed</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-preview loading-card">
                        <h4 class="metric-value">---%</h4>
                        <small class="text-muted">Diversity Index</small>
                    </div>
                </div>
            </div>
        </div>

        <!-- Main Analytics Grid -->
        <div class="analytics-grid">
            <!-- Biodiversity Hotspots -->
            <div class="analytics-card">
                <div class="text-center">
                    <div class="feature-icon">🌟</div>
                    <h3>Biodiversity Hotspots</h3>
                    <p class="text-muted mb-4">Identify regions with exceptional orchid species concentration and diversity</p>
                </div>
                
                <div class="stats-preview">
                    <div class="metric-item">
                        <span>Detection Algorithm</span>
                        <span class="metric-value">DBSCAN Clustering</span>
                    </div>
                    <div class="metric-item">
                        <span>Species Threshold</span>
                        <span class="metric-value">10+ Species</span>
                    </div>
                    <div class="metric-item">
                        <span>Analysis Scope</span>
                        <span class="metric-value">Global Coverage</span>
                    </div>
                </div>
                
                <div class="mt-3">
                    <div class="capability-badge">Species Concentration</div>
                    <div class="capability-badge">Geographic Clustering</div>
                    <div class="capability-badge">Diversity Ranking</div>
                </div>
                
                <div class="text-center mt-4">
                    <a href="/enhanced-mapping/biodiversity-hotspots" class="btn-analytics">
                        <i data-feather="map-pin"></i> Explore Hotspots
                    </a>
                </div>
            </div>

            <!-- Species Density Heat Maps -->
            <div class="analytics-card">
                <div class="text-center">
                    <div class="feature-icon">🔥</div>
                    <h3>Species Density Mapping</h3>
                    <p class="text-muted mb-4">Advanced heat maps showing orchid species distribution patterns and density gradients</p>
                </div>
                
                <div class="stats-preview">
                    <div class="metric-item">
                        <span>Grid Resolution</span>
                        <span class="metric-value">0.5° Grid Cells</span>
                    </div>
                    <div class="metric-item">
                        <span>Density Calculation</span>
                        <span class="metric-value">Species per Area</span>
                    </div>
                    <div class="metric-item">
                        <span>Visualization</span>
                        <span class="metric-value">Interactive Heat Map</span>
                    </div>
                </div>
                
                <div class="mt-3">
                    <div class="capability-badge">Heat Map Visualization</div>
                    <div class="capability-badge">Genus Filtering</div>
                    <div class="capability-badge">Density Gradients</div>
                </div>
                
                <div class="text-center mt-4">
                    <a href="/enhanced-mapping/species-density" class="btn-analytics">
                        <i data-feather="trending-up"></i> View Density Maps
                    </a>
                </div>
            </div>

            <!-- Habitat Correlation Analysis -->
            <div class="analytics-card">
                <div class="text-center">
                    <div class="feature-icon">🌿</div>
                    <h3>Habitat Correlations</h3>
                    <p class="text-muted mb-4">Analyze relationships between orchid distribution and habitat characteristics</p>
                </div>
                
                <div class="stats-preview">
                    <div class="metric-item">
                        <span>Habitat Categories</span>
                        <span class="metric-value">7 Major Types</span>
                    </div>
                    <div class="metric-item">
                        <span>Correlation Analysis</span>
                        <span class="metric-value">Geographic + Ecological</span>
                    </div>
                    <div class="metric-item">
                        <span>Pattern Detection</span>
                        <span class="metric-value">Automated</span>
                    </div>
                </div>
                
                <div class="mt-3">
                    <div class="capability-badge">Habitat Classification</div>
                    <div class="capability-badge">Distribution Patterns</div>
                    <div class="capability-badge">Ecological Insights</div>
                </div>
                
                <div class="text-center mt-4">
                    <a href="/enhanced-mapping/habitat-correlations" class="btn-analytics">
                        <i data-feather="layers"></i> Analyze Habitats
                    </a>
                </div>
            </div>

            <!-- Diversity Metrics -->
            <div class="analytics-card">
                <div class="text-center">
                    <div class="feature-icon">📊</div>
                    <h3>Diversity Metrics</h3>
                    <p class="text-muted mb-4">Comprehensive regional diversity analysis with Shannon indices and geographic spread</p>
                </div>
                
                <div class="stats-preview">
                    <div class="metric-item">
                        <span>Shannon Diversity</span>
                        <span class="metric-value">Estimated Index</span>
                    </div>
                    <div class="metric-item">
                        <span>Regional Comparison</span>
                        <span class="metric-value">Multi-Regional</span>
                    </div>
                    <div class="metric-item">
                        <span>Geographic Spread</span>
                        <span class="metric-value">Standard Deviation</span>
                    </div>
                </div>
                
                <div class="mt-3">
                    <div class="capability-badge">Shannon Diversity</div>
                    <div class="capability-badge">Regional Ranking</div>
                    <div class="capability-badge">Spread Analysis</div>
                </div>
                
                <div class="text-center mt-4">
                    <a href="/enhanced-mapping/diversity-metrics" class="btn-analytics">
                        <i data-feather="pie-chart"></i> View Metrics
                    </a>
                </div>
            </div>

            <!-- Conservation Priorities -->
            <div class="analytics-card">
                <div class="text-center">
                    <div class="feature-icon">🛡️</div>
                    <h3>Conservation Priorities</h3>
                    <p class="text-muted mb-4">Identify high-priority areas for orchid conservation based on biodiversity analysis</p>
                </div>
                
                <div class="stats-preview">
                    <div class="metric-item">
                        <span>Priority Scoring</span>
                        <span class="metric-value">Multi-Factor</span>
                    </div>
                    <div class="metric-item">
                        <span>Threat Assessment</span>
                        <span class="metric-value">Rarity-Based</span>
                    </div>
                    <div class="metric-item">
                        <span>Action Recommendations</span>
                        <span class="metric-value">Data-Driven</span>
                    </div>
                </div>
                
                <div class="mt-3">
                    <div class="capability-badge">Priority Scoring</div>
                    <div class="capability-badge">Risk Assessment</div>
                    <div class="capability-badge">Action Plans</div>
                </div>
                
                <div class="text-center mt-4">
                    <a href="/enhanced-mapping/conservation-priorities" class="btn-analytics">
                        <i data-feather="shield"></i> Priority Areas
                    </a>
                </div>
            </div>

            <!-- Comprehensive Dashboard -->
            <div class="analytics-card">
                <div class="text-center">
                    <div class="feature-icon">🎛️</div>
                    <h3>Analytics Dashboard</h3>
                    <p class="text-muted mb-4">Unified dashboard combining all enhanced mapping analytics in one interface</p>
                </div>
                
                <div class="stats-preview">
                    <div class="metric-item">
                        <span>Real-Time Updates</span>
                        <span class="metric-value">Live Data</span>
                    </div>
                    <div class="metric-item">
                        <span>Interactive Charts</span>
                        <span class="metric-value">D3.js Powered</span>
                    </div>
                    <div class="metric-item">
                        <span>Export Options</span>
                        <span class="metric-value">Multiple Formats</span>
                    </div>
                </div>
                
                <div class="mt-3">
                    <div class="capability-badge">Unified Interface</div>
                    <div class="capability-badge">Interactive Charts</div>
                    <div class="capability-badge">Export Tools</div>
                </div>
                
                <div class="text-center mt-4">
                    <a href="/enhanced-mapping/dashboard" class="btn-analytics">
                        <i data-feather="activity"></i> Open Dashboard
                    </a>
                </div>
            </div>
        </div>

        <!-- API Documentation -->
        <div class="analytics-card mt-4">
            <h3 class="mb-3"><i data-feather="code"></i> Analytics API</h3>
            <p class="text-muted mb-3">Programmatic access to enhanced mapping analytics data</p>
            
            <div class="row">
                <div class="col-md-6">
                    <h6>Hotspots API</h6>
                    <code>/enhanced-mapping/api/hotspots</code>
                    <p class="small text-muted mt-1">Biodiversity hotspot data with clustering</p>
                    
                    <h6>Habitat Analysis API</h6>
                    <code>/enhanced-mapping/api/habitat-analysis</code>
                    <p class="small text-muted mt-1">Habitat correlation analysis results</p>
                </div>
                <div class="col-md-6">
                    <h6>Diversity Metrics API</h6>
                    <code>/enhanced-mapping/api/diversity-metrics</code>
                    <p class="small text-muted mt-1">Regional diversity calculations</p>
                    
                    <h6>Comprehensive API</h6>
                    <code>/enhanced-mapping/api/comprehensive-analysis</code>
                    <p class="small text-muted mt-1">Complete analytics dataset</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Load analytics overview on page load
document.addEventListener('DOMContentLoaded', function() {
    feather.replace();
    loadAnalyticsOverview();
});

async function loadAnalyticsOverview() {
    try {
        const response = await fetch('/enhanced-mapping/api/comprehensive-analysis');
        const data = await response.json();
        
        if (data.success) {
            const analysis = data.comprehensive_analysis;
            
            document.getElementById('analyticsOverview').innerHTML = `
                <div class="col-md-3">
                    <div class="stats-preview">
                        <h4 class="metric-value">${analysis.biodiversity_hotspots.length}</h4>
                        <small class="text-muted">Biodiversity Hotspots</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-preview">
                        <h4 class="metric-value">${analysis.habitat_correlations.habitat_types_found || 0}</h4>
                        <small class="text-muted">Habitat Types</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-preview">
                        <h4 class="metric-value">${analysis.diversity_metrics.global_statistics?.regions_analyzed || 0}</h4>
                        <small class="text-muted">Regions Analyzed</small>
                    </div>
                </div>
                <div class="col-md-3">
                    <div class="stats-preview">
                        <h4 class="metric-value">${Math.round((analysis.diversity_metrics.global_statistics?.average_species_per_region || 0) * 10) / 10}</h4>
                        <small class="text-muted">Avg Species/Region</small>
                    </div>
                </div>
            `;
            
            console.log('📊 Enhanced mapping analytics overview loaded');
        }
    } catch (error) {
        console.error('Error loading analytics overview:', error);
        // Keep loading placeholders on error
    }
}

// Analytics interaction tracking
function trackAnalyticsAction(action, category) {
    console.log(`Enhanced Mapping Analytics: ${category} - ${action}`);
    // Could integrate with analytics service
}

// Add click tracking to analytics buttons
document.querySelectorAll('.btn-analytics').forEach(btn => {
    btn.addEventListener('click', (e) => {
        const category = e.target.closest('.analytics-card').querySelector('h3').textContent;
        trackAnalyticsAction('click', category);
    });
});
</script>
{% endblock %}