<?php
/**
 * ASISMA CRM - Dashboard View
 */
?>
<!-- Header / Welcome -->
<div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 mb-8">
    <div>
        <h1 class="text-3xl font-extrabold text-white tracking-tight">Resumen Comercial</h1>
        <p class="text-slate-400 text-sm mt-1">Hola, <?php echo htmlspecialchars(SessionHelper::getNombre()); ?>. Aquí tienes la actividad de tu embudo de ventas hoy.</p>
    </div>
    
    <!-- Date picker mock -->
    <div class="flex items-center gap-3 bg-slate-900 border border-slate-800 rounded-xl p-1.5 self-start">
        <button class="px-3 py-1.5 bg-blue-600 text-white text-xs font-semibold rounded-lg shadow-sm">Hoy</button>
        <button class="px-3 py-1.5 text-slate-400 hover:text-white text-xs font-medium rounded-lg">Semana</button>
        <button class="px-3 py-1.5 text-slate-400 hover:text-white text-xs font-medium rounded-lg">Mes</button>
    </div>
</div>

<!-- 4 Stat Cards -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    
    <!-- 1. Total Leads -->
    <div class="relative bg-slate-900 border border-slate-800/80 rounded-2xl p-6 overflow-hidden shadow-lg group hover:border-slate-700/80 transition-all duration-200">
        <div class="absolute inset-0 bg-gradient-to-r from-blue-600/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
        <div class="flex justify-between items-start">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Leads Totales</p>
                <h3 class="text-3xl font-bold text-white mt-2"><?php echo number_format(isset($stats['total_leads']) ? $stats['total_leads'] : 0); ?></h3>
            </div>
            <div class="p-3 bg-blue-500/10 border border-blue-500/20 text-blue-400 rounded-xl">
                <i data-lucide="users-round" class="w-5 h-5"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center gap-1.5 text-xs text-slate-500">
            <span class="text-emerald-400 font-semibold flex items-center"><i data-lucide="trending-up" class="w-3.5 h-3.5 mr-0.5"></i> +12%</span>
            <span>vs mes anterior</span>
        </div>
    </div>

    <!-- 2. Leads Activos -->
    <div class="relative bg-slate-900 border border-slate-800/80 rounded-2xl p-6 overflow-hidden shadow-lg group hover:border-slate-700/80 transition-all duration-200">
        <div class="absolute inset-0 bg-gradient-to-r from-amber-600/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
        <div class="flex justify-between items-start">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Leads Activos</p>
                <h3 class="text-3xl font-bold text-white mt-2"><?php echo number_format(isset($stats['leads_activos']) ? $stats['leads_activos'] : 0); ?></h3>
            </div>
            <div class="p-3 bg-amber-500/10 border border-amber-500/20 text-amber-400 rounded-xl">
                <i data-lucide="activity" class="w-5 h-5"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center gap-1.5 text-xs text-slate-500">
            <span class="text-slate-400 font-semibold"><?php echo number_format(isset($stats['leads_activos']) ? $stats['leads_activos'] : 0); ?></span>
            <span>en seguimiento activo</span>
        </div>
    </div>

    <!-- 3. Cotizaciones del Mes -->
    <div class="relative bg-slate-900 border border-slate-800/80 rounded-2xl p-6 overflow-hidden shadow-lg group hover:border-slate-700/80 transition-all duration-200">
        <div class="absolute inset-0 bg-gradient-to-r from-purple-600/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
        <div class="flex justify-between items-start">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wider text-slate-500">Cotizaciones (Mes)</p>
                <h3 class="text-3xl font-bold text-white mt-2"><?php echo number_format(isset($stats['cotizaciones_mes']) ? $stats['cotizaciones_mes'] : 0); ?></h3>
            </div>
            <div class="p-3 bg-purple-500/10 border border-purple-500/20 text-purple-400 rounded-xl">
                <i data-lucide="file-text" class="w-5 h-5"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center gap-1.5 text-xs text-slate-500">
            <span class="text-emerald-400 font-semibold flex items-center"><i data-lucide="trending-up" class="w-3.5 h-3.5 mr-0.5"></i> +4.5%</span>
            <span>nuevas cotizaciones</span>
        </div>
    </div>

    <!-- 4. Tasa de Conversión -->
    <div class="relative bg-slate-900 border border-slate-800/80 rounded-2xl p-6 overflow-hidden shadow-lg group hover:border-slate-700/80 transition-all duration-200">
        <div class="absolute inset-0 bg-gradient-to-r from-emerald-600/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity"></div>
        <div class="flex justify-between items-start">
            <div>
                <p class="text-xs font-semibold uppercase tracking-wider text-slate-500 font-mono">Tasa de Conversión</p>
                <h3 class="text-3xl font-bold text-white mt-2"><?php echo isset($stats['conversion_rate']) ? $stats['conversion_rate'] : 0; ?>%</h3>
            </div>
            <div class="p-3 bg-emerald-500/10 border border-emerald-500/20 text-emerald-400 rounded-xl">
                <i data-lucide="trophy" class="w-5 h-5"></i>
            </div>
        </div>
        <div class="mt-4 flex items-center gap-1.5 text-xs text-slate-500">
            <span class="text-emerald-400 font-semibold">Leads Ganados</span>
            <span>sobre válidos totales</span>
        </div>
    </div>
