{% extends "base.html" %}

{% block title %}Panel de Administración - TallArt{% endblock %}

{% block extra_css %}
<style>
    .stat-card {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 16px;
        padding: 2rem;
        box-shadow: 0 10px 30px rgba(102, 126, 234, 0.3);
        transition: all 0.3s ease;
    }
    
    .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 15px 40px rgba(102, 126, 234, 0.4);
    }
    
    .stat-card-blue {
        background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
    }
    
    .stat-card-green {
        background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    }
    
    .stat-card-yellow {
        background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    }
    
    .stat-card-red {
        background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    }
    
    .admin-nav {
        background: white;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        padding: 1rem;
        margin-bottom: 2rem;
    }
    
    .admin-nav a {
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
        transition: all 0.3s ease;
        text-decoration: none;
        color: #4b5563;
        font-weight: 500;
    }
    
    .admin-nav a:hover {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        transform: scale(1.05);
    }
    
    .admin-nav a.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
    }
    
    .chart-container {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        margin-bottom: 2rem;
    }
    
    .recent-activity {
        background: white;
        border-radius: 12px;
        padding: 1.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    }
    
    .activity-item {
        padding: 1rem;
        border-left: 4px solid #667eea;
        background: #f9fafb;
        border-radius: 8px;
        margin-bottom: 1rem;
        transition: all 0.3s ease;
    }
    
    .activity-item:hover {
        background: #f3f4f6;
        transform: translateX(5px);
    }
    
    .quick-action-btn {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        padding: 1rem 2rem;
        border-radius: 8px;
        text-decoration: none;
        display: inline-block;
        transition: all 0.3s ease;
        font-weight: 600;
    }
    
    .quick-action-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
        color: white;
    }
