<?php
require __DIR__ . '/bootstrap.php';
header('Referrer-Policy: strict-origin-when-cross-origin');
if (empty($_SESSION['google_nonce'])) $_SESSION['google_nonce'] = bin2hex(random_bytes(18));
$user = currentUser();
$googleClientId = (string)(appConfig('google')['client_id'] ?? '');
$appName = (string)(appConfig('app')['name'] ?? 'Reca-play');
$clientReady = $googleClientId !== '' && !str_starts_with($googleClientId, 'GANTI_');
$sharedTrack = null;
$playId = trim((string)($_GET['play'] ?? ''));
if (preg_match('/^(?:au:[A-Za-z0-9_-]{1,128}|jm:[0-9]{1,16}|yt:[A-Za-z0-9_-]{11}|ytm:[A-Za-z0-9_-]{11}|[A-Za-z0-9_-]{11})$/', $playId)) {
    try {
        $s = db()->prepare('SELECT '.trackSelectSql('t').' FROM tracks t WHERE t.video_id=? LIMIT 1');
        $s->execute([$playId]);
        $sharedTrack = $s->fetch() ?: null;
    } catch (Throwable $ignore) {}
}
$boot = [
    'user'=>$user,'csrf'=>csrfToken(),'googleClientId'=>$googleClientId,
    'googleNonce'=>$_SESSION['google_nonce'],'clientReady'=>$clientReady,
    'appName'=>$appName,'baseUrl'=>appBaseUrl(),'sharedTrack'=>$sharedTrack,
    'version'=>appVersion(),
    'endpoints'=>[
        'api'=>appUrl('api.php'),'auth'=>appUrl('auth.php'),'library'=>appUrl('library.php'),'share'=>appUrl('share.php')
    ],
];
function uiIcon(string $name, string $class=''): string {
    $safe = preg_replace('/[^a-z0-9_-]/i','',$name);
    $cls = trim('ui-icon '.$class);
    return '<svg class="'.htmlspecialchars($cls,ENT_QUOTES).'" aria-hidden="true" focusable="false"><use href="assets/icons.svg#i-'.$safe.'"></use></svg>';
}
?><!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
<meta name="theme-color" content="#08090b">
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="description" content="Reca-play - pemutar musik personal dengan library, playlist, riwayat, chart, dan Offline Library.">
<link rel="manifest" href="manifest.webmanifest">
<title><?=htmlspecialchars($appName)?> V<?=htmlspecialchars(appVersion())?></title>
<link rel="stylesheet" href="assets/style.css?v=4.6.0">
</head>
<body>
<div id="systemBanner" class="system-banner hidden" role="status"><div><strong id="systemBannerTitle">Pemeriksaan aplikasi</strong><span id="systemBannerText"></span></div><button id="systemBannerClose" type="button" aria-label="Tutup">×</button></div>
<div id="loginScreen" class="login-screen <?= $user ? 'hidden' : '' ?>">
  <div class="login-orb orb-a"></div><div class="login-orb orb-b"></div>
  <div class="login-card login-card-wide auth-shell">
    <div class="brand big"><span class="brand-mark">R</span><span>Reca-play</span></div>
    <div class="auth-stage active" id="authChoicePanel">
      <span class="auth-kicker">AKUN RECA-PLAY</span>
      <h1>Masuk untuk membawa<br><em>musik Anda ke mana saja.</em></h1>
      <p class="auth-lead">Simpan Liked Songs, playlist, riwayat dengar, Top Tracks, dan personalisasi dalam satu akun.</p>
      <?php if ($clientReady): ?>
        <div class="google-signin-wrap"><div id="googleSignIn"></div></div>
        <div id="googleLinkOtpBox" class="otp-box hidden"><div class="otp-info">Email ini sudah memiliki akun Reca-play. Masukkan OTP yang dikirim ke <strong id="googleLinkMaskedEmail">email Anda</strong> untuk menautkan akun dengan aman.</div><label>Kode OTP<input id="googleLinkOtp" inputmode="numeric" autocomplete="one-time-code" maxlength="8" placeholder="000000"></label><button id="googleLinkVerifyBtn" class="primary-btn full" type="button">Verifikasi & tautkan akun</button></div>
      <?php endif; ?>
      <div class="auth-divider"><span>atau gunakan akun Reca-play</span></div>
      <div class="auth-choice-grid">
        <button id="openUsernameLogin" class="auth-choice" type="button"><span class="auth-choice-icon"><?=uiIcon("user")?></span><span><strong>Masuk dengan username</strong><small>OTP hanya saat perangkat belum dipercaya</small></span><b><?=uiIcon("chevron-right")?></b></button>
        <button id="openRegister" class="auth-choice" type="button"><span class="auth-choice-icon"><?=uiIcon("plus")?></span><span><strong>Buat akun baru</strong><small>Daftar dengan username dan email</small></span><b><?=uiIcon("chevron-right")?></b></button>
      </div>
      <?php if ($clientReady): ?><div class="privacy-note">Login Google hanya digunakan untuk identitas akun. Reca-play tidak meminta akses membaca Gmail atau Drive.</div><?php endif; ?>
    </div>

    <div class="auth-stage" id="authLocalPanel">
      <button class="auth-back" type="button" data-auth-back><?=uiIcon("back")?> Kembali</button>
      <span class="auth-kicker">MASUK DENGAN USERNAME</span>
      <h2>Selamat datang kembali.</h2>
      <p class="auth-lead compact">Masukkan username. OTP hanya diperlukan saat perangkat ini belum memiliki sesi tepercaya.</p>
      <form id="localLoginForm" class="auth-form active" autocomplete="on">
        <label>Username<input id="loginUsername" name="username" autocomplete="username" minlength="3" maxlength="30" placeholder="contoh: recalmaru" required></label>
        <label class="remember-row"><input id="loginRemember" type="checkbox" checked><span><strong>Ingat saya di perangkat ini</strong><small>Tetap login hingga 180 hari. OTP diminta lagi jika cookie dihapus atau Anda keluar.</small></span></label><button id="loginRequestBtn" class="primary-btn full" type="submit">Lanjutkan</button>
        <div id="loginOtpBox" class="otp-box hidden">
          <div class="otp-info">Kode OTP dikirim ke <strong id="loginMaskedEmail">email Anda</strong></div>
          <label>Kode OTP<input id="loginOtp" inputmode="numeric" autocomplete="one-time-code" maxlength="8" placeholder="000000"></label>
          <button id="loginVerifyBtn" class="primary-btn full" type="button">Verifikasi & masuk</button>
          <button id="loginResendBtn" class="link-btn" type="button">Kirim ulang OTP</button>
        </div>
      </form>
    </div>

    <div class="auth-stage" id="authRegisterPanel">
      <button class="auth-back" type="button" data-auth-back><?=uiIcon("back")?> Kembali</button>
      <span class="auth-kicker">BUAT AKUN RECA-PLAY</span>
      <h2>Mulai library pribadi Anda.</h2>
      <p class="auth-lead compact">Tidak perlu password. Email digunakan untuk menerima OTP saat registrasi dan login berikutnya.</p>
      <form id="localRegisterForm" class="auth-form active" autocomplete="on">
        <label>Nama tampilan<input id="registerName" maxlength="80" placeholder="Nama Anda" required></label>
        <label>Username<input id="registerUsername" autocomplete="username" minlength="3" maxlength="30" placeholder="3-30 karakter" required></label>
        <label>Email<input id="registerEmail" type="email" autocomplete="email" maxlength="255" placeholder="nama@email.com" required></label>
        <label class="remember-row"><input id="registerRemember" type="checkbox" checked><span><strong>Ingat saya di perangkat ini</strong><small>Setelah verifikasi pertama, perangkat tetap login.</small></span></label><button id="registerRequestBtn" class="primary-btn full" type="submit">Daftar & kirim OTP</button>
        <div id="registerOtpBox" class="otp-box hidden">
          <div class="otp-info">Kode verifikasi dikirim ke <strong id="registerMaskedEmail">email Anda</strong></div>
          <label>Kode OTP<input id="registerOtp" inputmode="numeric" autocomplete="one-time-code" maxlength="8" placeholder="000000"></label>
          <button id="registerVerifyBtn" class="primary-btn full" type="button">Verifikasi & buat akun</button>
          <button id="registerResendBtn" class="link-btn" type="button">Kirim ulang OTP</button>
        </div>
      </form>
    </div>

    <div id="loginStatus" class="login-status" role="status" aria-live="polite"></div>
    <div class="guest-access">
      <div><strong>Ingin langsung mendengarkan?</strong><span>Mode tamu tidak menyimpan riwayat, Liked Songs, playlist, Top Tracks, atau personalisasi.</span></div>
      <button id="continueGuestBtn" class="guest-btn" type="button">Lanjut sebagai tamu</button>
    </div>
  </div>
