{% macro model_management(qwen_health={}, lm_status={}, lm_models=[]) %}
<div class="card" id="model-management-section">
    <h3>GPU Model Management</h3>
    <p style="color:#94a3b8; font-size:0.85rem; margin-bottom:1rem">
        Control which models are loaded in GPU memory. Only one model type can be loaded at a time.
    </p>

    <!-- Qwen TTS Section -->
    <div style="border:1px solid #334155; border-radius:8px; padding:1rem; margin-bottom:1rem">
        <h4 style="margin-top:0; color:#a5b4fc">Qwen3-TTS Server ({{ qwen_health.cuda_available | default('unknown') | lower == 'true' and 'GPU Available' or 'CPU Only' }})</h4>
        <div style="display:flex; gap:1rem; flex-wrap:wrap; margin-bottom:0.5rem">
            <div class="model-status {{ 'loaded' if qwen_health.voicedesign_loaded else 'unloaded' }}">
                <span class="status-indicator {{ 'green' if qwen_health.voicedesign_loaded else 'gray' }}"></span>
                <span>VoiceDesign (1.7B)</span>
            </div>
            <div class="model-status {{ 'loaded' if qwen_health.base_loaded else 'unloaded' }}">
                <span class="status-indicator {{ 'green' if qwen_health.base_loaded else 'gray' }}"></span>
                <span>Base Clone (1.7B)</span>
            </div>
        </div>
        <div style="display:flex; gap:0.5rem; flex-wrap:wrap">
            <button class="btn btn-sm" onclick="loadQwenModel('voicedesign')" 
                    {% if qwen_health.voicedesign_loaded %}disabled{% endif %}>
                Load VoiceDesign
            </button>
            <button class="btn btn-sm" onclick="loadQwenModel('base')" 
                    {% if qwen_health.base_loaded %}disabled{% endif %}>
                Load Base Clone
            </button>
            <button class="btn btn-sm btn-secondary" onclick="unloadQwenModel('all')">
                Unload All
            </button>
        </div>
    </div>

    <!-- LM Studio Section -->
    <div style="border:1px solid #334155; border-radius:8px; padding:1rem; margin-bottom:1rem">
        <h4 style="margin-top:0; color:#a5b4fc">LM Studio (LLM)</h4>
        <div class="model-status {{ 'loaded' if lm_status.loaded else 'unloaded' }}" style="margin-bottom:0.5rem">
            <span class="status-indicator {{ 'green' if lm_status.loaded else 'gray' }}"></span>
            <span>{{ lm_status.model or 'No model loaded' }}</span>
            {% if lm_status.instance_id %}
            <span style="color:#64748b; font-size:0.8rem; margin-left:0.5rem">({{ lm_status.instance_id }})</span>
            {% endif %}
            {% if lm_status.context_length %}
            <span style="color:#64748b; font-size:0.8rem; margin-left:0.5rem">ctx={{ lm_status.context_length }}</span>
            {% endif %}
        </div>
        <div style="display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.5rem">
            <select id="lm-model-select" class="select" style="flex:1; min-width:200px">
                {% for m in lm_models %}
                <option value="{{ m.key }}" {% if m.key == lm_status.model %}selected{% endif %}>
                    {{ m.display_name or m.key }} ({{ m.params }}, {{ m.size_gb }}GB)
                </option>
                {% endfor %}
            </select>
            <input type="number" id="lm-context-length" class="input" value="4096" placeholder="Context length" style="width:120px">
            <button class="btn btn-sm" onclick="loadLmModel()" {% if lm_status.loaded %}disabled{% endif %}>
                Load Selected
            </button>
            <button class="btn btn-sm btn-secondary" onclick="unloadLmModel()" {% if not lm_status.loaded %}disabled{% endif %}>
                Unload
            </button>
        </div>
        <div style="display:flex; gap:0.5rem; flex-wrap:wrap">
            <button class="btn btn-sm btn-secondary" onclick="refreshModels()">
                Refresh
            </button>
        </div>
    </div>

    <!-- Pipeline GPU Usage Guide -->
    <details style="margin-top:1rem">
        <summary style="cursor:pointer; color:#94a3b8; font-size:0.85rem">Pipeline GPU Usage Guide</summary>
        <div style="margin-top:0.5rem; font-size:0.8rem; color:#94a3b8; line-height:1.8">
            <strong>Pipeline Stage → GPU State:</strong><br>
            📖 <strong>Analysis</strong> (BookNLP + LLM profiling) → LM Studio loaded, Qwen unloaded<br>
            🎭 <strong>Voice Design</strong> (generate voice refs) → Qwen VoiceDesign loaded, LM Studio unloaded<br>
            ✂️ <strong>Segmentation</strong> (manifests) → Both unloaded<br>
            🔊 <strong>Generation</strong> (TTS synthesis) → Qwen Base loaded, LM Studio unloaded<br>
            📦 <strong>Export</strong> → Both unloaded<br><br>
            <strong>Manual controls above override automatic management.</strong>
        </div>
    </details>
