{% extends "base.html" %}

{% block title %}Einstellungen - VideoKonverter{% endblock %}

{% block content %}
<section class="admin-section">
    <h2>Einstellungen</h2>

    <form hx-post="/htmx/settings" hx-target="#save-result" hx-swap="innerHTML">

        <!-- Encoding -->
        <fieldset>
            <legend>Encoding</legend>
            <div class="form-grid">
                <div class="form-group">
                    <label for="encoding_mode">Modus</label>
                    <select name="encoding_mode" id="encoding_mode">
                        <option value="cpu" {% if settings.encoding.mode == 'cpu' %}selected{% endif %}>CPU</option>
                        <option value="gpu" {% if settings.encoding.mode == 'gpu' %}selected{% endif %}>GPU (Intel VAAPI)</option>
                        <option value="auto" {% if settings.encoding.mode == 'auto' %}selected{% endif %}>Auto-Erkennung</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="gpu_device">GPU Device</label>
                    <select name="gpu_device" id="gpu_device">
                        {% for device in gpu_devices %}
                        <option value="{{ device }}" {% if device == settings.encoding.gpu_device %}selected{% endif %}>{{ device }}</option>
                        {% endfor %}
                        {% if not gpu_devices %}
                        <option value="/dev/dri/renderD128">Keine GPU erkannt</option>
                        {% endif %}
                    </select>
                    {% if gpu_available %}
                    <span class="status-badge ok">GPU verfuegbar</span>
                    {% else %}
                    <span class="status-badge warn">Keine GPU</span>
                    {% endif %}
                </div>

                <div class="form-group">
                    <label for="default_preset">Standard-Preset</label>
                    <select name="default_preset" id="default_preset">
                        {% for key, preset in presets.items() %}
                        <option value="{{ key }}" {% if key == settings.encoding.default_preset %}selected{% endif %}>{{ preset.name }}</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="form-group">
                    <label for="max_parallel_jobs">Max. parallele Jobs</label>
                    <input type="number" name="max_parallel_jobs" id="max_parallel_jobs"
                           value="{{ settings.encoding.max_parallel_jobs }}" min="1" max="8">
                </div>
            </div>
        </fieldset>

        <!-- Dateien -->
        <fieldset>
            <legend>Dateien</legend>
            <div class="form-grid">
                <div class="form-group">
                    <label for="target_container">Ziel-Container</label>
                    <select name="target_container" id="target_container">
                        <option value="webm" {% if settings.files.target_container == 'webm' %}selected{% endif %}>WebM (AV1/Opus)</option>
                        <option value="mkv" {% if settings.files.target_container == 'mkv' %}selected{% endif %}>MKV (Matroska)</option>
                        <option value="mp4" {% if settings.files.target_container == 'mp4' %}selected{% endif %}>MP4</option>
                    </select>
                </div>

                <div class="form-group">
                    <label for="target_folder">Ziel-Ordner</label>
                    <input type="text" name="target_folder" id="target_folder"
                           value="{{ settings.files.target_folder }}"
                           placeholder="same = gleicher Ordner">
                </div>

                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="delete_source"
                               {% if settings.files.delete_source %}checked{% endif %}>
                        Quelldatei nach Konvertierung loeschen
                    </label>
                </div>

                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="recursive_scan"
                               {% if settings.files.recursive_scan %}checked{% endif %}>
                        Unterordner rekursiv scannen
                    </label>
                </div>
            </div>
        </fieldset>

        <!-- Cleanup -->
        <fieldset>
            <legend>Cleanup</legend>
            <div class="form-grid">
                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="cleanup_enabled"
                               {% if settings.cleanup.enabled %}checked{% endif %}>
                        Auto-Cleanup aktivieren
                    </label>
                </div>
                <div class="form-group">
                    <label>Zu loeschende Extensions</label>
                    <input type="text" name="cleanup_extensions"
                           value="{{ settings.cleanup.delete_extensions | join(', ') }}"
                           placeholder=".avi, .wmv, .nfo, .txt, .jpg">
                </div>
                <div class="form-group">
                    <label>Ausnahmen (Muster)</label>
                    <input type="text" name="cleanup_exclude"
                           value="{{ settings.cleanup.exclude_patterns | join(', ') }}"
                           placeholder="readme*, *.md">
                </div>
            </div>
        </fieldset>

        <!-- Audio -->
        <fieldset>
            <legend>Audio</legend>
            <div class="form-grid">
                <div class="form-group">
                    <label for="audio_languages">Sprachen</label>
                    <input type="text" name="audio_languages" id="audio_languages"
                           value="{{ settings.audio.languages | join(', ') }}"
                           placeholder="ger, eng, und">
                </div>

                <div class="form-group">
                    <label for="audio_codec">Codec</label>
                    <select name="audio_codec" id="audio_codec">
                        <option value="libopus" {% if settings.audio.default_codec == 'libopus' %}selected{% endif %}>Opus</option>
                        <option value="aac" {% if settings.audio.default_codec == 'aac' %}selected{% endif %}>AAC</option>
                        <option value="copy" {% if settings.audio.default_codec == 'copy' %}selected{% endif %}>Stream Copy</option>
                    </select>
                </div>

                <div class="form-group checkbox-group">
                    <label>
                        <input type="checkbox" name="keep_channels"
                               {% if settings.audio.keep_channels %}checked{% endif %}>
                        Kanalanzahl beibehalten (kein Downmix)
                    </label>
                </div>
            </div>
        </fieldset>

        <!-- Untertitel -->
        <fieldset>
            <legend>Untertitel</legend>
            <div class="form-grid">
                <div class="form-group">
                    <label for="subtitle_languages">Sprachen</label>
                    <input type="text" name="subtitle_languages" id="subtitle_languages"
                           value="{{ settings.subtitle.languages | join(', ') }}"
                           placeholder="ger, eng">
                </div>
            </div>
        </fieldset>

        <!-- TVDB / Bibliothek -->
        <fieldset>
            <legend>Bibliothek / TVDB</legend>
            <div class="form-grid">
                <div class="form-group">
                    <label for="tvdb_api_key">TVDB API Key</label>
                    <input type="text" name="tvdb_api_key" id="tvdb_api_key"
                           value="{{ settings.library.tvdb_api_key if settings.library else '' }}"
                           placeholder="API Key von thetvdb.com">
                </div>
                <div class="form-group">
                    <label for="tvdb_pin">TVDB PIN</label>
                    <input type="text" name="tvdb_pin" id="tvdb_pin"
                           value="{{ settings.library.tvdb_pin if settings.library else '' }}"
                           placeholder="Subscriber PIN (optional)">
                </div>
                <div class="form-group">
                    <label for="tvdb_language">TVDB Sprache</label>
                    <select name="tvdb_language" id="tvdb_language">
                        {% set lang = settings.library.tvdb_language if settings.library and settings.library.tvdb_language else 'deu' %}
                        <option value="deu" {% if lang == 'deu' %}selected{% endif %}>Deutsch</option>
                        <option value="eng" {% if lang == 'eng' %}selected{% endif %}>English</option>
                        <option value="fra" {% if lang == 'fra' %}selected{% endif %}>Francais</option>
                        <option value="spa" {% if lang == 'spa' %}selected{% endif %}>Espanol</option>
                        <option value="ita" {% if lang == 'ita' %}selected{% endif %}>Italiano</option>
                        <option value="jpn" {% if lang == 'jpn' %}selected{% endif %}>Japanese</option>
                    </select>
                </div>
            </div>
        </fieldset>

        <!-- Logging -->
        <fieldset>
            <legend>Logging</legend>
            <div class="form-grid">
                <div class="form-group">
                    <label for="log_level">Log-Level</label>
                    <select name="log_level" id="log_level">
                        {% for level in ['DEBUG', 'INFO', 'WARNING', 'ERROR'] %}
                        <option value="{{ level }}" {% if level == settings.logging.level %}selected{% endif %}>{{ level }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        </fieldset>

        <div class="form-actions">
            <button type="submit" class="btn-primary">Speichern</button>
        </div>
        <div id="save-result"></div>
    </form>
</section>

<!-- Scan-Pfade -->
<section class="admin-section">
    <h2>Bibliothek - Scan-Pfade</h2>
    <div id="library-paths">
        <div class="loading-msg">Lade Pfade...</div>
    </div>
    <div class="form-grid" style="margin-top:1rem">
        <div class="form-group">
            <label>Name</label>
            <input type="text" id="new-path-name" placeholder="z.B. Serien">
        </div>
        <div class="form-group">
            <label>Pfad</label>
            <input type="text" id="new-path-path" placeholder="/mnt/30 - Media/Serien">
        </div>
        <div class="form-group">
            <label>Typ</label>
            <select id="new-path-type">
                <option value="series">Serien</option>
                <option value="movie">Filme</option>
            </select>
        </div>
        <div class="form-group" style="justify-content:flex-end">
            <button class="btn-primary" onclick="addLibraryPath()">Pfad hinzufuegen</button>
        </div>
    </div>
</section>

<!-- TV-App / Streaming -->
<section class="admin-section">
    <h2>TV-App / Streaming</h2>
    <div style="display:flex;gap:2rem;flex-wrap:wrap">
        <!-- QR-Code -->
        <div style="text-align:center">
            <img id="tv-qrcode" src="/api/tv/qrcode" alt="QR-Code" style="width:200px;height:200px;border-radius:8px;background:#1a1a1a">
            <p style="margin-top:0.5rem;font-size:0.85rem;color:#888">QR-Code scannen oder Link oeffnen</p>
            <div style="margin-top:0.3rem">
                <a id="tv-link" href="/tv/" target="_blank" style="font-size:0.9rem">/tv/</a>
            </div>
        </div>
        <!-- User-Verwaltung -->
        <div style="flex:1;min-width:300px">
            <h3 style="margin-bottom:0.8rem">Benutzer</h3>
            <div id="tv-users-list">
                <div class="loading-msg">Lade Benutzer...</div>
            </div>
            <!-- Neuer User -->
            <div style="margin-top:1rem;padding:1rem;background:#1a1a1a;border-radius:8px">
                <h4 style="margin-bottom:0.5rem">Neuer Benutzer</h4>
                <div class="form-grid">
                    <div class="form-group">
                        <label>Benutzername</label>
                        <input type="text" id="tv-new-username" placeholder="z.B. eddy">
                    </div>
                    <div class="form-group">
                        <label>Anzeigename</label>
                        <input type="text" id="tv-new-display" placeholder="z.B. Eddy">
                    </div>
                    <div class="form-group">
                        <label>Passwort</label>
                        <input type="password" id="tv-new-password" placeholder="Passwort">
                    </div>
                    <div class="form-group">
                        <label>Rechte</label>
                        <div style="display:flex;flex-direction:column;gap:0.3rem">
                            <label style="font-size:0.85rem"><input type="checkbox" id="tv-new-series" checked> Serien</label>
                            <label style="font-size:0.85rem"><input type="checkbox" id="tv-new-movies" checked> Filme</label>
                            <label style="font-size:0.85rem"><input type="checkbox" id="tv-new-admin"> Admin</label>
                        </div>
                    </div>
                </div>
                <button class="btn-primary" onclick="tvCreateUser()" style="margin-top:0.5rem">Benutzer erstellen</button>
            </div>
        </div>
    </div>
</section>

<!-- Presets -->
<section class="admin-section">
    <h2>Encoding-Presets</h2>
    <div class="presets-grid">
        {% for key, preset in presets.items() %}
        <div class="preset-card">
            <h3>{{ preset.name }}</h3>
            <div class="preset-details">
                <span class="tag">{{ preset.video_codec }}</span>
                <span class="tag">{{ preset.container }}</span>
                <span class="tag">{{ preset.quality_param }}={{ preset.quality_value }}</span>
                {% if preset.hw_init %}<span class="tag gpu">GPU</span>{% else %}<span class="tag cpu">CPU</span>{% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
</section>
{% endblock %}

{% block scripts %}
<script>
// Scan-Pfade Verwaltung
function loadLibraryPaths() {
    fetch("/api/library/paths")
        .then(r => r.json())
        .then(data => {
            const container = document.getElementById("library-paths");
            const paths = data.paths || [];
            if (!paths.length) {
                container.innerHTML = '<div class="loading-msg">Keine Scan-Pfade konfiguriert</div>';
                return;
            }
            container.innerHTML = paths.map(p => `
                <div class="preset-card" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
                    <div>
                        <strong>${p.name}</strong>
                        <span class="tag">${p.media_type === 'series' ? 'Serien' : 'Filme'}</span>
                        <br><span style="font-size:0.8rem;color:#888">${p.path}</span>
                        ${p.last_scan ? '<br><span style="font-size:0.75rem;color:#666">Letzter Scan: ' + p.last_scan + '</span>' : ''}
                    </div>
                    <div style="display:flex;gap:0.3rem">
                        <button class="btn-small btn-secondary" onclick="scanPath(${p.id})">Scannen</button>
                        <button class="btn-small btn-danger" onclick="deletePath(${p.id})">Loeschen</button>
                    </div>
                </div>
            `).join("");
        })
        .catch(() => {
            document.getElementById("library-paths").innerHTML =
                '<div style="text-align:center;color:#666;padding:1rem">Fehler beim Laden</div>';
        });
}

function addLibraryPath() {
    const name = document.getElementById("new-path-name").value.trim();
    const path = document.getElementById("new-path-path").value.trim();
    const mediaType = document.getElementById("new-path-type").value;
    if (!name || !path) {
        showToast("Name und Pfad erforderlich", "error");
        return;
    }
    fetch("/api/library/paths", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({name: name, path: path, media_type: mediaType}),
    })
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                showToast("Fehler: " + data.error, "error");
            } else {
                document.getElementById("new-path-name").value = "";
                document.getElementById("new-path-path").value = "";
                showToast("Pfad hinzugefuegt", "success");
                loadLibraryPaths();
            }
        })
        .catch(e => showToast("Fehler: " + e, "error"));
}