</div>

<div class="app-shell" id="appShell">
<aside class="sidebar" id="sidebar">
 <div class="brand"><span class="brand-mark">R</span><span>Reca-play</span></div>
 <nav class="nav">
  <button class="nav-item active" data-view="home"><?=uiIcon("home")?> Beranda</button>
  <button class="nav-item" data-view="search"><?=uiIcon("search")?> Cari</button>
  <button class="nav-item" data-view="mix"><?=uiIcon("sparkles")?> Reca Mix</button>
  <button class="nav-item" data-view="discover"><?=uiIcon("compass")?> Discover</button>
  <button class="nav-item" data-view="offline"><?=uiIcon("download")?> Offline</button>
  <div class="nav-label">LIBRARY ANDA</div>
  <button class="nav-item" data-view="liked"><?=uiIcon("heart-fill")?> Liked Songs</button>
  <button class="nav-item" data-view="history"><?=uiIcon("history")?> Recently Played</button>
  <button class="nav-item" data-view="top"><?=uiIcon("star")?> Top Tracks</button>
  <button class="nav-item" data-view="artists"><?=uiIcon("user")?> Artis</button>
  <button class="nav-item" data-view="albums"><?=uiIcon("album")?> Album</button>
  <button class="nav-item" data-view="playlists"><?=uiIcon("music")?> Playlist</button>
 </nav>
 <button class="new-playlist" id="newPlaylistBtn"><?=uiIcon("plus")?> Buat playlist</button>
 <div class="sidebar-foot">Reca-play<br>Personal music experience</div>