</style>
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <!-- Header -->
    <div class="mb-8">
        <h1 class="text-4xl font-bold text-gray-800 mb-2">
            👨‍💼 Panel de Administración
        </h1>
        <p class="text-gray-600">Bienvenido al centro de control de TallArt</p>
    </div>

    <!-- Navegación de Admin -->
    <div class="admin-nav flex flex-wrap gap-2 mb-8">
        <a href="{{ url_for('admin.dashboard') }}" class="active">
            <i class="fas fa-home mr-2"></i>Dashboard
        </a>
        <a href="{{ url_for('admin.manage_users') }}">
            <i class="fas fa-users mr-2"></i>Usuarios
        </a>
        <a href="{{ url_for('admin.manage_empresas') }}">
            <i class="fas fa-building mr-2"></i>Empresas
        </a>
        <a href="{{ url_for('admin.manage_productos') }}">
            <i class="fas fa-box mr-2"></i>Productos
        </a>
        <a href="{{ url_for('admin.manage_eventos') }}">
            <i class="fas fa-calendar mr-2"></i>Eventos
        </a>
        <a href="{{ url_for('admin.manage_comentarios') }}">
            <i class="fas fa-comments mr-2"></i>Comentarios
        </a>
        <a href="{{ url_for('admin.manage_categorias') }}">
            <i class="fas fa-tags mr-2"></i>Categorías
        </a>

        <a href="{{ url_for('admin.view_alertas') }}">
            <i class="fas fa-bell mr-2"></i>Alertas
        </a>
        <a href="{{ url_for('admin.view_logins') }}">
            <i class="fas fa-sign-in-alt mr-2"></i>Logins
        </a>
        <a href="{{ url_for('admin.view_auditoria') }}">
            <i class="fas fa-clipboard-list mr-2"></i>Auditoría
        </a>
    </div>

    <!-- Estadísticas Principales -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <!-- Total Usuarios -->
        <div class="stat-card stat-card-blue">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-blue-100 text-sm mb-1">Total Usuarios</p>
                    <h3 class="text-3xl font-bold">{{ stats.get('total_usuarios', 0) }}</h3>
                </div>
                <div class="text-5xl opacity-30">
                    <i class="fas fa-users"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-white border-opacity-20">
                <p class="text-sm text-blue-100">
                    <i class="fas fa-arrow-up mr-1"></i>
                    {{ stats.get('usuarios_este_mes', 0) }} este mes
                </p>
            </div>
        </div>

        <!-- Total Empresas -->
        <div class="stat-card stat-card-green">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-green-100 text-sm mb-1">Total Empresas</p>
                    <h3 class="text-3xl font-bold">{{ stats.get('total_empresas', 0) }}</h3>
                </div>
                <div class="text-5xl opacity-30">
                    <i class="fas fa-building"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-white border-opacity-20">
                <p class="text-sm text-green-100">
                    <i class="fas fa-check-circle mr-1"></i>
                    {{ stats.get('empresas_activas', 0) }} activas
                </p>
            </div>
        </div>

        <!-- Total Productos -->
        <div class="stat-card stat-card-yellow">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-yellow-100 text-sm mb-1">Total Productos</p>
                    <h3 class="text-3xl font-bold">{{ stats.get('total_productos', 0) }}</h3>
                </div>
                <div class="text-5xl opacity-30">
                    <i class="fas fa-box"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-white border-opacity-20">
                <p class="text-sm text-yellow-100">
                    <i class="fas fa-star mr-1"></i>
                    {{ stats.get('productos_destacados', 0) }} destacados
                </p>
            </div>
        </div>

        <!-- Total Eventos -->
        <div class="stat-card stat-card-red">
            <div class="flex items-center justify-between">
                <div>
                    <p class="text-red-100 text-sm mb-1">Total Eventos</p>
                    <h3 class="text-3xl font-bold">{{ stats.get('total_eventos', 0) }}</h3>
                </div>
                <div class="text-5xl opacity-30">
                    <i class="fas fa-calendar"></i>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-white border-opacity-20">
                <p class="text-sm text-red-100">
                    <i class="fas fa-clock mr-1"></i>
                    {{ stats.get('eventos_proximos', 0) }} próximos
                </p>
            </div>
        </div>
    </div>

    <!-- Proyección mensual de usuarios (Cliente vs Empresa) -->
    <div class="chart-container mb-8">
        <div class="flex items-center justify-between mb-4">
            <div>
                <h3 class="text-xl font-bold text-gray-800 flex items-center">
                    <i class="fas fa-chart-line mr-2 text-purple-600"></i>
                    Proyección mensual de usuarios (acumulado)
                </h3>
                <p class="text-gray-600 text-sm">Histórico + proyección (Clientes vs Empresas)</p>
            </div>
        </div>

        {% if user_projection and user_projection.labels and user_projection.labels|length > 0 %}
            <div class="relative" style="height: 320px;">
                <canvas id="usersProjectionChart"></canvas>
            </div>
        {% else %}
            <div class="text-center py-12 text-gray-500">
                No hay datos suficientes para generar la proyección.
            </div>
        {% endif %}
    </div>

    <!-- Gobierno de Datos (Alertas / Logins / Auditoría) -->
    <div class="mb-8">
        <div class="mb-4">
            <h2 class="text-2xl font-bold text-gray-800 flex items-center">
                <i class="fas fa-shield-alt mr-2 text-purple-600"></i>
                Gobierno de Datos
            </h2>
            <p class="text-gray-600">Monitoreo y trazabilidad del sistema</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
            <!-- Alertas nuevas -->
            <div class="stat-card stat-card-red">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-red-100 text-sm mb-1">Alertas nuevas</p>
                        <h3 class="text-3xl font-bold">{{ governance.get('alertas_nuevas', 0) }}</h3>
                    </div>
                    <div class="text-5xl opacity-30">
                        <i class="fas fa-bell"></i>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-white border-opacity-20 flex items-center justify-between">
                    <p class="text-sm text-red-100">
                        <i class="fas fa-folder-open mr-1"></i>
                        {{ governance.get('alertas_abiertas', 0) }} abiertas
                    </p>
                    <a href="{{ url_for('admin.view_alertas') }}" class="text-sm font-semibold text-white hover:underline">Ver →</a>
                </div>
            </div>

            <!-- Logins fallidos 24h -->
            <div class="stat-card stat-card-yellow">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-yellow-100 text-sm mb-1">Logins fallidos (24h)</p>
                        <h3 class="text-3xl font-bold">{{ governance.get('logins_fallidos_24h', 0) }}</h3>
                    </div>
                    <div class="text-5xl opacity-30">
                        <i class="fas fa-user-shield"></i>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-white border-opacity-20 flex items-center justify-between">
                    <p class="text-sm text-yellow-100">
                        <i class="fas fa-clock mr-1"></i>
                        últimas 24 horas
                    </p>
                    <a href="{{ url_for('admin.view_logins') }}" class="text-sm font-semibold text-white hover:underline">Ver →</a>
                </div>
            </div>

            <!-- Auditoría 24h -->
            <div class="stat-card stat-card-blue">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-blue-100 text-sm mb-1">Eventos de auditoría (24h)</p>
                        <h3 class="text-3xl font-bold">{{ governance.get('auditoria_24h', 0) }}</h3>
                    </div>
                    <div class="text-5xl opacity-30">
                        <i class="fas fa-clipboard-list"></i>
                    </div>
                </div>
                <div class="mt-4 pt-4 border-t border-white border-opacity-20 flex items-center justify-between">
                    <p class="text-sm text-blue-100">
                        <i class="fas fa-list mr-1"></i>
                        trazabilidad
                    </p>
                    <a href="{{ url_for('admin.view_auditoria') }}" class="text-sm font-semibold text-white hover:underline">Ver →</a>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mt-6">
            <div class="chart-container">
                <h4 class="font-bold text-gray-800 mb-3">🔔 Alertas recientes</h4>
                {% if recent_alertas %}
                    <div class="space-y-3">
                        {% for a in recent_alertas %}
                            <div class="flex items-start justify-between gap-3 p-3 bg-gray-50 rounded-lg">
                                <div class="min-w-0">
                                    <p class="font-semibold text-gray-800 truncate">{{ a.Titulo }}</p>
                                    <p class="text-xs text-gray-500">
                                        {{ a.Severidad }} · {{ a.Estado }} · {{ a.FechaCreacion }}
                                    </p>
                                </div>
                                <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded whitespace-nowrap">{{ a.Tipo }}</span>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-gray-500 text-center py-6">No hay alertas recientes</p>
                {% endif %}
                <a href="{{ url_for('admin.view_alertas') }}" class="text-purple-600 hover:text-purple-800 text-sm mt-3 inline-block">Ver todas →</a>
            </div>

            <div class="chart-container">
                <h4 class="font-bold text-gray-800 mb-3">🚫 Logins fallidos recientes</h4>
                {% if recent_failed_logins %}
                    <div class="space-y-3">
                        {% for l in recent_failed_logins %}
                            <div class="p-3 bg-gray-50 rounded-lg">
                                <p class="font-semibold text-gray-800 truncate">{{ l.Email }}</p>
                                <p class="text-xs text-gray-500">{{ l.IP }} · {{ l.TipoFallo or 'FALLO' }} · {{ l.FechaHora }}</p>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-gray-500 text-center py-6">No hay fallos recientes</p>
                {% endif %}
                <a href="{{ url_for('admin.view_logins') }}" class="text-purple-600 hover:text-purple-800 text-sm mt-3 inline-block">Ver todos →</a>
            </div>

            <div class="chart-container">
                <h4 class="font-bold text-gray-800 mb-3">🧾 Auditoría reciente</h4>
                {% if recent_audit %}
                    <div class="space-y-3">
                        {% for r in recent_audit %}
                            <div class="p-3 bg-gray-50 rounded-lg">
                                <p class="font-semibold text-gray-800">{{ r.Accion }}</p>
                                <p class="text-xs text-gray-500">{{ r.TablaAfectada or '' }} {{ r.RegistroID or '' }} · Usuario {{ r.UsuarioID or '' }} · {{ r.FechaAccion }}</p>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <p class="text-gray-500 text-center py-6">No hay auditoría reciente</p>
                {% endif %}
                <a href="{{ url_for('admin.view_auditoria') }}" class="text-purple-600 hover:text-purple-800 text-sm mt-3 inline-block">Ver todo →</a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <!-- Actividad Reciente -->
        <div class="recent-activity">
            <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-history mr-2 text-purple-600"></i>
                Actividad Reciente
            </h3>
            
            {% if recent_activities %}
                {% for activity in recent_activities[:10] %}
                <div class="activity-item">
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <p class="font-semibold text-gray-800">{{ activity.accion }}</p>
                            <p class="text-sm text-gray-600">{{ activity.descripcion }}</p>
                            <p class="text-xs text-gray-500 mt-1">
                                <i class="far fa-clock mr-1"></i>
                                {{ activity.fecha_accion.strftime('%d/%m/%Y %H:%M') if activity.fecha_accion else 'N/A' }}
                            </p>
                        </div>
                        <span class="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
                            {{ activity.tipo }}
                        </span>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <p class="text-gray-500 text-center py-8">No hay actividad reciente</p>
            {% endif %}
        </div>

        <!-- Acciones Rápidas -->
        <div class="recent-activity">
            <h3 class="text-xl font-bold text-gray-800 mb-4 flex items-center">
                <i class="fas fa-bolt mr-2 text-yellow-600"></i>
                Acciones Rápidas
            </h3>
            
            <div class="grid grid-cols-1 gap-3">
                <a href="{{ url_for('admin.manage_users') }}" class="quick-action-btn text-center">
                    <i class="fas fa-user-plus mr-2"></i>
                    Gestionar Usuarios
                </a>
                
                <a href="{{ url_for('admin.manage_empresas') }}" class="quick-action-btn text-center" style="background: linear-gradient(135deg, #10b981 0%, #047857 100%);">
                    <i class="fas fa-building mr-2"></i>
                    Gestionar Empresas
                </a>
                
                <a href="{{ url_for('admin.manage_productos') }}" class="quick-action-btn text-center" style="background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);">
                    <i class="fas fa-box mr-2"></i>
                    Gestionar Productos
                </a>
                
                <a href="{{ url_for('admin.manage_comentarios') }}" class="quick-action-btn text-center" style="background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);">
                    <i class="fas fa-comments mr-2"></i>
                    Moderar Comentarios
                </a>
                
                <a href="{{ url_for('admin.manage_categorias') }}" class="quick-action-btn text-center" style="background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);">
                    <i class="fas fa-tags mr-2"></i>
                    Gestionar Categorías
                </a>
            </div>
        </div>
    </div>

    <!-- Estadísticas Adicionales -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-6">
        <div class="chart-container">
            <h4 class="font-bold text-gray-800 mb-3"> Comentarios Pendientes</h4>
            <div class="text-center">
                <p class="text-5xl font-bold text-purple-600">{{ stats.get('comentarios_pendientes', 0) }}</p>
                <p class="text-gray-600 mt-2">Requieren moderación</p>
                <a href="{{ url_for('admin.manage_comentarios') }}" class="text-purple-600 hover:text-purple-800 text-sm mt-2 inline-block">
                    Ver todos →
                </a>
            </div>
        </div>

        <div class="chart-container">
            <h4 class="font-bold text-gray-800 mb-3">💰 Ingresos del Mes</h4>
            <div class="text-center">
                <p class="text-5xl font-bold text-green-600">S/ {{ "{:,.2f}".format(stats.get('ingresos_mes', 0)) }}</p>
                <p class="text-gray-600 mt-2">Total de pagos</p>
            </div>
        </div>

        <div class="chart-container">
            <h4 class="font-bold text-gray-800 mb-3">⭐ Calificación Promedio</h4>
            <div class="text-center">
                <p class="text-5xl font-bold text-yellow-600">{{ "{:.1f}".format(stats.get('calificacion_promedio', 0)) }}</p>
                <p class="text-gray-600 mt-2">De todas las empresas</p>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ super() }}
{% if user_projection and user_projection.labels and user_projection.labels|length > 0 %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script type="application/json" id="userProjectionData">{{ user_projection | tojson }}</script>
<script>
    (function () {
        const raw = document.getElementById('userProjectionData');
        const payload = raw ? JSON.parse(raw.textContent) : null;
        const ctx = document.getElementById('usersProjectionChart');
        if (!ctx || !payload || !payload.labels) return;

        const toNumericSeries = (arr) => {
            if (!Array.isArray(arr)) return [];
            return arr.map((v) => {
                if (v === null || v === undefined || v === '') return null;
                const n = Number(v);
                return Number.isFinite(n) ? n : null;
            });
        };

        const clienteActual = toNumericSeries(payload.cliente_actual);
        const clienteProj = toNumericSeries(payload.cliente_proj);
        const empresaActual = toNumericSeries(payload.empresa_actual);
        const empresaProj = toNumericSeries(payload.empresa_proj);

        const numericValues = [...clienteActual, ...clienteProj, ...empresaActual, ...empresaProj]
            .filter((v) => v !== null && v !== undefined && Number.isFinite(v));
        const maxY = numericValues.length ? Math.max(...numericValues) : 0;
        const suggestedMax = maxY > 0 ? Math.ceil(maxY * 1.1) : 1;

        const gridColor = 'rgba(107, 114, 128, 0.15)';
        const tickColor = 'rgba(55, 65, 81, 0.8)';

        new Chart(ctx, {
            type: 'line',
            data: {
                labels: payload.labels,
                datasets: [
                    {
                        label: 'Clientes (histórico)',
                        data: clienteActual,
                        borderColor: '#3b82f6',
                        backgroundColor: 'rgba(59, 130, 246, 0.12)',
                        tension: 0.25,
                        pointRadius: 0,
                        borderWidth: 2,
                        fill: false,
                        spanGaps: false
                    },
                    {
                        label: 'Clientes (proyección)',
                        data: clienteProj,
                        borderColor: '#3b82f6',
                        tension: 0.25,
                        pointRadius: 0,
                        borderWidth: 2,
                        borderDash: [6, 6],
                        fill: false,
                        spanGaps: true
                    },
                    {
                        label: 'Empresas (histórico)',
                        data: empresaActual,
                        borderColor: '#10b981',
                        backgroundColor: 'rgba(16, 185, 129, 0.12)',
                        tension: 0.25,
                        pointRadius: 0,
                        borderWidth: 2,
                        fill: false,
                        spanGaps: false
                    },
                    {
                        label: 'Empresas (proyección)',
                        data: empresaProj,
                        borderColor: '#10b981',
                        tension: 0.25,
                        pointRadius: 0,
                        borderWidth: 2,
                        borderDash: [6, 6],
                        fill: false,
                        spanGaps: true
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                interaction: { mode: 'index', intersect: false },
                plugins: {
                    legend: { position: 'top' },
                    title: {
                        display: true,
                        text: 'Total de usuarios (acumulado)',
                        color: tickColor,
                        font: { weight: '600' }
                    },
                    tooltip: {
                        callbacks: {
                            label: function (ctx) {
                                const v = ctx.parsed.y;
                                if (v === null || v === undefined) return null;
                                return `${ctx.dataset.label}: ${v}`;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        grid: { color: gridColor },
                        ticks: { color: tickColor, maxRotation: 0, autoSkip: true }
                    },
                    y: {
                        beginAtZero: true,
                        suggestedMax: suggestedMax > 0 ? suggestedMax : 10,
                        grace: '10%',
                        grid: { color: gridColor },
                        ticks: { 
                            color: tickColor, 
                            precision: 0,
                            stepSize: maxY <= 10 ? 1 : undefined
                        }
                    }
                }
            }
        });
        
        // Debug: mostrar valores en consola
        console.log('Proyección de usuarios:', {
            labels: payload.labels,
            clienteActual: clienteActual,
            clienteProj: clienteProj,
            empresaActual: empresaActual,
            empresaProj: empresaProj,
            maxY: maxY
        });
    })();
</script>
{% endif %}

{% endblock %}