<?php
session_start();
session_write_close();
require_once __DIR__ . '/includes/stream_lib.php';
$settingsFile = __DIR__ . '/data/settings.json';
$settings = is_file($settingsFile) ? json_decode((string)file_get_contents($settingsFile), true) : [];
if (!is_array($settings)) $settings = [];
$playerUrls = smurf_get_player_urls();
$listenUrl = $playerUrls['raw'] ?? '';
$audioUrl = 'http://cr3.broadcasturself.com:65001/stream';
$popupTitle = trim((string)($settings['popup_title'] ?? 'Underground FX Radio'));
$popupKicker = trim((string)($settings['popup_kicker'] ?? 'Dedicated Popout Stream'));
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><?= htmlspecialchars($popupTitle, ENT_QUOTES, 'UTF-8') ?> • Popout Player</title>
  <link rel="stylesheet" href="/assets/css/theme-htr.css">
  <style>
    body.player-body { min-height: 100vh; margin: 0; background: radial-gradient(circle at top, rgba(0, 204, 136, 0.22), rgba(0, 0, 0, 0.96) 58%), #020504; color: var(--text-color, #fff); display: grid; place-items: center; padding: 24px; }
    .player-shell { width: min(100%, 720px); }
    .player-card { background: rgba(0, 0, 0, 0.82); border: 2px solid var(--accent-color, #00cc88); border-radius: 22px; box-shadow: 0 0 26px rgba(0, 204, 136, 0.28); padding: 28px; text-align: center; }
    .player-kicker { letter-spacing: 0.2rem; text-transform: uppercase; font-size: 0.78rem; color: var(--accent-color, #00cc88); }
    .player-title { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 10px 0 14px; color: #fff; }
    .player-nowplaying { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 18px; padding: 18px; margin: 18px 0 22px; }
    .player-nowplaying-label { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.15rem; color: var(--accent-color, #00cc88); margin-bottom: 8px; }
    .player-meta-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top: 12px; }
    .player-meta-chip { background: rgba(255,255,255,0.08); border-radius: 999px; padding: 6px 12px; font-size: 0.9rem; }
    .player-visual { position: relative; width: 170px; height: 170px; margin: 0 auto 18px; border-radius: 50%; border: 8px solid rgba(255,255,255,0.08); box-shadow: inset 0 0 0 12px rgba(255,255,255,0.05), 0 0 28px rgba(0, 204, 136, 0.30); animation: spin 8s linear infinite; }
    .player-orb-center { position:absolute; inset:50%; width:56px; height:56px; transform:translate(-50%,-50%); border-radius:50%; background: var(--accent-color, #00cc88); color:#000; display:grid; place-items:center; font-size:1.5rem; box-shadow: 0 0 16px rgba(0, 204, 136, 0.55); }
    .player-glow-line { height: 3px; margin: 18px auto 20px; width: 72%; background: linear-gradient(90deg, transparent, rgba(0,204,136,0.95), transparent); border-radius: 999px; }
    audio { width: 100%; margin-top: 8px; }
    .player-action-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:22px; }
    .player-action-row a { display:inline-block; text-decoration:none; background: rgba(0,204,136,0.12); color:#fff; border:1px solid rgba(0,204,136,0.45); padding:12px 16px; border-radius:12px; }
    .player-action-row a:hover { box-shadow: 0 0 16px rgba(0, 204, 136, 0.22); }
    @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
    #popup-nowplaying-wrap center { display:block; }
    #popup-nowplaying-wrap p { margin: 0; font-size: 1.05rem; }
  </style>
</head>
<body class="player-body">
  <main class="player-shell">
    <section class="player-card">
      <div class="player-kicker"><?= htmlspecialchars($popupKicker, ENT_QUOTES, 'UTF-8') ?></div>
      <h1 class="player-title"><?= htmlspecialchars($popupTitle, ENT_QUOTES, 'UTF-8') ?></h1>
      <div class="player-nowplaying">
        <div class="player-nowplaying-label">Now Playing</div>
        <div id="popup-nowplaying-wrap"><?php include __DIR__ . '/data/nowplaying.php'; ?></div>
        <div class="player-meta-row">
          <span class="player-meta-chip">📻 Live stream ready</span>
          <span class="player-meta-chip">🕒 Auto refresh every 30s</span>
        </div>
      </div>
      <div class="player-visual" aria-hidden="true"><div class="player-orb-center">🎧</div></div>
      <div class="player-glow-line"></div>
      <audio controls autoplay preload="none" src="<?= htmlspecialchars($audioUrl, ENT_QUOTES, 'UTF-8') ?>"></audio>
      <div class="player-action-row">
        <a href="<?= htmlspecialchars($listenUrl, ENT_QUOTES, 'UTF-8') ?>" target="_blank" rel="noopener">Open Stream Link</a>
        <a href="/" rel="noopener">Return to Site</a>
      </div>
    </section>
  </main>
  <script>
    async function refreshPopupNowPlaying() {
      const target = document.getElementById('popup-nowplaying-wrap');
      if (!target) return;
      try {
        const res = await fetch('/data/nowplaying.php?ts=' + Date.now(), { cache: 'no-store', headers: { 'X-Requested-With': 'fetch' }});
        if (!res.ok) throw new Error('Failed to load now playing');
        target.innerHTML = await res.text();
      } catch (err) { console.error(err); }
    }
    setInterval(refreshPopupNowPlaying, 30000);
  </script>
</body>
</html>
