{% extends 'base.html' %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2"><i class="bi bi-activity text-primary me-2"></i>{{ _('Printer Status') }}</h1>
</div>

{% if error %}
<div class="alert alert-danger" role="alert">
    <i class="bi bi-exclamation-triangle me-2"></i>{{ error }}
    {% if current_user.is_admin %}
    <a href="{{ url_for('printer.octo_config') }}" class="alert-link">{{ _('Go to Configuration') }}</a>
    {% endif %}
</div>
{% elif status %}
<div class="row row-cols-1 row-cols-md-2 g-4">
    <!-- State Card -->
    <div class="col">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-light fw-bold text-secondary">
                <i class="bi bi-info-circle me-1"></i>{{ _('Current State') }}
            </div>
            <div class="card-body text-center">
                <h3 class="display-6 mt-3 text-primary" id="printer-state-text">{{ status.get('state', {}).get('text', 'Unknown') if status else 'Unknown' }}</h3>
            </div>
        </div>
    </div>

    <!-- Temperature Card -->
    <div class="col">
        <div class="card shadow-sm h-100">
            <div class="card-header bg-light fw-bold text-secondary">
                <i class="bi bi-thermometer-half me-1"></i>{{ _('Temperatures') }}
            </div>
            <div class="card-body">
                {% set temps = status.get('temperature', {}) if status else {} %}
                
                <h5 class="mb-1"><i class="bi bi-fire text-danger me-2"></i>{{ _('Tool/Nozzle') }}</h5>
                <h4 class="ms-4 mb-4">
                    <span id="tool-actual">{{ temps.get('tool0', {}).get('actual', 0) }}</span> °C 
                    <small class="text-muted fs-6">/ <span id="tool-target">{{ temps.get('tool0', {}).get('target', 0) }}</span> °C</small>
                </h4>
                
                <h5 class="mb-1"><i class="bi bi-square-fill text-warning me-2"></i>{{ _('Bed') }}</h5>
                <h4 class="ms-4">
                    <span id="bed-actual">{{ temps.get('bed', {}).get('actual', 0) }}</span> °C 
                    <small class="text-muted fs-6">/ <span id="bed-target">{{ temps.get('bed', {}).get('target', 0) }}</span> °C</small>
                </h4>
            </div>
        </div>
    </div>
</div>

<div class="card shadow-sm mt-4 border-success" id="active-job-card" style="display: {% if job and job.get('job', {}).get('file', {}).get('name') %}block{% else %}none{% endif %};">
    <div class="card-header bg-success text-white fw-bold">
        <i class="bi bi-play-circle me-1"></i>{{ _('Active Print Job') }}
    </div>
    <div class="card-body">
        <h5 id="job-file-name">{{ job.get('job', {}).get('file', {}).get('display_name') or job.get('job', {}).get('file', {}).get('name') if job else '' }}</h5>
        
        {% set progress = job.get('progress', {}).get('completion', 0) if job else 0 %}
        {% if progress == None %}{% set progress = 0 %}{% endif %}
        <div class="progress mt-3 mb-2" style="height: 25px;">
            <div id="job-progress-bar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" style="width: {{ progress }}%;" aria-valuenow="{{ progress }}" aria-valuemin="0" aria-valuemax="100">
                <span id="job-progress-text">{{ "%.1f"|format(progress) }}%</span>
            </div>
        </div>
        
        <div class="d-flex justify-content-between text-muted small mt-2">
            <span><strong>{{ _('Print Time:') }}</strong> <span id="job-print-time"></span></span>
            <span><strong>{{ _('Time Left:') }}</strong> <span id="job-time-left"></span></span>
        </div>
        
        <div class="mt-4 gap-2 d-flex">
            <button class="btn btn-warning" onclick="sendCmd('pause')"><i class="bi bi-pause-fill me-1"></i>{{ _('Pause/Resume') }}</button>
            <button class="btn btn-danger" onclick="sendCmd('cancel')"><i class="bi bi-stop-fill me-1"></i>{{ _('Cancel') }}</button>
        </div>
    </div>
</div>

{% endif %}

<script>
function formatTime(seconds) {
    if (!seconds && seconds !== 0) return '0{{ _("s") }}';
    seconds = Math.round(seconds);
    let d = Math.floor(seconds / 86400);
    let h = Math.floor((seconds % 86400) / 3600);
    let m = Math.floor((seconds % 3600) / 60);
    let s = Math.floor(seconds % 60);
    
    let res = [];
    if (d > 0) res.push(d + '{{ _("d") }}');
    if (h > 0 || d > 0) res.push(h + '{{ _("h") }}');
    if (m > 0 || h > 0 || d > 0) res.push(m + '{{ _("m") }}');
    if (s > 0 || res.length === 0) res.push(s + '{{ _("s") }}');
    return res.join(' ');
}

function updateStatus() {
    fetch('{{ url_for("printer.api_status_data") }}')
        .then(res => res.json())
        .then(data => {
            if(data.success) {
                if(data.status && data.status.state) {
                    document.getElementById('printer-state-text').innerText = data.status.state.text || 'Unknown';
                }
                if(data.status && data.status.temperature) {
                    const tool = data.status.temperature.tool0 || {};
                    const bed = data.status.temperature.bed || {};
                    document.getElementById('tool-actual').innerText = tool.actual !== undefined ? tool.actual : 0;
                    document.getElementById('tool-target').innerText = tool.target !== undefined ? tool.target : 0;
                    document.getElementById('bed-actual').innerText = bed.actual !== undefined ? bed.actual : 0;
                    document.getElementById('bed-target').innerText = bed.target !== undefined ? bed.target : 0;
                }
                const jobCard = document.getElementById('active-job-card');
                if(data.job && data.job.job && data.job.job.file && data.job.job.file.name) {
                    jobCard.style.display = 'block';
                    document.getElementById('job-file-name').innerText = data.job.job.file.display_name || data.job.job.file.name;
                    let progress = data.job.progress && data.job.progress.completion ? data.job.progress.completion : 0;
                    document.getElementById('job-progress-bar').style.width = progress + '%';
                    document.getElementById('job-progress-bar').setAttribute('aria-valuenow', progress);
                    document.getElementById('job-progress-text').innerText = progress.toFixed(1) + '%';
                    document.getElementById('job-print-time').innerText = formatTime(data.job.progress ? data.job.progress.printTime : 0);
                    document.getElementById('job-time-left').innerText = formatTime(data.job.progress ? data.job.progress.printTimeLeft : 0);
                } else {
                    jobCard.style.display = 'none';
                }
            }
        })
        .catch(err => console.error("Error fetching status:", err));
}
{% if not error %}
// Run once immediately to populate initial data consistently
updateStatus();
setInterval(updateStatus, 1000);
{% endif %}

function sendCmd(cmd) {
    if(cmd === 'cancel') {
        window.customConfirm("{{ _('Are you sure you want to cancel the print?') }}", () => doSendCmd(cmd));
    } else {
        doSendCmd(cmd);
    }
}
function doSendCmd(cmd) {
    fetch('{{ url_for("printer.api_command") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({command: cmd})
    })
    .then(res => res.json())
    .then(data => {
        if(data.success) {
            updateStatus();
        } else {
            window.customAlert("Error: " + data.error);
        }
    });
}
</script>
{% endblock %}