{% extends "admin/base_site.html" %}
{% load static %}
{% load i18n %}
{% load dashboard_extras %}
{% block title %}Dashboard de Estadísticas - Tu Espacio Elite{% endblock %}

{% block extrahead %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
<style>
    :root {
        --primary: #2563eb;
        --accent: #0ea5e9;
        --success: #10b981;
        --warning: #f59e0b;
        --bg: #f8fafc;
        --card-bg: #ffffff;
        --text: #1e293b;
        --text-light: #64748b;
        --border: #e2e8f0;
        --shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .dashboard {
        width: 100%;
        margin: 0 auto;
    }

    .header {
        text-align: center;
        margin-bottom: 2rem;
    }

    .header h1 {
        font-size: 1.75rem;
        font-weight: 700;
        margin: 0 0 0.5rem 0;
        color: var(--text);
    }

    .header p {
        color: var(--text-light);
        margin: 0;
    }

    .card {
        background: var(--card-bg);
        border-radius: 8px;
        box-shadow: var(--shadow);
        border: 1px solid var(--border);
        overflow: hidden;
    }

    /* Stats Grid - 4 columnas compactas */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .stat-card {
        padding: 1.5rem;
        text-align: center;
    }

    .stat-number {
        font-size: 2rem;
        font-weight: 800;
        color: var(--primary);
        margin-bottom: 0.25rem;
    }

    .stat-label {
        color: var(--text-light);
        font-size: 0.75rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    /* Purpose Cards - 2 columnas */
    .purpose-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .purpose-card {
        padding: 1.5rem;
        text-align: center;
    }

    .purpose-card.rent .stat-number { color: var(--accent); }
    .purpose-card.sale .stat-number { color: var(--success); }

    /* Main Content Grid */
    .main-grid {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2rem;
        margin-bottom: 2rem;
    }

    /* Charts Container */
    .charts-container {
        display: grid;
        grid-template-rows: 1fr 1fr;
        gap: 1rem;
    }

    .chart-card {
        padding: 1rem;
        height: 280px; /* Altura fija para evitar crecimiento infinito */
    }

    .chart-title {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--text);
    }

    .chart-container {
        height: 220px; /* Altura específica para el canvas */
        position: relative;
    }

    /* Info Sidebar */
    .info-sidebar {
        display: grid;
        gap: 1rem;
    }

    .info-card {
        padding: 0;
    }

    .info-header {
        padding: 1rem;
        background: linear-gradient(135deg, var(--primary), var(--accent));
        color: white;
        font-size: 0.875rem;
        font-weight: 600;
    }

    .info-content {
        padding: 1rem;
    }

    .metric-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.5rem 0;
        border-bottom: 1px solid var(--border);
    }

    .metric-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .metric-label {
        font-size: 0.875rem;
        color: var(--text);
    }

    .metric-value {
        font-weight: 700;
        color: var(--primary);
        font-size: 0.875rem;
    }

    /* Secondary Grid - Charts Bottom */
    .secondary-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
        margin-bottom: 2rem;
    }

    .secondary-chart {
        height: 250px;
    }

    /* Features Section */
    .features-section {
        margin-bottom: 2rem;
    }

    .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 1rem;
    }

    .progress-container {
        margin-top: 0.5rem;
    }

    .progress-bar {
        background: var(--border);
        border-radius: 4px;
        height: 4px;
        overflow: hidden;
    }

    .progress-fill {
        background: linear-gradient(90deg, var(--primary), var(--accent));
        height: 100%;
        transition: width 0.8s ease;
        border-radius: 4px;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .main-grid {
            grid-template-columns: 1fr;
        }
        
        .charts-container {
            grid-template-rows: auto auto;
        }
        
        .secondary-grid {
            grid-template-columns: 1fr;
        }
        
        .purpose-grid {
            grid-template-columns: 1fr;
        }
        
        .features-grid {
            grid-template-columns: 1fr;
        }
    }

    @media (max-width: 480px) {
        body { padding: 0.5rem; }
        .stats-grid { grid-template-columns: 1fr 1fr; }
        .stat-number { font-size: 1.5rem; }
        .header h1 { font-size: 1.5rem; }
    }
</style>
{% endblock %}