async function deletePath(pathId) {
    if (!await showConfirm("Scan-Pfad und alle zugehoerigen Daten loeschen?", {title: "Pfad loeschen", okText: "Loeschen", icon: "danger", danger: true})) return;
    fetch("/api/library/paths/" + pathId, {method: "DELETE"})
        .then(r => r.json())
        .then(() => { showToast("Pfad geloescht", "success"); loadLibraryPaths(); })
        .catch(e => showToast("Fehler: " + e, "error"));
}

function scanPath(pathId) {
    fetch("/api/library/scan/" + pathId, {method: "POST"})
        .then(r => r.json())
        .then(data => showToast(data.message || "Scan gestartet", "success"))
        .catch(e => showToast("Fehler: " + e, "error"));
}

// === TV-App User-Verwaltung ===

function tvLoadUsers() {
    fetch("/api/tv/users")
        .then(r => r.json())
        .then(data => {
            const container = document.getElementById("tv-users-list");
            const users = data.users || [];
            if (!users.length) {
                container.innerHTML = '<div class="loading-msg">Keine Benutzer vorhanden</div>';
                return;
            }
            container.innerHTML = users.map(u => `
                <div class="preset-card" style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.5rem">
                    <div>
                        <strong>${escapeHtml(u.display_name || u.username)}</strong>
                        <span style="color:#888;font-size:0.85rem">@${escapeHtml(u.username)}</span>
                        ${u.is_admin ? '<span class="tag gpu">Admin</span>' : ''}
                        ${u.can_view_series ? '<span class="tag">Serien</span>' : ''}
                        ${u.can_view_movies ? '<span class="tag">Filme</span>' : ''}
                        ${u.last_login ? '<br><span style="font-size:0.75rem;color:#666">Letzter Login: ' + u.last_login + '</span>' : ''}
                    </div>
                    <div style="display:flex;gap:0.3rem">
                        <button class="btn-small btn-secondary" onclick="tvEditUser(${u.id})">Bearbeiten</button>
                        <button class="btn-small btn-danger" onclick="tvDeleteUser(${u.id}, '${escapeAttr(u.username)}')">Loeschen</button>
                    </div>
                </div>
            `).join("");
        })
        .catch(() => {
            document.getElementById("tv-users-list").innerHTML =
                '<div style="text-align:center;color:#666;padding:1rem">TV-App nicht verfuegbar (DB-Verbindung fehlt?)</div>';
        });
}

