<?php require_once __DIR__ . '/includes/bootstrap.php';
$pageTitle = 'Chat | Underground FX Radio';
$currentPage = basename(__FILE__);
$nowPlaying = ugfx_now_playing();
$messages = ugfx_chat_messages();
include __DIR__ . '/includes/header.php';
?>
<section class="ugfx-page-hero">
  <div class="container-xxl">
    <div class="ugfx-kicker"><i class="bi bi-broadcast-pin"></i> Underground FX Radio</div>
    <h1 class="page-title">FX community chat</h1>
    <p class="page-copy">Big-room chat with live reactions, sticker drops, GIF support, voice clips, quick player launchers, and a neon glass layout that keeps your main site theme intact.</p>
  </div>
</section>

<section class="section-pad pt-3">
  <div class="container-xxl">
    <div class="ugfx-chat-shell" id="ugfxChatApp"
      data-chat-get="api/chat_get.php"
      data-chat-post="api/chat_post.php"
      data-chat-upload="api/chat_upload_audio.php"
      data-media-manifest="assets/chat-media/manifest.php"
>

      <aside class="ugfx-chat-sidebar">
        <div class="ugfx-card p-4 ugfx-chat-sidecard">
          <div class="ugfx-micro-label">ON AIR NOW</div>
          <div class="ugfx-chat-onair">
            <img src="<?= htmlspecialchars($nowPlaying['art']) ?>" alt="Underground FX" class="ugfx-chat-cover">
            <div>
              <h3 class="mb-2"><?= htmlspecialchars($nowPlaying['display_show'] ?? $nowPlaying['artist'] ?? 'Underground FX Live') ?></h3>
              <div class="ugfx-chat-live-meta">
                <span class="ugfx-live-pill"><i class="bi bi-broadcast"></i> <?= htmlspecialchars($nowPlaying['status'] ?? 'LIVE') ?></span>
                <span class="ugfx-chip"><i class="bi bi-headphones"></i> <span id="chatListeners"><?= (int)($nowPlaying['listeners'] ?? 0) ?></span></span>
              </div>
              <p class="text-secondary mb-0 mt-3"><?= htmlspecialchars($nowPlaying['title'] ?? 'Underground FX Live') ?></p>
            </div>
          </div>
          <div class="ugfx-chat-player-actions mt-3">
            <a class="btn ugfx-btn-primary" href="listen-live.php"><i class="bi bi-play-circle"></i> Main Player</a>
            <a class="btn ugfx-btn-outline" href="player-popup.php" target="_blank" rel="noopener"><i class="bi bi-window"></i> Popup Player</a>
          </div>
        </div>

        <div class="ugfx-card p-4 ugfx-chat-sidecard">
          <div class="ugfx-micro-label">CHAT TOOLS</div>
          <h3 class="mb-3">Everything loaded in</h3>
          <div class="ugfx-chat-feature-list">
            <div><i class="bi bi-emoji-sunglasses"></i><span>Emoji wall with quick search and category jumps</span></div>
            <div><i class="bi bi-images"></i><span>Optimized themed GIF pack with search, filters, and lazy loading</span></div>
            <div><i class="bi bi-stars"></i><span>Local stickers load automatically from the stickers folder</span></div>
            <div><i class="bi bi-mic-fill"></i><span>Browser voice clips with instant upload + playback</span></div>
            <div><i class="bi bi-lightning-charge-fill"></i><span>28 lightweight local animated GIFs plus direct-link support if you still want to paste one</span></div>
          </div>
        </div>
      </aside>

      <div class="ugfx-chat-main">
        <div class="ugfx-card ugfx-chat-stage">
          <div class="ugfx-chat-topbar">
            <div>
              <div class="ugfx-micro-label">LIVE ROOM</div>
              <h3 class="mb-0">Underground FX chat page</h3>
            </div>
            <div class="ugfx-chat-topstats">
              <span class="ugfx-chip"><i class="bi bi-chat-dots"></i> <span data-chat-count><?= count($messages) ?></span> messages</span>
              <span class="ugfx-chip"><i class="bi bi-arrow-repeat"></i> Auto refresh</span>
            </div>
          </div>

          <div class="ugfx-chat-feed" data-chat-feed>
            <?php foreach ($messages as $msg): ?>
              <?php $name = trim((string)($msg['name'] ?? 'Guest')) ?: 'Guest'; ?>
              <article class="ugfx-chat-bubble <?= htmlspecialchars($msg['type'] ?? 'user') ?>">
                <div class="ugfx-chat-avatar"><?= htmlspecialchars(strtoupper(substr($name, 0, 1))) ?></div>
                <div class="ugfx-chat-bubble-main">
                  <div class="ugfx-chat-bubble-head">
                    <strong><?= htmlspecialchars($name) ?></strong>
                    <span><?= htmlspecialchars((string)($msg['created_at'] ?? '')) ?></span>
                  </div>
                  <?php if (!empty($msg['message'])): ?><div class="ugfx-chat-text" style="color: <?= htmlspecialchars((string)($msg['text_color'] ?? '#f3f7ff')) ?>;"><?= ugfx_safe_links((string)$msg['message']) ?></div><?php endif; ?>
                  <?php if (!empty($msg['sticker'])): ?><?php $sticker = (string)$msg['sticker']; ?><?php if (preg_match('/\.(png|jpe?g|gif|webp|svg)$/i', $sticker)): ?><div class="ugfx-chat-sticker ugfx-chat-sticker--image"><img src="<?= htmlspecialchars($sticker) ?>" alt="Sticker"></div><?php else: ?><div class="ugfx-chat-sticker"><?= htmlspecialchars($sticker) ?></div><?php endif; ?><?php endif; ?>
                  <?php if (!empty($msg['gif_url'])): ?><div class="ugfx-chat-media"><img src="<?= htmlspecialchars((string)$msg['gif_url']) ?>" alt="GIF"></div><?php endif; ?>
                  <?php if (!empty($msg['voice_url'])): ?><div class="ugfx-chat-voice"><audio controls preload="none" src="<?= htmlspecialchars((string)$msg['voice_url']) ?>"></audio></div><?php endif; ?>
                </div>
              </article>
            <?php endforeach; ?>
          </div>

          <div class="ugfx-chat-composer-wrap">
            <form class="ugfx-chat-composer" data-chat-form>
              <div class="ugfx-chat-name-row">
                <label class="form-label mb-1">Display name</label>
                <input class="form-control" type="text" name="name" maxlength="30" placeholder="Your radio name" required>
              </div>

              <div class="ugfx-chat-editor">
                <textarea class="form-control" name="message" rows="3" maxlength="600" placeholder="Drop your message, request hype, DJ love, or listener shoutout..."></textarea>
                <input type="hidden" name="gif_url">
                <input type="hidden" name="sticker">
                <input type="hidden" name="voice_url">
                <input type="hidden" name="voice_mime">
                <input type="hidden" name="text_color" value="#f3f7ff">

                <div class="ugfx-chat-attachments" data-chat-attachments></div>
                <div class="ugfx-chat-color-row"><label class="small text-secondary">Your text color</label><input type="color" value="#66d9ff" data-text-color-picker aria-label="Choose chat text color"><span class="ugfx-chip ugfx-chip-blue small">Listeners can style their own messages</span></div>

                <div class="ugfx-chat-toolbar">
                  <button class="btn ugfx-btn-outline btn-sm" type="button" data-panel-toggle="emoji"><i class="bi bi-emoji-smile"></i> Emoji</button>
                  <button class="btn ugfx-btn-outline btn-sm" type="button" data-panel-toggle="stickers"><i class="bi bi-stars"></i> Stickers</button>
                  <button class="btn ugfx-btn-outline btn-sm" type="button" data-panel-toggle="gif"><i class="bi bi-images"></i> GIF</button>
                  <button class="btn ugfx-btn-outline btn-sm" type="button" data-record-toggle><i class="bi bi-mic"></i> Voice</button>
                  <button class="btn ugfx-btn-primary ms-auto" type="submit"><i class="bi bi-send-fill"></i> Send to chat</button>
                </div>
              </div>

              <div class="ugfx-chat-panels">
                <section class="ugfx-chat-panel" data-panel="emoji" hidden>
                  <div class="ugfx-chat-panel-head">
                    <strong>Emoji blast</strong>
                    <input class="form-control form-control-sm" type="search" placeholder="Search emoji" data-emoji-search>
                  </div>
                  <div class="ugfx-chat-chip-row">
                    <button type="button" class="ugfx-mini-chip active" data-emoji-filter="all">All</button>
                    <button type="button" class="ugfx-mini-chip" data-emoji-filter="faces">Faces</button>
                    <button type="button" class="ugfx-mini-chip" data-emoji-filter="energy">Energy</button>
                    <button type="button" class="ugfx-mini-chip" data-emoji-filter="music">Music</button>
                    <button type="button" class="ugfx-mini-chip" data-emoji-filter="love">Love</button>
                    <button type="button" class="ugfx-mini-chip" data-emoji-filter="party">Party</button>
                  </div>
                  <div class="ugfx-emoji-grid" data-emoji-grid></div>
                </section>

                <section class="ugfx-chat-panel" data-panel="stickers" hidden>
                  <div class="ugfx-chat-panel-head">
                    <strong>Sticker drops</strong>
                    <span class="text-secondary small">Local radio pack · showing <span data-sticker-count>0/0</span></span>
                  </div>
                  <input class="form-control form-control-sm" type="search" placeholder="Search stickers: live, dj, party, request..." data-sticker-search>
                  <div class="ugfx-chat-chip-row mt-2" data-sticker-filters></div>
                  <div class="ugfx-sticker-grid" data-sticker-grid></div>
                  <div class="ugfx-chat-panel-actions"><button type="button" class="btn ugfx-btn-outline btn-sm" data-sticker-load-more hidden>Load more stickers</button></div>
                </section>

                <section class="ugfx-chat-panel" data-panel="gif" hidden>
                  <div class="ugfx-chat-panel-head">
                    <strong>GIF launcher</strong>
                    <span class="text-secondary small">Local themed pack · showing <span data-gif-count>0/0</span></span>
                  </div>
                  <div class="row g-2 align-items-center">
                    <div class="col-md-8"><input type="url" class="form-control" placeholder="https://...gif or any direct GIF" data-gif-url-input></div>
                    <div class="col-md-4 d-grid"><button type="button" class="btn ugfx-btn-outline" data-gif-attach><i class="bi bi-plus-circle"></i> Attach GIF</button></div>
                  </div>
                  <input class="form-control form-control-sm mt-2" type="search" placeholder="Search GIFs: radio, dance, party, night..." data-gif-search>
                  <div class="ugfx-chat-chip-row mt-2" data-gif-filters></div>
                  <div class="ugfx-gif-grid" data-gif-presets></div>
                  <div class="ugfx-chat-panel-actions"><button type="button" class="btn ugfx-btn-outline btn-sm" data-gif-load-more hidden>Load more GIFs</button></div>
                </section>
              </div>

              <div class="ugfx-chat-status-row">
                <div class="text-secondary small" data-chat-status>Chat ready. Name will stay saved on this device.</div>
                <div class="text-secondary small" data-record-status></div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<script>
window.UGFX_CHAT_BOOT = {
  initialMessages: <?= json_encode($messages, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) ?>
};
</script>
<?php include __DIR__ . '/includes/footer.php'; ?>