{% block content %}
<div class="dashboard">
    <!-- Header -->
    <div class="header">
        <h1>Dashboard de Estadísticas</h1>
        <p>Panel de control de Tu Espacio Elite</p>
    </div>

    <!-- Main Stats -->
    <div class="stats-grid">
        <div class="card stat-card">
            <div class="stat-number">{{ total_properties }}</div>
            <div class="stat-label">Total Propiedades</div>
        </div>
        <div class="card stat-card">
            <div class="stat-number">{{ available_properties }}</div>
            <div class="stat-label">Disponibles</div>
        </div>
        <div class="card stat-card">
            <div class="stat-number">{{ featured_properties }}</div>
            <div class="stat-label">Destacadas</div>
        </div>
        <div class="card stat-card">
            <div class="stat-number">{{ verified_properties }}</div>
            <div class="stat-label">Verificadas</div>
        </div>
    </div>

    <!-- Purpose Stats -->
    <div class="purpose-grid">
        <div class="card purpose-card rent">
            <div class="stat-number">{{ rent_properties }}</div>
            <div class="stat-label">Para Renta</div>
        </div>
        <div class="card purpose-card sale">
            <div class="stat-number">{{ sale_properties }}</div>
            <div class="stat-label">Para Venta</div>
        </div>
    </div>

    <!-- Main Content -->
    <div class="main-grid">
        <!-- Charts -->
        <div class="charts-container">
            <div class="card chart-card">
                <h3 class="chart-title">Propiedades por Categoría</h3>
                <div class="chart-container">
                    <canvas id="categoryChart"></canvas>
                </div>
            </div>
            <div class="card chart-card">
                <h3 class="chart-title">Propiedades por Propósito</h3>
                <div class="chart-container">
                    <canvas id="purposeChart"></canvas>
                </div>
            </div>
        </div>

        <!-- Info Sidebar -->
        <div class="info-sidebar">
            <div class="card info-card">
                <div class="info-header">Promedios Generales</div>
                <div class="info-content">
                    <div class="metric-row">
                        <span class="metric-label">Precio Promedio</span>
                        <span class="metric-value">${{ avg_price|floatformat:0 }}</span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-label">Área Promedio</span>
                        <span class="metric-value">{{ avg_area|floatformat:1 }} m²</span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-label">Habitaciones</span>
                        <span class="metric-value">{{ avg_bedrooms|floatformat:1 }}</span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-label">Baños</span>
                        <span class="metric-value">{{ avg_bathrooms|floatformat:1 }}</span>
                    </div>
                </div>
            </div>

            <div class="card info-card">
                <div class="info-header">Actividad (30 días)</div>
                <div class="info-content">
                    <div class="metric-row">
                        <span class="metric-label">Nuevas</span>
                        <span class="metric-value">{{ recent_properties }}</span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-label">Modificadas</span>
                        <span class="metric-value">{{ recent_modifications }}</span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-label">Total Imágenes</span>
                        <span class="metric-value">{{ total_images }}</span>
                    </div>
                    <div class="metric-row">
                        <span class="metric-label">Con Imágenes</span>
                        <span class="metric-value">{{ properties_with_images }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Secondary Charts -->
    <div class="secondary-grid">
        <div class="card chart-card secondary-chart">
            <h3 class="chart-title">Top 10 Ubicaciones</h3>
            <div class="chart-container">
                <canvas id="locationChart"></canvas>
            </div>
        </div>
        <div class="card chart-card secondary-chart">
            <h3 class="chart-title">Distribución de Precios</h3>
            <div class="chart-container">
                <canvas id="priceChart"></canvas>
            </div>
        </div>
    </div>

    <!-- Features -->
    <div class="features-section">
        <div class="features-grid">
            <div class="card info-card">
                <div class="info-header">Características Populares</div>
                <div class="info-content">
                    {% for feature, count in features_stats.items %}
                    <div class="metric-row">
                        <div style="flex: 1;">
                            <div style="display: flex; justify-content: space-between;">
                                <span class="metric-label">{{ feature }}</span>
                                <span class="metric-value">{{ count }}</span>
                            </div>
                            <div class="progress-container">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: {{ count|mul:100|div:total_properties }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>

            {% if services_stats %}
            <div class="card info-card">
                <div class="info-header">Servicios Más Ofrecidos</div>
                <div class="info-content">
                    {% for service, count in services_stats.items %}
                    <div class="metric-row">
                        <div style="flex: 1;">
                            <div style="display: flex; justify-content: space-between;">
                                <span class="metric-label">{{ service }}</span>
                                <span class="metric-value">{{ count }}</span>
                            </div>
                            <div class="progress-container">
                                <div class="progress-bar">
                                    <div class="progress-fill" style="width: {{ count|mul:100|div:total_properties }}%"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script>
// Configuración de Chart.js
Chart.defaults.font.family = "'Inter', system-ui, sans-serif";
Chart.defaults.font.size = 11;
Chart.defaults.color = '#64748b';

// Colores
const colors = {
    primary: '#2563eb',
    accent: '#0ea5e9',
    success: '#10b981',
    warning: '#f59e0b',
    palette: ['#2563eb', '#0ea5e9', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444', '#06b6d4', '#84cc16']
};

// Datos (estos vendrían del backend)
const categoriesData = {{ categories_data|safe }};
const locationsData = {{ locations_data|safe }};
const purposeData = {{ purpose_data|safe }};
const priceRangesData = {{ price_ranges_data|safe }};

// Configuración común
const commonOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
        legend: {
            display: false
        }
    }
};

// Gráfico de Categorías (Doughnut)
new Chart(document.getElementById('categoryChart'), {
    type: 'doughnut',
    data: {
        labels: categoriesData.map(item => item.name),
        datasets: [{
            data: categoriesData.map(item => item.count),
            backgroundColor: colors.palette,
            borderWidth: 2,
            borderColor: '#ffffff'
        }]
    },
    options: {
        ...commonOptions,
        cutout: '60%',
        plugins: {
            legend: {
                display: true,
                position: 'bottom',
                labels: {
                    padding: 10,
                    usePointStyle: true,
                    font: { size: 10 }
                }
            }
        }
    }
});

// Gráfico de Propósito (Bar)
new Chart(document.getElementById('purposeChart'), {
    type: 'bar',
    data: {
        labels: purposeData.map(item => item.name),
        datasets: [{
            data: purposeData.map(item => item.count),
            backgroundColor: [colors.accent, colors.success],
            borderRadius: 4
        }]
    },
    options: {
        ...commonOptions,
        scales: {
            y: {
                beginAtZero: true,
                grid: { color: '#e2e8f0' },
                ticks: { font: { size: 10 } }
            },
            x: {
                grid: { display: false },
                ticks: { font: { size: 10 } }
            }
        }
    }
});

// Gráfico de Ubicaciones (Horizontal Bar)
new Chart(document.getElementById('locationChart'), {
    type: 'bar',
    data: {
        labels: locationsData.slice(0, 10).map(item => item.name),
        datasets: [{
            data: locationsData.slice(0, 10).map(item => item.count),
            backgroundColor: colors.primary,
            borderRadius: 3
        }]
    },
    options: {
        ...commonOptions,
        indexAxis: 'y',
        scales: {
            x: {
                beginAtZero: true,
                grid: { color: '#e2e8f0' },
                ticks: { font: { size: 9 } }
            },
            y: {
                grid: { display: false },
                ticks: { font: { size: 9 } }
            }
        }
    }
});

// Gráfico de Precios (Pie)
new Chart(document.getElementById('priceChart'), {
    type: 'pie',
    data: {
        labels: priceRangesData.map(item => item.range),
        datasets: [{
            data: priceRangesData.map(item => item.count),
            backgroundColor: colors.palette.slice(0, priceRangesData.length),
            borderWidth: 2,
            borderColor: '#ffffff'
        }]
    },
    options: {
        ...commonOptions,
        plugins: {
            legend: {
                display: true,
                position: 'bottom',
                labels: {
                    padding: 8,
                    usePointStyle: true,
                    font: { size: 9 }
                }
            }
        }
    }
});

// Animación de barras de progreso
document.addEventListener('DOMContentLoaded', function() {
    const progressBars = document.querySelectorAll('.progress-fill');
    
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const bar = entry.target;
                const width = bar.style.width;
                bar.style.width = '0%';
                setTimeout(() => bar.style.width = width, 100);
            }
        });
    });
    
    progressBars.forEach(bar => observer.observe(bar));
});
</script>
{% endblock %}