</div>

<style>
.model-status {
    display:inline-flex; align-items:center; gap:0.35rem;
    padding:0.35rem 0.75rem; border-radius:9999px;
    background:rgba(51,65,85,0.5); font-size:0.8rem;
}
.model-status.loaded { background:rgba(16,185,129,0.15); border:1px solid #10b981; }
.model-status.unloaded { background:rgba(148,163,184,0.1); }
.status-indicator { width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-indicator.green { background:#10b981; }
.status-indicator.gray { background:#64748b; }
</style>

<script>
async function loadQwenModel(modelType) {
    const btn = event.target;
    btn.disabled = true;
    btn.textContent = 'Loading...';
    try {
        const resp = await fetch(`/api/models/qwen/load/${modelType}`, { method: 'POST' });
        const data = await resp.json();
        if (data.ok) {
            refreshModelStatus();
        } else {
            alert('Failed: ' + data.error);
        }
    } catch (e) {
        alert('Error: ' + e.message);
    } finally {
        btn.disabled = false;
        btn.textContent = 'Load ' + (modelType === 'voicedesign' ? 'VoiceDesign' : 'Base Clone');
    }
}

async function unloadQwenModel(modelType) {
    const btn = event.target;
    btn.disabled = true;
    btn.textContent = 'Unloading...';
    try {
        const resp = await fetch(`/api/models/qwen/unload`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({model_type: modelType})
        });
        const data = await resp.json();
        if (data.ok) {
            refreshModelStatus();
        } else {
            alert('Failed: ' + data.error);
        }
    } catch (e) {
        alert('Error: ' + e.message);
    } finally {
        btn.disabled = false;
        btn.textContent = 'Unload All';
    }
}

async function loadLmModel() {
    const btn = event.target;
    const modelSelect = document.getElementById('lm-model-select');
    const ctxInput = document.getElementById('lm-context-length');
    
    const model = modelSelect.value;
    const context_length = parseInt(ctxInput.value) || 4096;
    
    btn.disabled = true;
    btn.textContent = 'Loading...';
    try {
        const resp = await fetch('/api/models/lm/load', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({model, context_length})
        });
        const data = await resp.json();
        if (data.ok) {
            refreshModelStatus();
        } else {
            alert('Failed: ' + data.error);
        }
    } catch (e) {
        alert('Error: ' + e.message);
    } finally {
        btn.disabled = false;
        btn.textContent = 'Load Selected';
    }
}

async function unloadLmModel() {
    const btn = event.target;
    btn.disabled = true;
    btn.textContent = 'Unloading...';
    try {
        const resp = await fetch('/api/models/lm/unload', { method: 'POST' });
        const data = await resp.json();
        if (data.ok) {
            refreshModelStatus();
        } else {
            alert('Failed: ' + data.error);
        }
    } catch (e) {
        alert('Error: ' + e.message);
    } finally {
        btn.disabled = false;
        btn.textContent = 'Unload';
    }
}

async function refreshModels() {
    const btn = event.target;
    if (btn) { btn.disabled = true; btn.textContent = 'Refreshing...'; }
    const select = document.getElementById('lm-model-select');
    const current = select ? select.value : null;
    try {
        const resp = await fetch('/api/models/lm/available');
        const data = await resp.json();
        if (select) {
            select.innerHTML = '';
            if (Array.isArray(data.models) && data.models.length) {
                data.models.forEach(m => {
                    const opt = document.createElement('option');
                    opt.value = m.key;
                    opt.textContent = `${m.display_name || m.key} (${m.params || '?'}, ${m.size_gb || '?'}GB)${m.loaded ? ' ✓' : ''}`;
                    if (m.key === current) opt.selected = true;
                    select.appendChild(opt);
                });
            } else {
                const opt = document.createElement('option');
                opt.value = '';
                opt.disabled = true;
                opt.textContent = data.error || 'No models available';
                select.appendChild(opt);
            }
        }
        refreshModelStatus();
    } catch (e) {
        console.error('Failed to refresh models:', e);
        if (select && select.options.length === 0) {
            const opt = document.createElement('option');
            opt.value = '';
            opt.disabled = true;
            opt.textContent = 'Could not load models';
            select.appendChild(opt);
        }
    } finally {
        if (btn) { btn.disabled = false; btn.textContent = 'Refresh'; }
    }
}

async function refreshModelStatus() {
    try {
        const resp = await fetch('/api/models/status');
        const data = await resp.json();

        // Update Qwen
        const qwen = data.qwen_tts || {};
        updateModelBadge('VoiceDesign', qwen.voicedesign_loaded);
        updateModelBadge('Base Clone', qwen.base_loaded);

        // Update LM Studio
        const lm = data.lm_studio || {};
        const lmStatus = document.querySelector('#model-management-section .model-status:last-of-type');
        if (lmStatus) {
            const indicator = lmStatus.querySelector('.status-indicator');
            const text = lmStatus.childNodes[1];
            if (lm.loaded) {
                lmStatus.className = 'model-status loaded';
                indicator.className = 'status-indicator green';
                text.textContent = ` ${lm.model}`;
            } else {
                lmStatus.className = 'model-status unloaded';
                indicator.className = 'status-indicator gray';
                text.textContent = ' No model loaded';
            }
        }
        
        // Update button states
        const loadVdBtn = document.querySelector('button[onclick="loadQwenModel(\'voicedesign\')"]');
        const loadBaseBtn = document.querySelector('button[onclick="loadQwenModel(\'base\')"]');
        const loadLmBtn = document.querySelector('button[onclick="loadLmModel()"]');
        const unloadLmBtn = document.querySelector('button[onclick="unloadLmModel()"]');
        
        if (loadVdBtn) loadVdBtn.disabled = qwen.voicedesign_loaded;
        if (loadBaseBtn) loadBaseBtn.disabled = qwen.base_loaded;
        if (loadLmBtn) loadLmBtn.disabled = lm.loaded;
        if (unloadLmBtn) unloadLmBtn.disabled = !lm.loaded;
        
    } catch (e) {
        console.error('Failed to refresh model status:', e);
    }
}

function updateModelBadge(name, loaded) {
    const badges = document.querySelectorAll('#model-management-section .model-status');
    badges.forEach(badge => {
        if (badge.textContent.includes(name)) {
            const indicator = badge.querySelector('.status-indicator');
            if (loaded) {
                badge.className = 'model-status loaded';
                indicator.className = 'status-indicator green';
            } else {
                badge.className = 'model-status unloaded';
                indicator.className = 'status-indicator gray';
            }
        }
    });
}

// Auto-refresh every 10 seconds
setInterval(refreshModelStatus, 10000);

// Initial load
document.addEventListener('DOMContentLoaded', () => {
    refreshModelStatus();
    refreshModels();
});
</script>
{% endmacro %}