{% extends "base.html" %}
{% block title %}diora — Radio{% endblock %}

{% block content %}

<!-- ===== NOW PLAYING BAR ===== -->
<section class="now-playing-bar" id="now-playing-bar">
  <div class="now-playing-info">
    <span class="now-playing-station" id="now-playing-station">— kein Sender —</span>
    <span class="now-playing-track" id="now-playing-track"></span>
  </div>
  <div class="now-playing-controls">
    <button class="btn btn-play" id="play-stop-btn" onclick="togglePlayStop()" style="display:none;">&#9654; Abspielen</button>
    <label class="volume-label">
      <span>Lautst.</span>
      <input type="range" id="volume" min="0" max="255" value="102" class="volume-slider">
      <input type="number" id="volume-num" min="0" max="255" value="102" class="volume-num">
    </label>
    <button class="btn btn-save" id="save-station-btn" style="display:none;" onclick="saveCurrentStation()">&#9733; Speichern</button>
    <button class="btn-icon" id="creamfresh-vote-up-btn" style="display:none;" onclick="creamfreshVote('up')" title="Gefällt mir">&#128077;</button>
    <button class="btn-icon" id="creamfresh-vote-down-btn" style="display:none;" onclick="creamfreshVote('down')" title="Gefällt mir nicht">&#128078;</button>
    <button class="btn-icon" id="dnd-btn" onclick="toggleDND()" title="Fokusmodus (blendet die Oberfläche aus, Esc beendet ihn)">⊙</button>
    <button class="btn-icon" id="focus-station-btn" onclick="openRadioSidebar()" title="Radio">◉</button>
  </div>
  <div class="timer-widget" id="timer-widget">
    <span class="timer-phase" id="timer-phase-label">Fokus</span>
    <span class="timer-display" id="timer-display">25:00</span>
    <button class="btn-icon" id="timer-toggle-btn" onclick="toggleTimer()" title="Timer starten/anhalten">▶</button>
    <button class="btn-icon" id="timer-reset-btn" onclick="resetTimer()" title="Timer zurücksetzen">↺</button>
    <span class="focus-today" id="focus-today-widget" style="display:none;"></span>
    <button class="btn-icon dnd-only" id="dnd-light-btn" onclick="toggleDNDLight()" title="Schwarzer Hintergrund an/aus">☼</button>
  </div>
</section>

<!-- ===== AFFILIATE / TRACK INFO ===== -->
<section class="affiliate-section" id="affiliate-section" style="display:none;"{% if not amazon_enabled %} data-disabled="true"{% endif %}>
  <img class="affiliate-artwork" id="affiliate-artwork" src="" alt="Albumcover">
  <div class="affiliate-info">
    <div class="affiliate-track" id="affiliate-track-name"></div>
    <div class="affiliate-artist" id="affiliate-artist-name"></div>
    <div class="affiliate-album" id="affiliate-album-name"></div>
    <a class="btn btn-amazon" id="affiliate-amazon-link" href="#" target="_blank" rel="noopener noreferrer">
      Bei Amazon Music kaufen
    </a>
  </div>
</section>