</aside>

<main class="main">
<header class="topbar">
 <button class="icon-btn mobile-only" id="menuBtn"><?=uiIcon("menu")?></button>
 <div class="search-wrap"><?=uiIcon("search")?><input id="searchInput" autocomplete="off" placeholder="Cari lagu, video, full album, live, cover, artis, playlist..."><button id="clearSearch"><?=uiIcon("close")?></button></div>
 <div class="profile-wrap">
  <button class="theme-btn" id="qualityBtn" title="Kualitas streaming">HQ</button><button class="theme-btn" id="themeBtn" title="Tema"><?=uiIcon("theme")?></button>
  <button class="profile-pill" id="profileBtn"><img id="profilePhoto" src="assets/avatar.svg" alt=""><span id="profileName">Akun</span><b><?=uiIcon("chevron-down")?></b></button>
  <div class="profile-menu" id="profileMenu"><div><strong id="profileMenuName">-</strong><span id="profileUsername">-</span><span id="profileEmail">-</span></div><button id="settingsBtn">Pengaturan audio</button><button id="loginMenuBtn">Masuk / Daftar</button><button id="logoutBtn">Keluar</button></div>
 </div>
</header>
<section class="content">
 <div id="guestBanner" class="guest-banner hidden"><div><strong>Anda sedang menggunakan Reca-play sebagai tamu.</strong><span>Riwayat dengar, Liked Songs, playlist, Top Tracks, dan personalisasi tidak akan disimpan. Masuk atau daftar untuk menyimpan dan menyinkronkan aktivitas serta koleksi musik Anda.</span></div><button id="guestLoginBtn" class="guest-banner-action">Masuk / Daftar</button><button id="dismissGuestBanner" class="guest-banner-close" title="Tutup"><?=uiIcon("close")?></button></div>
 <div class="view active" id="homeView">
  <section class="welcome streaming-hero"><div><span class="eyebrow">RECA-PLAY</span><h1 id="welcomeTitle">Selamat datang</h1><p id="welcomeSubtitle">Cari dan putar musik atau video dari satu tempat.</p></div><div class="hero-actions"><button class="primary-btn" id="homeSearchBtn"><?=uiIcon("search")?> Cari musik atau video</button><button class="text-btn" data-view-target="offline"><?=uiIcon("folder")?> Musik di perangkat</button></div></section>
  <div class="quick-picks" id="homeQuickPicks"></div>
  <div class="stat-grid compact-stats" id="statGrid"></div>
  <div id="homeCatalogShelves"></div>
  <section class="section home-shelf" id="homeRecentSection"><div class="section-head"><div><span class="eyebrow">KEMBALI LAGI</span><h2>Recently played</h2></div><button class="text-btn" data-view-target="history">Riwayat</button></div><div class="card-grid shelf-scroll" id="homeRecent"></div></section>
  <section class="section home-shelf" id="homeTopSection"><div class="section-head"><div><span class="eyebrow">HEAVY ROTATION</span><h2>Paling sering Anda putar</h2></div><button class="text-btn" data-view-target="top">Lihat semua</button></div><div class="card-grid shelf-scroll" id="homeTop"></div></section>
  <section class="section home-empty hidden" id="homeEmpty"><div class="guest-gate"><div class="guest-gate-icon"><?=uiIcon("search")?></div><h3>Mulai dari pencarian</h3><p>Cari judul lagu, artis, video musik, live, cover, konser, atau full album.</p><button class="primary-btn" id="homeEmptySearch"><?=uiIcon("search")?> Buka pencarian</button></div></section>
 </div>
 <div class="view" id="searchView"><section class="section"><div class="section-head"><div><span class="eyebrow">SMART SEARCH</span><h2 id="searchTitle">Cari semuanya</h2><small>Cari lagu dan katalog musik secara instan; hasil video umum ikut ditambahkan saat YouTube Data API dikonfigurasi.</small></div></div><div id="recentSearches" class="chips"></div><div class="search-controls"><div class="search-type-tabs" aria-label="Jenis hasil"><button class="active" data-search-type="all">Semua</button><button data-search-type="song">Lagu</button><button data-search-type="video">Video</button></div><div class="search-sort-tabs" aria-label="Urutan hasil"><button class="active" data-search-sort="relevance">Paling relevan</button><button data-search-sort="popular">Paling populer</button></div></div><div id="searchIntent" class="smart-intent hidden"></div><div id="searchSuggestions" class="chips smart-suggestions"></div><div id="searchCatalogEntities" class="catalog-entity-grid"></div><div id="searchStatus" class="status-card">Coba ketik: Helena - My Che...</div><div id="searchResults" class="track-list"></div></section></div>
 <div class="view" id="mixView"><section class="section"><div class="section-head"><div><span class="eyebrow">DIBUAT UNTUK ANDA</span><h2>Reca Mix</h2><small>Campuran dari Liked Songs dan kebiasaan dengar Anda.</small></div><button id="refreshMix" class="text-btn">Acak ulang</button></div><div id="mixResults" class="track-list"></div></section></div>
 <div class="view" id="discoverView"><section class="section"><div class="section-head"><div><span class="eyebrow">REKOMENDASI PERSONAL</span><h2>Discover</h2><small>Berdasarkan artis dan lagu yang sering Anda dengarkan.</small></div><button id="refreshDiscover" class="text-btn">Refresh</button></div><div id="discoverResults" class="track-list"></div></section></div>
 <div class="view" id="catalogDetailView"><section class="section"><button class="back-btn" id="catalogBack"><?=uiIcon("back")?> Kembali</button><div class="playlist-hero catalog-hero"><div class="playlist-cover" id="catalogDetailCover"><?=uiIcon("music","placeholder-icon")?></div><div><span class="eyebrow" id="catalogDetailType">KATALOG</span><h2 id="catalogDetailTitle">-</h2><p id="catalogDetailSubtitle"></p><p class="catalog-description" id="catalogDetailDescription"></p><div class="hero-actions"><button id="catalogPlayAvailable" class="primary-btn"><?=uiIcon("play")?> Putar</button></div></div></div><div id="catalogDetailEntities" class="catalog-entity-grid"></div><div id="catalogDetailTracks" class="track-list"></div></section></div>
 <div class="view" id="offlineView"><section class="section"><div class="section-head"><div><span class="eyebrow">MUSIK DI PERANGKAT</span><h2>Offline Library</h2><small>Pilih satu folder musik dan Reca-play akan membaca seluruh audio di dalamnya, termasuk subfolder yang didukung browser.</small></div><div class="offline-actions"><button id="chooseOfflineFolderBtn" class="primary-btn"><?=uiIcon("folder")?> Pilih folder musik</button><button id="importOfflineBtn" class="text-btn"><?=uiIcon("plus")?> Pilih file</button><button id="refreshOfflineBtn" class="text-btn">Refresh</button></div></div><input id="offlineFolderInput" type="file" accept="audio/*,.mp3,.m4a,.aac,.ogg,.opus,.wav,.flac" webkitdirectory directory multiple hidden><input id="offlineFileInput" type="file" accept="audio/*,.mp3,.m4a,.aac,.ogg,.opus,.wav,.flac" multiple hidden><div class="offline-summary"><div><strong id="offlineCount">0 lagu</strong><span id="offlineStorage">Menghitung penyimpanan…</span></div><div><strong id="offlineFolderCount">0 folder</strong><span>Disimpan lokal di browser/perangkat</span></div><div class="offline-badge">DEVICE ONLY</div></div><div id="offlineFolderChips" class="folder-chips"></div><div class="offline-notice"><strong>Folder musik lokal.</strong><span>File tidak diunggah ke server. Browser memberikan akses hanya setelah Anda memilih folder. Memilih folder yang sama lagi akan memperbarui koleksi tanpa menggandakan file yang sama.</span></div><div id="offlineResults" class="track-list"></div></section></div>
 <div class="view" id="likedView"><section class="section"><div class="section-head"><div><span class="eyebrow">KOLEKSI</span><h2>Liked Songs</h2></div><button id="playLiked" class="text-btn"><?=uiIcon("play")?> Putar semua</button></div><div id="likedResults" class="track-list"></div></section></div>
 <div class="view" id="historyView"><section class="section"><div class="section-head"><div><span class="eyebrow">AKTIVITAS</span><h2>Recently Played</h2></div><button id="clearHistory" class="text-btn danger">Hapus history</button></div><div id="historyResults" class="track-list"></div></section></div>
 <div class="view" id="topView"><section class="section"><div class="section-head"><div><span class="eyebrow">CHART PRIBADI</span><h2>Top Tracks</h2></div><div class="period-tabs"><button data-days="7">7 hari</button><button class="active" data-days="30">30 hari</button><button data-days="365">1 tahun</button><button data-days="0">Semua</button></div></div><div id="topResults" class="track-list ranked"></div></section></div>
 <div class="view" id="artistsView"><section class="section"><div class="section-head"><div><span class="eyebrow">DARI LIKED SONGS</span><h2>Artis Anda</h2></div></div><div id="artistsGrid" class="group-grid"></div></section></div>
 <div class="view" id="albumsView"><section class="section"><div class="section-head"><div><span class="eyebrow">DARI LIKED SONGS</span><h2>Album Anda</h2></div></div><div id="albumsGrid" class="group-grid"></div></section></div>
 <div class="view" id="playlistsView"><section class="section"><div class="section-head"><div><span class="eyebrow">KOLEKSI PRIBADI</span><h2>Playlist</h2></div><button id="newPlaylistBtn2" class="text-btn"><?=uiIcon("plus")?> Playlist baru</button></div><div id="playlistGrid" class="playlist-grid"></div></section></div>
 <div class="view" id="playlistDetailView"><section class="section"><button class="back-btn" data-view-target="playlists"><?=uiIcon("back")?> Kembali</button><div class="playlist-hero"><div class="playlist-cover" id="playlistCover"><?=uiIcon("music","placeholder-icon")?></div><div><span class="eyebrow">PLAYLIST</span><h2 id="playlistTitle">Playlist</h2><p id="playlistDescription"></p><div class="hero-actions"><button id="playPlaylist" class="primary-btn"><?=uiIcon("play")?> Putar</button><button id="deletePlaylist" class="text-btn danger">Hapus playlist</button></div></div></div><div id="playlistTracks" class="track-list"></div></section></div>
 <div class="view" id="groupDetailView"><section class="section"><button class="back-btn" id="groupBack"><?=uiIcon("back")?> Kembali</button><div class="section-head"><div><span class="eyebrow" id="groupEyebrow">LIBRARY</span><h2 id="groupTitle">-</h2></div><button id="playGroup" class="text-btn"><?=uiIcon("play")?> Putar semua</button></div><div id="groupTracks" class="track-list"></div></section></div>
