<!-- ============================================================ -->
<!-- DASHBOARD - Vista principal con estadísticas y gráficos -->
<!-- ============================================================ -->

<!-- Stats Cards Row -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-5 mb-8">
    
    <!-- Card: Total Letras Pendientes -->
    <div onclick="window.location.href='<?= BASE_URL ?>?c=letras&a=checklist'" class="cursor-pointer glass-card rounded-2xl p-5 relative overflow-hidden group hover:shadow-lg hover:shadow-primary-500/5 transition-all duration-300">
        <div class="absolute top-0 right-0 w-24 h-24 bg-primary-500/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500"></div>
        <div class="flex items-start justify-between mb-4">
            <div class="w-11 h-11 rounded-xl bg-primary-600/15 flex items-center justify-center">
                <i class="fas fa-file-invoice-dollar text-primary-400 text-lg"></i>
            </div>
            <span class="px-2.5 py-1 rounded-full text-[10px] font-semibold 
                <?= $letrasPorVencer > 0 ? 'bg-amber-500/15 text-amber-400' : 'bg-emerald-500/15 text-emerald-400' ?>">
                <?= $letrasPorVencer ?> por vencer
            </span>
        </div>
        <p class="text-gray-500 text-xs font-medium uppercase tracking-wider mb-1">Letras Pendientes</p>
        <p class="font-sora text-3xl font-bold text-white"><?= number_format($letrasPendientes) ?></p>
        <div class="mt-3 flex items-center gap-2 text-xs">
            <span class="text-gray-500">Total registradas:</span>
            <span class="text-gray-300 font-medium"><?= number_format($totalLetras) ?></span>
        </div>
    </div>

    <!-- Card: Letras Por Vencer (8 días) -->
    <div onclick="mostrarDetalleCard('por_vencer')" class="cursor-pointer glass-card rounded-2xl p-5 relative overflow-hidden group hover:shadow-lg hover:shadow-amber-500/5 transition-all duration-300">
        <div class="absolute top-0 right-0 w-24 h-24 bg-amber-500/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500"></div>
        <div class="flex items-start justify-between mb-4">
            <div class="w-11 h-11 rounded-xl bg-amber-600/15 flex items-center justify-center">
                <i class="fas fa-clock text-amber-400 text-lg"></i>
            </div>
            <span class="px-2.5 py-1 rounded-full text-[10px] font-semibold bg-amber-500/15 text-amber-400">
                <i class="fas fa-exclamation-triangle mr-1"></i>Alerta
            </span>
        </div>
        <p class="text-gray-500 text-xs font-medium uppercase tracking-wider mb-1">Por Vencer (8 días)</p>
        <p class="font-sora text-3xl font-bold text-amber-400"><?= number_format($letrasPorVencer) ?></p>
        <div class="mt-3 flex items-center gap-2 text-xs">
            <span class="text-gray-500">Pagadas:</span>
            <span class="text-emerald-400 font-medium"><?= number_format($letrasPagadas) ?></span>
        </div>
    </div>

    <!-- Card: Letras Vencidas -->
    <div onclick="mostrarDetalleCard('vencidas')" class="cursor-pointer glass-card rounded-2xl p-5 relative overflow-hidden group hover:shadow-lg hover:shadow-red-500/5 transition-all duration-300">
        <div class="absolute top-0 right-0 w-24 h-24 bg-red-500/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500"></div>
        <div class="flex items-start justify-between mb-4">
            <div class="w-11 h-11 rounded-xl bg-red-600/15 flex items-center justify-center">
                <i class="fas fa-exclamation-circle text-red-400 text-lg"></i>
            </div>
            <?php if ($letrasVencidas > 0): ?>
            <span class="px-2.5 py-1 rounded-full text-[10px] font-semibold bg-red-500/15 text-red-400 animate-pulse">
                <i class="fas fa-bell mr-1"></i>Urgente
            </span>
            <?php endif; ?>
        </div>
        <p class="text-gray-500 text-xs font-medium uppercase tracking-wider mb-1">Letras Vencidas</p>
        <p class="font-sora text-3xl font-bold text-red-400"><?= number_format($letrasVencidas) ?></p>
        <div class="mt-3 flex items-center gap-2 text-xs">
            <span class="text-gray-500">Empresas activas:</span>
            <span class="text-gray-300 font-medium"><?= number_format($totalEmpresas) ?></span>
        </div>
    </div>

    <!-- Card: Monto Total Pendiente USD -->
    <div class="glass-card rounded-2xl p-5 relative overflow-hidden group hover:shadow-lg hover:shadow-emerald-500/5 transition-all duration-300">
        <div class="absolute top-0 right-0 w-24 h-24 bg-emerald-500/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500"></div>
        <div class="flex items-start justify-between mb-4">
            <div class="w-11 h-11 rounded-xl bg-emerald-600/15 flex items-center justify-center">
                <i class="fas fa-dollar-sign text-emerald-400 text-lg"></i>
            </div>
        </div>
        <p class="text-gray-500 text-xs font-medium uppercase tracking-wider mb-1">Monto Pendiente USD</p>
        <p class="font-sora text-3xl font-bold text-white">$<?= number_format($montoPendiente, 2) ?></p>
        <div class="mt-3 flex items-center gap-2 text-xs">
            <span class="text-emerald-400"><i class="fas fa-arrow-up mr-1"></i>Pendiente de cobro</span>
        </div>
    </div>
    <!-- Card: Letras Pagadas -->
    <div onclick="window.location.href='<?= BASE_URL ?>?c=letras&estado=pagada'" class="cursor-pointer glass-card rounded-2xl p-5 relative overflow-hidden group hover:shadow-lg hover:shadow-indigo-500/5 transition-all duration-300">
        <div class="absolute top-0 right-0 w-24 h-24 bg-indigo-500/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500"></div>
        <div class="flex items-start justify-between mb-4">
            <div class="w-11 h-11 rounded-xl bg-indigo-600/15 flex items-center justify-center">
                <i class="fas fa-check-double text-indigo-400 text-lg"></i>
            </div>
            <span class="px-2.5 py-1 rounded-full text-[10px] font-semibold bg-indigo-500/15 text-indigo-400">
                Canceladas
            </span>
        </div>
        <p class="text-gray-500 text-xs font-medium uppercase tracking-wider mb-1">Letras Pagadas</p>
        <p class="font-sora text-3xl font-bold text-indigo-400"><?= number_format($letrasPagadas) ?></p>
        <div class="mt-3 flex items-center gap-2 text-xs">
            <span class="text-indigo-400 font-medium">$<?= number_format($montoPagado, 2) ?></span>
            <span class="text-gray-500">Recaudado</span>
        </div>
    </div>

    <!-- Card: Letras Renovadas -->
    <div onclick="window.location.href='<?= BASE_URL ?>?c=letras&estado=renovada'" class="cursor-pointer glass-card rounded-2xl p-5 relative overflow-hidden group hover:shadow-lg hover:shadow-blue-500/5 transition-all duration-300">
        <div class="absolute top-0 right-0 w-24 h-24 bg-blue-500/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-500"></div>
        <div class="flex items-start justify-between mb-4">
            <div class="w-11 h-11 rounded-xl bg-blue-600/15 flex items-center justify-center">
                <i class="fas fa-sync-alt text-blue-400 text-lg"></i>
            </div>
            <span class="px-2.5 py-1 rounded-full text-[10px] font-semibold bg-blue-500/15 text-blue-400">
                Reprogramadas
            </span>
        </div>
        <p class="text-gray-500 text-xs font-medium uppercase tracking-wider mb-1">Letras Renovadas</p>
        <p class="font-sora text-3xl font-bold text-blue-400"><?= number_format($letrasRenovadas) ?></p>
        <div class="mt-3 flex items-center gap-2 text-xs">
            <span class="text-gray-500">Postergadas o renegociadas</span>
        </div>
    </div>
