<?php
/**
 * Página: Resumen (Dashboard)
 */

$eventoId = getEventoId();
$evento = obtenerEvento($eventoId);

// Estadísticas (prepared statements)
$stmtStats = $pdo->prepare("SELECT COUNT(*) FROM invitados WHERE evento_id = ?");
$stmtStats->execute([$eventoId]);
$stats['total_invitados'] = $stmtStats->fetchColumn();
$stmtStats = $pdo->prepare("SELECT COUNT(*) FROM invitados WHERE evento_id = ? AND estado = 'Aceptado'");
$stmtStats->execute([$eventoId]);
$stats['aceptados'] = $stmtStats->fetchColumn();
$stmtStats = $pdo->prepare("SELECT COUNT(*) FROM invitados WHERE evento_id = ? AND estado = 'Rechazado'");
$stmtStats->execute([$eventoId]);
$stats['rechazados'] = $stmtStats->fetchColumn();
$stmtStats = $pdo->prepare("SELECT COUNT(*) FROM invitados WHERE evento_id = ? AND estado = 'Pendiente'");
$stmtStats->execute([$eventoId]);
$stats['pendientes'] = $stmtStats->fetchColumn();

$stmtSum = $pdo->prepare("SELECT SUM(numero_admisiones) FROM invitados WHERE evento_id = ? AND estado = 'Aceptado'");
$stmtSum->execute([$eventoId]);
$totalAdmisiones = $stmtSum->fetchColumn() ?? 0;

