<?php 
require_once 'config.php';
include "header.php"; 
?>
<?php
// Obtener conexión desde config.php
$mysqli = getDBConnection();

// Obtener comunicados ordenados por destacado primero, luego por fecha de actualización/edición
$result = $mysqli->query("SELECT * FROM comunicados ORDER BY destacado DESC, updated_at DESC");

// Verificar si hay comunicados
$hay_comunicados = $result && $result->num_rows > 0;
?>

<style>
  .comunicados-header {
    text-align: center;
    margin-bottom: 40px;
    padding: 30px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 8px;
  }
  
  .comunicados-header h1 {
    margin-bottom: 15px;
  }
  
  .comunicados-header p {
    color: #666;
    font-size: 1.1em;
    max-width: 700px;
    margin: 0 auto;
  }
  
  .sin-comunicados {
    text-align: center;
    padding: 60px 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  .sin-comunicados-icono {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.3;
  }
  
  .comunicado-destacado {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #fffef7 0%, #fff8e1 100%);
    border-left: 5px solid #ffc107;
  }
  
  .comunicado-destacado::before {
    content: '⭐ DESTACADO';
    position: absolute;
    top: 15px;
    right: -35px;
    background: #ffc107;
    color: #333;
    padding: 5px 40px;
    transform: rotate(45deg);
    font-size: 0.75em;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  .comunicado-fecha {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #666;
    font-size: 0.95em;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #e0e0e0;
  }
  
  .comunicado-categoria {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 12px;
  }
  
  .categoria-importante {
    background: #ffebee;
    color: #c62828;
  }
  
  .categoria-informativo {
    background: #e3f2fd;
    color: #1976d2;
  }
  
  .categoria-evento {
    background: #f3e5f5;
    color: #7b1fa2;
  }
  
  .categoria-urgente {
    background: #f44336;
    color: white;
    animation: pulse 2s infinite;
  }
  
  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
  }
  
  .comunicado-contenido {
    line-height: 1.8;
    color: #555;
  }
  
  /* Estilos para contenido HTML del editor */
  .comunicado-contenido h1,
  .comunicado-contenido h2,
  .comunicado-contenido h3 {
    color: #1976d2;
    margin-top: 20px;
    margin-bottom: 10px;
  }
  
  .comunicado-contenido ul,
  .comunicado-contenido ol {
    margin: 15px 0;
    padding-left: 30px;
  }
  
  .comunicado-contenido li {
    margin: 8px 0;
  }
  
  .comunicado-contenido strong {
    color: #333;
  }
  
  .comunicado-contenido a {
    color: #1976d2;
    text-decoration: underline;
  }
  
  .comunicado-contenido table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
  }
  
  .comunicado-contenido table th,
  .comunicado-contenido table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
  }
  
  .comunicado-contenido table th {
    background: #f5f9fc;
    font-weight: 600;
    color: #1976d2;
  }
  
  .comunicado-contenido img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 15px 0;
  }
</style>

<div class="comunicados-header">
  <h1>📢 Comunicaciones Oficiales</h1>
  <p>Mantente informado sobre las últimas noticias, avisos y comunicados del Servicio Sanitario Rural La Aguada</p>
</div>

<?php if ($hay_comunicados): ?>
  
  <?php 
  $es_primero = true;
  while ($row = $result->fetch_assoc()): 
    // Determinar si es destacado
    $es_destacado = $row['destacado'] == 1;
    
    // Formatear fecha
    $fecha_obj = new DateTime($row['fecha']);
    $fecha_formateada = $fecha_obj->format('d/m/Y H:i');
    $fecha_relativa = '';
    
    $diff = (new DateTime())->diff($fecha_obj);
    if ($diff->days == 0) {
      $fecha_relativa = 'Hoy';
    } elseif ($diff->days == 1) {
      $fecha_relativa = 'Ayer';
    } elseif ($diff->days <= 7) {
      $fecha_relativa = 'Hace ' . $diff->days . ' días';
    }
    
    // Obtener categoría
    $categoria = $row['categoria'] ?? 'informativo';
    $iconos_categoria = [
      'informativo' => 'ℹ️',
      'importante' => '⚠️',
      'evento' => '📅',
      'urgente' => '🚨'
    ];
    $icono = $iconos_categoria[$categoria];
  ?>
  
  <section class="comunicacion-item <?php echo $es_destacado ? 'comunicado-destacado' : ''; ?>">
    <span class="comunicado-categoria categoria-<?php echo $categoria; ?>">
      <?php echo $icono . ' ' . strtoupper($categoria); ?>
    </span>
    
    <h2><?php echo sanitize($row['titulo']); ?></h2>
    
    <div class="comunicado-contenido">
      <?php echo $row['contenido']; // Muestra HTML directamente ?>
    </div>
    
    <div class="comunicado-fecha">
      <span>📅 <?php echo $fecha_formateada; ?></span>
      <?php if ($fecha_relativa): ?>
        <span style="color: #1976d2; font-weight: 600;">• <?php echo $fecha_relativa; ?></span>
      <?php endif; ?>
      <?php if (!empty($row['updated_at']) && $row['updated_at'] != $row['fecha']): ?>
        <span style="color: #999; font-size: 0.85em;">
          • ✏️ Actualizado: <?php echo date('d/m/Y H:i', strtotime($row['updated_at'])); ?>
        </span>
      <?php endif; ?>
    </div>
  </section>
  
  <?php 
  $es_primero = false;
  endwhile; 
  ?>
  
<?php else: ?>
  
  <div class="sin-comunicados">
    <div class="sin-comunicados-icono">📭</div>
    <h2 style="color: #666; margin-bottom: 15px;">No hay comunicados en este momento</h2>
    <p style="color: #999;">Los comunicados oficiales aparecerán aquí cuando estén disponibles.</p>
    <div style="margin-top: 30px;">
      <a href="index.php" style="background: linear-gradient(135deg, #1976d2 0%, #0288d1 100%); color: white; padding: 12px 24px; border-radius: 50px; text-decoration: none; font-weight: 600; display: inline-block;">
        🏠 Volver al inicio
      </a>
    </div>
  </div>
  
<?php endif; ?>

<!-- Información adicional -->
<section style="background: #e8f5e9; border-left: 5px solid #4caf50; margin-top: 30px;">
  <h3 style="color: #2e7d32; margin-bottom: 15px;">💡 ¿Necesitas más información?</h3>
  <p style="color: #555; margin-bottom: 15px;">
    Si tienes consultas sobre nuestros servicios o necesitas realizar un reclamo, 
    puedes contactarnos a través de nuestro formulario oficial.
  </p>
  <a href="contacto.php" style="background: #4caf50; color: white; padding: 10px 20px; border-radius: 25px; text-decoration: none; font-weight: 600; display: inline-block; transition: all 0.3s;">
    📧 Ir al formulario de contacto
  </a>
</section>

<?php include "footer.php"; ?>
