{% extends "layout.html" %}

{% block content %}
<div class="yt-settings-container">
    <h2 class="yt-settings-title">Settings</h2>

    <!-- Appearance & Playback in one card -->
    <div class="yt-settings-card compact">
        <div class="yt-setting-row">
            <span class="yt-setting-label">Theme</span>
            <div class="yt-toggle-group">
                <button type="button" class="yt-toggle-btn" id="themeBtnLight"
                    onclick="setTheme('light')">Light</button>
                <button type="button" class="yt-toggle-btn" id="themeBtnDark" onclick="setTheme('dark')">Dark</button>
            </div>
        </div>
        <div class="yt-setting-row">
            <span class="yt-setting-label">Player</span>
            <div class="yt-toggle-group">
                <button type="button" class="yt-toggle-btn" id="playerBtnArt"
                    onclick="setPlayerPref('artplayer')">Artplayer</button>
                <button type="button" class="yt-toggle-btn" id="playerBtnNative"
                    onclick="setPlayerPref('native')">Native</button>
            </div>
        </div>
    </div>

    <!-- System Updates -->
    <div class="yt-settings-card">
        <h3>System Updates</h3>

        <!-- yt-dlp Stable -->
        <div class="yt-update-row">
            <div class="yt-update-info">
                <strong>yt-dlp</strong>
                <span class="yt-update-version" id="ytdlpVersion">Stable</span>
            </div>
            <button id="updateYtdlpStable" onclick="updatePackage('ytdlp', 'stable')" class="yt-update-btn small">
                <i class="fas fa-sync-alt"></i> Update
            </button>
        </div>

        <!-- yt-dlp Nightly -->
        <div class="yt-update-row">
            <div class="yt-update-info">
                <strong>yt-dlp Nightly</strong>
                <span class="yt-update-version">Experimental</span>
            </div>
            <button id="updateYtdlpNightly" onclick="updatePackage('ytdlp', 'nightly')"
                class="yt-update-btn small nightly">
                <i class="fas fa-flask"></i> Install
            </button>
        </div>

        <!-- ytfetcher -->
        <div class="yt-update-row">
            <div class="yt-update-info">
                <strong>ytfetcher</strong>
                <span class="yt-update-version" id="ytfetcherVersion">CC & Transcripts</span>
            </div>
            <button id="updateYtfetcher" onclick="updatePackage('ytfetcher', 'latest')" class="yt-update-btn small">
                <i class="fas fa-sync-alt"></i> Update
            </button>
        </div>

        <div id="updateStatus" class="yt-update-status"></div>
    </div>

    {% if session.get('user_id') %}
    <div class="yt-settings-card compact">
        <div class="yt-setting-row">
            <span class="yt-setting-label">Display Name</span>
            <form id="profileForm" onsubmit="updateProfile(event)"
                style="display: flex; gap: 8px; flex: 1; max-width: 300px;">
                <input type="text" class="yt-form-input" id="displayName" value="{{ session.username }}" required
                    style="flex: 1;">
                <button type="submit" class="yt-update-btn small">Save</button>
            </form>
        </div>
    </div>
    {% endif %}

    <div class="yt-settings-card compact">
        <div class="yt-setting-row" style="justify-content: center;">
            <span class="yt-about-text">KV-Tube v1.0 • YouTube-like streaming</span>
        </div>
    </div>
</div>

<style>
    .yt-settings-container {
        max-width: 500px;
        margin: 0 auto;
        padding: 16px;
    }

    .yt-settings-title {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 16px;
        text-align: center;
    }

    .yt-settings-card {
        background: var(--yt-bg-secondary);
        border-radius: 12px;
        padding: 16px;
        margin-bottom: 12px;
    }

    .yt-settings-card.compact {
        padding: 12px 16px;
    }

    .yt-settings-card h3 {
        font-size: 14px;
        margin-bottom: 12px;
        color: var(--yt-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .yt-setting-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 8px 0;
    }

    .yt-setting-row:not(:last-child) {
        border-bottom: 1px solid var(--yt-bg-hover);
    }

    .yt-setting-label {
        font-size: 14px;
        font-weight: 500;
    }

    .yt-toggle-group {
        display: flex;
        background: var(--yt-bg-elevated);
        padding: 3px;
        border-radius: 20px;
        gap: 2px;
    }

    .yt-toggle-btn {
        padding: 6px 14px;
        border-radius: 16px;
        font-size: 13px;
        font-weight: 500;
        color: var(--yt-text-secondary);
        background: transparent;
        transition: all 0.2s;
    }

    .yt-toggle-btn:hover {
        color: var(--yt-text-primary);
    }

    .yt-toggle-btn.active {
        background: var(--yt-accent-red);
        color: white;
    }

    .yt-update-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid var(--yt-bg-hover);
    }

    .yt-update-row:last-of-type {
        border-bottom: none;
    }

    .yt-update-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .yt-update-info strong {
        font-size: 14px;
    }

    .yt-update-version {
        font-size: 11px;
        color: var(--yt-text-secondary);
    }

    .yt-update-btn {
        background: var(--yt-accent-red);
        color: white;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 12px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 6px;
        transition: all 0.2s;
    }

    .yt-update-btn.small {
        padding: 6px 12px;
        font-size: 12px;
    }

    .yt-update-btn.nightly {
        background: #9c27b0;
    }

    .yt-update-btn:hover {
        opacity: 0.9;
        transform: scale(1.02);
    }

    .yt-update-btn:disabled {
        background: var(--yt-bg-hover) !important;
        cursor: not-allowed;
        transform: none;
    }

    .yt-update-status {
        margin-top: 10px;
        font-size: 12px;
        text-align: center;
        min-height: 20px;
    }

    .yt-form-input {
        background: var(--yt-bg-elevated);
        border: 1px solid var(--yt-bg-hover);
        border-radius: 8px;
        padding: 8px 12px;
        color: var(--yt-text-primary);
        font-size: 13px;
    }

    .yt-about-text {
        font-size: 12px;
        color: var(--yt-text-secondary);
    }