</section>
</main>

<aside class="queue-panel" id="queuePanel"><div class="queue-head"><div><span class="eyebrow">ANTREAN</span><h3>Berikutnya</h3></div><button class="icon-btn" id="closeQueue"><?=uiIcon("close")?></button></div><div id="queueList" class="queue-list"></div></aside>
</div>

<footer class="player" id="bottomPlayer" title="Buka Now Playing">
 <div class="now-track"><img id="playerThumb" src="assets/placeholder.svg"><div class="now-meta"><strong id="playerTitle">Belum ada lagu</strong><span id="playerArtist">Pilih lagu untuk mulai</span><a id="playerProvider" class="provider-credit hidden" href="#" target="_blank" rel="noopener noreferrer">Sumber track</a></div><button class="like-btn" id="likeCurrent" title="Liked Songs"><?=uiIcon("heart")?></button><button class="share-mini" id="offlineCurrent" title="Simpan / kelola offline"><?=uiIcon("download")?></button><button class="share-mini" id="shareCurrent" title="Bagikan lagu"><?=uiIcon("share")?></button></div>
 <div class="player-center"><div class="controls"><button id="shuffleBtn" title="Shuffle"><?=uiIcon("shuffle")?></button><button id="prevBtn" title="Sebelumnya"><?=uiIcon("prev")?></button><button class="play-control" id="playBtn" title="Putar"><?=uiIcon("play")?></button><button id="nextBtn" title="Berikutnya"><?=uiIcon("next")?></button><button id="repeatBtn" title="Repeat"><?=uiIcon("repeat")?></button></div><div class="progress-row"><span id="currentTime">0:00</span><input type="range" id="progress" min="0" max="1000" value="0"><span id="duration">0:00</span></div></div>
 <div class="player-extra"><button class="icon-btn" id="queueBtn" title="Antrean"><?=uiIcon("queue")?></button><span class="volume-icon"><?=uiIcon("volume")?></span><input type="range" id="volume" min="0" max="100" value="80"></div>