</div>

<!-- Charts & Quick lists layout -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <!-- Main Left Area: Embudo de Ventas (Placeholder) -->
    <div class="lg:col-span-2 bg-slate-900 border border-slate-800/80 rounded-2xl p-6 shadow-xl relative overflow-hidden">
        <h3 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
            <i data-lucide="bar-chart-2" class="w-5 h-5 text-blue-500"></i>
            <span>Embudo de Ventas General</span>
        </h3>
        
        <!-- Funnel bars list -->
        <div class="space-y-4">
            <div>
                <div class="flex justify-between text-xs text-slate-400 mb-1 font-semibold">
                    <span>NUEVO / ENTRANTE</span>
                    <span>100%</span>
                </div>
                <div class="w-full bg-slate-950 h-3 rounded-full overflow-hidden">
                    <div class="bg-blue-500 h-full rounded-full" style="width: 100%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-slate-400 mb-1 font-semibold">
                    <span>CONTACTADO</span>
                    <span>75%</span>
                </div>
                <div class="w-full bg-slate-950 h-3 rounded-full overflow-hidden">
                    <div class="bg-amber-500 h-full rounded-full" style="width: 75%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-slate-400 mb-1 font-semibold">
                    <span>COTIZADO</span>
                    <span>45%</span>
                </div>
                <div class="w-full bg-slate-950 h-3 rounded-full overflow-hidden">
                    <div class="bg-purple-500 h-full rounded-full" style="width: 45%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-slate-400 mb-1 font-semibold">
                    <span>NEGOCIANDO</span>
                    <span>25%</span>
                </div>
                <div class="w-full bg-slate-950 h-3 rounded-full overflow-hidden">
                    <div class="bg-orange-500 h-full rounded-full" style="width: 25%"></div>
                </div>
            </div>
            <div>
                <div class="flex justify-between text-xs text-slate-400 mb-1 font-semibold">
                    <span>GANADO</span>
                    <span>12%</span>
                </div>
                <div class="w-full bg-slate-950 h-3 rounded-full overflow-hidden">
                    <div class="bg-green-500 h-full rounded-full" style="width: 12%"></div>
                </div>
            </div>
        </div>
        
        <!-- Próximamente alert glassmorphism -->
        <div class="absolute inset-0 bg-slate-950/40 backdrop-blur-[2px] flex items-center justify-center">
            <div class="text-center p-6 bg-slate-900/90 border border-slate-800 rounded-xl max-w-xs shadow-2xl">
                <i data-lucide="line-chart" class="w-10 h-10 text-blue-500 mx-auto mb-2 animate-bounce"></i>
                <h4 class="font-bold text-white">Gráficos de Rendimiento</h4>
                <p class="text-xs text-slate-400 mt-1">Los reportes interactivos y gráficos del embudo se activarán al sincronizar los primeros leads reales.</p>
            </div>
        </div>
    </div>

    <!-- Right Area: Asignaciones Recientes & Actividad -->
    <div class="bg-slate-900 border border-slate-800/80 rounded-2xl p-6 shadow-xl flex flex-col">
        <h3 class="text-lg font-bold text-white mb-6 flex items-center gap-2">
            <i data-lucide="clock" class="w-5 h-5 text-indigo-500"></i>
            <span>Historial Reciente</span>
        </h3>
        
        <div class="flex-1 flex flex-col justify-center text-center py-12">
            <div class="w-12 h-12 bg-slate-950 border border-slate-800 rounded-xl flex items-center justify-center text-slate-500 mx-auto mb-3">
                <i data-lucide="inbox" class="w-6 h-6"></i>
            </div>
            <p class="text-sm font-semibold text-slate-300">Bandeja Vacía</p>
            <p class="text-xs text-slate-500 mt-1 max-w-[200px] mx-auto">No se registran logs ni actividades en las últimas 24 horas.</p>
        </div>
    </div>
</div>

