{% extends "base.html" %}

{% block title %}Settings, sdexe{% endblock %}
{% block nav_settings %}active{% endblock %}

{% block content %}
    <main>
        <div class="hero">
            <h1>Settings</h1>
            <p class="subtitle">Preferences saved locally to your machine.</p>
        </div>

        <div class="settings-grid">
            <!-- System Info -->
            <div class="card">
                <div class="card-body settings-section">
                    <div class="settings-header">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                        <h2>System</h2>
                    </div>
                    <div class="sys-info-grid">
                        <div class="sys-info-item">
                            <span class="sys-info-label">Python</span>
                            <span class="sys-info-value">{{ info.python_ver }}</span>
                        </div>
                        <div class="sys-info-item">
                            <span class="sys-info-label">ffmpeg</span>
                            <span class="sys-info-value">{{ info.ffmpeg_ver }}</span>
                        </div>
                        <div class="sys-info-item">
                            <span class="sys-info-label">yt-dlp</span>
                            <span class="sys-info-value">{{ info.ytdlp_ver }}{% if info.ytdlp_stale %} (out of date){% endif %}</span>
                        </div>
                        <div class="sys-info-item">
                            <span class="sys-info-label">Tools</span>
                            <span class="sys-info-value">{{ info.tool_count }}</span>
                        </div>
                        <div class="sys-info-item">
                            <span class="sys-info-label">Version</span>
                            <span class="sys-info-value">{{ version }}</span>
                        </div>
                        <div class="sys-info-item">
                            <span class="sys-info-label">Config</span>
                            <span class="sys-info-value" style="font-family:monospace; font-size:.75rem;">{{ info.config_dir }}</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Downloads -->
            <div class="card">
                <div class="card-body settings-section">
                    <div class="settings-header">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
                        <h2>Downloads</h2>
                    </div>
                    <p class="meta">Where files land after downloading.</p>

                    <div class="field" style="margin-top: 16px;">
                        <label>Output folder</label>
                        <div class="folder-input-row">
                            <input type="text" id="output-folder" placeholder="Leave empty to save manually">
                            <button class="btn-settings-browse" onclick="browseFolder()">Browse</button>
                        </div>
                    </div>

                    <div class="field-row" style="margin-top: 14px;">
                        <div class="field">
                            <label>Default format</label>
                            <select id="default-format" onchange="updateDefaultQuality()">
                                <option value="mp3">MP3 (Audio)</option>
                                <option value="mp4">MP4 (Video)</option>
                                <option value="flac">FLAC (Audio)</option>
                                <option value="wav">WAV (Audio)</option>
                            </select>
                        </div>
                        <div class="field">
                            <label>Default quality</label>
                            <select id="default-quality">
                                <option value="best">Best</option>
                            </select>
                        </div>
                    </div>

                    <div class="field" style="margin-top: 14px;">
                        <label>Filename template</label>
                        <input type="text" id="output-template" placeholder="{title}" style="font-family: monospace;">
                        <p class="meta" style="margin-top:4px;">Tokens: <code>{title}</code> <code>{artist}</code> <code>{album}</code> <code>{uploader}</code></p>
                    </div>

                    <div style="margin-top: 18px; display: flex; align-items: center; gap: 12px;">
                        <button class="btn-settings-save" onclick="saveSettings()">Save settings</button>
                        <span id="folder-status" class="settings-status"></span>
                    </div>
                </div>
            </div>

            <!-- Startup -->
            <div class="card">
                <div class="card-body settings-section">
                    <div class="settings-header">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
                        <h2>Startup</h2>
                    </div>
                    <p class="meta">What happens when you run <code>sdexe</code> in a terminal.</p>
                    <div style="margin-top: 14px;">
                        <label class="check-label">
                            <input type="checkbox" id="open-browser">
                            Open this page in the browser every time
                        </label>
                        <p class="meta" style="margin-top:6px; margin-left:24px;">
                            Off: sdexe starts and prints its address. One run can override it with
                            <code>sdexe --browser</code> or <code>sdexe --no-browser</code>.
                        </p>
                        <span id="startup-status" class="settings-status" style="margin-left:24px;"></span>
                    </div>
                </div>
            </div>

            <!-- Notifications -->
            <div class="card">
                <div class="card-body settings-section">
                    <div class="settings-header">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 01-3.46 0"/></svg>
                        <h2>Notifications</h2>
                    </div>
                    <p class="meta">Desktop alerts when downloads complete.</p>
                    <div style="margin-top: 14px;">
                        <label class="check-label">
                            <input type="checkbox" id="notif-enabled">
                            Enable desktop notifications
                        </label>
                        <p id="notif-status" style="font-size:.75rem; color:var(--text-muted); margin-top:6px; margin-left:24px;"></p>
                    </div>
                </div>
            </div>

            <!-- About & Updates -->
            <div class="card">
                <div class="card-body settings-section">
                    <div class="settings-header">
                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>
                        <h2>About</h2>
                    </div>
                    <p class="meta">sdexe v{{ version }} &middot; <a href="https://github.com/gedaliahs/sdexe" target="_blank" rel="noopener" style="color:var(--accent);text-decoration:none;">GitHub</a></p>
                    <div style="margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
                        <button id="update-btn" class="btn-settings-save" onclick="runUpdate()">Check for updates</button>
                        <button id="ytdlp-btn" class="btn-settings-save" onclick="updateYtdlp()">Update downloader engine</button>
                        <span id="update-status" class="settings-status"></span>
                    </div>
                    {% if info.ytdlp_stale %}
                    <p class="meta" style="margin-top:10px;">The downloader engine is out of date. That is the usual cause of a "Video unavailable" error on a video that plays fine in a browser.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </main>
{% endblock %}

