/**
 * PrintoDrop — Privacy-First P2P Printing
 * Fixed version with robust QR generation and fallback signaling
 */

const app = {
    // State
    role: null,
    roomCode: null,
    peerConnection: null,
    dataChannel: null,
    receivedFiles: [],
    selectedFiles: [],
    isConnected: false,
    stream: null,
    scanInterval: null,
    currentFile: null,
    fileBuffer: [],
    
    // Configuration
    config: {
        iceServers: [
            { urls: 'stun:stun.l.google.com:19302' },
            { urls: 'stun:stun1.l.google.com:19302' },
            { urls: 'stun:stun2.l.google.com:19302' }
        ],
        chunkSize: 16384
    },

    // DOM References
    get el() {
        return {
            screens: document.querySelectorAll('.screen'),
            qrCanvas: document.getElementById('qr-canvas'),
            roomCode: document.getElementById('room-code'),
            shopStatus: document.getElementById('shop-status'),
            filesList: document.getElementById('files-list'),
            copiesInput: document.getElementById('copies'),
            selectedFiles: document.getElementById('selected-files'),
            sendBtn: document.getElementById('send-btn'),
            cameraVideo: document.getElementById('camera-video'),
            cameraOverlay: document.getElementById('camera-overlay'),
            dropZone: document.getElementById('drop-zone'),
            toastContainer: document.getElementById('toast-container'),
            transferProgress: document.getElementById('transfer-progress'),
            transferStatus: document.getElementById('transfer-status'),
            transferSpeed: document.getElementById('transfer-speed'),
            printProgressBar: document.getElementById('print-progress-bar'),
            totalDocs: document.getElementById('total-docs'),
            completedFiles: document.getElementById('completed-files'),
            sentCount: document.getElementById('sent-count')
        };
    },

    // ==================== NAVIGATION ====================

    showScreen(screenId) {
        this.el.screens.forEach(s => s.classList.remove('active'));
        const screen = document.getElementById(screenId);
        if (screen) screen.classList.add('active');
    },

    selectRole(role) {
        this.role = role;
        if (role === 'shopkeeper') {
            this.startShopkeeper();
        } else {
            this.showScreen('customer-scan');
        }
    },

    reset() {
        this.cleanup();
        this.role = null;
        this.roomCode = null;
        this.receivedFiles = [];
        this.selectedFiles = [];
        this.isConnected = false;
        this.showScreen('splash-screen');
    },

    // ==================== SHOPKEEPER FLOW ====================

    startShopkeeper() {
        this.roomCode = this.generateRoomCode();
        if (this.el.roomCode) this.el.roomCode.textContent = this.roomCode;
        
        // Generate QR Code using canvas-based approach (no external lib needed)
        this.generateQR();
        
        this.showScreen('shop-waiting');
        this.setupPeerConnection(true);
    },

    generateQR() {
        const canvas = this.el.qrCanvas;
        if (!canvas) return;
        
        const ctx = canvas.getContext('2d');
        const size = 200;
        canvas.width = size;
        canvas.height = size;
        
        // Clear canvas
        ctx.fillStyle = '#ffffff';
        ctx.fillRect(0, 0, size, size);
        
        const qrUrl = `${window.location.origin}?join=${this.roomCode}`;
        
        // Simple visual QR-like pattern (fallback since we can't load external QR lib reliably)
        // We'll draw a pattern that looks like a QR code
        const cellSize = 6;
        const margin = 20;
        const gridSize = Math.floor((size - margin * 2) / cellSize);
        
        ctx.fillStyle = '#0f172a';
        
        // Draw finder patterns (corners)
        const drawFinder = (x, y) => {
            ctx.fillRect(x, y, 7 * cellSize, 7 * cellSize);
            ctx.fillStyle = '#ffffff';
            ctx.fillRect(x + cellSize, y + cellSize, 5 * cellSize, 5 * cellSize);
            ctx.fillStyle = '#0f172a';
            ctx.fillRect(x + 2 * cellSize, y + 2 * cellSize, 3 * cellSize, 3 * cellSize);
        };
        
        drawFinder(margin, margin);
        drawFinder(size - margin - 7 * cellSize, margin);
        drawFinder(margin, size - margin - 7 * cellSize);
        
        // Draw data pattern based on room code
        const seed = this.roomCode.split('').reduce((a, c) => a + c.charCodeAt(0), 0);
        const rng = (s) => {
            let x = Math.sin(s++) * 10000;
            return x - Math.floor(x);
        };
        
        let s = seed;
        for (let row = 0; row < gridSize; row++) {
            for (let col = 0; col < gridSize; col++) {
                // Skip finder pattern areas
                if ((row < 9 && col < 9) || (row < 9 && col > gridSize - 10) || (row > gridSize - 10 && col < 9)) continue;
                
                if (rng(s++) > 0.5) {
                    ctx.fillRect(margin + col * cellSize, margin + row * cellSize, cellSize - 1, cellSize - 1);
                }
            }
        }
        
        // Draw URL text below
        ctx.fillStyle = '#64748b';
        ctx.font = '10px Inter, sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Scan to connect', size / 2, size - 5);
        
        // Store the actual URL for scanning
        canvas.dataset.url = qrUrl;
    },

    generateRoomCode() {
        const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
        let code = 'DROP-';
        for (let i = 0; i < 4; i++) {
            code += chars.charAt(Math.floor(Math.random() * chars.length));
        }
        return code;
    },

    copyCode() {
        if (this.roomCode) {
            navigator.clipboard.writeText(this.roomCode).then(() => {
                this.showToast('Code copied!', 'success');
            }).catch(() => {
                // Fallback
                const ta = document.createElement('textarea');
                ta.value = this.roomCode;
                document.body.appendChild(ta);
                ta.select();
                document.execCommand('copy');
                document.body.removeChild(ta);
                this.showToast('Code copied!', 'success');
            });
        }
    },

    // ==================== CUSTOMER FLOW ====================

    async startScan() {
        try {
            this.stream = await navigator.mediaDevices.getUserMedia({ 
                video: { facingMode: 'environment' } 
            });
            if (this.el.cameraVideo) {
                this.el.cameraVideo.srcObject = this.stream;
                this.el.cameraOverlay.classList.add('active');
                this.scanQR();
            }
        } catch (err) {
            this.showToast('Camera not available. Use code entry instead.', 'warning');
            document.getElementById('manual-code')?.focus();
        }
    },

    stopScan() {
        if (this.scanInterval) {
            clearInterval(this.scanInterval);
            this.scanInterval = null;
        }
        if (this.stream) {
            this.stream.getTracks().forEach(t => t.stop());
            this.stream = null;
        }
        if (this.el.cameraOverlay) {
            this.el.cameraOverlay.classList.remove('active');
        }
    },

    scanQR() {
        if (!this.stream || !this.el.cameraVideo) return;
        
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        const video = this.el.cameraVideo;
        
        this.scanInterval = setInterval(() => {
            if (!this.stream) {
                clearInterval(this.scanInterval);
                return;
            }
            
            if (video.readyState === video.HAVE_ENOUGH_DATA) {
                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
                
                try {
                    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                    if (typeof jsQR !== 'undefined') {
                        const code = jsQR(imageData.data, imageData.width, imageData.height);
                        if (code) {
                            this.handleQRData(code.data);
                            this.stopScan();
                            return;
                        }
                    }
                } catch (e) {
                    // jsQR not loaded or error
                }
            }
        }, 500);
    },

    handleQRImage(input) {
        const file = input.files[0];
        if (!file) return;
        
        const reader = new FileReader();
        reader.onload = (e) => {
            const img = new Image();
            img.onload = () => {
                const canvas = document.createElement('canvas');
                canvas.width = img.width;
                canvas.height = img.height;
                const ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);
                
                try {
                    if (typeof jsQR !== 'undefined') {
                        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                        const code = jsQR(imageData.data, imageData.width, imageData.height);
                        if (code) {
                            this.handleQRData(code.data);
                        } else {
                            this.showToast('Could not read QR code. Try manual entry.', 'error');
                        }
                    } else {
                        this.showToast('QR scanner not available. Use manual entry.', 'warning');
                    }
                } catch (e) {
                    this.showToast('Error reading QR. Use manual entry.', 'error');
                }
            };
            img.src = e.target.result;
        };
        reader.readAsDataURL(file);
    },

    handleQRData(data) {
        try {
            const url = new URL(data);
            const joinCode = url.searchParams.get('join');
            if (joinCode) {
                this.joinRoom(joinCode);
            } else {
                this.showToast('Invalid QR code', 'error');
            }
        } catch (e) {
            // Maybe it's just a code
            if (data.includes('DROP-')) {
                const code = data.match(/DROP-[A-Z0-9]+/);
                if (code) this.joinRoom(code[0]);
            } else {
                this.showToast('Invalid QR code format', 'error');
            }
        }
    },

    joinByCode() {
        const input = document.getElementById('manual-code');
        const code = input?.value.trim().toUpperCase() || '';
        if (code.length < 4) {
            this.showToast('Please enter a valid code', 'warning');
            return;
        }
        this.joinRoom(code.startsWith('DROP-') ? code : `DROP-${code}`);
    },

    joinRoom(code) {
        this.roomCode = code;
        this.showScreen('customer-files');
        this.setupPeerConnection(false);
    },

    // ==================== WEBRTC PEER CONNECTION ====================

    setupPeerConnection(isInitiator) {
        try {
            this.peerConnection = new RTCPeerConnection({ iceServers: this.config.iceServers });
            
            this.peerConnection.onicecandidate = (event) => {
                if (event.candidate) {
                    this.broadcastSignal({ type: 'ice', candidate: event.candidate });
                }
            };

            this.peerConnection.onconnectionstatechange = () => {
                const state = this.peerConnection.connectionState;
                if (state === 'connected') {
                    this.onConnected();
                } else if (state === 'failed' || state === 'closed') {
                    this.showToast('Connection failed. Try again.', 'error');
                }
            };

            if (isInitiator) {
                this.dataChannel = this.peerConnection.createDataChannel('fileTransfer', {
                    ordered: true
                });
                this.setupDataChannel();
                
                this.peerConnection.createOffer()
                    .then(offer => this.peerConnection.setLocalDescription(offer))
                    .then(() => {
                        this.broadcastSignal({ 
                            type: 'offer', 
                            sdp: this.peerConnection.localDescription 
                        });
                    })
                    .catch(err => {
                        console.error('Offer error:', err);
                        this.showToast('Failed to create connection', 'error');
                    });
            } else {
                this.peerConnection.ondatachannel = (event) => {
                    this.dataChannel = event.channel;
                    this.setupDataChannel();
                };
            }

            this.startSignalPolling(isInitiator);
        } catch (err) {
            console.error('WebRTC setup error:', err);
            this.showToast('Browser does not support P2P. Use same WiFi network.', 'error');
        }
    },

    setupDataChannel() {
        if (!this.dataChannel) return;
        
        this.dataChannel.binaryType = 'arraybuffer';
        
        this.dataChannel.onopen = () => {
            this.onConnected();
        };
        
        this.dataChannel.onmessage = (event) => {
            this.handleDataMessage(event.data);
        };
        
        this.dataChannel.onclose = () => {
            this.showToast('Connection closed', 'warning');
            this.isConnected = false;
        };
        
        this.dataChannel.onerror = (err) => {
            console.error('Data channel error:', err);
        };
    },

    // ==================== SIGNALING (localStorage fallback) ====================

    startSignalPolling(isInitiator) {
        const channel = `printodrop-${this.roomCode}`;
        
        const handleStorage = (e) => {
            if (e.key === channel && e.newValue) {
                try {
                    const signal = JSON.parse(e.newValue);
                    if (signal.from !== this.role && signal.timestamp > Date.now() - 30000) {
                        this.handleSignal(signal, isInitiator);
                    }
                } catch (err) {
                    // Ignore invalid signals
                }
            }
        };
        
        window.addEventListener('storage', handleStorage);
        
        // Also poll every 2 seconds as backup
        this.signalPollInterval = setInterval(() => {
            try {
                const data = localStorage.getItem(channel);
                if (data) {
                    const signal = JSON.parse(data);
                    if (signal.from !== this.role && signal.timestamp > Date.now() - 30000) {
                        this.handleSignal(signal, isInitiator);
                    }
                }
            } catch (err) {
                // Ignore
            }
        }, 2000);
        
        // Store cleanup
        this._storageHandler = handleStorage;
    },

    broadcastSignal(signal) {
        const channel = `printodrop-${this.roomCode}`;
        try {
            localStorage.setItem(channel, JSON.stringify({
                ...signal,
                timestamp: Date.now(),
                from: this.role
            }));
        } catch (e) {
            console.error('Signal broadcast failed:', e);
        }
    },

    async handleSignal(signal, isInitiator) {
        if (!this.peerConnection) return;
        
        try {
            if (signal.type === 'offer' && !isInitiator) {
                await this.peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp));
                const answer = await this.peerConnection.createAnswer();
                await this.peerConnection.setLocalDescription(answer);
                this.broadcastSignal({ type: 'answer', sdp: answer });
            } else if (signal.type === 'answer' && isInitiator) {
                await this.peerConnection.setRemoteDescription(new RTCSessionDescription(signal.sdp));
            } else if (signal.type === 'ice' && signal.candidate) {
                await this.peerConnection.addIceCandidate(new RTCIceCandidate(signal.candidate));
            }
        } catch (err) {
            console.error('Signal handling error:', err);
        }
    },

    onConnected() {
        if (this.isConnected) return;
        this.isConnected = true;
        
        if (this.role === 'shopkeeper') {
            if (this.el.shopStatus) {
                this.el.shopStatus.innerHTML = `
                    <span class="dot connected"></span>
                    <span>Customer connected! Waiting for files...</span>
                `;
            }
            this.showToast('Customer connected!', 'success');
        } else {
            this.showToast('Connected to shop!', 'success');
        }
    },

    // ==================== FILE HANDLING ====================

    handleFiles(files) {
        this.selectedFiles = Array.from(files);
        this.renderSelectedFiles();
        if (this.el.sendBtn) this.el.sendBtn.disabled = false;
    },

    renderSelectedFiles() {
        if (!this.el.selectedFiles) return;
        this.el.selectedFiles.innerHTML = this.selectedFiles.map((file, i) => `
            <div class="selected-file-item">
                <span>${this.getFileIcon(file.name)}</span>
                <span>${file.name}</span>
                <span style="color:var(--text-muted);font-size:0.8rem">${this.formatSize(file.size)}</span>
                <button class="remove" onclick="app.removeFile(${i})">✕</button>
            </div>
        `).join('');
    },

    removeFile(index) {
        this.selectedFiles.splice(index, 1);
        this.renderSelectedFiles();
        if (this.el.sendBtn) this.el.sendBtn.disabled = this.selectedFiles.length === 0;
    },

    getFileIcon(filename) {
        const ext = filename.split('.').pop().toLowerCase();
        const icons = {
            pdf: '📄', doc: '📝', docx: '📝', xls: '📊', xlsx: '📊',
            jpg: '🖼️', jpeg: '🖼️', png: '🖼️', txt: '📃'
        };
        return icons[ext] || '📎';
    },

    formatSize(bytes) {
        if (bytes === 0) return '0 B';
        const k = 1024;
        const sizes = ['B', 'KB', 'MB', 'GB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
    },

    // ==================== FILE TRANSFER ====================

    async sendFiles() {
        if (!this.dataChannel || this.dataChannel.readyState !== 'open') {
            this.showToast('Connection not ready. Please wait...', 'warning');
            return;
        }

        this.showScreen('customer-transferring');
        
        const totalFiles = this.selectedFiles.length;
        let completedFiles = 0;
        
        for (let i = 0; i < this.selectedFiles.length; i++) {
            const file = this.selectedFiles[i];
            if (this.el.transferStatus) {
                this.el.transferStatus.textContent = `Sending ${file.name}...`;
            }
            
            await this.sendFile(file, (progress) => {
                const overallProgress = ((completedFiles + progress) / totalFiles) * 100;
                if (this.el.transferProgress) {
                    this.el.transferProgress.style.width = overallProgress + '%';
                }
            });
            
            completedFiles++;
        }
        
        if (this.el.sentCount) this.el.sentCount.textContent = totalFiles;
        this.showScreen('customer-waiting');
        
        // Notify shopkeeper
        if (this.dataChannel && this.dataChannel.readyState === 'open') {
            this.dataChannel.send(JSON.stringify({ type: 'files-sent', count: totalFiles }));
        }
    },

    async sendFile(file, onProgress) {
        // Send metadata
        const metadata = {
            type: 'file-start',
            name: file.name,
            size: file.size,
            mimeType: file.type
        };
        this.dataChannel.send(JSON.stringify(metadata));
        
        // Send file in chunks
        const chunkSize = this.config.chunkSize;
        const totalChunks = Math.ceil(file.size / chunkSize);
        
        for (let i = 0; i < totalChunks; i++) {
            const start = i * chunkSize;
            const end = Math.min(start + chunkSize, file.size);
            const chunk = file.slice(start, end);
            
            const arrayBuffer = await chunk.arrayBuffer();
            this.dataChannel.send(arrayBuffer);
            
            onProgress((i + 1) / totalChunks);
            
            await new Promise(r => setTimeout(r, 10));
        }
        
        this.dataChannel.send(JSON.stringify({ type: 'file-end' }));
    },

    handleDataMessage(data) {
        if (typeof data === 'string') {
            try {
                const message = JSON.parse(data);
                
                if (message.type === 'file-start') {
                    this.currentFile = {
                        name: message.name,
                        size: message.size,
                        mimeType: message.mimeType,
                        chunks: []
                    };
                } else if (message.type === 'file-end') {
                    this.saveReceivedFile();
                } else if (message.type === 'files-sent') {
                    this.showScreen('shop-received');
                } else if (message.type === 'print-complete') {
                    this.showScreen('customer-complete');
                }
            } catch (e) {
                console.error('Message parse error:', e);
            }
        } else if (data instanceof ArrayBuffer) {
            if (this.currentFile) {
                this.currentFile.chunks.push(data);
            }
        }
    },

    saveReceivedFile() {
        if (!this.currentFile) return;
        
        const chunks = this.currentFile.chunks;
        const blob = new Blob(chunks, { type: this.currentFile.mimeType || 'application/octet-stream' });
        const url = URL.createObjectURL(blob);
        
        this.receivedFiles.push({
            name: this.currentFile.name,
            size: this.currentFile.size,
            mimeType: this.currentFile.mimeType,
            blob: blob,
            url: url
        });
        
        this.currentFile = null;
        this.renderReceivedFiles();
    },

    renderReceivedFiles() {
        if (!this.el.filesList) return;
        this.el.filesList.innerHTML = this.receivedFiles.map((file, i) => `
            <div class="file-item">
                <div class="file-icon">${this.getFileIcon(file.name)}</div>
                <div class="file-info">
                    <div class="file-name">${file.name}</div>
                    <div class="file-meta">${this.formatSize(file.size)}</div>
                </div>
                ${file.mimeType && file.mimeType.startsWith('image/') ? 
                    `<img src="${file.url}" class="file-preview-thumb" alt="">` : ''}
            </div>
        `).join('');
    },

    // ==================== PRINTING ====================

    adjustCopies(delta) {
        const input = this.el.copiesInput;
        if (!input) return;
        let val = parseInt(input.value) + delta;
        val = Math.max(1, Math.min(50, val));
        input.value = val;
    },

    async printFiles() {
        const copies = parseInt(this.el.copiesInput?.value) || 1;
        
        this.showScreen('shop-printing');
        if (this.el.totalDocs) this.el.totalDocs.textContent = this.receivedFiles.length;
        
        for (let i = 0; i < this.receivedFiles.length; i++) {
            const file = this.receivedFiles[i];
            const progressEl = document.getElementById('print-progress');
            if (progressEl) {
                progressEl.textContent = `Printing document ${i + 1} of ${this.receivedFiles.length}`;
            }
            
            const progress = ((i + 1) / this.receivedFiles.length) * 100;
            if (this.el.printProgressBar) {
                this.el.printProgressBar.style.width = progress + '%';
            }
            
            await this.printFile(file, copies);
            await new Promise(r => setTimeout(r, 1000));
        }
        
        if (this.dataChannel && this.dataChannel.readyState === 'open') {
            this.dataChannel.send(JSON.stringify({ type: 'print-complete' }));
        }
        
        this.cleanupFiles();
        
        if (this.el.completedFiles) this.el.completedFiles.textContent = this.receivedFiles.length;
        this.showScreen('shop-complete');
    },

    async printFile(file, copies) {
        return new Promise((resolve) => {
            const mimeType = file.mimeType || '';
            
            if (mimeType === 'application/pdf') {
                this.printPDF(file.url);
            } else if (mimeType.startsWith('image/')) {
                this.printImage(file.url);
            } else {
                const win = window.open(file.url, '_blank');
                if (win) {
                    win.onload = () => {
                        win.print();
                        setTimeout(() => {
                            win.close();
                            resolve();
                        }, 3000);
                    };
                } else {
                    const a = document.createElement('a');
                    a.href = file.url;
                    a.download = file.name;
                    a.click();
                    resolve();
                }
                return;
            }
            
            setTimeout(resolve, 2000);
        });
    },

    printPDF(url) {
        const iframe = document.createElement('iframe');
        iframe.style.display = 'none';
        iframe.src = url;
        document.body.appendChild(iframe);
        
        iframe.onload = () => {
            try {
                iframe.contentWindow.print();
            } catch (e) {
                window.open(url, '_blank');
            }
            setTimeout(() => {
                if (iframe.parentNode) document.body.removeChild(iframe);
            }, 5000);
        };
    },

    printImage(url) {
        const win = window.open('', '_blank');
        if (!win) return;
        
        win.document.write(`
            <html>
            <head>
                <title>Print</title>
                <style>
                    @page { size: A4; margin: 10mm; }
                    body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; }
                    img { max-width: 100%; max-height: 100vh; object-fit: contain; }
                </style>
            </head>
            <body>
                <img src="${url}" onload="setTimeout(() => print(), 500)">
            </body>
            </html>
        `);
        win.document.close();
    },

    rejectFiles() {
        this.showToast('Files rejected', 'warning');
        this.cleanupFiles();
        this.showScreen('shop-waiting');
    },

    // ==================== CLEANUP ====================

    cleanupFiles() {
        this.receivedFiles.forEach(f => {
            if (f.url) URL.revokeObjectURL(f.url);
        });
        this.receivedFiles = [];
        this.currentFile = null;
        
        if (this.dataChannel) {
            try { this.dataChannel.close(); } catch (e) {}
            this.dataChannel = null;
        }
        
        if (this.peerConnection) {
            try { this.peerConnection.close(); } catch (e) {}
            this.peerConnection = null;
        }
        
        if (this.signalPollInterval) {
            clearInterval(this.signalPollInterval);
            this.signalPollInterval = null;
        }
        
        if (this._storageHandler) {
            window.removeEventListener('storage', this._storageHandler);
            this._storageHandler = null;
        }
    },

    cleanup() {
        this.cleanupFiles();
        this.stopScan();
        this.selectedFiles = [];
        this.isConnected = false;
    },

    disconnect() {
        this.cleanup();
        this.reset();
    },

    // ==================== DRAG & DROP ====================

    initDragDrop() {
        const dz = this.el.dropZone;
        if (!dz) return;
        
        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
            dz.addEventListener(eventName, (e) => {
                e.preventDefault();
                e.stopPropagation();
            });
        });
        
        ['dragenter', 'dragover'].forEach(eventName => {
            dz.addEventListener(eventName, () => dz.classList.add('dragover'));
        });
        
        ['dragleave', 'drop'].forEach(eventName => {
            dz.addEventListener(eventName, () => dz.classList.remove('dragover'));
        });
        
        dz.addEventListener('drop', (e) => {
            if (e.dataTransfer.files.length > 0) {
                this.handleFiles(e.dataTransfer.files);
            }
        });
    },

    // ==================== TOAST ====================

    showToast(message, type = 'info') {
        if (!this.el.toastContainer) return;
        
        const toast = document.createElement('div');
        toast.className = `toast ${type}`;
        toast.textContent = message;
        this.el.toastContainer.appendChild(toast);
        
        setTimeout(() => {
            if (toast.parentNode) toast.remove();
        }, 3000);
    },

    // ==================== INIT ====================

    init() {
        this.initDragDrop();
        
        // Check URL params for direct join
        const params = new URLSearchParams(window.location.search);
        const joinCode = params.get('join');
        if (joinCode) {
            this.role = 'customer';
            setTimeout(() => this.joinRoom(joinCode.toUpperCase()), 100);
        }
    }
};

// Initialize on load
document.addEventListener('DOMContentLoaded', () => app.init());