function escapeHtml(str) {
    if (!str) return "";
    return str.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
}
function escapeAttr(str) {
    if (!str) return "";
    return str.replace(/\\/g,"\\\\").replace(/'/g,"\\'").replace(/"/g,'\\"');
}

function tvCreateUser() {
    const username = document.getElementById("tv-new-username").value.trim();
    const displayName = document.getElementById("tv-new-display").value.trim();
    const password = document.getElementById("tv-new-password").value;
    if (!username || !password) {
        showToast("Benutzername und Passwort noetig", "error");
        return;
    }
    fetch("/api/tv/users", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({
            username: username,
            password: password,
            display_name: displayName || username,
            is_admin: document.getElementById("tv-new-admin").checked,
            can_view_series: document.getElementById("tv-new-series").checked,
            can_view_movies: document.getElementById("tv-new-movies").checked,
        }),
    })
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                showToast("Fehler: " + data.error, "error");
            } else {
                document.getElementById("tv-new-username").value = "";
                document.getElementById("tv-new-display").value = "";
                document.getElementById("tv-new-password").value = "";
                showToast("Benutzer erstellt", "success");
                tvLoadUsers();
            }
        })
        .catch(e => showToast("Fehler: " + e, "error"));
}

async function tvDeleteUser(userId, username) {
    if (!await showConfirm(`Benutzer "${username}" wirklich loeschen?`, {title: "Benutzer loeschen", okText: "Loeschen", icon: "danger", danger: true})) return;
    fetch("/api/tv/users/" + userId, {method: "DELETE"})
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                showToast("Fehler: " + data.error, "error");
            } else {
                showToast("Benutzer geloescht", "success");
                tvLoadUsers();
            }
        })
        .catch(e => showToast("Fehler: " + e, "error"));
}

