{% extends "base.html" %}

{% block title %}Estadísticas - {{ empresa.Nombre }}{% endblock %}

{% block extra_css %}
<style>
    .stat-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        border-radius: 20px;
        padding: 1.5rem;
        color: white;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
    }
    
    .stat-card.green {
        background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }
    
    .stat-card.orange {
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    .stat-card.blue {
        background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    .stat-card.purple {
        background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
        color: #333;
    }
    
    .stat-number {
        font-size: 2.5rem;
        font-weight: 700;
        margin: 0.5rem 0;
    }
    
    .chart-container {
        background: white;
        border-radius: 15px;
        padding: 1.5rem;
        box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    }
    
    .product-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }
    
    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    }
</style>
{% endblock %}

{% block content %}
<div class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        
        <!-- Header -->
        <div class="mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h1 class="text-4xl font-bold text-gray-900 mb-2">
                        Estadísticas de {{ empresa.Nombre }}
                    </h1>
                    <p class="text-gray-600">Panel de métricas y análisis de tu negocio</p>
                </div>
                <a href="{{ url_for('empresa.mi_empresa') }}" 
                   class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-purple-600 to-indigo-600 text-white rounded-xl hover:from-purple-700 hover:to-indigo-700 transition-all shadow-lg hover:shadow-xl">
                    <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
                    </svg>
                    Volver al Dashboard
                </a>
            </div>
        </div>

        <!-- Tarjetas de estadísticas principales -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            
            <!-- Total Productos -->
            <div class="stat-card">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-80 mb-1">Total Productos</p>
                        <p class="stat-number">{{ estadisticas.TotalProductos or 0 }}</p>
                    </div>
                    <svg class="w-16 h-16 opacity-30" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3z"/>
                    </svg>
                </div>
            </div>

            <!-- Productos Activos -->
            <div class="stat-card green">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-80 mb-1">Productos Activos</p>
                        <p class="stat-number">{{ estadisticas.ProductosActivos or 0 }}</p>
                    </div>
                    <svg class="w-16 h-16 opacity-30" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
                    </svg>
                </div>
            </div>

            <!-- Stock Total -->
            <div class="stat-card orange">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-80 mb-1">Stock Total</p>
                        <p class="stat-number">{{ estadisticas.StockTotal or 0 }}</p>
                    </div>
                    <svg class="w-16 h-16 opacity-30" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
                    </svg>
                </div>
            </div>

            <!-- Calificación Promedio -->
            <div class="stat-card blue">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm opacity-80 mb-1">Calificación</p>
                        <p class="stat-number">
                            {% if estadisticas_comentarios.CalificacionPromedio %}
                                {{ "%.1f"|format(estadisticas_comentarios.CalificacionPromedio) }}
                            {% else %}
                                N/A
                            {% endif %}
                        </p>
                    </div>
                    <svg class="w-16 h-16 opacity-30" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                </div>
            </div>
        </div>

        <!-- Segunda fila de estadísticas -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            
            <!-- Precio Promedio -->
            <div class="chart-container">
                <div class="flex items-center mb-3">
                    <svg class="w-6 h-6 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M8.433 7.418c.155-.103.346-.196.567-.267v1.698a2.305 2.305 0 01-.567-.267C8.07 8.34 8 8.114 8 8c0-.114.07-.34.433-.582zM11 12.849v-1.698c.22.071.412.164.567.267.364.243.433.468.433.582 0 .114-.07.34-.433.582a2.305 2.305 0 01-.567.267z"/>
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a1 1 0 10-2 0v.092a4.535 4.535 0 00-1.676.662C6.602 6.234 6 7.009 6 8c0 .99.602 1.765 1.324 2.246.48.32 1.054.545 1.676.662v1.941c-.391-.127-.68-.317-.843-.504a1 1 0 10-1.51 1.31c.562.649 1.413 1.076 2.353 1.253V15a1 1 0 102 0v-.092a4.535 4.535 0 001.676-.662C13.398 13.766 14 12.991 14 12c0-.99-.602-1.765-1.324-2.246A4.535 4.535 0 0011 9.092V7.151c.391.127.68.317.843.504a1 1 0 101.511-1.31c-.563-.649-1.413-1.076-2.354-1.253V5z" clip-rule="evenodd"/>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-800">Precio Promedio</h3>
                </div>
                <p class="text-3xl font-bold text-green-600">
                    {% if estadisticas.PrecioPromedio %}
                        Bs. {{ "%.2f"|format(estadisticas.PrecioPromedio) }}
                    {% else %}
                        Bs. 0.00
                    {% endif %}
                </p>
                <p class="text-sm text-gray-500 mt-2">
                    Rango: Bs. {{ "%.2f"|format(estadisticas.PrecioMinimo or 0) }} - Bs. {{ "%.2f"|format(estadisticas.PrecioMaximo or 0) }}
                </p>
            </div>

            <!-- Total Comentarios -->
            <div class="chart-container">
                <div class="flex items-center mb-3">
                    <svg class="w-6 h-6 text-blue-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd"/>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-800">Comentarios</h3>
                </div>
                <p class="text-3xl font-bold text-blue-600">{{ estadisticas_comentarios.TotalComentarios or 0 }}</p>
                <div class="flex items-center gap-4 mt-2 text-sm">
                    <span class="text-green-600">{{ estadisticas_comentarios.ComentariosPositivos or 0 }} Positivos</span>
                    <span class="text-red-600">{{ estadisticas_comentarios.ComentariosNegativos or 0 }} Negativos</span>
                </div>
            </div>

            <!-- Productos Destacados -->
            <div class="chart-container">
                <div class="flex items-center mb-3">
                    <svg class="w-6 h-6 text-yellow-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/>
                    </svg>
                    <h3 class="text-lg font-semibold text-gray-800">Destacados</h3>
                </div>
                <p class="text-3xl font-bold text-yellow-600">{{ estadisticas.ProductosDestacados or 0 }}</p>
                <p class="text-sm text-gray-500 mt-2">
                    {{ estadisticas.ProductosInactivos or 0 }} productos inactivos
                </p>
            </div>
        </div>

        <!-- Distribución por Categorías -->
        {% if distribucion_categorias and distribucion_categorias|length > 0 %}
        <div class="chart-container mb-8">
            <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <svg class="w-6 h-6 text-purple-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"/>
                </svg>
                Distribución por Categorías
            </h3>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                {% for cat in distribucion_categorias %}
                <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg p-4 border-2 border-purple-200">
                    <p class="text-sm font-medium text-gray-600">{{ cat.Categoria }}</p>
                    <p class="text-2xl font-bold text-purple-600">{{ cat.Total }}</p>
                    <p class="text-xs text-gray-500">productos</p>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endif %}

        <!-- Productos Recientes -->
        <div class="chart-container">
            <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <svg class="w-6 h-6 text-indigo-500 mr-2" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clip-rule="evenodd"/>
                </svg>
                Productos Recientes
            </h3>
            
            {% if productos_recientes and productos_recientes|length > 0 %}
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
                {% for producto in productos_recientes %}
                <div class="product-card bg-white rounded-lg overflow-hidden border-2 border-gray-200 hover:border-purple-400">
                    <div class="aspect-w-1 aspect-h-1 bg-gray-200">
                        {% if producto.ImagenPrincipal %}
                        <img src="{{ url_for('static', filename='uploads/' + producto.ImagenPrincipal) }}" 
                             alt="{{ producto.Nombre }}"
                             class="w-full h-32 object-cover">
                        {% else %}
                        <div class="w-full h-32 flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200">
                            <svg class="w-12 h-12 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/>
                            </svg>
                        </div>
                        {% endif %}
                    </div>
                    <div class="p-3">
                        <h4 class="font-semibold text-gray-800 text-sm truncate">{{ producto.Nombre }}</h4>
                        <p class="text-xs text-gray-500 mb-2">{{ producto.CategoriaNombre }}</p>
                        <div class="flex items-center justify-between">
                            <span class="text-sm font-bold text-green-600">Bs. {{ "%.2f"|format(producto.Precio) }}</span>
                            <span class="text-xs {% if producto.EsActivo %}text-green-500{% else %}text-red-500{% endif %}">
                                {% if producto.EsActivo %}●{% else %}○{% endif %} 
                                Stock: {{ producto.Stock }}
                            </span>
                        </div>
                        {% if producto.EsDestacado %}
                        <span class="inline-block mt-2 text-xs bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full">
                            Destacado
                        </span>
                        {% endif %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-center py-12">
                <svg class="w-16 h-16 text-gray-300 mx-auto mb-4" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
                </svg>
                <p class="text-gray-500">No hay productos registrados</p>
                <a href="{{ url_for('empresa.crear_producto') }}" 
                   class="inline-block mt-4 px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
                    Crear Primer Producto
                </a>
            </div>
            {% endif %}
        </div>

    </div>
</div>
{% endblock %}