{% extends "modern/base.html" %}

{% block title %}Printers - Zebra Day{% endblock %}

{% block content %}
<div class="page-header">
    <h1 class="page-title">{% if lab %}{{ lab_display_name | default(lab) }}{% else %}Printer Fleet{% endif %}</h1>
    <p class="page-subtitle">Curated printers and discovery candidates stored in TapDB.</p>
</div>

{% if not lab and labs %}
<div class="card mb-lg">
    <div class="card-header">
        <h3 class="card-title">Labs</h3>
    </div>
    <div class="grid grid-4">
        {% for item in labs %}
        <a href="/printers/{{ item }}" class="action-card">
            <i class="fas fa-building"></i>
            <div>
                <strong>{{ item.replace('-', ' ').title() }}</strong>
                <small class="text-muted d-block">{{ item }}</small>
            </div>
        </a>
        {% endfor %}
    </div>
</div>
{% endif %}

<div class="card">
    <div class="card-header">
        <h3 class="card-title">{% if lab %}{{ lab }} printers{% else %}All printers{% endif %}</h3>
        <a href="/print" class="btn btn-outline btn-sm">Print Label</a>
    </div>
    {% if printers %}
    <div class="table-container" style="box-shadow:none;">
        <table class="table">
            <thead>
                <tr>
                    <th>Printer</th>
                    <th>Network</th>
                    <th>Hardware</th>
                    <th>Defaults</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                {% for printer in printers %}
                <tr>
                    <td>
                        <strong>{{ printer.printer_name or printer.printer_id }}</strong>
                        <br><small class="text-muted">{{ printer.lab }}/{{ printer.printer_id }}</small>
                    </td>
                    <td>
                        <code>{{ printer.ip_address }}</code>
                        {% if printer.lab_location %}
                        <br><small class="text-muted">{{ printer.lab_location }}</small>
                        {% endif %}
                    </td>
                    <td>
                        {{ printer.manufacturer | title }} {{ printer.model or "" }}
                        <br><small class="text-muted">SN {{ printer.serial or "unknown" }}</small>
                    </td>
                    <td>
                        <strong>{{ printer.default_label_profile or "none" }}</strong>
                        <br><small class="text-muted">{{ ", ".join(printer.label_profiles) or "no profiles" }}</small>
                    </td>
                    <td>
                        <span class="badge">{{ printer.status or "unknown" }}</span>
                        <br><small class="text-muted">{{ printer.state or "Unknown" }}</small>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="empty-state">
        <i class="fas fa-print"></i>
        <p>No printers found{% if lab %} in {{ lab }}{% endif %}.</p>
    </div>
    {% endif %}
</div>

<div class="card mt-lg">
    <div class="card-header">
        <h3 class="card-title">Discovery</h3>
    </div>
    <form id="scan-form" class="grid grid-4">
        <div class="form-group mb-0">
            <label class="form-label">Lab</label>
            <input id="scan-lab" class="form-control" value="{{ lab | default('default') }}" required>
        </div>
        <div class="form-group mb-0">
            <label class="form-label">IP Stub</label>
            <input id="scan-ip-stub" class="form-control" value="{{ ip_root | default('192.168.1') }}" required>
        </div>
        <div class="form-group mb-0">
            <label class="form-label">HTTP Port</label>
            <input id="scan-http-port" class="form-control" type="number" min="1" max="65535" placeholder="optional">
        </div>
        <div class="form-group mb-0" style="display:flex;align-items:flex-end;">
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-search"></i> Scan
            </button>
        </div>
    </form>
    <p class="text-muted mt-md">Discovery writes observations and draft printers directly into TapDB. Default scan wait is {{ scan_wait }}s.</p>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
document.getElementById('scan-form')?.addEventListener('submit', async (event) => {
    event.preventDefault();
    const lab = document.getElementById('scan-lab').value.trim();
    const ipStub = document.getElementById('scan-ip-stub').value.trim();
    const httpPortRaw = document.getElementById('scan-http-port').value.trim();
    if (!lab || !ipStub) {
        showToast('error', 'Missing values', 'Lab and IP stub are required.');
        return;
    }
    showLoading('Scanning network...');
    try {
        const response = await fetch(`/api/v1/labs/${encodeURIComponent(lab)}/discover`, {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({
                ip_stub: ipStub,
                scan_http_port: httpPortRaw ? Number(httpPortRaw) : null,
            }),
        });
        const payload = await response.json();
        hideLoading();
        if (!response.ok) {
            showToast('error', 'Scan failed', payload.detail || 'Unknown error');
            return;
        }
        showToast('success', 'Scan complete', `Discovered ${payload.length} printer(s).`);
        window.location.href = `/printers/${encodeURIComponent(lab)}`;
    } catch (error) {
        hideLoading();
        showToast('error', 'Scan failed', error.message || 'Unknown error');
    }
});
</script>
{% endblock %}