</footer>

<div class="now-playing-screen" id="nowPlayingScreen" aria-hidden="true">
  <div class="now-playing-bg" id="nowPlayingBg"></div>
  <div class="now-playing-shade"></div>
  <div class="now-playing-inner">
    <header class="np-header"><button class="np-icon-btn" id="npClose" title="Kecilkan"><?=uiIcon("chevron-down")?></button><div><span>SEDANG DIPUTAR</span><strong id="npContext">Reca-play</strong></div><button class="np-icon-btn" id="npMore" title="Bagikan"><?=uiIcon("share")?></button></header>
    <main class="np-main">
      <div class="np-visual">
        <div class="np-artwork" id="npArtworkShell"><img id="npArtwork" src="assets/placeholder.svg" alt="Artwork"></div>
        <div class="np-video-shell hidden" id="npVideoShell"><div id="youtubePlayerHost"></div></div>
      </div>
      <section class="np-info"><div class="np-title-row"><div><h1 id="npTitle">Belum ada lagu</h1><p id="npArtist">Pilih lagu untuk mulai</p><small id="npMeta"></small></div><button class="np-like" id="npLike" title="Liked Songs"><?=uiIcon("heart")?></button></div>
      <div class="np-progress"><input type="range" id="npProgress" min="0" max="1000" value="0"><div><span id="npCurrentTime">0:00</span><span id="npDuration">0:00</span></div></div>
      <div class="np-controls"><button id="npShuffle" title="Shuffle"><?=uiIcon("shuffle")?></button><button id="npPrev" title="Sebelumnya"><?=uiIcon("prev")?></button><button class="np-play" id="npPlay" title="Putar"><?=uiIcon("play")?></button><button id="npNext" title="Berikutnya"><?=uiIcon("next")?></button><button id="npRepeat" title="Repeat"><?=uiIcon("repeat")?></button></div>
      <div class="np-actions"><button id="npQueue"><?=uiIcon("queue")?><span>Antrean</span></button><button id="npShare"><?=uiIcon("share")?><span>Bagikan</span></button></div>
      <div class="np-lyrics"><div><strong>Lirik</strong><span>Panel lirik Reca-play</span></div><p>Lirik akan tampil di sini bila sumber lirik yang sesuai tersedia.</p></div>
      </section>
    </main>
  </div>
