{% extends "base.html" %} {% block title %}Integrationen — AniWorld Downloader{% endblock %}
{% block styles %}
<link rel="stylesheet" href="{{ url_for('static', filename='integrations.css') }}">{% endblock %}
{% block content %}
<div class="settings-container">
  <div class="page-header integ-page-header">
    <h1 class="page-title">Integrationen</h1>
    <p class="page-subtitle">Externe Dienste verbinden</p>
  </div>

  <!-- Tab Navigation -->
  <div class="settings-tabs" id="integTabs">
    <button class="settings-tab active" data-tab="seerr" onclick="switchIntegTab('seerr')">Seerr</button>
    <button class="settings-tab" data-tab="mediaplayer" onclick="switchIntegTab('mediaplayer')">Mediaplayer</button>
    <button class="settings-tab" data-tab="cineinfo" onclick="switchIntegTab('cineinfo')">CineInfo</button>
  </div>

  <!-- ══════════════════════════════════════════════════════
       Tab: Seerr
  ══════════════════════════════════════════════════════ -->
  <div class="settings-tab-panel active" id="tab-seerr">
    <div class="settings-section">
      <h2>Seerr Integration</h2>
      <div class="settings-hint integ-hint-border">
        Verbinde AniWorld Downloader mit deiner <strong>Jellyseerr</strong>- oder <strong>Overseerr</strong>-Instanz.
        Ausstehende Anfragen erscheinen dann unter „Seerr Anfragen".
      </div>
      <div class="integ-input-row">
        <div class="settings-field">
          <label class="settings-field-label">Seerr URL</label>
          <input type="text" id="seerrUrl" placeholder="http://192.168.1.100:5055" />
        </div>
        <div class="settings-field">
          <label class="settings-field-label">API Key</label>
          <input type="password" id="seerrApiKey" placeholder="Einstellungen → Allgemein" />
        </div>
        <button onclick="saveSeerrSettings()">Speichern</button>
      </div>
    </div>
  </div><!-- /tab-seerr -->

  <!-- ══════════════════════════════════════════════════════
       Tab: Mediaplayer (Jellyfin / Plex + MediaScan)
  ══════════════════════════════════════════════════════ -->
  <div class="settings-tab-panel" id="tab-mediaplayer">

    <!-- ===== Jellyfin / Plex ===== -->
    <div class="settings-section">
      <h2>
        Mediaplayer
        <span class="section-badge integ-jf-badge">Jellyfin / Plex</span>
      </h2>
      <div class="settings-hint integ-hint-sep">
        Nach jedem abgeschlossenen Download wird automatisch ein Library-Refresh auf dem gewählten Server ausgelöst.
      </div>

      <!-- Dienst -->
      <div class="integ-form-row integ-border-b">
        <div class="integ-form-row-inner">
          <div class="integ-label-group">
            <div class="integ-label">Dienst</div>
            <div class="integ-desc">Welchen Mediaserver soll AniWorld ansprechen?</div>
          </div>
          <div class="integ-control-group">
            <select id="mediaplayerType" class="integ-select" onchange="onMediaplayerTypeChange()">
              <option value="">— Deaktiviert —</option>
              <option value="jellyfin">Jellyfin</option>
              <option value="plex">Plex</option>
            </select>
            <button onclick="saveMediaplayerSettings()" id="mediaplayerSaveBtn">Speichern</button>
          </div>
        </div>
      </div>

      <!-- ── Jellyfin ────────────────────────────────────────────────── -->
      <div id="mediaplayerJellyfinFields" style="display:none;">
        <div class="integ-fields-grid integ-border-b">
          <div class="integ-field">
            <label class="settings-field-label">Server-URL</label>
            <input type="text" id="mediaplayerUrl" placeholder="192.168.1.100:8096" oninput="onJfUrlInput()" />
          </div>
          <div class="integ-field">
            <label class="settings-field-label">API Key</label>
            <input type="password" id="mediaplayerApikey" placeholder="API-Key eingeben" autocomplete="off" />
          </div>
        </div>
        <div class="integ-form-row integ-border-b">
          <div class="integ-form-row-inner integ-toggle-row">
            <div class="integ-label-group">
              <div class="integ-label">SSL / HTTPS</div>
              <div class="integ-desc">Aktivieren wenn dein Jellyfin über HTTPS erreichbar ist</div>
            </div>
            <label class="toggle"><input type="checkbox" id="mediaplayerSsl" onchange="onJfSslToggle()" /><span
                class="toggle-slider"></span></label>
          </div>
        </div>
        <div class="integ-hint-box">
          💡 Jellyfin-Dashboard → <strong>Erweitert → API-Keys → Erstellen</strong> → Key kopieren und hier einfügen.
        </div>
        <div class="integ-action-bar">
          <button class="btn btn-ghost" onclick="testMediaplayerConnection()" id="mediaplayerTestBtn">Verbindung testen</button>
          <button class="btn btn-ghost" onclick="triggerMediaScan()" id="mediaplayerScanBtn">Mediascan testen</button>
        </div>
        <div id="mediaplayerTestResult" class="integ-result-box" style="display:none;"></div>
      </div>

      <!-- ── Plex ─────────────────────────────────────────────────────── -->
      <div id="mediaplayerPlexFields" style="display:none;">
        <div class="integ-fields-grid integ-border-b">
          <div class="integ-field">
            <label class="settings-field-label">Server-URL</label>
            <input type="text" id="mediaplayerPlexUrl" placeholder="192.168.1.100:32400" oninput="onPlexUrlInput()" />
          </div>
        </div>
        <div class="integ-form-row integ-border-b">
          <div class="integ-form-row-inner integ-toggle-row">
            <div class="integ-label-group">
              <div class="integ-label">SSL / HTTPS</div>
              <div class="integ-desc">Aktivieren wenn dein Plex über HTTPS erreichbar ist</div>
            </div>
            <label class="toggle"><input type="checkbox" id="mediaplayerPlexSsl" onchange="onPlexSslToggle()" /><span
                class="toggle-slider"></span></label>
          </div>
        </div>
        <div class="integ-form-row integ-border-b">
          <div class="integ-form-row-inner integ-wrap">
            <div class="integ-label-group">
              <div class="integ-label">Plex Token</div>
              <div class="integ-desc">Über den Plex-Login automatisch abrufen</div>
            </div>
            <div class="integ-plex-token-ctrl">
              <span id="plexTokenBadge" class="integ-token-badge">Kein Token gespeichert</span>
              <button class="btn btn-ghost integ-plex-login-btn" onclick="startPlexOAuth()" id="plexLoginBtn">
                <svg viewBox="0 0 24 24" fill="currentColor" class="integ-icon-sm">
                  <path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z" />
                </svg>
                Mit Plex anmelden
              </button>
              <span id="plexOAuthStatus" class="integ-oauth-status" style="display:none;"></span>
            </div>
          </div>
          <input type="hidden" id="mediaplayerPlexApikey" />
        </div>
        <div class="integ-form-row integ-border-b">
          <div class="integ-form-row-inner integ-wrap">
            <div class="integ-label-group">
              <div class="integ-label">Bibliothek</div>
              <div class="integ-desc">Welche soll nach dem Download aktualisiert werden?</div>
            </div>
            <div class="integ-lib-ctrl">
              <select id="mediaplayerPlexSectionId" class="integ-select integ-lib-select">
                <option value="">Alle scannen</option>
              </select>
              <button class="btn btn-ghost" onclick="loadPlexLibraries()" id="plexLibLoadBtn" title="Bibliotheken laden">↻ Laden</button>
            </div>
          </div>
        </div>
        <div class="integ-action-bar">
          <button class="btn btn-ghost" onclick="testMediaplayerConnection()" id="mediaplayerTestBtn2">Verbindung testen</button>
          <button class="btn btn-ghost" onclick="triggerMediaScan()" id="mediaplayerScanBtn2">Mediascan testen</button>
        </div>
        <div id="mediaplayerTestResult2" class="integ-result-box" style="display:none;"></div>
      </div>
    </div>

    <!-- ===== MediaScan ===== -->
    <div class="settings-section">
      <h2>
        MediaScan
        <span class="section-badge integ-ms-badge">Plex / Jellyfin</span>
      </h2>
      <div class="settings-hint integ-hint-border">
        Erkennt ob eine Serie bereits in deiner <strong>Plex</strong>- oder
        <strong>Jellyfin</strong>-Mediathek vorhanden ist und zeigt das
        „✓&nbsp;Vorhanden"-Badge auf der Startseite entsprechend an.
        Verbindungsdaten werden automatisch aus der
        <strong>Mediaplayer</strong>-Integration übernommen.
      </div>

      <!-- Aktiv-Toggle -->
      <div class="integ-form-row integ-border-b">
        <div class="integ-form-row-inner integ-toggle-row">
          <div class="integ-label-group">
            <div class="integ-label">Aktivieren</div>
            <div class="integ-desc">Vorhanden-Erkennung über Mediathek statt Ordner-Scan</div>
          </div>
          <label class="toggle">
            <input type="checkbox" id="mediascanEnabled" onchange="onMediascanToggle()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <!-- Quelle -->
      <div id="mediascanFields" style="display:none;">
        <div class="integ-form-row integ-border-b">
          <div class="integ-form-row-inner">
            <div class="integ-label-group">
              <div class="integ-label">Quelle</div>
              <div class="integ-desc">Welche Mediathek soll für die Erkennung verwendet werden?</div>
            </div>
            <div class="integ-control-group">
              <select id="mediascanSource" class="integ-select" onchange="onMediascanSourceChange()">
                <option value="folders">📁 Ordner (Standard)</option>
                <option value="jellyfin">Jellyfin</option>
                <option value="plex">Plex</option>
              </select>
              <button onclick="saveMediascanSettings()">Speichern</button>
            </div>
          </div>
        </div>

        <!-- ── Jellyfin ── -->
        <div id="mediascanJellyfinFields" style="display:none;">
          <div class="integ-fields-grid integ-border-b">
            <div class="integ-field">
              <label class="settings-field-label">Server-URL</label>
              <input type="text" id="mediascanJfUrl" placeholder="192.168.1.100:8096" oninput="onMsJfUrlInput()" />
            </div>
            <div class="integ-field">
              <label class="settings-field-label">API Key</label>
              <input type="password" id="mediascanJfApikey" placeholder="API-Key eingeben" autocomplete="off" />
            </div>
          </div>
          <div class="integ-form-row integ-border-b">
            <div class="integ-form-row-inner integ-toggle-row">
              <div class="integ-label-group">
                <div class="integ-label">SSL / HTTPS</div>
                <div class="integ-desc">Aktivieren wenn Jellyfin über HTTPS erreichbar ist</div>
              </div>
              <label class="toggle"><input type="checkbox" id="mediascanJfSsl" /><span class="toggle-slider"></span></label>
            </div>
          </div>
        </div>

        <!-- ── Plex ── -->
        <div id="mediascanPlexFields" style="display:none;">
          <div class="integ-fields-grid integ-border-b">
            <div class="integ-field">
              <label class="settings-field-label">Server-URL</label>
              <input type="text" id="mediascanPlexUrl" placeholder="192.168.1.100:32400" oninput="onMsPlexUrlInput()" />
            </div>
          </div>
          <div class="integ-form-row integ-border-b">
            <div class="integ-form-row-inner integ-toggle-row">
              <div class="integ-label-group">
                <div class="integ-label">SSL / HTTPS</div>
                <div class="integ-desc">Aktivieren wenn Plex über HTTPS erreichbar ist</div>
              </div>
              <label class="toggle"><input type="checkbox" id="mediascanPlexSsl" /><span class="toggle-slider"></span></label>
            </div>
          </div>
          <div class="integ-form-row integ-border-b">
            <div class="integ-form-row-inner integ-wrap">
              <div class="integ-label-group">
                <div class="integ-label">Plex Token</div>
                <div class="integ-desc">Geteilt mit Mediaplayer — einmal anmelden reicht für beide</div>
              </div>
              <div class="integ-plex-token-ctrl">
                <span id="msPlexTokenBadge" class="integ-token-badge">Kein Token gespeichert</span>
                <button class="btn btn-ghost integ-plex-login-btn" onclick="startMsPlexOAuth()" id="msPlexLoginBtn">
                  <svg viewBox="0 0 24 24" fill="currentColor" class="integ-icon-sm">
                    <path d="M11 7L9.6 8.4l2.6 2.6H2v2h10.2l-2.6 2.6L11 17l5-5-5-5zm9 12h-8v2h8c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2h-8v2h8v14z" />
                  </svg>
                  Mit Plex anmelden
                </button>
                <span id="msPlexOAuthStatus" class="integ-oauth-status" style="display:none;"></span>
              </div>
            </div>
            <input type="hidden" id="mediascanPlexTokenHidden" />
          </div>
          <div class="integ-form-row integ-border-b">
            <div class="integ-form-row-inner integ-wrap">
              <div class="integ-label-group">
                <div class="integ-label">Bibliothek</div>
                <div class="integ-desc">Welche soll für die Erkennung verwendet werden?</div>
              </div>
              <div class="integ-lib-ctrl">
                <select id="mediascanPlexSection" class="integ-select integ-lib-select">
                  <option value="">Alle scannen</option>
                </select>
                <button class="btn btn-ghost" onclick="loadMsPlexLibraries()" id="msPlexLibLoadBtn" title="Bibliotheken laden">↻ Laden</button>
              </div>
            </div>
          </div>
        </div>

        <!-- Kein TMDB-Key Warnung -->
        <div id="mediascanNoTmdbWarn" class="integ-hint-box integ-warn-box" style="display:none;">
          ⚠️ <strong>CineInfo nicht konfiguriert.</strong>
          Für genaues Matching (deutsch ↔ englisch) wird ein TMDB-API-Key benötigt.
          Bitte unter <a href="/integrations#cineinfo" class="integ-link">CineInfo</a>
          einrichten. Bis dahin ist MediaScan deaktiviert.
        </div>

        <!-- Status-Karte -->
        <div id="mediascanStatusCard" class="integ-ms-status-card" style="display:none;">
          <div class="integ-ms-status-row">
            <span class="integ-ms-status-label">Letztes Update</span>
            <span id="mediascanLastUpdated" class="integ-ms-status-val">—</span>
          </div>
          <div class="integ-ms-status-row">
            <span class="integ-ms-status-label">Einträge im Cache</span>
            <span id="mediascanCount" class="integ-ms-status-val">—</span>
          </div>
          <div class="integ-ms-status-row" id="mediascanScanRow">
            <span class="integ-ms-status-label">Status</span>
            <span id="mediascanScanStatus" class="integ-ms-status-val">—</span>
          </div>
        </div>

        <!-- Fortschrittsbalken -->
        <div id="mediascanProgressWrap" class="integ-ms-progress-wrap" style="display:none;">
          <div class="integ-ms-progress-label">
            <span id="mediascanProgressText">Scan läuft…</span>
            <span id="mediascanProgressPct"></span>
          </div>
          <div class="integ-ms-progress-bar-track">
            <div id="mediascanProgressBar" class="integ-ms-progress-bar"></div>
          </div>
        </div>

        <!-- Aktionsleiste -->
        <div class="integ-action-bar">
          <button class="btn btn-ghost" onclick="triggerMediascanRefresh()" id="mediascanRefreshBtn">
            ↻ Mediathek jetzt aktualisieren
          </button>
        </div>
        <div id="mediascanResult" class="integ-result-box" style="display:none;"></div>
      </div>
    </div>

  </div><!-- /tab-mediaplayer -->

  <!-- ══════════════════════════════════════════════════════
       Tab: CineInfo
  ══════════════════════════════════════════════════════ -->
  <div class="settings-tab-panel" id="tab-cineinfo">
    <div class="settings-section">
      <h2>
        CineInfo
        <span class="section-badge integ-tmdb-badge">TMDB</span>
      </h2>

      <div class="settings-hint integ-hint-border">
        Zeigt Streaming-Anbieter, Genres und FSK direkt auf der Startseite und im Detail-Modal.
        Benötigt einen kostenlosen API-Key von
        <a href="https://www.themoviedb.org/settings/api" target="_blank" rel="noopener"
          class="integ-link">themoviedb.org</a>.
        Ohne Key ist CineInfo automatisch inaktiv.
      </div>

      <!-- API Key + Land -->
      <div class="integ-input-row">
        <div class="settings-field">
          <label class="settings-field-label">TMDB API Key (v3)</label>
          <input type="password" id="cineinfoApiKey" placeholder="Dein TMDB API-Key" autocomplete="off" />
        </div>
        <div class="settings-field integ-country-field">
          <label class="settings-field-label">Land (Anbieter &amp; FSK)</label>
          <select id="cineinfoCountry" class="integ-cineinfo-select">
            <option value="DE">🇩🇪 Deutschland</option>
            <option value="AT">🇦🇹 Österreich</option>
            <option value="CH">🇨🇭 Schweiz</option>
            <option value="US">🇺🇸 USA</option>
            <option value="GB">🇬🇧 Großbritannien</option>
          </select>
        </div>
        <button onclick="saveCineinfoSettings()">Speichern</button>
      </div>

      <!-- Erweiterte TMDB Suche — direkt nach dem Setup -->
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Erweiterte TMDB Suche</div>
          <div class="settings-row-desc">Zeigt einen Menüpunkt in der Sidebar für die erweiterte Suche inkl. Genres und Keywords an.</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="cineinfoAdvancedSearch" onchange="saveCineinfoDisplayOptions()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <!-- ── Anzeige-Optionen ── -->
      <h3 class="settings-subtitle">Anzeige-Optionen</h3>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Streaming-Anbieter</div>
          <div class="settings-row-desc">1 Anbieter auf der Karte · alle im Modal unter dem Titel</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="cineinfoShowProviders" onchange="saveCineinfoDisplayOptions()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Altersfreigabe (FSK)</div>
          <div class="settings-row-desc">FSK-Badge auf der Karte und zentriert unter dem Cover im Modal</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="cineinfoShowFsk" onchange="saveCineinfoDisplayOptions()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">TMDB Genres</div>
          <div class="settings-row-desc">Ersetzt die Genres der Original-Seite im Modal durch TMDB-Genres (z. B. Action, Fantasy)</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="cineinfoShowGenres" onchange="saveCineinfoDisplayOptions()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Bewertung</div>
          <div class="settings-row-desc">Zeigt die TMDB-Nutzerwertung als Badge direkt neben dem Serientitel im Modal</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="cineinfoShowRating" onchange="saveCineinfoDisplayOptions()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Ähnliche Serien (Empfehlungen)</div>
          <div class="settings-row-desc">Zeigt unter den Episoden eine Liste mit ähnlichen Serien basierend auf TMDB an</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="cineinfoShowRecommendations" onchange="saveCineinfoDisplayOptions()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Trailer anzeigen</div>
          <div class="settings-row-desc">Zeigt einen YouTube-Trailer im Detail-Modal der Serie an (falls verfügbar)</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="cineinfoShowTrailer" onchange="saveCineinfoDisplayOptions()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <!-- ── Hover-Effekte (Design) ── -->
      <div class="integ-subsection-header">
        <span class="integ-subsection-title">Hover-Effekte</span>
        <span class="integ-subsection-badge">Design</span>
      </div>
      <div class="integ-subsection-hint">
        Diese Optionen steuern, welche Infos beim Überfahren einer Serienkarte auf der Startseite eingeblendet werden.
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Bewertung anzeigen</div>
          <div class="settings-row-desc">Zeigt beim Hovern auf der Startseite die TMDB-Bewertung der Serie an</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="cineinfoShowHoverRating" onchange="saveCineinfoDisplayOptions()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Genres anzeigen</div>
          <div class="settings-row-desc">Zeigt beim Hovern auf der Startseite die TMDB-Genres der Serie an</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="cineinfoShowHoverGenres" onchange="saveCineinfoDisplayOptions()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">FSK anzeigen</div>
          <div class="settings-row-desc">Zeigt beim Hovern auf der Startseite die FSK der Serie an</div>
        </div>
        <div class="settings-row-right">
          <label class="toggle">
            <input type="checkbox" id="cineinfoShowHoverFsk" onchange="saveCineinfoDisplayOptions()" />
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>

      <!-- ── Cache / Info ── -->
      <div class="settings-row">
        <div class="settings-row-left">
          <div class="settings-row-label">Cache leeren &amp; neu laden</div>
          <div class="settings-row-desc">Löscht alle gespeicherten TMDB-Daten und startet den Vorladevorgang neu. Nützlich wenn Infos veraltet sind oder nach einem API-Key-Wechsel.</div>
        </div>
        <div class="settings-row-right">
          <button id="clearCineinfoBtn" onclick="clearCineinfoCache(this)">Cache leeren</button>
        </div>
      </div>

      <div class="settings-hint">
        Metadaten werden im Hintergrund vorgeladen und 24 h in der Datenbank gecacht.
      </div>
    </div>
  </div><!-- /tab-cineinfo -->

</div>
<div id="toast" class="toast"></div>
<script src="{{ url_for('static', filename='integrations.js') }}"></script>
{% endblock %}