<?php
session_start();
require_once __DIR__ . '/includes/stream_lib.php';
$current = smurf_top50_touch(__DIR__ . '/data/top50.json', __DIR__ . '/data/top50_state.json');
$cfg = smurf_get_stream_config();
$listenUrl = $cfg['listen_url'] ?? '';
$playerStreamUrl = '/stream-proxy.php';
$nowPlaying = trim((string)$current) !== '' ? $current : 'DJ Eagle is warming up the jukebox…';
?>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Almost Heaven Pop Out Player</title>
  <link rel="stylesheet" href="/assets/css/header.css">
  <link rel="stylesheet" href="/assets/css/nav.css">
  <link rel="stylesheet" href="/assets/css/footer.css">
  <link rel="stylesheet" href="/assets/css/main.css">
  <style>
    body.page-player-popout{
      margin:0;
      min-height:100vh;
      background:
        radial-gradient(circle at 20% 16%, rgba(255,220,173,.18), transparent 24%),
        radial-gradient(circle at 82% 82%, rgba(194,138,74,.16), transparent 28%),
        linear-gradient(rgba(13,7,4,.55), rgba(21,11,6,.80)),
        url('/img/backgrounds/main-bg.png') center center / cover fixed no-repeat;
      color:var(--text);
      padding:34px 18px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    body.page-player-popout .content-area{width:100%;margin-left:0;padding:0;min-height:auto;}
    body.page-player-popout .content-area::before,
    body.page-player-popout .content-area::after{display:none;}
    body.page-player-popout .content-wrapper{max-width:1180px;margin:0 auto;padding:0;}
    .popout-player-card{
      max-width:1120px;
      margin:0 auto;
      padding:36px;
      border-radius:28px;
      background:linear-gradient(180deg, rgba(28,15,8,.92), rgba(19,10,6,.86));
      border:2px solid rgba(194,138,74,.90) !important;
      box-shadow:0 0 0 1px rgba(255,224,177,.12), 0 24px 72px rgba(0,0,0,.40), 0 0 36px rgba(255,210,138,.18), inset 0 0 26px rgba(255,240,214,.04) !important;
      overflow:hidden;
      position:relative;
      text-align:left;
    }
    .popout-player-card::before{
      content:'';
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at top right, rgba(255,210,138,.12), transparent 34%),
        radial-gradient(circle at bottom left, rgba(194,138,74,.14), transparent 36%);
      pointer-events:none;
    }
    .popout-player-card::after{
      content:'';
      position:absolute;
      inset:14px;
      border-radius:22px;
      border:1px solid rgba(255,231,191,.10);
      pointer-events:none;
    }
    .player-pop-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:28px;align-items:center;position:relative;z-index:1;}
    .player-pop-kicker{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:999px;background:rgba(255,210,138,.12);border:1px solid rgba(255,210,138,.28);font-weight:700;color:#ffe3b8;margin-bottom:14px;box-shadow:0 0 14px rgba(255,210,138,.10);}
    .player-pop-title{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.03;margin:0 0 12px;color:#fff7e9;text-shadow:0 0 18px rgba(255,210,138,.18);}
    .player-pop-subtitle{font-size:1.03rem;line-height:1.75;color:#f4dfc0;max-width:60ch;margin:0 0 22px;}
    .eq-wrap{display:flex;gap:8px;align-items:flex-end;height:86px;margin:18px 0 24px;}
    .eq-bar{display:block;width:10px;border-radius:999px;background:linear-gradient(180deg, #ffe0a9, #c28a4a);box-shadow:0 0 12px rgba(255,210,138,.22);animation:eqBounce 1.85s ease-in-out infinite;}
    .eq-bar:nth-child(2n){animation-duration:2.2s}.eq-bar:nth-child(3n){animation-duration:1.5s}
    @keyframes eqBounce{0%,100%{transform:scaleY(.78)}50%{transform:scaleY(1.08)}}
    .player-nowplaying{padding:20px 22px;border-radius:22px;background:rgba(255,248,238,.05);border:1px solid rgba(255,210,138,.18);box-shadow:inset 0 0 22px rgba(255,210,138,.05);}
    .player-nowplaying-label{text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;color:#ffd79b;margin-bottom:8px;font-weight:800;}
    .player-nowplaying strong{display:block;font-size:1.3rem;line-height:1.45;color:#fff8ef;margin-bottom:14px;}
    .player-meta-row{display:flex;gap:10px;flex-wrap:wrap;}
    .player-meta-chip{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;background:rgba(194,138,74,.12);border:1px solid rgba(255,210,138,.20);color:#fbe3bf;font-weight:700;}
    .player-audio-shell{padding:30px;border-radius:30px;background:linear-gradient(180deg, rgba(35,19,11,.94), rgba(22,12,7,.88));border:2px solid rgba(194,138,74,.45);box-shadow:0 0 34px rgba(194,138,74,.14), inset 0 0 26px rgba(255,255,255,.02);position:relative;text-align:center;}
    .player-audio-shell::before{content:'';position:absolute;left:18px;right:18px;top:18px;height:1px;background:linear-gradient(90deg, transparent, rgba(255,224,177,.38), transparent);}
    .player-orb{width:176px;height:176px;margin:0 auto 22px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 35%, rgba(255,226,173,.32), rgba(35,18,10,.92) 60%);border:1px solid rgba(255,224,177,.18);box-shadow:0 0 26px rgba(194,138,74,.18), inset 0 0 22px rgba(255,255,255,.03);}
    .player-orb-center{width:102px;height:102px;border-radius:50%;display:grid;place-items:center;font-size:2.35rem;background:linear-gradient(180deg, rgba(255,228,179,.95), rgba(194,138,74,.86));color:#2b160b;box-shadow:0 0 22px rgba(255,210,138,.20);}
    .player-glow-line{height:4px;border-radius:999px;background:linear-gradient(90deg, rgba(255,210,138,.05), rgba(255,231,191,.90), rgba(194,138,74,.90), rgba(255,210,138,.05));box-shadow:0 0 22px rgba(255,210,138,.16),0 0 22px rgba(194,138,74,.14);margin:0 0 22px;}
    .player-audio-shell audio{width:100%;display:block;margin:0 auto 20px;filter:drop-shadow(0 0 12px rgba(255,210,138,.18));}
    .player-action-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
    .player-action-row .button{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;border-radius:999px;text-decoration:none;font-weight:800;border:1px solid rgba(255,224,177,.24);background:rgba(255,248,238,.05);color:#fff2db;min-width:190px;transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;}
    .player-action-row .button:hover{transform:translateY(-1px);box-shadow:0 0 18px rgba(255,210,138,.12);border-color:rgba(255,224,177,.34);}
    .player-action-row .play-btn{background:linear-gradient(135deg, #f3d4a2, #b7773f);color:#2a1409;border:none;box-shadow:0 0 22px rgba(194,138,74,.18);}
    @media (max-width: 860px){body.page-player-popout{padding:18px 12px}.popout-player-card{padding:22px}.player-pop-layout{grid-template-columns:1fr}.player-orb{width:142px;height:142px}.player-orb-center{width:86px;height:86px;font-size:2rem}.player-action-row .button{min-width:unset;width:100%;}}
  </style>
</head>
<body class="page-player-popout">
  <main class="content-area">
    <div class="content-wrapper">
      <section class="content-card popout-player-card">
        <div class="player-pop-layout">
          <div class="player-pop-copy">
            <div class="player-pop-kicker">🎙️ Almost Heaven Radio</div>
            <h1 class="player-pop-title">Pop Out Player</h1>
            <p class="player-pop-subtitle">Country heart, jukebox soul, and a little late-night sparkle. Keep the station playing in its own window with a richer, cleaner live player.</p>

            <div class="eq-wrap" aria-hidden="true">
              <span class="eq-bar" style="height:38%"></span>
              <span class="eq-bar" style="height:62%"></span>
              <span class="eq-bar" style="height:46%"></span>
              <span class="eq-bar" style="height:88%"></span>
              <span class="eq-bar" style="height:55%"></span>
              <span class="eq-bar" style="height:78%"></span>
              <span class="eq-bar" style="height:44%"></span>
              <span class="eq-bar" style="height:68%"></span>
            </div>

            <div class="player-nowplaying">
              <div class="player-nowplaying-label">Now Playing</div>
              <strong id="nowPlayingText"><?= htmlspecialchars($nowPlaying) ?></strong>
              <div class="player-meta-row">
                <span class="player-meta-chip">📻 Live stream ready</span>
                <span class="player-meta-chip">🔊 Dedicated player window</span>
                <span class="player-meta-chip">🦅 DJ Eagle on standby</span>
              </div>
            </div>
          </div>

          <div class="player-audio-shell">
            <div class="player-orb" aria-hidden="true">
              <div class="player-orb-center">🎧</div>
            </div>
            <div class="player-glow-line"></div>
            <audio controls autoplay preload="none" src="<?= htmlspecialchars($playerStreamUrl) ?>"></audio>
            <div class="player-action-row">
              <a class="button play-btn" href="<?= htmlspecialchars($listenUrl) ?>" target="_blank" rel="noopener">Open Stream Link</a>
              <a class="button" href="<?= htmlspecialchars($listenUrl) ?>" target="_blank" rel="noopener">Open External Source</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  </main>
<script>
async function refreshNowPlaying(){
  try{
    const res = await fetch('/api/nowplaying.php?ts=' + Date.now(), {cache:'no-store'});
    if(!res.ok) return;
    const data = await res.json();
    const el = document.getElementById('nowPlayingText');
    if(el && data && data.title){
      el.textContent = data.title;
    }
  }catch(e){}
}
refreshNowPlaying();
setInterval(refreshNowPlaying, 30000);
</script>
</body>
</html>
