{% extends 'layouts/base.html' %}

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

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-900">Resumen del Negocio</h1>
    <p class="text-gray-500">Métricas y rendimiento actual de {{ vendedor.nombre_negocio }}.</p>
</div>

<!-- Grid de Tarjetas de Rendimiento (Ahora con 4 columnas exactas) -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Tarjeta: Ingresos -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex justify-between items-center hover:shadow-md transition-shadow">
        <div>
            <p class="text-sm font-medium text-gray-500 mb-1">Ingresos del Mes</p>
            <h3 class="text-2xl font-bold text-green-600">S/ {{ "%.2f"|format(ingresos_mes) }}</h3>
        </div>
        <div class="w-12 h-12 rounded-full bg-green-50 flex items-center justify-center text-green-500">
            <i class="ph ph-currency-circle-dollar text-2xl"></i>
        </div>
    </div>

    <!-- Tarjeta: Utilidad Neta (Ingresos - Costos) -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex justify-between items-center hover:shadow-md transition-shadow">
        <div>
            <p class="text-sm font-medium text-gray-500 mb-1">Utilidad Neta (Ganancia)</p>
            <h3 class="text-2xl font-bold {{ 'text-blue-600' if utilidad_neta >= 0 else 'text-red-600' }}">S/ {{ "%.2f"|format(utilidad_neta) }}</h3>
        </div>
        <div class="w-12 h-12 rounded-full {{ 'bg-blue-50 text-blue-500' if utilidad_neta >= 0 else 'bg-red-50 text-red-500' }} flex items-center justify-center">
            <i class="ph ph-chart-line-up text-2xl"></i>
        </div>
    </div>

    <!-- Tarjeta: Servicios Activos -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex justify-between items-center hover:shadow-md transition-shadow">
        <div>
            <p class="text-sm font-medium text-gray-500 mb-1">Servicios Activos</p>
            <h3 class="text-2xl font-bold text-gray-900">{{ ventas_activas }}</h3>
        </div>
        <div class="w-12 h-12 rounded-full bg-indigo-50 flex items-center justify-center text-indigo-500">
            <i class="ph ph-monitor-play text-2xl"></i>
        </div>
    </div>

    <!-- Total Clientes -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex items-center justify-between hover:shadow-md transition-shadow">
        <div>
            <p class="text-sm font-medium text-gray-500 mb-1">Total Clientes</p>
            <h3 class="text-2xl font-bold text-purple-600">{{ total_clientes }}</h3>
        </div>
        <div class="w-12 h-12 bg-purple-50 rounded-full flex items-center justify-center text-purple-600">
            <i class="ph ph-users text-2xl"></i>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Gráfico Principal (Ocupa 2 columnas) -->
    <div class="lg:col-span-2 bg-white rounded-xl shadow-sm border border-gray-100 p-6">
        <h3 class="text-lg font-bold text-gray-800 mb-4">Evolución de Ventas (Últimos 6 meses)</h3>
        <div class="relative h-64 w-full">
            <canvas id="graficoVentas"></canvas>
        </div>
    </div>

    <!-- Próximos Vencimientos (Ocupa 1 columna) -->
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 flex flex-col">
        <div class="flex justify-between items-center mb-4">
            <h3 class="text-lg font-bold text-gray-800">Próximas Renovaciones</h3>
            <span class="bg-red-100 text-red-600 text-xs font-bold px-2 py-1 rounded-full">{{ vencimientos|length }}</span>
        </div>
        
        <div class="flex-grow overflow-y-auto pr-2 space-y-3">
            {% if vencimientos %}
                {% for v in vencimientos %}
                <div class="p-3 bg-gray-50 border border-gray-100 rounded-lg flex justify-between items-center">
                    <div>
                        <p class="text-sm font-bold text-gray-900">{{ v.cliente.nombre }}</p>
                        <p class="text-xs text-gray-500">{{ v.producto.nombre }}</p>
                    </div>
                    <div class="text-right">
                        <p class="text-xs font-semibold text-red-600">{{ v.fecha_vencimiento.strftime('%d/%m') }}</p>
                        <a href="https://wa.me/{{ v.cliente.telefono_whatsapp | replace('+', '') | replace(' ', '') }}" target="_blank" class="text-green-500 hover:text-green-600 inline-block mt-1">
                            <i class="ph ph-whatsapp-logo text-lg"></i>
                        </a>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="text-center text-gray-400 py-6">
                    <i class="ph ph-check-circle text-3xl mb-2"></i>
                    <p class="text-sm">Todo al día, no hay vencimientos próximos.</p>
                </div>
            {% endif %}
        </div>
    </div>
</div>

<!-- Script para inicializar Chart.js con DATOS 100% DINÁMICOS -->
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    const ctx = document.getElementById('graficoVentas').getContext('2d');
    
    // Inyectamos las listas procesadas por el backend de Flask
    const labelsDinamicos = {{ labels_grafico | tojson }};
    const datosDinamicos = {{ datos_grafico | tojson }};
    
    const ventasChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: labelsDinamicos,
            datasets: [{
                label: 'Ingresos (S/)',
                data: datosDinamicos,
                backgroundColor: 'rgba(37, 99, 235, 0.8)', // Azul
                borderRadius: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: { display: false }
            },
            scales: {
                y: { beginAtZero: true, grid: { display: true, color: '#f3f4f6' } },
                x: { grid: { display: false } }
            }
        }
    });
</script>
{% endblock %}