static/js/app.js

document.addEventListener('DOMContentLoaded', () => {
    // Elementi dell'interfaccia
    const homeScreen = document.getElementById('home-screen');
    const previewScreen = document.getElementById('preview-screen');
    const loadingScreen = document.getElementById('loading-screen');
    const selectionScreen = document.getElementById('selection-screen');
    const resultsScreen = document.getElementById('results-screen');
    
    const previewImage = document.getElementById('preview-image');
    const selectionImage = document.getElementById('selection-image');
    const selectionBox = document.getElementById('selection-box');
    const selectionPopup = document.getElementById('selection-popup');
    const resultsIframe = document.getElementById('results-iframe');
    
    const galleryBtn = document.getElementById('gallery-btn');
    const cameraBtn = document.getElementById('camera-btn');
    const clipboardBtn = document.getElementById('clipboard-btn');
    const analyzeBtn = document.getElementById('analyze-btn');
    const cancelPreviewBtn = document.getElementById('cancel-preview-btn');
    const searchBtn = document.getElementById('search-btn');
    const cancelSearchBtn = document.getElementById('cancel-search-btn');
    const closeResultsBtn = document.getElementById('close-results-btn');
    
    const fileInput = document.getElementById('file-input');
    const cameraPreview = document.getElementById('camera-preview');
    const cameraCanvas = document.getElementById('camera-canvas');
    
    let currentImageUrl = '';
    let uniqueId = '';
    let clickPosition = { x: 0, y: 0 };
    
    // Gestione navigazione tra schermate
    function showScreen(screen) {
        document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
        screen.classList.add('active');
    }
    
    // Seleziona dalla galleria
    galleryBtn.addEventListener('click', () => {
        fileInput.click();
    });
    
    fileInput.addEventListener('change', (e) => {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();
            reader.onload = (event) => {
                previewImage.src = event.target.result;
                showScreen(previewScreen);
            };
            reader.readAsDataURL(e.target.files[0]);
        }
    });
    
    // Seleziona dalla fotocamera
    cameraBtn.addEventListener('click', async () => {
        try {
            const stream = await navigator.mediaDevices.getUserMedia({ 
                video: { facingMode: 'environment' } 
            });
            cameraPreview.srcObject = stream;
            
            // Mostra l'anteprima della fotocamera (dovresti implementare un'interfaccia per scattare)
            // Per semplicità, simuliamo uno scatto dopo 3 secondi
            setTimeout(() => {
                const context = cameraCanvas.getContext('2d');
                cameraCanvas.width = cameraPreview.videoWidth;
                cameraCanvas.height = cameraPreview.videoHeight;
                context.drawImage(cameraPreview, 0, 0, cameraCanvas.width, cameraCanvas.height);
                
                previewImage.src = cameraCanvas.toDataURL('image/jpeg');
                showScreen(previewScreen);
                
                // Ferma lo stream
                stream.getTracks().forEach(track => track.stop());
            }, 3000);
        } catch (err) {
            console.error('Errore fotocamera:', err);
            alert('Impossibile accedere alla fotocamera');
        }
    });
    
    // Seleziona dagli appunti (clipboard)
    clipboardBtn.addEventListener('click', async () => {
        try {
            const items = await navigator.clipboard.read();
            for (const item of items) {
                for (const type of item.types) {
                    if (type.startsWith('image/')) {
                        const blob = await item.getType(type);
                        previewImage.src = URL.createObjectURL(blob);
                        showScreen(previewScreen);
                        return;
                    }
                }
            }
            alert('Nessuna immagine trovata negli appunti');
        } catch (err) {
            console.error('Errore clipboard:', err);
            alert('Impossibile accedere agli appunti');
        }
    });
    
    // Annulla anteprima
    cancelPreviewBtn.addEventListener('click', () => {
        showScreen(homeScreen);
    });
    
    // Analizza immagine
    analyzeBtn.addEventListener('click', async () => {
        showScreen(loadingScreen);
        
        // Crea un ID univoco
        uniqueId = crypto.randomUUID();
        
        // Invia l'immagine al server
        try {
            const formData = new FormData();
            const blob = await fetch(previewImage.src).then(r => r.blob());
            formData.append('image', blob);
            
            // Ottieni la posizione (se disponibile)
            let gps = '0,0';
            try {
                const position = await new Promise((resolve, reject) => {
                    navigator.geolocation.getCurrentPosition(resolve, reject, {
                        enableHighAccuracy: false,
                        timeout: 5000,
                        maximumAge: 0
                    });
                });
                gps = `${position.coords.latitude},${position.coords.longitude}`;
            } catch (geoErr) {
                console.warn('Errore geolocalizzazione:', geoErr);
            }
            
            // Invia al server Python che poi inoltrerà
            const response = await fetch('/stikkapp/upload', {
                method: 'POST',
                body: formData,
                headers: {
                    'GPS': gps
                }
            });
            
            const data = await response.json();
            currentImageUrl = data.image_url;
            uniqueId = data.unique_id;
            
            // Mostra la schermata di selezione
            selectionImage.src = currentImageUrl;
            showScreen(selectionScreen);
        } catch (err) {
            console.error('Errore analisi:', err);
            alert('Errore durante l\'analisi dell\'immagine');
            showScreen(homeScreen);
        }
    });
    
    // Gestione click sull'immagine per selezione punto
    selectionImage.addEventListener('click', (e) => {
        const rect = selectionImage.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        
        clickPosition = { x, y };
        
        // Mostra il quadrato di selezione
        selectionBox.style.left = `${x - 25}px`;
        selectionBox.style.top = `${y - 25}px`;
        selectionBox.style.width = '50px';
        selectionBox.style.height = '50px';
        selectionBox.classList.remove('hidden');
        
        // Mostra il popup vicino al punto cliccato
        selectionPopup.style.left = `${x + 30}px`;
        selectionPopup.style.top = `${y - 30}px`;
        selectionPopup.classList.remove('hidden');
    });
    
    // Annulla selezione punto
    cancelSearchBtn.addEventListener('click', () => {
        selectionBox.classList.add('hidden');
        selectionPopup.classList.add('hidden');
    });
    
    // Cerca nel punto selezionato
    searchBtn.addEventListener('click', async () => {
        selectionPopup.classList.add('hidden');
        
        try {
            const response = await fetch('/stikkapp/search', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    unique_id: uniqueId,
                    x: clickPosition.x,
                    y: clickPosition.y
                })
            });
            
            const data = await response.json();
            
            // Mostra i risultati
            resultsIframe.src = data.result_url;
            showScreen(resultsScreen);
        } catch (err) {
            console.error('Errore ricerca:', err);
            alert('Errore durante la ricerca');
        }
    });
    
    // Chiudi risultati
    closeResultsBtn.addEventListener('click', () => {
        showScreen(homeScreen);
    });
    
    // PWA: Installa l'app
    window.addEventListener('beforeinstallprompt', (e) => {
        e.preventDefault();
        // Puoi mostrare un pulsante per l'installazione qui
    });
});