<?php
require_once __DIR__ . '/config/secure_public.php';

// Ambil ID kegiatan
$id = isset($_GET['id']) ? (int) $_GET['id'] : 0;
if ($id <= 0) {
  header('Location: kegiatan.php');
  exit;
}

// Ambil detail kegiatan
$stmt = $pdo->prepare("
  SELECT id, title, description, date_start, date_end, location, organizer, image, document, created_at
  FROM activities
  WHERE id = ?
  LIMIT 1
");
$stmt->execute([$id]);
$activity = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$activity) {
  header('HTTP/1.0 404 Not Found');
  $page_title = "Kegiatan tidak ditemukan | $site_name";
  include __DIR__ . '/includes/header.php';
  echo "<div class='container text-center py-5'><h1 class='text-danger fw-bold'>404</h1><p>Kegiatan tidak ditemukan.</p></div>";
  include __DIR__ . '/includes/footer.php';
  exit;
}

// Ambil kegiatan lain
$stmt_other = $pdo->prepare("
  SELECT id, title, date_start, date_end, image
  FROM activities
  WHERE id != ?
  ORDER BY date_start DESC
  LIMIT 3
");
$stmt_other->execute([$activity['id']]);
$other_activities = $stmt_other->fetchAll(PDO::FETCH_ASSOC);

// Meta SEO
$page_title = $activity['title'] . ' | ' . $site_name;
$page_description = strip_tags(mb_strimwidth($activity['description'], 0, 160, '...'));
$page_url = base_url('kegiatan_detail.php?id=' . $activity['id']);

include __DIR__ . '/includes/header.php';
?>

<!-- HERO -->
<section class="hero-activity position-relative d-flex align-items-center justify-content-center text-center text-white">
  <div class="overlay"></div>
  <div class="container position-relative z-2">
    <h1 class="fw-bold display-6 mb-2"><?= e($activity['title']); ?></h1>
    <p class="text-light small mb-0">
      <?= indoDate($activity['date_start']); ?>
      <?php if ($activity['date_end'] && $activity['date_end'] !== $activity['date_start']): ?>
        – <?= indoDate($activity['date_end']); ?>
      <?php endif; ?>
    </p>
  </div>
</section>

<!-- DETAIL KEGIATAN -->
<div class="container my-5">
  <div class="row justify-content-center">
    <div class="col-lg-9">
      <article class="activity-detail bg-white shadow-sm p-4 p-md-5 rounded-4">

        <!-- GAMBAR KEGIATAN -->
        <?php if (!empty($activity['image'])): ?>
          <img src="<?= base_url('uploads/kegiatan/images/' . e($activity['image'])); ?>" 
               alt="<?= e($activity['title']); ?>" 
               class="img-fluid rounded featured mb-5 w-100">
        <?php endif; ?>

        <ul class="list-inline text-muted small mb-4">
          <?php if (!empty($activity['location'])): ?>
            <li class="list-inline-item me-4">
              <i class="fa fa-map-marker-alt me-2 text-success"></i><?= e($activity['location']); ?>
            </li>
          <?php endif; ?>

          <?php if (!empty($activity['organizer'])): ?>
            <li class="list-inline-item">
              <i class="fa fa-user-tie me-2 text-success"></i><?= e($activity['organizer']); ?>
            </li>
          <?php endif; ?>
        </ul>

        <!-- Konten dengan typografi rapi -->
        <div class="reading-content">
          <?php
          // Proses konten untuk memastikan paragraf terpisah dengan baik
          $content = $activity['description'];
          
          // Jika konten tidak punya tag <p>, wrap setiap baris kosong jadi paragraf
          if (strpos($content, '<p>') === false) {
              // Pisahkan berdasarkan double line break
              $paragraphs = preg_split('/\n\s*\n/', $content);
              $content = '';
              foreach ($paragraphs as $para) {
                  $para = trim($para);
                  if (!empty($para)) {
                      $content .= '<p>' . nl2br($para) . '</p>';
                  }
              }
          }
          
          echo $content;
          ?>
        </div>

        <!-- DOKUMEN -->
        <?php if (!empty($activity['document'])): ?>
          <div class="mt-5">
            <a href="<?= base_url('uploads/kegiatan/docs/' . e($activity['document'])); ?>" 
               target="_blank" class="btn btn-success btn-lg shadow-sm">
              <i class="fa fa-download me-2"></i> Unduh Dokumen
            </a>
          </div>
        <?php endif; ?>

        <div class="mt-5 pt-4 text-muted small border-top">
          <p class="mb-3 fw-semibold">Bagikan:</p>
          <div class="d-flex gap-3">
            <a href="https://facebook.com/sharer/sharer.php?u=<?= urlencode($page_url); ?>" 
               target="_blank" class="text-primary text-decoration-none">
              <i class="fab fa-facebook fa-lg"></i>
            </a>
            <a href="https://twitter.com/intent/tweet?url=<?= urlencode($page_url); ?>&text=<?= urlencode($activity['title']); ?>" 
               target="_blank" class="text-info text-decoration-none">
               <i class="fab fa-twitter fa-lg"></i>
            </a>
            <a href="https://api.whatsapp.com/send?text=<?= urlencode($activity['title'].' '.$page_url); ?>" 
               target="_blank" class="text-success text-decoration-none">
               <i class="fab fa-whatsapp fa-lg"></i>
            </a>
          </div>
        </div>

      </article>
    </div>
  </div>

  <!-- KEGIATAN LAINNYA -->
  <section class="mt-5 pt-5">
    <h3 class="fw-bold text-center mb-4 text-success">Kegiatan Lainnya</h3>
    <div class="row g-4 justify-content-center">
      
      <?php if ($other_activities): foreach ($other_activities as $act): ?>
        <div class="col-md-4">
          <div class="card border-0 shadow-sm h-100 activity-card">

            <?php if (!empty($act['image'])): ?>
              <img src="<?= base_url('uploads/kegiatan/images/' . e($act['image'])); ?>" 
                   alt="<?= e($act['title']); ?>" 
                   class="card-img-top" loading="lazy">
            <?php endif; ?>

            <div class="card-body">
              <h6 class="fw-semibold mb-1"><?= e($act['title']); ?></h6>

              <p class="text-muted small mb-2">
                <?= indoDate($act['date_start']); ?>
                <?php if ($act['date_end'] && $act['date_end'] !== $act['date_start']): ?>
                  – <?= indoDate($act['date_end']); ?>
                <?php endif; ?>
              </p>

              <a href="<?= base_url('kegiatan_detail.php?id=' . $act['id']); ?>" 
                 class="stretched-link text-success small">
                 Lihat kegiatan →
              </a>
            </div>

          </div>
        </div>

      <?php endforeach; else: ?>
        <p class="text-center text-muted">Belum ada kegiatan lainnya.</p>
      <?php endif; ?>

    </div>
  </section>
</div>

<?php include __DIR__ . '/includes/footer.php'; ?>

<!-- ====== CUSTOM STYLE (RE-DESIGN) ====== -->
<style>
.hero-activity {
  height: 45vh;
  background: linear-gradient(120deg, var(--green) 0%, var(--brown) 100%);
  position: relative;
  padding-top: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-activity .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
}

/* Konten detail kegiatan */
.activity-detail {
  line-height: 1.85;
  font-size: 1.1rem;
  color: #2d3748;
  font-family: "Inter", "Georgia", serif;
}

/* Featured image */
.activity-detail img.featured {
  max-height: 480px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Area baca dengan layout majalah */
.reading-content {
  max-width: 750px;
  margin: 0 auto;
}

/* Paragraf - spacing yang lebih lega dengan jarak antar paragraf */
.reading-content p {
  margin-bottom: 2.5rem;
  text-align: justify;
  line-height: 2;
  letter-spacing: 0.01em;
}

/* Paragraf pertama setelah heading */
.reading-content h1 + p,
.reading-content h2 + p,
.reading-content h3 + p,
.reading-content h4 + p {
  margin-top: 0.5rem;
}

/* Heading - spacing yang proporsional */
.reading-content h1 {
  margin-top: 3rem;
  margin-bottom: 1.5rem;
  line-height: 1.3;
  font-weight: 700;
  font-size: 2rem;
  color: #1a202c;
}

.reading-content h2 {
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  line-height: 1.35;
  font-weight: 700;
  font-size: 1.65rem;
  color: #2d3748;
}

.reading-content h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  line-height: 1.4;
  font-weight: 600;
  font-size: 1.35rem;
  color: #2d3748;
}

.reading-content h4 {
  margin-top: 1.75rem;
  margin-bottom: 0.9rem;
  line-height: 1.45;
  font-weight: 600;
  font-size: 1.15rem;
  color: #4a5568;
}

/* List spacing */
.reading-content ul,
.reading-content ol {
  margin-bottom: 1.75rem;
  padding-left: 2rem;
}

.reading-content li {
  margin-bottom: 0.75rem;
  line-height: 1.85;
}

/* Blockquote styling */
.reading-content blockquote {
  margin: 2rem 0;
  padding: 1.5rem 2rem;
  border-left: 4px solid var(--green, #22c55e);
  background: #f7fafc;
  font-style: italic;
  border-radius: 8px;
}

/* Gambar di dalam konten */
.reading-content img {
  max-width: 100%;
  height: auto;
  margin: 2.5rem auto;
  display: block;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Table styling jika ada */
.reading-content table {
  margin: 2rem 0;
  width: 100%;
  border-collapse: collapse;
}

.reading-content table th,
.reading-content table td {
  padding: 0.75rem;
  border: 1px solid #e2e8f0;
}

.reading-content table th {
  background: #f7fafc;
  font-weight: 600;
}

/* Code block jika ada */
.reading-content pre,
.reading-content code {
  background: #f7fafc;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-size: 0.95em;
}

.reading-content pre {
  padding: 1.25rem;
  margin: 1.75rem 0;
  overflow-x: auto;
}

/* Kartu kegiatan lain */
.activity-card img {
  height: 210px;
  object-fit: cover;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}

.activity-card {
  border-radius: 14px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.activity-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.15);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .activity-detail {
    font-size: 1.05rem;
    line-height: 1.8;
  }
  
  .reading-content p {
    margin-bottom: 2rem;
  }
  
  .reading-content h1 {
    font-size: 1.75rem;
    margin-top: 2.5rem;
  }
  
  .reading-content h2 {
    font-size: 1.5rem;
    margin-top: 2rem;
  }
  
  .reading-content h3 {
    font-size: 1.25rem;
    margin-top: 1.75rem;
  }
}
</style>