<!-- ===== TABS ===== -->
<div class="tabs" id="tabs">
  {# Order = app.js TOP_TABS. Home needs an account: hidden, but kept in place for the order. #}
  <button class="tab-btn" onclick="showTab('home')"{% if not user.is_authenticated %} style="display:none;"{% endif %}>Home</button>
  <button class="tab-btn active" onclick="showTab('radio')">Radio</button>
  <button class="tab-btn" onclick="showTab('focus')">Fokus</button>
  <button class="tab-btn" onclick="showTab('podcasts')">Podcasts</button>
  <button class="tab-btn" onclick="showTab('books')">Bücher</button>
  <button class="tab-btn" onclick="showTab('feeds')"{% if not user.is_authenticated %} style="display:none;"{% endif %}>Feeds</button>
  <button class="tab-btn" onclick="showTab('ambient')">Ambient</button>
</div>

<!-- ===== RADIO TAB ===== -->
<section class="tab-panel" id="tab-radio">
  <div class="tabs sub-tabs" id="radio-sub-tabs">
    <button class="tab-btn" onclick="showRadioTab('search')">Suche</button>
    <button class="tab-btn active" onclick="showRadioTab('saved')">Gespeichert</button>
    <button class="tab-btn" onclick="showRadioTab('history')">Verlauf</button>
  </div>

  <!-- ===== SEARCH SUB-PANEL ===== -->
  <div class="sub-tab-panel" id="tab-search" style="display:none;">
    <div class="search-bar">
      <input type="text" id="search-input" class="search-input" placeholder="Auf radio-browser.info suchen … oder Stream-Adresse einfügen" onkeydown="if(event.key==='Enter') doSearch()">
      <button class="btn" onclick="doSearch()">Suchen</button>
    </div>
    <div class="mood-chips" id="mood-chips"></div>
    <div id="curated-lists" class="curated-lists-container"></div>
    <div id="search-status" class="status-msg"></div>
    <table class="data-table" id="search-results-table" style="display:none;">
      <thead>
        <tr>
          <th>Name</th>
          <th>Bitrate</th>
          <th>Land</th>
          <th>Tags</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="search-results-body"></tbody>
    </table>
  </div>

  <!-- ===== SAVED SUB-PANEL ===== -->
  <div class="sub-tab-panel" id="tab-saved">
    {% if featured_stations %}
    <div class="featured-section">
      <p class="featured-label">&#9733; Empfohlen</p>
      <ul class="featured-list">
        {% for s in featured_stations %}
        <li>
          {% if s.favicon_url %}<img src="{{ s.favicon_url }}" class="station-favicon" alt="">{% endif %}
          <button class="btn btn-sm" onclick="playStation('{{ s.url|escapejs }}', '{{ s.name|escapejs }}', null)">
            &#9654; {{ s.name }}
          </button>
          {% if s.description %}<span class="muted">{{ s.description }}</span>{% endif %}
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endif %}
    {% if user.is_authenticated %}
      <div id="recommendations" class="recommendations-section">
        <!-- populated by JS -->
      </div>
      <div class="import-bar">
        <label class="btn btn-sm" for="m3u-file-input" title=".m3u / .m3u8 aus der Desktop-App importieren">
          &#8679; M3U importieren
        </label>
        <input type="file" id="m3u-file-input" accept=".m3u,.m3u8" style="display:none;" onchange="importM3U(this)">
        <span id="import-status" class="muted"></span>
      </div>
      <table class="data-table" id="saved-table">
        <thead>
          <tr>
            <th title="Favorit">&#9733;</th>
            <th>Name</th>
            <th>Bitrate</th>
            <th>Land</th>
            <th title="Notizen">✎</th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody id="saved-tbody">
          {% for station in saved_stations %}
          <tr id="saved-row-{{ station.id }}" data-id="{{ station.id }}" data-url="{{ station.url }}" data-name="{{ station.name }}">
            <td>
              <button class="btn-icon fav-btn {% if station.is_favorite %}active{% endif %}"
                      onclick="toggleFav({{ station.id }})"
                      title="Favorit an/aus">&#9733;</button>
            </td>
            <td class="station-name-cell">{{ station.name }}</td>
            <td>{{ station.bitrate }}</td>
            <td>{{ station.country }}</td>
            <td class="notes-cell" onclick="editNotes({{ station.id }}, this.textContent.trim())" title="{{ station.notes|default:'' }}" style="cursor:pointer; color:#666; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ station.notes }}</td>
            <td>
              <button class="btn btn-sm"
                      onclick="playStation('{{ station.url }}', '{{ station.name|escapejs }}', {{ station.id }})">
                &#9654; Abspielen
              </button>
            </td>
            <td>
              <button class="btn btn-sm btn-danger"
                      onclick="removeStation({{ station.id }})">
                Entfernen
              </button>
            </td>
          </tr>
          {% empty %}
          <tr id="saved-empty-row"><td colspan="7" class="empty-msg">Noch keine gespeicherten Sender.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    {% else %}
      <p class="auth-prompt">
        <a href="{% url 'login' %}">Anmelden</a> oder <a href="{% url 'register' %}">registrieren</a>,
        um Sender zu speichern und zwischen Geräten abzugleichen.
      </p>
    {% endif %}
  </div>

  <!-- ===== HISTORY SUB-PANEL ===== -->
  <div class="sub-tab-panel" id="tab-history" style="display:none;">
    <table class="data-table" id="history-table">
      <thead>
        <tr>
          <th>Zeit</th>
          <th>Sender</th>
          <th>Titel</th>
          <th>&#9836;</th>
          <th></th>
        </tr>
      </thead>
      <tbody id="history-tbody">
        {% for entry in history %}
        <tr data-id="{{ entry.id }}">
          <td class="history-time">{{ entry.played_at|slice:":16"|cut:"T" }}</td>
          <td>{{ entry.station_name }}</td>
          <td>{{ entry.track }}</td>
          <td>{% if entry.scrobbled %}<span title="An Last.fm gescrobbelt">&#10003;</span>{% endif %}</td>
          <td><button class="btn-delete-history" onclick="deleteHistoryEntry({{ entry.id }}, this)" title="Entfernen">✕</button></td>
        </tr>
        {% empty %}
        <tr id="history-empty-row"><td colspan="5" class="empty-msg">Noch kein Verlauf.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</section>

