{% extends "base.html" %}
{% set active_nav = "intake" %}

{% block title %}Print Barcode Labels - LSMC Atlas{% endblock %}

{% block content %}
<div class="page-header">
    <div>
        <h1 class="page-title">Print Barcode Labels</h1>
        <p class="page-subtitle">Generate and print labels for kits and shipments</p>
    </div>
    <div>
        <a href="/intake" class="btn btn-ghost">← Back to Intake</a>
    </div>
</div>

<div class="flex gap-lg">
    <!-- Print Form -->
    <div style="flex: 2;">
        <div class="card mb-lg">
            <h3 class="mb-md">Print Label</h3>
            
            <form id="print-form">
                <div class="mb-md">
                    <label class="form-label">Label Type</label>
                    <select name="entity_type" class="form-input" required onchange="updateFormFields(this.value)">
                        <option value="TestKit">TestKit</option>
                        <option value="Shipment">Shipment</option>
                    </select>
                </div>

                <div class="mb-md">
                    <label class="form-label">Barcode Value *</label>
                    <input type="text" name="barcode" class="form-input" required 
                           placeholder="Enter barcode value to print">
                    <small class="text-muted">This will be encoded as both barcode and human-readable text</small>
                </div>

                <div id="testkit-fields" style="display: none;">
                    <div class="mb-md">
                        <label class="form-label">Kit Type</label>
                        <input type="text" name="kit_type" class="form-input" 
                               placeholder="e.g., DNA Collection, Blood Collection">
                    </div>
                </div>

                <div id="shipment-fields" style="display: none;">
                    <div class="mb-md">
                        <label class="form-label">Carrier</label>
                        <input type="text" name="carrier" class="form-input" 
                               placeholder="e.g., FedEx, UPS">
                    </div>
                </div>

                <div class="mb-md">
                    <label class="form-label">Printer</label>
                    <select name="printer_name" class="form-input">
                        <option value="">Default Printer</option>
                        {% for printer in printers %}
                        <option value="{{ printer.name }}">{{ printer.name }} ({{ printer.model or printer.ip_address }})</option>
                        {% endfor %}
                    </select>
                </div>

                <div class="mb-md">
                    <label class="form-label">Label Format</label>
                    <select name="label_type" class="form-input">
                        <option value="tube_2inX1in">Tube Label (2" × 1")</option>
                        <option value="tube_2inX0.3in">Small Tube Label (2" × 0.3")</option>
                        <option value="plate_1inX0.25in">Plate Label (1" × 0.25")</option>
                        <option value="test_2inX1in">Test Label (2" × 1")</option>
                    </select>
                </div>

                <div class="mb-lg">
                    <label class="form-label">Copies</label>
                    <input type="number" name="copies" class="form-input" value="1" min="1" max="10">
                </div>

                <button type="submit" class="btn btn-primary" style="width: 100%;">
                    🖨️ Print Label
                </button>
            </form>
        </div>

        <!-- Print Result -->
        <div id="print-result" class="card" style="display: none;">
            <h3 class="mb-md">Print Result</h3>
            <div id="print-result-content"></div>
        </div>
    </div>

    <!-- Printer Status -->
    <div style="flex: 1;">
        <div class="card mb-lg">
            <h3 class="mb-md">Service Status</h3>
            {% if service_available %}
            <div class="mb-md">
                <span class="badge badge-success">✓ Available</span>
            </div>
            <div class="text-sm text-muted">
                {{ printer_count }} printer(s) configured
            </div>
            {% else %}
            <div class="mb-md">
                <span class="badge badge-danger">✗ Unavailable</span>
            </div>
            <div class="text-sm text-muted">
                zebra_day library not installed
            </div>
            {% endif %}
        </div>

        <div class="card">
            <h3 class="mb-md">Configured Printers</h3>
            {% if printers %}
            <div class="printer-list">
                {% for printer in printers %}
                <div class="printer-item">
                    <div class="printer-name">🖨️ {{ printer.name }}</div>
                    <div class="text-sm text-muted">
                        {{ printer.model or "Unknown model" }}<br>
                        IP: {{ printer.ip_address }}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="text-muted">No printers configured</div>
            {% endif %}
        </div>
    </div>
</div>

<style>
.printer-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.printer-item {
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
}

.printer-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
</style>

<script>
function updateFormFields(entityType) {
    document.getElementById('testkit-fields').style.display = entityType === 'TestKit' ? 'block' : 'none';
    document.getElementById('shipment-fields').style.display = entityType === 'Shipment' ? 'block' : 'none';
}

document.getElementById('print-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    const entityType = formData.get('entity_type');
    const barcode = formData.get('barcode');
    const printerName = formData.get('printer_name') || null;
    const labelType = formData.get('label_type');
    const copies = parseInt(formData.get('copies')) || 1;

    // Build request body based on entity type
    const body = {
        entity_type: entityType,
        entity_id: crypto.randomUUID(),  // Generate a temporary ID
        barcode: barcode,
        label_type: labelType,
        printer_name: printerName,
        copies: copies,
        alt_a: formData.get('kit_type') || formData.get('carrier') || '',
        alt_b: '',
        alt_c: '',
        alt_d: '',
    };

    try {
        const response = await fetch('/api/barcode/print', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(body),
        });

        const result = await response.json();

        const resultDiv = document.getElementById('print-result');
        const contentDiv = document.getElementById('print-result-content');

        resultDiv.style.display = 'block';

        if (result.success) {
            contentDiv.innerHTML = `
                <div class="text-success mb-sm">✓ ${result.message}</div>
                <div class="text-muted text-sm">Job ID: ${result.print_job_id || 'N/A'}</div>
            `;
        } else {
            contentDiv.innerHTML = `
                <div class="text-danger mb-sm">✗ Print failed</div>
                <div class="text-muted text-sm">${result.message || result.detail || 'Unknown error'}</div>
            `;
        }
    } catch (error) {
        const resultDiv = document.getElementById('print-result');
        const contentDiv = document.getElementById('print-result-content');

        resultDiv.style.display = 'block';
        contentDiv.innerHTML = `
            <div class="text-danger mb-sm">✗ Error</div>
            <div class="text-muted text-sm">${error.message}</div>
        `;
    }
});

updateFormFields(document.querySelector('select[name="entity_type"]').value);
</script>

{% endblock %}