{% block scripts %}
<script>
function updateDefaultQuality() {
    const fmt = document.getElementById("default-format").value;
    const q = document.getElementById("default-quality");
    if (fmt === "mp4") {
        q.innerHTML = `<option value="best">Best</option><option value="1080p">1080p</option><option value="720p">720p</option><option value="480p">480p</option>`;
        q.disabled = false;
    } else if (fmt === "mp3") {
        // Mirrors the media page. A single "best" option here overwrote a
        // 320/192/128 choice made there.
        q.innerHTML = `<option value="320">320 kbps</option><option value="192">192 kbps</option><option value="128">128 kbps</option>`;
        q.disabled = false;
    } else {
        q.innerHTML = `<option value="best">Lossless</option>`;
        q.disabled = true;
    }
    const savedQ = localStorage.getItem("sdexe_quality");
    if (savedQ && q.querySelector(`option[value="${savedQ}"]`)) q.value = savedQ;
}

async function browseFolder() {
    const btn = document.querySelector(".btn-settings-browse");
    btn.disabled = true;
    btn.textContent = "Picking…";
    try {
        const res = await fetch("/api/browse-folder", { method: "POST" });
        const data = await res.json();
        if (!data.cancelled && !data.error && data.path) {
            document.getElementById("output-folder").value = data.path;
        }
    } catch {}
    btn.disabled = false;
    btn.textContent = "Browse";
}

async function runUpdate() {
    const btn = document.getElementById("update-btn");
    const status = document.getElementById("update-status");
    btn.disabled = true;
    btn.textContent = "Updating…";
    status.textContent = "Downloading the latest version…";
    status.className = "settings-status";
    try {
        const res = await fetch("/api/update", { method: "POST" });
        const data = await res.json();
        if (data.ok) {
            status.textContent = data.output || "Updated! Restart sdexe to apply.";
            status.className = "settings-status saved";
        } else {
            status.textContent = data.error || "Update failed";
            status.className = "settings-status error";
        }
    } catch {
        status.textContent = "Network error";
        status.className = "settings-status error";
    }
    btn.disabled = false;
    btn.textContent = "Check for updates";
}

