{% extends "base.html" %}
{% block title_suffix %} - System{% endblock %}

{% block content %}
<div class="page-header">
    <h1>
        <img src="{{ url_for('static', filename='icons/ui_viewloop.png') }}" alt="">
        System Status
    </h1>
</div>

<div class="status-section">
    <h2>
        <img src="{{ url_for('static', filename='icons/ui_viewloop.png') }}" alt="">
        Daemon
    </h2>
    <div class="status-indicator {% if daemon_running %}status-ok{% else %}status-stopped{% endif %}">
        {% if daemon_running %}
            Running (PID: {{ daemon_pid }}){% if loop_settings.loop_paused %} - <span class="text-warning">PAUSED</span>{% endif %}
        {% else %}
            Stopped
        {% endif %}
    </div>
    <p class="help-text">
        {% if daemon_running %}
            The daemon is processing requests. Use <code>bw loop stop</code> to stop it.
        {% else %}
            Start the daemon with <code>bw loop start</code>
        {% endif %}
    </p>
</div>

<div class="status-section">
    <h2>
        <img src="{{ url_for('static', filename='icons/ui_editloop.png') }}" alt="">
        Loop Controls
    </h2>
    <div class="loop-controls">
        <div class="button-group">
            {% if loop_settings.loop_paused %}
            <form action="{{ url_for('api_loop_resume') }}" method="POST" style="display:inline;">
                <button type="submit" class="btn btn-success">Resume Loop</button>
            </form>
            {% else %}
            <form action="{{ url_for('api_loop_pause') }}" method="POST" style="display:inline;">
                <button type="submit" class="btn btn-warning">Pause Loop</button>
            </form>
            {% endif %}
        </div>

        <form action="{{ url_for('api_loop_settings') }}" method="POST" class="form loop-settings-form">
            <div class="form-row">
                <div class="form-group">
                    <label for="poll_interval">Poll Interval (seconds)</label>
                    <input type="number" id="poll_interval" name="poll_interval" min="1" max="3600"
                           value="{{ loop_settings.poll_interval }}">
                </div>
                <div class="form-group">
                    <label for="max_iterations">Max Iterations (0 = unlimited)</label>
                    <input type="number" id="max_iterations" name="max_iterations" min="0"
                           value="{{ loop_settings.max_iterations }}">
                </div>
                <div class="form-group">
                    <label for="doc_retention_days">Doc Retention (days, 0 = forever)</label>
                    <input type="number" id="doc_retention_days" name="doc_retention_days" min="0"
                           value="{{ loop_settings.doc_retention_days }}">
                </div>
                <div class="form-group form-actions">
                    <button type="submit" class="btn btn-primary">Update Settings</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="stats-grid">
    <div class="stat-card">
        <h3>Projects</h3>
        <span class="stat-value">{{ project_count }}</span>
    </div>
    <div class="stat-card">
        <h3>Requests</h3>
        <span class="stat-value">{{ request_count }}</span>
    </div>
</div>

<div class="status-section">
    <h2>
        <img src="{{ url_for('static', filename='icons/ui_filterrecords.png') }}" alt="">
        Requests by Status
    </h2>
    <table class="table table-sm">
        <thead>
            <tr>
                <th>Status</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody>
            {% for status, count in status_counts.items() %}
            <tr>
                <td><span class="badge badge-{{ status }}">{{ STATUS_NAMES.get(status, status) }}</span></td>
                <td>{{ count }}</td>
            </tr>
            {% endfor %}
            {% if not status_counts %}
            <tr>
                <td colspan="2" class="empty-state">No requests</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<div class="status-section">
    <h2>
        <img src="{{ url_for('static', filename='icons/ui_pipeline.png') }}" alt="">
        Requests by Phase
    </h2>
    <table class="table table-sm">
        <thead>
            <tr>
                <th>Phase</th>
                <th>Count</th>
            </tr>
        </thead>
        <tbody>
            {% for phase, count in phase_counts.items() %}
            <tr>
                <td><span class="badge badge-phase">{{ PHASE_NAMES.get(phase, phase) }}</span></td>
                <td>{{ count }}</td>
            </tr>
            {% endfor %}
            {% if not phase_counts %}
            <tr>
                <td colspan="2" class="empty-state">No requests</td>
            </tr>
            {% endif %}
        </tbody>
    </table>
</div>

<script>
// Auto-refresh status every 3 seconds
(function() {
    let refreshInterval;

    function updateStatus() {
        fetch('{{ url_for("api_status") }}')
            .then(response => response.json())
            .then(data => {
                // Update daemon status
                const daemonIndicator = document.querySelector('.status-indicator');
                const daemonText = daemonIndicator.querySelector('span, strong') || daemonIndicator;

                if (data.daemon_running) {
                    daemonIndicator.className = 'status-indicator status-ok';
                    let statusText = `Running (PID: ${data.daemon_pid})`;
                    if (data.loop_paused) {
                        statusText += ' - <span class="text-warning">PAUSED</span>';
                    }
                    daemonIndicator.innerHTML = statusText;
                } else {
                    daemonIndicator.className = 'status-indicator status-stopped';
                    daemonIndicator.textContent = 'Stopped';
                }

                // Update counts
                document.querySelector('.stat-card:nth-child(1) .stat-value').textContent = data.project_count;
                document.querySelector('.stat-card:nth-child(2) .stat-value').textContent = data.request_count;

                // Update status counts table
                const statusTableBody = document.querySelector('.status-section:nth-of-type(3) tbody');
                if (Object.keys(data.status_counts).length > 0) {
                    statusTableBody.innerHTML = Object.entries(data.status_counts)
                        .map(([status, count]) => `
                            <tr>
                                <td><span class="badge badge-${status}">${data.status_names[status] || status}</span></td>
                                <td>${count}</td>
                            </tr>
                        `).join('');
                } else {
                    statusTableBody.innerHTML = '<tr><td colspan="2" class="empty-state">No requests</td></tr>';
                }

                // Update phase counts table
                const phaseTableBody = document.querySelector('.status-section:nth-of-type(4) tbody');
                if (Object.keys(data.phase_counts).length > 0) {
                    phaseTableBody.innerHTML = Object.entries(data.phase_counts)
                        .map(([phase, count]) => `
                            <tr>
                                <td><span class="badge badge-phase">${data.phase_names[phase] || phase}</span></td>
                                <td>${count}</td>
                            </tr>
                        `).join('');
                } else {
                    phaseTableBody.innerHTML = '<tr><td colspan="2" class="empty-state">No requests</td></tr>';
                }
            })
            .catch(error => {
                console.error('Error updating status:', error);
            });
    }

    // Start auto-refresh
    function startAutoRefresh() {
        updateStatus(); // Initial update
        refreshInterval = setInterval(updateStatus, 3000); // Update every 3 seconds
    }

    // Stop auto-refresh when page is hidden (tab switching, etc.)
    document.addEventListener('visibilitychange', function() {
        if (document.hidden) {
            clearInterval(refreshInterval);
        } else {
            startAutoRefresh();
        }
    });

    // Start when page loads
    startAutoRefresh();
})();
</script>
{% endblock %}