</style>

<script>
    async function fetchVersions() {
        const pkgs = ['ytdlp', 'ytfetcher'];
        for (const pkg of pkgs) {
            try {
                const res = await fetch(`/api/package/version?package=${pkg}`);
                const data = await res.json();
                if (data.success) {
                    const el = document.getElementById(pkg === 'ytdlp' ? 'ytdlpVersion' : 'ytfetcherVersion');
                    if (el) {
                        el.innerText = `Installed: ${data.version}`;
                        // Highlight if nightly
                        if (pkg === 'ytdlp' && (data.version.includes('2026') || data.version.includes('.dev'))) {
                            el.style.color = '#9c27b0';
                            el.innerText += ' (Nightly)';
                        }
                    }
                }
            } catch (e) {
                console.error(e);
            }
        }
    }

    async function updatePackage(pkg, version) {
        const btnId = pkg === 'ytdlp' ?
            (version === 'nightly' ? 'updateYtdlpNightly' : 'updateYtdlpStable') :
            'updateYtfetcher';
        const btn = document.getElementById(btnId);
        const status = document.getElementById('updateStatus');
        const originalHTML = btn.innerHTML;

        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Updating...';
        status.style.color = 'var(--yt-text-secondary)';
        status.innerText = `Updating ${pkg}${version === 'nightly' ? ' (nightly)' : ''}...`;

        try {
            const response = await fetch('/api/update_package', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ package: pkg, version: version })
            });
            const data = await response.json();

            if (data.success) {
                status.style.color = '#4caf50';
                status.innerText = '✓ ' + data.message;
                btn.innerHTML = '<i class="fas fa-check"></i> Updated';
                // Refresh versions
                setTimeout(fetchVersions, 1000);
                setTimeout(() => {
                    btn.innerHTML = originalHTML;
                    btn.disabled = false;
                }, 3000);
            } else {
                status.style.color = '#f44336';
                status.innerText = '✗ ' + data.message;
                btn.innerHTML = originalHTML;
                btn.disabled = false;
            }
        } catch (e) {
            status.style.color = '#f44336';
            status.innerText = '✗ Error: ' + e.message;
            btn.innerHTML = originalHTML;
            btn.disabled = false;
        }
    }

    // --- Player Preference ---
    window.setPlayerPref = function (type) {
        localStorage.setItem('kv_player_pref', type);
        updatePlayerButtons(type);
    }

    window.updatePlayerButtons = function (type) {
        const artBtn = document.getElementById('playerBtnArt');
        const natBtn = document.getElementById('playerBtnNative');
        if (artBtn) artBtn.classList.remove('active');
        if (natBtn) natBtn.classList.remove('active');
        if (type === 'native') {
            if (natBtn) natBtn.classList.add('active');
        } else {
            if (artBtn) artBtn.classList.add('active');
        }
    }

    // Initialize Settings
    document.addEventListener('DOMContentLoaded', () => {
        // Theme init
        const currentTheme = localStorage.getItem('theme') || 'dark';
        const lightBtn = document.getElementById('themeBtnLight');
        const darkBtn = document.getElementById('themeBtnDark');
        if (currentTheme === 'light') {
            if (lightBtn) lightBtn.classList.add('active');
        } else {
            if (darkBtn) darkBtn.classList.add('active');
        }

        // Player init - default to artplayer
        const playerPref = localStorage.getItem('kv_player_pref') || 'artplayer';
        updatePlayerButtons(playerPref);

        // Fetch versions
        fetchVersions();
    });
</script>
{% endblock %}