</div>

<!-- Charts Row -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    
    <!-- Bar Chart: Montos Mensuales -->
    <div class="lg:col-span-2 glass-card rounded-2xl p-6">
        <div class="flex items-center justify-between mb-6">
            <div>
                <h3 class="font-sora font-bold text-white text-lg">Vencimientos Mensuales</h3>
                <p class="text-xs text-gray-500 mt-1">Montos por mes de vencimiento - <?= date('Y') ?></p>
            </div>
            <div class="flex items-center gap-2">
                <span class="w-3 h-3 rounded-full bg-primary-500"></span>
                <span class="text-xs text-gray-400">USD</span>
            </div>
        </div>
        <div class="relative" style="height: 280px;">
            <canvas id="chartBarMontos"></canvas>
        </div>
    </div>

    <!-- Pie Chart: Distribución de Estados -->
    <div class="glass-card rounded-2xl p-6 flex flex-col">
        <div class="mb-4">
            <h3 class="font-sora font-bold text-white text-lg">Estado de Letras</h3>
            <p class="text-xs text-gray-500 mt-1">Distribución por estado actual</p>
        </div>
        <div class="flex-1 flex items-center justify-center">
            <div style="width: 200px; height: 200px; position: relative;">
                <canvas id="chartPieEstados" width="200" height="200"></canvas>
            </div>
        </div>
        <!-- Legend -->
        <div class="mt-4 grid grid-cols-2 gap-2">
            <?php
            $coloresEstado = [
                'pendiente'  => ['bg-amber-400', 'Pendiente'],
                'pagada'     => ['bg-emerald-400', 'Pagada'],
                'vencida'    => ['bg-red-400', 'Vencida'],
                'renovada'   => ['bg-blue-400', 'Renovada'],
                'protestada' => ['bg-gray-400', 'Protestada'],
            ];
            foreach ($distribucionEstados as $estado):
                $color = $coloresEstado[$estado['estado']][0] ?? 'bg-gray-400';
                $label = $coloresEstado[$estado['estado']][1] ?? $estado['estado'];
            ?>
            <div class="flex items-center gap-2">
                <span class="w-2.5 h-2.5 rounded-full <?= $color ?>"></span>
                <span class="text-xs text-gray-400"><?= $label ?></span>
                <span class="text-xs text-white font-semibold ml-auto"><?= $estado['cantidad'] ?></span>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- Bottom Row: Alertas + Empresas -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

    <!-- Próximas a Vencer / Vencidas -->
    <div class="glass-card rounded-2xl p-6">
        <div class="flex items-center justify-between mb-5">
            <div>
                <h3 class="font-sora font-bold text-white text-lg">Alertas de Vencimiento</h3>
                <p class="text-xs text-gray-500 mt-1">Letras que requieren atención</p>
            </div>
            <a href="<?= BASE_URL ?>?c=letras&estado=pendiente" class="text-xs text-primary-400 hover:text-primary-300 transition-colors">
                Ver todas <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
        <div class="space-y-3 max-h-72 overflow-y-auto custom-scrollbar">
            <?php if (empty($alertas) && empty($excedidas)): ?>
                <div class="text-center py-8">
                    <div class="w-16 h-16 mx-auto mb-3 rounded-full bg-emerald-500/10 flex items-center justify-center">
                        <i class="fas fa-check-circle text-emerald-400 text-2xl"></i>
                    </div>
                    <p class="text-sm text-gray-400">No hay alertas pendientes</p>
                </div>
            <?php else: ?>
                <?php 
                // Excedidas primero (más urgentes)
                foreach ($excedidas as $exc): 
                ?>
                <div class="flex items-center gap-3 p-3 rounded-xl bg-red-500/5 border border-red-500/10 hover:bg-red-500/10 transition-colors">
                    <div class="w-9 h-9 rounded-lg bg-red-500/15 flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-exclamation-triangle text-red-400 text-sm"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm text-white font-medium truncate"><?= htmlspecialchars($exc['razon_social']) ?></p>
                        <p class="text-xs text-red-400">Letra #<?= htmlspecialchars($exc['numero_letra']) ?> - Excedida <?= $exc['dias_excedidos'] ?> día(s)</p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <p class="text-sm text-white font-semibold">$<?= number_format((float)$exc['importe'], 2) ?></p>
                        <p class="text-[10px] text-red-400">CRÍTICO</p>
                    </div>
                </div>
                <?php endforeach; ?>

                <?php foreach ($alertas as $alerta): 
                    $diasVencer = (int)$alerta['dias_para_vencer'];
                    if ($diasVencer < 0) {
                        $alertColor = 'red';
                        $alertLabel = 'Vencida';
                        $alertDesc  = 'Quedan ' . $alerta['dias_para_pagar'] . ' día(s) para pagar';
                    } elseif ($diasVencer === 0) {
                        $alertColor = 'red';
                        $alertLabel = 'Vence HOY';
                        $alertDesc  = '¡Vence hoy! 8 días para pagar al banco';
                    } elseif ($diasVencer <= 3) {
                        $alertColor = 'amber';
                        $alertLabel = $diasVencer . ' día(s)';
                        $alertDesc  = 'Vence en ' . $diasVencer . ' día(s)';
                    } else {
                        $alertColor = 'yellow';
                        $alertLabel = $diasVencer . ' días';
                        $alertDesc  = 'Vence en ' . $diasVencer . ' días';
                    }
                ?>
                <div class="flex items-center gap-3 p-3 rounded-xl bg-<?= $alertColor ?>-500/5 border border-<?= $alertColor ?>-500/10 hover:bg-<?= $alertColor ?>-500/10 transition-colors">
                    <div class="w-9 h-9 rounded-lg bg-<?= $alertColor ?>-500/15 flex items-center justify-center flex-shrink-0">
                        <i class="fas fa-clock text-<?= $alertColor ?>-400 text-sm"></i>
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm text-white font-medium truncate"><?= htmlspecialchars($alerta['razon_social']) ?></p>
                        <p class="text-xs text-<?= $alertColor ?>-400"><?= $alertDesc ?></p>
                    </div>
                    <div class="text-right flex-shrink-0">
                        <p class="text-sm text-white font-semibold">$<?= number_format((float)$alerta['importe'], 2) ?></p>
                        <span class="inline-block px-2 py-0.5 rounded-full text-[10px] font-semibold bg-<?= $alertColor ?>-500/15 text-<?= $alertColor ?>-400"><?= $alertLabel ?></span>
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </div>

    <!-- Empresas con letras pendientes -->
    <div class="glass-card rounded-2xl p-6">
        <div class="flex items-center justify-between mb-5">
            <div>
                <h3 class="font-sora font-bold text-white text-lg">Empresas Proveedoras</h3>
                <p class="text-xs text-gray-500 mt-1">Montos pendientes por empresa</p>
            </div>
            <a href="<?= BASE_URL ?>?c=empresas" class="text-xs text-primary-400 hover:text-primary-300 transition-colors">
                Ver todas <i class="fas fa-arrow-right ml-1"></i>
            </a>
        </div>
        <div class="space-y-3 max-h-72 overflow-y-auto custom-scrollbar">
            <?php foreach ($empresasConLetras as $emp): 
                if ($emp['total_letras'] == 0) continue;
            ?>
            <div class="flex items-center gap-3 p-3 rounded-xl hover:bg-white/3 transition-colors">
                <div class="w-10 h-10 rounded-xl bg-gradient-to-br from-primary-600/20 to-violet-600/20 flex items-center justify-center flex-shrink-0 border border-primary-500/10">
                    <span class="font-sora font-bold text-primary-400 text-xs"><?= strtoupper(substr($emp['razon_social'], 0, 2)) ?></span>
                </div>
                <div class="flex-1 min-w-0">
                    <p class="text-sm text-white font-medium truncate"><?= htmlspecialchars($emp['razon_social']) ?></p>
                    <p class="text-xs text-gray-500"><?= $emp['letras_pendientes'] ?> letra(s) pendiente(s)</p>
                </div>
                <div class="text-right flex-shrink-0">
                    <p class="text-sm text-white font-semibold">$<?= number_format((float)$emp['monto_pendiente'], 2) ?></p>
                    <p class="text-[10px] text-gray-500"><?= $emp['total_letras'] ?> total</p>
                </div>
            </div>
            <?php endforeach; ?>
        </div>
    </div>
</div>

<!-- Chart Data (inyectado como JSON para dashboard.js) -->
<script>
    const chartData = {
        montosMensuales: <?= json_encode(array_values($montosMensuales)) ?>,
        distribucionEstados: <?= json_encode($distribucionEstados) ?>
    };
</script>