async function updateYtdlp() {
    const btn = document.getElementById("ytdlp-btn");
    const status = document.getElementById("update-status");
    btn.disabled = true;
    btn.textContent = "Updating…";
    status.textContent = "Updating the downloader engine…";
    status.className = "settings-status";
    try {
        const res = await fetch("/api/update-ytdlp", { method: "POST" });
        const data = await res.json();
        if (data.ok) {
            status.textContent = "Downloader engine updated. Restart sdexe to apply.";
            status.className = "settings-status saved";
        } else {
            status.textContent = data.error || "Update failed";
            status.className = "settings-status error";
        }
    } catch {
        status.textContent = "Network error";
        status.className = "settings-status error";
    }
    btn.disabled = false;
    btn.textContent = "Update downloader engine";
}

async function loadSettings() {
    const res = await fetch("/api/config");
    const cfg = await res.json();

    document.getElementById("open-browser").checked = cfg.open_browser !== false;
    document.getElementById("output-folder").value = cfg.output_folder || "";
    document.getElementById("output-template").value = cfg.output_template || "";

    const fmt = localStorage.getItem("sdexe_format") || cfg.default_format || "mp3";
    const fmtEl = document.getElementById("default-format");
    if (fmtEl.querySelector(`option[value="${fmt}"]`)) fmtEl.value = fmt;
    updateDefaultQuality();

    const quality = localStorage.getItem("sdexe_quality") || cfg.default_quality || "best";
    const qEl = document.getElementById("default-quality");
    if (qEl.querySelector(`option[value="${quality}"]`)) qEl.value = quality;

    const notifEl = document.getElementById("notif-enabled");
    const statusEl = document.getElementById("notif-status");
    if (!("Notification" in window)) {
        notifEl.disabled = true;
        statusEl.textContent = "Notifications not supported in this browser.";
    } else if (Notification.permission === "granted") {
        notifEl.checked = true;
    } else if (Notification.permission === "denied") {
        notifEl.disabled = true;
        statusEl.textContent = "Notifications blocked. Enable in browser or system settings.";
    }
}

async function saveSettings() {
    const folder = document.getElementById("output-folder").value.trim();
    const fmt = document.getElementById("default-format").value;
    const quality = document.getElementById("default-quality").value;
    const status = document.getElementById("folder-status");

    status.textContent = "Saving...";
    status.className = "settings-status";

    const res = await fetch("/api/config", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ output_folder: folder, default_format: fmt, default_quality: quality, output_template: document.getElementById("output-template").value.trim() }),
    });
    const data = await res.json();

    if (data.error) {
        status.textContent = data.error;
        status.className = "settings-status error";
    } else {
        localStorage.setItem("sdexe_format", fmt);
        if (!document.getElementById("default-quality").disabled) {
            localStorage.setItem("sdexe_quality", quality);
        }
        status.textContent = "Saved";
        status.className = "settings-status saved";
        setTimeout(() => { status.textContent = ""; }, 2500);
    }
}

document.getElementById("open-browser").addEventListener("change", async (e) => {
    const status = document.getElementById("startup-status");
    const res = await fetch("/api/config", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ open_browser: e.target.checked }),
    });
    const data = await res.json();
    status.textContent = data.error || "Saved";
    status.className = "settings-status " + (data.error ? "error" : "saved");
    setTimeout(() => { status.textContent = ""; }, 2500);
});

document.getElementById("notif-enabled").addEventListener("change", async (e) => {
    const statusEl = document.getElementById("notif-status");
    if (e.target.checked) {
        const perm = await Notification.requestPermission();
        e.target.checked = perm === "granted";
        if (perm === "denied") {
            statusEl.textContent = "Notifications blocked. Enable in system settings.";
            e.target.disabled = true;
        }
    }
});

loadSettings();
</script>
{% endblock %}