// DOM Elements
const connectBtn = document.getElementById('connectBtn');
const printBtn = document.getElementById('printBtn');
const statusText = document.getElementById('statusText');
const statusDot = document.getElementById('statusDot');
const labelForm = document.getElementById('labelForm');
const labelType = document.getElementById('labelType');

// Inputs
const itemNameLabel = document.getElementById('itemNameLabel');
const itemName = document.getElementById('itemName');
const itemPriceLabel = document.getElementById('itemPriceLabel');
const itemPrice = document.getElementById('itemPrice');
const itemNotesLabel = document.getElementById('itemNotesLabel');
const itemNotes = document.getElementById('itemNotes');

// Preview Elements
const previewName = document.getElementById('previewName');
const previewPrice = document.getElementById('previewPrice');
const previewNotes = document.getElementById('previewNotes');

// Bluetooth State
let printDevice = null;
let printCharacteristic = null;

// Live Preview Updater
const labelPreviewContainer = document.getElementById('labelPreview');

const updatePreview = () => {
    const isCable = labelType.value === 'cable';
    const repeats = isCable ? 3 : 1;

    labelPreviewContainer.innerHTML = ''; // Clear current

    // Toggle Labels & Placeholders
    if (isCable) {
        itemNameLabel.textContent = "Source / Near-End";
        itemName.placeholder = "e.g. SW-CORE-01 P12";
        itemPriceLabel.textContent = "Destination / Far-End";
        itemPrice.placeholder = "e.g. SRV-WEB ETH0";
        itemNotesLabel.textContent = "Cable Info (Optional)";
        itemNotes.placeholder = "e.g. CAT6 / VLAN 20";
    } else {
        itemNameLabel.textContent = "Item Name";
        itemName.placeholder = "e.g. Premium Coffee Beans";
        itemPriceLabel.textContent = "Price";
        itemPrice.placeholder = "e.g. Rp 50.000";
        itemNotesLabel.textContent = "Additional Notes (Optional)";
        itemNotes.placeholder = "e.g. 500g, Exp: 24/12/26";
    }

    let blockHtml = '';

    if (isCable) {
        const nameVal = itemName.value || 'SW-CORE-01 P12';
        const priceVal = itemPrice.value || 'SRV-WEB ETH0';
        const notesVal = itemNotes.value || 'CAT6';

        blockHtml = `
            <div class="brand-header" style="font-size: 0.95rem;">[SRC] ${nameVal.toUpperCase()}</div>
            <div class="brand-header" style="font-size: 0.95rem; margin-top:2px;">[DST] ${priceVal.toUpperCase()}</div>
            <div class="preview-notes" style="margin-top:2px;">(${notesVal})</div>
            <div class="divider">--------------------</div>
        `;
    } else {
        const nameVal = itemName.value || 'ITEM NAME';
        const priceVal = itemPrice.value || 'Rp 0';
        const notesVal = itemNotes.value || 'Notes here';

        blockHtml = `
            <div class="brand-header">LABEL STORE</div>
            <div class="preview-name">${nameVal.toUpperCase()}</div>
            <div class="divider">====================</div>
            <div class="preview-price">${priceVal}</div>
            <div class="divider">====================</div>
        `;
        if (notesVal) {
            blockHtml += `<div class="preview-notes">${notesVal}</div>`;
        }
    }

    const blockDiv = document.createElement('div');
    blockDiv.innerHTML = blockHtml;
    labelPreviewContainer.appendChild(blockDiv);
};

labelType.addEventListener('change', updatePreview);
itemName.addEventListener('input', updatePreview);
itemPrice.addEventListener('input', updatePreview);
itemNotes.addEventListener('input', updatePreview);

// Handle BT Connection
connectBtn.addEventListener('click', async () => {
    try {
        if (!navigator.bluetooth) {
            alert('Web Bluetooth API is not available on your browser. Please use Chrome on Android or Desktop.');
            return;
        }

        connectBtn.textContent = 'Connecting...';

        const device = await navigator.bluetooth.requestDevice({
            acceptAllDevices: true,
            optionalServices: [
                '000018f0-0000-1000-8000-00805f9b34fb', // standard SPP
                'e7810a71-73ae-499d-8c15-faa9aef0c3f2',
                '49535343-fe7d-4ae5-8fa9-9fafd205e455', // iOS serial / generic clone
                '0000ff00-0000-1000-8000-00805f9b34fb' // generic custom
            ]
        });

        printDevice = device;
        device.addEventListener('gattserverdisconnected', onDisconnected);

        statusText.textContent = 'Pairing...';
        const server = await device.gatt.connect();

        statusText.textContent = 'Finding Services...';
        const services = await server.getPrimaryServices();

        // Find the characteristic that supports WRITE without response (or write)
        let foundChar = null;
        for (const service of services) {
            const characteristics = await service.getCharacteristics();
            for (const char of characteristics) {
                if (char.properties.write || char.properties.writeWithoutResponse) {
                    foundChar = char;
                    break;
                }
            }
            if (foundChar) break;
        }

        if (!foundChar) {
            throw new Error('Writable characteristic not found on this device');
        }

        printCharacteristic = foundChar;

        // UI Update on Success
        statusDot.className = 'dot connected';
        statusText.textContent = `Connected: ${device.name || 'Printer'}`;
        connectBtn.style.display = 'none';
        printBtn.disabled = false;

    } catch (error) {
        console.error('Connection Error:', error);
        alert(`Connection Failed: ${error.message}`);
        resetUI();
    }
});