// Preparar nombres según el tipo de evento
$nombreDisplay = '';
$organizadorDisplay = '';
if ($evento) {
    switch ($evento['tipo_evento'] ?? '') {
        case 'boda':
            if (!empty($evento['nombre_novia']) && !empty($evento['nombre_novio'])) {
                $nombreNovia = explode(' ', trim($evento['nombre_novia']))[0];
                $nombreNovio = explode(' ', trim($evento['nombre_novio']))[0];
                $nombreDisplay = $nombreNovia . ' & ' . $nombreNovio;
            }
            break;
        case 'cumpleaños':
            if (!empty($evento['nombre_homenajeado'])) {
                $nombreDisplay = explode(' ', trim($evento['nombre_homenajeado']))[0];
            }
            break;
        case 'quinceañera':
            if (!empty($evento['nombre_quinceanera'])) {
                $nombreDisplay = explode(' ', trim($evento['nombre_quinceanera']))[0];
            }
            break;
        case 'bautizo':
            if (!empty($evento['padre_bautizo']) && !empty($evento['madre_bautizo']) && !empty($evento['nombre_bautizado'])) {
                $nombrePadre = explode(' ', trim($evento['padre_bautizo']))[0];
                $nombreMadre = explode(' ', trim($evento['madre_bautizo']))[0];
                $nombreBautizado = $evento['nombre_bautizado'];
                $nombreDisplay = $nombrePadre . ' y ' . $nombreMadre . ', padres de ' . $nombreBautizado;
            }
            break;
        case 'reunion':
        case 'evento_social':
            if (!empty($evento['nombre_evento_social'])) {
                $nombreDisplay = $evento['nombre_evento_social'];
            } elseif (!empty($evento['nombre_organizador'])) {
                $nombreDisplay = $evento['nombre_organizador'];
            }
            $organizadorDisplay = !empty($evento['nombre_organizador']) ? $evento['nombre_organizador'] : '';
            break;
    }
}
?>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<style>
.welcome-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    padding: 0;
}
.welcome-header h1 {
    margin: 0;
    font-size: 20px;
    font-weight: 400;
    color: var(--color-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}
.welcome-text {
    font-size: 19px;
}
.welcome-names {
    font-style: italic;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 25px;
    margin-left: 8px;
    line-height: 1.3;
}
.welcome-organizador {
    font-style: normal;
    font-size: 0.75em;
    font-weight: 400;
    opacity: 0.9;
}
.btn-preview {
    padding: 10px 20px;
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    text-decoration: none;
    display: inline-block;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
}
.btn-preview:hover {
    background: var(--color-primary-hover);
}

@media (max-width: 768px) {
    .welcome-header {
        align-items: flex-end;
    }
    .welcome-header h1 {
        display: flex;
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
    .welcome-names {
        margin-left: 0;
    }
    .btn-preview {
        align-self: flex-end;
    }
}
</style>

<div class="welcome-header">
    <h1>
        <span class="welcome-text">Bienvenido</span> 
        <?php if ($nombreDisplay): ?>
            <span class="welcome-names"><?php echo htmlspecialchars($nombreDisplay); ?><?php if ($organizadorDisplay): ?><br><span class="welcome-organizador"><?php echo htmlspecialchars($organizadorDisplay); ?></span><?php endif; ?></span>
        <?php endif; ?>
    </h1>
    <a href="<?php echo rtrim(BASE_URL, '/'); ?>/public/invitacion/index.php?preview=1" target="_blank" class="btn-preview">
        Vista previa
    </a>
</div>

<?php
// Preparar datos para el resumen
$tituloEvento = $evento ? obtenerTituloEvento($evento) : '';
$fechaEventoEspanol = $evento ? formatearFechaEspanol($evento['fecha_evento']) : '';
$fechaEventoISO = $evento ? $evento['fecha_evento'] . 'T' . ($evento['hora_evento'] ?: '00:00:00') : '';
$lugarEvento = $evento ? htmlspecialchars($evento['lugar_evento']) : '';

// Ruta de la imagen (usa BASE_URL para compatibilidad con cualquier estructura de URLs)
$imagenFondo = (defined('BASE_URL') ? rtrim(BASE_URL, '/') : '') . '/assets/images/principal-5.webp';
if ($evento && $evento['foto_principal']) {
    $imagenFondo = (defined('BASE_URL') ? rtrim(BASE_URL, '/') : '') . '/' . ltrim($evento['foto_principal'], '/');
}
?>

<style>
.resumen-evento-container {
    position: relative;
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 24px;
    min-height: 300px;
    display: flex;
    align-items: center;
}

.resumen-evento-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(3px);
    transform: scale(1.1);
}

.resumen-evento-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(0, 0, 0, 0.85) 0%, 
        rgba(0, 0, 0, 0.75) 30%,
        rgba(0, 0, 0, 0.5) 60%,
        rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

.resumen-evento-content {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: center;
    color: white;
}

.resumen-evento-left {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.resumen-evento-title {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.resumen-evento-nombre {
    font-size: 28px;
    font-weight: 400;
    font-family: 'Playfair Display', serif;
    font-style: italic;
    line-height: 1.3;
    margin-bottom: 8px;
}
.resumen-evento-organizador {
    display: block;
    font-style: normal;
    font-size: 0.65em;
    font-weight: 400;
    opacity: 0.95;
    margin-top: 6px;
}

.resumen-evento-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.resumen-evento-right {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.countdown-container {
    text-align: center;
}

.countdown-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.countdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.countdown-number {
    font-size: 32px;
    font-weight: 600;
    font-family: 'Playfair Display', serif;
    color: white;
    line-height: 1;
}

.countdown-label-item {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

@media (max-width: 968px) {
    .resumen-evento-content {
        grid-template-columns: 1fr;
        padding: 24px;
        gap: 24px;
    }
    
    .resumen-evento-nombre {
        font-size: 24px;
    }
    
    .countdown-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .resumen-evento-content {
        padding: 20px;
    }
    
    .resumen-evento-nombre {
        font-size: 22px;
    }
    
    .countdown-number {
        font-size: 24px;
    }
}
</style>

<div class="resumen-evento-container">
    <img src="<?php echo $imagenFondo; ?>" alt="Fondo del evento" class="resumen-evento-bg">
    <div class="resumen-evento-overlay"></div>
    
    <div class="resumen-evento-content">
        <div class="resumen-evento-left">
            <?php if ($evento): ?>
                <div class="resumen-evento-title">Resumen de tu evento</div>
                <?php if ($tituloEvento): ?>
                    <div class="resumen-evento-nombre"><?php echo htmlspecialchars($tituloEvento); ?><?php if (!empty($organizadorDisplay)): ?><span class="resumen-evento-organizador"><?php echo htmlspecialchars($organizadorDisplay); ?></span><?php endif; ?></div>
                <?php endif; ?>
                <div class="resumen-evento-info">
                    <?php if ($fechaEventoEspanol): ?>
                        <div><strong>Fecha:</strong> <?php echo $fechaEventoEspanol; ?></div>
                    <?php endif; ?>
                    <?php if ($lugarEvento): ?>
                        <div><strong>Lugar:</strong> <?php echo $lugarEvento; ?></div>
                    <?php endif; ?>
                </div>
            <?php endif; ?>
        </div>
        
        <div class="resumen-evento-right">
            <?php if ($evento && $fechaEventoISO): ?>
                <div class="countdown-container">
                    <div class="countdown-label">Tiempo restante</div>
                    <div class="countdown-grid" id="countdown">
                        <div class="countdown-item">
                            <div class="countdown-number" id="days">00</div>
                            <div class="countdown-label-item">Días</div>
                        </div>
                        <div class="countdown-item">
                            <div class="countdown-number" id="hours">00</div>
                            <div class="countdown-label-item">Horas</div>
                        </div>
                        <div class="countdown-item">
                            <div class="countdown-number" id="minutes">00</div>
                            <div class="countdown-label-item">Minutos</div>
                        </div>
                        <div class="countdown-item">
                            <div class="countdown-number" id="seconds">00</div>
                            <div class="countdown-label-item">Segundos</div>
                        </div>
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</div>

<?php if ($evento && $fechaEventoISO): ?>
<script>
(function() {
    const fechaEvento = '<?php echo $fechaEventoISO; ?>';
    const fechaEventoObj = new Date(fechaEvento);
    
    function updateCountdown() {
        const ahora = new Date();
        const diferencia = fechaEventoObj - ahora;
        
        if (diferencia <= 0) {
            document.getElementById('days').textContent = '00';
            document.getElementById('hours').textContent = '00';
            document.getElementById('minutes').textContent = '00';
            document.getElementById('seconds').textContent = '00';
            return;
        }
        
        const dias = Math.floor(diferencia / (1000 * 60 * 60 * 24));
        const horas = Math.floor((diferencia % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutos = Math.floor((diferencia % (1000 * 60 * 60)) / (1000 * 60));
        const segundos = Math.floor((diferencia % (1000 * 60)) / 1000);
        
        document.getElementById('days').textContent = String(dias).padStart(2, '0');
        document.getElementById('hours').textContent = String(horas).padStart(2, '0');
        document.getElementById('minutes').textContent = String(minutos).padStart(2, '0');
        document.getElementById('seconds').textContent = String(segundos).padStart(2, '0');
    }
    
    // Actualizar inmediatamente
    updateCountdown();
    
    // Actualizar cada segundo
    setInterval(updateCountdown, 1000);
})();
</script>
<?php endif; ?>

<div class="stats-grid">
    <div class="stat-card">
        <h3>Total Invitados</h3>
        <div class="number"><?php echo $stats['total_invitados']; ?></div>
    </div>
    
    <div class="stat-card aceptados">
        <h3>Aceptados</h3>
        <div class="number"><?php echo $stats['aceptados']; ?></div>
    </div>
    
    <div class="stat-card rechazados">
        <h3>Rechazados</h3>
        <div class="number"><?php echo $stats['rechazados']; ?></div>
    </div>
    
    <div class="stat-card pendientes">
        <h3>Pendientes</h3>
        <div class="number"><?php echo $stats['pendientes']; ?></div>
    </div>
    
    <div class="stat-card">
        <h3>Total Admisiones</h3>
        <div class="number"><?php echo $totalAdmisiones; ?></div>
    </div>
</div>

<style>
.accesos-rapidos {
    margin-top: 32px;
}

.accesos-rapidos h2 {
    font-size: 20px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

.accesos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-acceso {
    padding: 12px 20px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    text-decoration: none;
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 500;
    font-size: 14px;
    transition: var(--transition);
    cursor: pointer;
    white-space: nowrap;
}

.btn-acceso:hover {
    background: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-acceso svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

@media (max-width: 768px) {
    .accesos-grid {
        grid-template-columns: 1fr;
    }
}
</style>

<div class="accesos-rapidos">
    <h2>Accesos Rápidos</h2>
    <div class="accesos-grid">
        <a href="<?php echo rtrim(BASE_URL, '/'); ?>/assets/pdfs/pdf_asistentes.php" target="_blank" class="btn-acceso">
            <svg viewBox="0 0 24 24">
                <path d="M19 8h-1V3H6v5H5c-1.66 0-3 1.34-3 3v6c0 1.66 1.34 3 3 3h14c1.66 0 3-1.34 3-3v-6c0-1.66-1.34-3-3-3zM8 5h8v3H8V5zm11 12H5v-6h14v6zm-3-4h-2v-2h-4v2H8v2h8v-2z"/>
            </svg>
            <span>Ver Lista de Asistentes</span>
        </a>
    </div>
</div>