async function tvEditUser(userId) {
    // User-Daten laden, dann Edit-Dialog anzeigen
    const resp = await fetch("/api/tv/users").then(r => r.json());
    const user = (resp.users || []).find(u => u.id === userId);
    if (!user) return;

    const newPass = prompt("Neues Passwort (leer lassen um beizubehalten):");
    if (newPass === null) return; // Abgebrochen

    const updates = {};
    if (newPass) updates.password = newPass;

    const newSeries = confirm("Serien anzeigen?");
    const newMovies = confirm("Filme anzeigen?");
    const newAdmin = confirm("Admin-Rechte?");

    updates.can_view_series = newSeries;
    updates.can_view_movies = newMovies;
    updates.is_admin = newAdmin;

    fetch("/api/tv/users/" + userId, {
        method: "PUT",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify(updates),
    })
        .then(r => r.json())
        .then(data => {
            if (data.error) {
                showToast("Fehler: " + data.error, "error");
            } else {
                showToast("Benutzer aktualisiert", "success");
                tvLoadUsers();
            }
        })
        .catch(e => showToast("Fehler: " + e, "error"));
}

// TV-URL laden
function tvLoadUrl() {
    fetch("/api/tv/url")
        .then(r => r.json())
        .then(data => {
            const link = document.getElementById("tv-link");
            if (link && data.url) {
                link.href = data.url;
                link.textContent = data.url;
            }
        })
        .catch(() => {});
}

document.addEventListener("DOMContentLoaded", () => {
    loadLibraryPaths();
    tvLoadUsers();
    tvLoadUrl();
});
</script>
{% endblock %}