<?php require_once __DIR__ . '/includes/bootstrap.php';
$pageTitle = 'Chat | Underground FX Radio';
$currentPage = basename(__FILE__);
include __DIR__ . '/includes/header.php';
?>
<section class="ugfx-page-hero">
  <div class="container-xxl">
    <div class="ugfx-kicker"><i class="bi bi-lightning-charge-fill"></i> Underground FX Radio</div>
    <h1 class="page-title">Station chat</h1>
    <p class="page-copy">Premium chat foundation with safe links, GIF URL support, emoji-ready messages, and admin scheduled-message architecture already included.</p>
  </div>
</section>

<?php $messages = array_reverse(ugfx_chat_messages()); ?>
<section class="section-pad pt-3">
  <div class="container-xxl">
    <div class="ugfx-chat-grid">
      <div class="ugfx-card p-4">
        <div class="d-flex justify-content-between align-items-center mb-3">
          <div>
            <div class="ugfx-micro-label">LIVE CHAT</div>
            <h3 class="mb-0">Underground FX room</h3>
          </div>
          <span class="ugfx-chip"><i class="bi bi-emoji-smile"></i> GIF + links ready</span>
        </div>
        <div class="ugfx-chat-messages">
          <?php foreach ($messages as $msg): ?>
          <div class="ugfx-message <?= htmlspecialchars($msg['type'] ?? 'user') ?>">
            <div class="meta"><strong><?= htmlspecialchars($msg['name'] ?? 'Guest') ?></strong> · <?= htmlspecialchars($msg['created_at'] ?? '') ?></div>
            <div class="body"><?= ugfx_safe_links($msg['message'] ?? '') ?></div>
            <?php if (!empty($msg['gif_url'])): ?><div class="gif-wrap"><img src="<?= htmlspecialchars($msg['gif_url']) ?>" alt="GIF"></div><?php endif; ?>
          </div>
          <?php endforeach; ?>
        </div>
      </div>
      <div class="ugfx-card p-4">
        <div class="ugfx-micro-label">SEND A MESSAGE</div>
        <h3>Modern chat input</h3>
        <form action="api/chat_post.php" method="post" data-chat-form class="row g-3">
          <div class="col-12"><label class="form-label">Display name</label><input class="form-control" name="name" maxlength="30" required></div>
          <div class="col-12"><label class="form-label">Message</label><textarea class="form-control" name="message" rows="5" maxlength="400" required placeholder="Text, emojis, links…"></textarea></div>
          <div class="col-12"><label class="form-label">GIF URL (optional)</label><input class="form-control" name="gif_url" type="url" placeholder="https://..."></div>
          <div class="col-12 d-flex gap-2 flex-wrap">
            <button class="btn ugfx-btn-primary">Post message</button>
            <span class="ugfx-chip">😀 😎 🔥 🎧 📻 🚀</span>
          </div>
          <div class="col-12 text-secondary small" data-chat-status>Messages are sanitized before saving.</div>
        </form>
        <hr class="border-secondary-subtle my-4">
        <div class="ugfx-micro-label">ADMIN UPGRADE PATH</div>
        <ul class="text-secondary mb-0">
          <li>Scheduled hourly promo messages</li>
          <li>Pinned notices and highlighted system cards</li>
          <li>Banned words / muted names / moderation queue</li>
          <li>Later: richer emoji picker and better GIF search UX</li>
        </ul>
      </div>
    </div>
  </div>
</section>

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