</div>

<div class="modal-backdrop" id="playlistModal"><div class="modal"><button class="modal-close" data-close-modal><?=uiIcon("close")?></button><span class="eyebrow">PLAYLIST</span><h3 id="modalTitle">Tambah ke playlist</h3><div id="playlistPicker"></div><form id="createPlaylistForm"><input id="playlistNameInput" maxlength="150" placeholder="Nama playlist" required><button class="primary-btn" type="submit">Buat playlist</button></form></div></div>

<div class="modal-backdrop" id="shareModal"><div class="modal share-modal"><button class="modal-close" data-close-share><?=uiIcon("close")?></button><span class="eyebrow">NOW PLAYING</span><h3>Bagikan lagu</h3><div class="share-track"><img id="shareThumb" src="assets/placeholder.svg"><div><strong id="shareTitle">-</strong><span id="shareArtist">-</span></div></div><div class="share-grid"><button id="nativeShareBtn" class="share-btn primary-share"><?=uiIcon("share")?> Share</button><button data-share="whatsapp" class="share-btn">WhatsApp</button><button data-share="facebook" class="share-btn">Facebook</button><button data-share="x" class="share-btn">X</button><button data-share="telegram" class="share-btn">Telegram</button><button data-share="copy" class="share-btn">Copy Link</button></div><small>Instagram dan aplikasi lain dapat dipilih melalui tombol Share pada perangkat yang mendukung native share.</small></div></div>