<!-- ===== FOCUS TAB ===== -->
<section class="tab-panel" id="tab-focus" style="display:none;">
  <table class="data-table" id="focus-table">
    <thead>
      <tr>
        <th>Zeit</th>
        <th>Sender</th>
        <th>Dauer</th>
      </tr>
    </thead>
    <tbody id="focus-tbody">
      <tr><td colspan="3" class="empty-msg">Noch keine Fokus-Sitzungen. Starte den Timer!</td></tr>
    </tbody>
  </table>
</section>

<!-- ===== PODCASTS TAB ===== -->
<section class="tab-panel" id="tab-podcasts" style="display:none;">
  {% if user.is_authenticated %}
  {# Filled by static/js/podcasts-web.js with the app's podcast page (static/podcasts/). #}
  <p class="muted dpw-loading">Podcasts werden geladen …</p>
  {% else %}
  <p class="auth-prompt">
    <a href="{% url 'login' %}">Anmelden</a> oder <a href="{% url 'register' %}">registrieren</a>,
    um Podcasts zu abonnieren.
  </p>
  {% endif %}
</section>

<!-- ===== BOOKS TAB ===== -->
<section class="tab-panel" id="tab-books" style="display:none;">
  {% if user.is_authenticated %}
  <div id="book-upload-area">
    <div class="book-drop-zone" id="book-drop-zone">
      <span>.epub oder .pdf hierher ziehen oder <label for="book-file-input" style="cursor:pointer;text-decoration:underline;">auswählen</label></span>
      <input type="file" id="book-file-input" accept=".epub,.pdf" style="display:none;" onchange="bookFileSelected(this)">
      <span id="book-upload-status" class="muted"></span>
    </div>
    <button type="button" class="btn" style="margin:0.5rem 0;" onclick="toggleCloudImport()">☁ Aus Cloud importieren</button>
    <div id="cloud-browser" class="cloud-browser" style="display:none;">
      <div class="cloud-browser-head">
        <select id="cloud-source-select" onchange="_onCloudSourceChange(this.value)"></select>
        <button type="button" class="btn" onclick="closeCloudImport()">Schließen</button>
      </div>
      <div id="cloud-path" class="cloud-path"></div>
      <ul id="cloud-entries" class="cloud-entries"></ul>
      <span id="cloud-status" class="muted"></span>
    </div>
  </div>
  <label class="book-list-filter">
    <input type="checkbox" id="book-show-read-toggle" onchange="_onBookShowReadToggle(this.checked)">
    Gelesene Bücher anzeigen
  </label>
  <div id="book-list" class="book-list"></div>
  {% else %}
  <p class="auth-prompt">
    <a href="{% url 'login' %}">Anmelden</a> oder <a href="{% url 'register' %}">registrieren</a>,
    um den verschlüsselten E-Book-Reader zu nutzen.
  </p>
  {% endif %}
</section>

<!-- ===== HOME TAB ===== -->
{% comment %}Filled by static/js/home.js: the book in reading, the next episode, stations, Ambient.{% endcomment %}
<section class="tab-panel" id="tab-home" style="display:none;"></section>

<!-- ===== FEEDS TAB ===== -->
{% comment %}The feed reader, news and blogs: filled by static/js/feeds.js.{% endcomment %}
<section class="tab-panel" id="tab-feeds" style="display:none;"></section>

<!-- ===== AMBIENT TAB ===== -->
{% comment %}"Drift", a generative ambient synthesizer (static/ambient/), in a frame of its own: its
   script and styles stay apart from the page's. Loaded the first time the tab opens.{% endcomment %}
<section class="tab-panel" id="tab-ambient" style="display:none;">
  <iframe id="ambient-frame" class="ambient-frame" title="Ambient" allow="autoplay; clipboard-write"
          data-src="/static/ambient/index.html?embed=1&amp;bg=%23000000"></iframe>
</section>

<!-- ===== READER OVERLAY ===== -->
<div id="reader-overlay" class="reader-overlay" style="display:none;">
  <div class="reader-header">
    <span id="reader-title" class="reader-title"></span>
    <div class="reader-header-actions">
      <span class="reader-progress-wrap">
        <input type="text" inputmode="decimal" id="reader-progress-input" class="volume-num" value="0" style="display:none;">
        <span id="reader-progress-suffix" class="muted"></span>
      </span>
      <button class="btn-icon" id="reader-search-btn"   onclick="toggleReaderSearch()"        title="Suchen">⌕</button>
      <button class="btn-icon" id="reader-settings-btn" onclick="toggleSettingsPanel()"        title="Schrift &amp; Layout">⚙</button>
      <select id="reader-tts-lang" class="tts-lang-select" title="Vorlese-Sprache" onchange="setTtsLang(this.value)">
        <option value="de">DE</option>
        <option value="en">EN</option>
      </select>
      <button class="btn-icon" id="reader-tts-btn"      onclick="toggleReadAloud()"           title="Vorlesen">▶</button>
      <button class="btn-icon" id="reader-bookmark-btn" onclick="addBookmark()"               title="Lesezeichen setzen">★</button>
      <button class="btn-icon" id="reader-bm-list-btn"  onclick="openBookmarksSidebar()"      title="Lesezeichen">▤</button>
      <button class="btn-icon" id="reader-toc-btn"      onclick="openTocSidebar()"            title="Inhaltsverzeichnis">≡</button>
      <button class="btn-icon" id="reader-margin-btn"   onclick="toggleAnnotationsMargin()"   title="Notizen &amp; Markierungen">✎</button>
      <button class="btn-icon marker-mode-btn reader-marker-btn-mobile" id="reader-marker-btn-mobile" onclick="toggleMarkerMode()" title="Text markieren">✒</button>
      <button class="btn-icon" id="reader-reset-pos-btn" onclick="saveReaderProgress(true)"   title="Diese Position als Lesefortschritt setzen (überschreibt gespeicherten Fortschritt)">⚑</button>
      <button class="btn-icon" onclick="closeReader()"  title="Schließen (Esc)">✕</button>
    </div>
  </div>
  <div id="reader-body-row" class="reader-body-row">
    <aside id="reader-margin" class="reader-margin">
      <div class="reader-margin-header">
        <span class="reader-margin-title">Notizen</span>
        <span class="reader-margin-header-actions">
          <button class="btn-icon marker-mode-btn" id="reader-marker-btn" onclick="toggleMarkerMode()" title="Text markieren">✒</button>
          <button class="btn-icon" id="reader-margin-list-btn"   onclick="openAnnotationsSidebar()"  title="Alle Markierungen &amp; Notizen auflisten und hinspringen">▦</button>
          <button class="btn-icon" id="reader-margin-export-btn" onclick="exportAnnotations()"       title="Als Textdatei exportieren">⭳</button>
        </span>
      </div>
      <div id="reader-margin-markers" class="reader-margin-markers"></div>
    </aside>
    <div id="reader-content" class="reader-content"></div>
  </div>
</div>

<!-- ===== SIDEBAR ===== -->
<div id="sidebar-overlay" class="sidebar-overlay" onclick="closeSidebar()" style="display:none;"></div>
<aside id="sidebar" class="sidebar">
  <div class="sidebar-header">
    <span id="sidebar-title" class="sidebar-title"></span>
    <button class="btn-icon sidebar-close" onclick="closeSidebar()" title="Schließen">✕</button>
  </div>
  <div id="sidebar-body" class="sidebar-body"></div>
</aside>

<!-- ===== MODAL DIALOG (replaces native alert/confirm/prompt) ===== -->
<div id="modal-overlay" class="modal-overlay" style="display:none;"></div>
<div id="modal-dialog" class="modal-dialog" style="display:none;" role="alertdialog" aria-modal="true">
  <p id="modal-message" class="modal-message"></p>
  <input type="text" id="modal-input" class="search-input modal-input" style="display:none;">
  <div class="modal-actions">
    <button type="button" id="modal-cancel-btn" class="btn" style="display:none;">Abbrechen</button>
    <button type="button" id="modal-ok-btn" class="btn btn-primary">OK</button>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script>
  // Pass Django context into JS
  const INITIAL_SAVED = {{ saved_stations_json|safe }};
  const INITIAL_FEATURED = {{ featured_stations_json|safe }};
  const IS_AUTHENTICATED = {{ user.is_authenticated|yesno:"true,false" }};
  window.USER_ID = {{ user.id|default:"null" }};
  let USER_FOCUS_STATION = {{ focus_station_json|safe }};
</script>
<script src="/static/js/app.js"></script>
<script src="/static/js/podcasts-web.js"></script>
<script src="/static/js/home.js"></script>
<script src="/static/js/feeds.js"></script>
{% endblock %}