function onDisconnected() {
    console.log('Device Disconnected');
    printDevice = null;
    printCharacteristic = null;
    resetUI();
}

function resetUI() {
    statusDot.className = 'dot disconnected';
    statusText.textContent = 'Disconnected';
    connectBtn.style.display = 'inline-flex';
    connectBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 7 10 10-5 5V2l5 5L7 17"></path></svg> Connect to Printer';
    printBtn.disabled = true;
}

// Convert string to bytes
function encodeToBytes(str) {
    const arr = [];
    for (let i = 0; i < str.length; i++) {
        let code = str.charCodeAt(i);
        if (code > 255) code = 63; // '?'
        arr.push(code);
    }
    return arr;
}

labelForm.addEventListener('submit', async (e) => {
    e.preventDefault();
    console.log("Submit triggered. Characteristic:", printCharacteristic);

    if (!printCharacteristic) {
        alert("Printer is not fully connected. Please ensure you click 'Connect to Printer' first and the indicator is Green (Connected).");
        return;
    }

    printBtn.disabled = true;
    printBtn.textContent = 'Printing...';

    // Formatting the Print Job using CPCL (Comtec Printer Control Language)
    // CPCL uses text based commands, ending with PRINT

    let cpcl = [];

    // Initialize CPCL label format
    // Format: ! offset <200|x|y> <xres> <yres> <height> <qty>
    // 200 dpi, 200 dpi, height ~ 800 dots (100mm)
    cpcl.push("! 0 200 200 800 1\r\n");

    // PAGE-WIDTH 450 (Maximize printable area on 58mm)
    cpcl.push("PAGE-WIDTH 480\r\n");

    let currentY = 20;

    const isCable = labelType.value === 'cable';

    // Print Single Block Logic
    const generateTextBlock = (startY) => {
        let y = startY;

        if (isCable) {
            // --- Source ---
            cpcl.push(`TEXT 7 1 0 ${y} [SRC] ${itemName.value.toUpperCase()}\r\n`);
            y += 50;

            // --- Destination ---
            cpcl.push(`TEXT 7 1 0 ${y} [DST] ${itemPrice.value.toUpperCase()}\r\n`);
            y += 50;

            // --- Cable Info ---
            if (itemNotes.value) {
                cpcl.push(`TEXT 7 0 0 ${y} (${itemNotes.value})\r\n`);
                y += 50;
            }

            // --- Divider ---
            cpcl.push(`LINE 0 ${y} 430 ${y} 2\r\n`);
        } else {
            // --- Header ---
            cpcl.push(`TEXT 7 0 0 ${y} ITEM NAME\r\n`);
            y += 40;
            cpcl.push(`TEXT 7 0 0 ${y} ${itemName.value.toUpperCase()}\r\n`);
            y += 50;

            // --- Divider ---
            cpcl.push(`LINE 0 ${y} 430 ${y} 2\r\n`);
            y += 20;

            // --- Price ---
            cpcl.push(`TEXT 7 1 0 ${y} ${itemPrice.value}\r\n`);
            y += 60;

            // --- Divider ---
            cpcl.push(`LINE 0 ${y} 430 ${y} 2\r\n`);
            y += 20;

            // --- Notes ---
            if (itemNotes.value) {
                cpcl.push(`TEXT 7 0 0 ${y} ${itemNotes.value}\r\n`);
                y += 40;
            }
        }
    };

    if (labelType.value === 'cable') {
        // Cable Wrap Style: Print 1 block at the very top. 
        // The bottom 80% of the label will be blank because it overlaps/wraps around the cable.
        generateTextBlock(20);
    } else {
        // Standard Label Style: Single block at top
        generateTextBlock(20);
    }

    // Finish rendering and print
    cpcl.push("FORM\r\n");
    cpcl.push("PRINT\r\n");

    // Combine to single string and encode
    const printString = cpcl.join("");
    console.log("Sending CPCL Command:\n", printString);
    const printData = encodeToBytes(printString);

    // Recursive Write Queue
    const MAX_CHUNK = 20; // 20-byte MTU limit for maximum standard BLE compatibility
    let chunks = [];

    for (let i = 0; i < printData.length; i += MAX_CHUNK) {
        chunks.push(new Uint8Array(printData.slice(i, i + MAX_CHUNK)));
    }

    const writeNextChunk = async () => {
        if (chunks.length === 0) {
            console.log("Print job completed successfully.");
            printBtn.disabled = false;
            printBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg> Print via Bluetooth';
            return;
        }

        const chunk = chunks.shift();

        try {
            console.log("Writing chunk...", chunk.length, "bytes. Char props:", Object.keys(printCharacteristic.properties).filter(k => printCharacteristic.properties[k]).join(','));

            // Prioritize writeWithoutResponse for cheap clones - they often stall on writeValue
            if (printCharacteristic.properties && printCharacteristic.properties.writeWithoutResponse) {
                await printCharacteristic.writeValueWithoutResponse(chunk);
            } else if (printCharacteristic.properties && printCharacteristic.properties.write) {
                await printCharacteristic.writeValue(chunk);
            } else {
                await printCharacteristic.writeValue(chunk);
            }

            setTimeout(writeNextChunk, 100); // Wait 100ms before next 20 byte chunk to ensure buffer digests
        } catch (error) {
            console.error("Critical Write Error:", error);
            alert(`Printing failed: ${error.message}`);
            printBtn.disabled = false;
            printBtn.innerHTML = '<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M6 9V2h12v7"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg> Retry Print';
        }
    };

    // Kick off printing
    writeNextChunk();
});

// Initialize the preview on load
updatePreview();