<div class="modal-backdrop" id="qualityModal"><div class="modal quality-modal"><button class="modal-close" data-close-quality><?=uiIcon("close")?></button><span class="eyebrow">PENGATURAN AUDIO</span><h3>Kualitas streaming</h3><p class="quality-intro">Pilih preferensi kualitas seperti pada aplikasi streaming musik. Reca-play menyimpan pilihan Anda di perangkat ini.</p><div class="quality-options" id="qualityOptions">
  <button class="quality-option" data-quality="auto"><div><strong>Automatic</strong><span>Menyesuaikan koneksi dan kondisi playback.</span></div><b>Disarankan</b></button>
  <button class="quality-option" data-quality="data_saver"><div><strong>Data Saver</strong><span>Preferensi penggunaan data serendah mungkin.</span></div><b>Hemat data</b></button>
  <button class="quality-option" data-quality="normal"><div><strong>Normal</strong><span>Preferensi seimbang untuk penggunaan harian.</span></div><b>Normal</b></button>
  <button class="quality-option" data-quality="high"><div><strong>High</strong><span>Preferensi kualitas lebih tinggi saat koneksi memadai.</span></div><b>High</b></button>
  <button class="quality-option" data-quality="very_high"><div><strong>Very High</strong><span>Preferensi kualitas tertinggi yang tersedia.</span></div><b>Very High</b></button>
</div><div class="quality-fact"><strong>Kualitas streaming:</strong> pilihan ini disimpan sebagai preferensi Reca-play. Format aktual mengikuti sumber audio yang tersedia; player menampilkan format yang berhasil diputar.</div><div class="quality-live"><span>Format playback</span><strong id="actualQuality">Otomatis</strong></div></div></div>

<div class="modal-backdrop" id="offlineModal"><div class="modal offline-modal"><button class="modal-close" data-close-offline><?=uiIcon("close")?></button><span class="eyebrow">OFFLINE</span><h3 id="offlineModalTitle">Dengarkan tanpa internet</h3><div class="offline-modal-icon"><?=uiIcon("download")?></div><p id="offlineModalText">Konten dari layanan streaming tidak diunduh atau diekstrak oleh Reca-play. Untuk mendengarkan offline, import file audio yang Anda miliki atau berhak gunakan. File disimpan hanya pada perangkat/browser ini.</p><div class="offline-modal-actions"><button id="offlineModalDownload" class="primary-btn hidden">Download file</button><button id="offlineModalImport" class="primary-btn"><?=uiIcon("plus")?> Import audio</button><button id="offlineModalOpen" class="text-btn">Buka Offline Library</button></div><small>Jika penyimpanan browser dibersihkan, file offline dapat ikut terhapus. Reca-play akan meminta persistent storage bila browser mendukungnya.</small></div></div>

<audio id="audioPlayer" preload="metadata" playsinline></audio>
<div id="toast" class="toast"></div>
<script>window.RM_BOOT=<?=json_encode($boot,JSON_UNESCAPED_UNICODE|JSON_UNESCAPED_SLASHES)?>;</script>
<?php if ($clientReady): ?><script src="https://accounts.google.com/gsi/client" async defer></script><?php endif; ?>
<script src="assets/app.js?v=4.6.0"></script>
<script>if('serviceWorker' in navigator){window.addEventListener('load',()=>navigator.serviceWorker.register('sw.js').catch(()=>{}));}</script>
</body></html>
