{% extends "base.html" %}

{% block title %}TG Live Control{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-2 pb-3 mb-4 border-bottom">
    <h1 class="h2"><i class="fa-solid fa-tower-broadcast text-primary me-2"></i>TG Live (Voice Chat) Settings & Control</h1>
</div>

<div class="row g-4">
    <!-- Live Join Settings Form -->
    <div class="col-md-7">
        <div class="card">
            <div class="card-header bg-white py-3">
                <h5 class="mb-0 fw-bold"><i class="fa-solid fa-sliders text-primary me-2"></i>Live Stream Settings</h5>
            </div>
            <div class="card-body">
                <form action="{{ url_for('live_control') }}" method="POST">
                    <input type="hidden" name="action" value="save_config">
                    
                    <div class="mb-3">
                        <label for="target_chat" class="form-label font-weight-bold">Target Channels / Groups Username (Comma Separated for Multiple) *</label>
                        <input type="text" class="form-control form-control-lg" name="target_chat" value="{{ cfg.target_chat if cfg else '' }}" placeholder="@channel1, @channel2, @group3" required>
                        <div class="form-text">Specify one or multiple Telegram channel/group usernames separated by commas (e.g., <code>@channel1, @channel2</code>). All 10 accounts will join ALL specified Live Voice Chats simultaneously!</div>
                    </div>

                    <div class="form-check form-switch mb-3">
                        <input class="form-check-input" type="checkbox" id="is_auto_join" name="is_auto_join" {% if cfg and cfg.is_auto_join %}checked{% endif %}>
                        <label class="form-check-label fw-bold" for="is_auto_join">Continuously detect and auto-join when Live starts</label>
                    </div>

                    <div class="form-check form-switch mb-4">
                        <input class="form-check-input" type="checkbox" id="is_muted" name="is_muted" {% if cfg and cfg.is_muted %}checked{% endif %}>
                        <label class="form-check-label fw-bold" for="is_muted">Mute Audio Microphone when Joining</label>
                    </div>

                    <button type="submit" class="btn btn-primary btn-lg w-100">
                        <i class="fa-solid fa-floppy-disk me-1"></i>Save Configuration
                    </button>
                </form>
            </div>
        </div>
    </div>

    <!-- Live Status & Quick Action Buttons -->
    <div class="col-md-5">
        <div class="card">
            <div class="card-header bg-white py-3 d-flex justify-content-between align-items-center">
                <h5 class="mb-0 fw-bold"><i class="fa-solid fa-circle-play text-success me-2"></i>Live Status & Activity Terminal</h5>
                <div>
                    <button onclick="clearTerminalLogs()" class="btn btn-sm btn-outline-secondary me-1" title="Clear Terminal Log Box">
                        <i class="fa-solid fa-broom me-1"></i>Clear Logs
                    </button>
                    <a href="{{ url_for('live_debug') }}" target="_blank" class="btn btn-sm btn-outline-info" title="Open Realtime Debugger">
                        <i class="fa-solid fa-bug me-1"></i>Debug URL
                    </a>
                </div>
            </div>
            <div class="card-body">
                <div class="p-3 mb-4 rounded bg-light border">
                    <h6 class="text-muted text-uppercase mb-1" style="font-size: 12px;">Connection Status</h6>
                    <h4 class="fw-bold text-primary mb-2" id="live_status_badge">
                        {% if cfg and cfg.is_joined %}
                            <i class="fa-solid fa-signal text-success me-2"></i>CONNECTED TO LIVE
                        {% else %}
                            <i class="fa-solid fa-power-off text-muted me-2"></i>DISCONNECTED
                        {% endif %}
                    </h4>
                    <p class="mb-1 text-muted fw-bold d-flex justify-content-between align-items-center" style="font-size: 13px;">
                        <span><i class="fa-solid fa-terminal me-1 text-success"></i>Realtime Terminal Execution Logs:</span>
                        <span class="badge bg-success" style="font-size: 10px;">LIVE STREAMING</span>
                    </p>
                    <div class="alert alert-warning py-2 mb-2" id="dedicated_worker_status">
                        Checking dedicated worker...
                    </div>
                    <button type="button" class="btn btn-sm btn-outline-warning mb-2" onclick="restartDedicatedWorker()">
                        <i class="fa-solid fa-rotate me-1"></i>Restart Dedicated Worker After Update
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-info mb-2" onclick="showWorkerDiagnostics()">
                        <i class="fa-solid fa-stethoscope me-1"></i>Show Worker/Cron Error
                    </button>
                    <button type="button" class="btn btn-sm btn-outline-secondary mb-2 d-none" id="resume_live_logs" onclick="resumeLiveLogs()">
                        <i class="fa-solid fa-play me-1"></i>Resume Live Logs
                    </button>
                    <pre class="bg-dark text-success p-3 rounded mb-0" id="live_last_log" style="white-space: pre-wrap; font-family: monospace; font-size: 11px; max-height: 280px; overflow-y: auto; border: 1px solid #333; line-height: 1.5;">Loading live activity logs...</pre>
                </div>

                <form action="{{ url_for('live_control') }}" method="POST" class="d-grid gap-2">
                    <button type="submit" name="action" value="join_live" class="btn btn-success btn-lg fw-bold">
                        <i class="fa-solid fa-play me-2"></i>Join TG Live Voice Chat
                    </button>
                    <button type="submit" name="action" value="leave_live" class="btn btn-outline-danger btn-lg">
                        <i class="fa-solid fa-stop me-2"></i>Leave Voice Chat
                    </button>
                    <button type="submit" name="action" value="diagnose" class="btn btn-warning btn-lg fw-bold mt-2">
                        <i class="fa-solid fa-stethoscope me-2"></i>Run TG Live Diagnostic Test
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
let diagnosticsVisible = false;

// Clear Terminal Logs helper
function clearTerminalLogs() {
    fetch('/api/logs/clear', { method: 'POST' })
        .then(res => res.json())
        .then(data => {
            const logBox = document.getElementById('live_last_log');
            if (logBox) logBox.textContent = 'Cleared logs. Waiting for new activity...';
        });
}

function restartDedicatedWorker() {
    const workerBox = document.getElementById('dedicated_worker_status');
    if (workerBox) {
        workerBox.className = 'alert alert-warning py-2 mb-2';
        workerBox.textContent = 'Restarting old worker; waiting for next cron run...';
    }
    fetch('/api/worker/restart', { method: 'POST' })
        .then(res => res.json())
        .then(data => {
            if (!data.success) throw new Error(data.message || 'Restart failed');
            if (workerBox) workerBox.textContent = data.message;
        })
        .catch(err => {
            if (workerBox) {
                workerBox.className = 'alert alert-danger py-2 mb-2';
                workerBox.textContent = `Worker restart failed: ${err.message}`;
            }
        });
}

function showWorkerDiagnostics() {
    diagnosticsVisible = true;
    const resumeButton = document.getElementById('resume_live_logs');
    if (resumeButton) resumeButton.classList.remove('d-none');
    const logBox = document.getElementById('live_last_log');
    if (logBox) logBox.textContent = 'Loading worker diagnostics...';
    fetch('/api/worker/diagnostics', { cache: 'no-store' })
        .then(res => res.json())
        .then(data => {
            if (!data.success) throw new Error(data.message || 'Diagnostics failed');
            const text = [
                '=== DEDICATED WORKER / CRON DIAGNOSTICS ===',
                `App root: ${data.app_root}`,
                `Web Python: ${data.web_python}`,
                `worker.py exists: ${data.worker_exists}`,
                `worker.log exists: ${data.worker_log_exists}`,
                `FFmpeg: ${data.ffmpeg}`,
                `Heartbeat: ${data.heartbeat}`,
                `Worker build: ${data.worker_build}`,
                '',
                '=== worker.log tail ===',
                data.log_tail || '(empty)',
                '',
                '=== dependency_repair.log tail ===',
                data.repair_log_tail || '(empty)'
            ].join('\n');
            if (logBox) {
                logBox.textContent = text;
                logBox.scrollTop = 0;
            }
        })
        .catch(err => {
            if (logBox) logBox.textContent = `Diagnostics failed: ${err.message}`;
        });
}

function resumeLiveLogs() {
    diagnosticsVisible = false;
    const resumeButton = document.getElementById('resume_live_logs');
    if (resumeButton) resumeButton.classList.add('d-none');
    pollLiveStatus();
}

// Auto Realtime Terminal Stream & Live Status AJAX Poller (every 2 seconds)
function pollLiveStatus() {
    fetch('/api/status')
        .then(response => response.json())
        .then(data => {
            const logBox = document.getElementById('live_last_log');
            const badgeBox = document.getElementById('live_status_badge');
            
            if (!diagnosticsVisible && logBox && data.logs) {
                const logsText = data.logs.join('\n');
                const isScrolledToBottom = logBox.scrollHeight - logBox.clientHeight <= logBox.scrollTop + 30;
                logBox.textContent = logsText || 'No logs yet... Click Join to start!';
                if (isScrolledToBottom) {
                    logBox.scrollTop = logBox.scrollHeight;
                }
            }
            if (badgeBox) {
                if (data.is_joined) {
                    badgeBox.innerHTML = '<i class="fa-solid fa-signal text-success me-2"></i>CONNECTED TO LIVE';
                } else {
                    badgeBox.innerHTML = '<i class="fa-solid fa-power-off text-muted me-2"></i>DISCONNECTED';
                }
            }
            const workerBox = document.getElementById('dedicated_worker_status');
            if (workerBox) {
                if (data.dedicated_worker_online) {
                    workerBox.className = 'alert alert-success py-2 mb-2';
                    const build = data.dedicated_worker_build || 'unknown';
                    workerBox.textContent = `✅ Dedicated Worker ONLINE (${build}) — Live status is verified separately above`;
                } else {
                    workerBox.className = 'alert alert-danger py-2 mb-2';
                    const age = data.dedicated_worker_age === null ? 'never started' : `${data.dedicated_worker_age}s ago`;
                    workerBox.textContent = `❌ Dedicated Worker OFFLINE (${age}) — auto-join is paused until cron starts it`;
                }
            }
        })
        .catch(err => console.log('Poll notice:', err));
}
// Initial poll immediately
pollLiveStatus();
setInterval(pollLiveStatus, 2000);

</script>
{% endblock %}