@extends('layouts.camera-layout')

@section('title', 'Kamera ile Gezinme - V1')

@section('content')
<div class="flex flex-col items-center">
    <!-- Match notifications above the video -->
    <div id="matchNotifications" class="mb-4">
        <div id="status">Kameraya izin verin ve referans resimle aynı nesneye odaklanın. Tarama her 2 saniyede bir
            yapılır.
            Lütfen eseri ortalanmış şekilde görün.</div>
        <div id="result"></div>
    </div>

    <!-- Scan area in the middle -->
    <div class="z-20 flex flex-col items-center">
        <div id="scanArea">
            <div id="scanningIndicator" class="hidden scanning-indicator"></div>
        </div>
    </div>

    <!-- Content below scan area (buttons and other controls) -->
    <div class="fixed bottom-10 left-1/2 transform -translate-x-1/2 z-50">
        <div id="controls">
            <button class="flex items-center justify-center w-20 h-20 bg-stone-100 text-stone-700 p-3 rounded-full" id="startBtn">
                <span class="text-5xl material-symbols-rounded">camera</span>
            </button>
            <button class="hidden flex items-center justify-center w-20 h-20 bg-red-500 text-white p-3 rounded-full" id="stopBtn">
                <span class="text-5xl material-symbols-rounded">stop</span>
            </button>
        </div>
    </div>

    <!-- Redirection notifications below the video -->
    <div id="redirectionNotifications">
        <div id="redirectMessage" class="hidden"></div>
    </div>

    {{-- consol çıktıları arka planda akıyor --}}
    <div class="fixed h-screen w-screen bottom-0 opacity-20 z-10 overflow-hidden pointer-events-none">
        <div id="consoleOutput" class="h-full w-full overflow-y-auto p-4 text-xs font-mono text-green-400 bg-black/50">
            <!-- Console logs will appear here -->
        </div>
    </div>
</div>
@endsection

@section('camera-script')
<script>
    class SimpleCameraNavigation {
        constructor() {
            this.video = document.getElementById('video');
            this.startBtn = document.getElementById('startBtn');
            this.stopBtn = document.getElementById('stopBtn');
            this.status = document.getElementById('status');
            this.result = document.getElementById('result');
            this.redirectMessage = document.getElementById('redirectMessage');
            this.referenceImagePreview = document.getElementById('referenceImagePreview');

            this.stream = null;
            this.isScanning = false;
            this.scanInterval = null;

            // Match confirmation tracking
            this.matchHistory = [];
            this.HISTORY_SIZE = 4; // Son 4 frame'i takip et
            this.CONFIRMATION_THRESHOLD = 2; // En az 2 kez aynı eser görülmeli
            this.MATCH_THRESHOLD = 105; // 28x28 hash için (784 bit, ~76% benzerlik)

            // Pre-loaded exhibit data from the reference images folder
            this.exhibits = @json($exhibits);

            this.init();
        }

        init() {
            // Assign button elements in init to ensure DOM is ready
            this.startBtn = document.getElementById('startBtn');
            this.stopBtn = document.getElementById('stopBtn');

            // Ensure elements exist before adding event listeners
            if (this.startBtn && this.stopBtn) {
                this.startBtn.addEventListener('click', () => this.startCamera());
                this.stopBtn.addEventListener('click', () => this.stopCamera());
            } else {
                console.error('Button elements not found! Check if startBtn and stopBtn exist in the DOM');
            }

            // Pre-load all exhibit images and compute their hashes
            this.preloadExhibitImages();
        }

        async preloadExhibitImages() {
            this.status.textContent = 'Referans görselleri yükleniyor...';
            console.log(`${this.exhibits.length} adet referans görsel yüklenmeye başlanıyor`);

            const promises = this.exhibits.map(async (exhibit) => {
                if (!exhibit.image) return;

                try {
                    console.log(`"${exhibit.title}" görseli yükleniyor: ${exhibit.image}`);

                    // Create an image element to compute hash
                    const img = new Image();
                    img.crossOrigin = 'Anonymous'; // Handle CORS if needed

                    return new Promise((resolve, reject) => {
                        img.onload = async () => {
                            try {
                                const hash = this.computeAverageHashFromImage(img);
                                exhibit.hash = hash;
                                console.log(`Hash computed for exhibit ${exhibit.title}: ${hash.substring(0, 20)}...`);
                                resolve();
                            } catch (error) {
                                console.error(`Error computing hash for exhibit ${exhibit.title}:`, error);
                                reject(error);
                            }
                        };

                        img.onerror = (error) => {
                            console.error(`Error loading image for exhibit ${exhibit.title}:`, error);
                            reject(error);
                        };

                        img.src = '/' + exhibit.image;
                    });
                } catch (error) {
                    console.error(`Error processing exhibit ${exhibit.title}:`, error);
                }
            });

            try {
                await Promise.all(promises);
                const validExhibitsCount = this.exhibits.filter(e => e.hash !== null).length;
                this.status.textContent = `${validExhibitsCount} adet referans görsel yüklendi. Kamera ile eşleştirme yapmaya hazır.`;
                console.log('Tüm geçerli referans görselleri için hash hesaplandı');
            } catch (error) {
                console.error('Error preloading exhibit images:', error);
                this.status.textContent = 'Bazı referans görselleri yüklenirken hata oluştu.';
            }
        }

        async startCamera() {
            try {
                this.stream = await navigator.mediaDevices.getUserMedia({
                    video: {
                        facingMode: 'environment',
                        width: { ideal: 720 },   // Portrait (dikey) mod için
                        height: { ideal: 1280 }   // Mobil cihazlar için optimize
                    }
                });

                this.video.srcObject = this.stream;
                this.startBtn.classList.add('hidden');
                this.stopBtn.classList.remove('hidden');
                this.status.textContent = 'Kamera aktif. Eseri tarayın...';

                // Start scanning after a delay to allow camera to initialize
                setTimeout(() => {
                    this.startScanning();
                }, 1000);
            } catch (err) {
                console.error('Kamera erişim hatası:', err);
                this.status.textContent = 'Kamera erişimi reddedildi veya kamera mevcut değil.';
            }
        }

        stopCamera() {
            if (this.stream) {
                this.stream.getTracks().forEach(track => track.stop());
                this.stream = null;
            }

            if (this.scanInterval) {
                clearInterval(this.scanInterval);
                this.scanInterval = null;
            }

            // Hide scanning indicator
            document.getElementById('scanningIndicator').classList.add('hidden');

            // Reset scan area style
            const scanArea = document.getElementById('scanArea');
            scanArea.style.borderColor = '#00ff00';
            scanArea.style.boxShadow = '0 0 20px rgba(0, 255, 0, 0.5)';

            // Reset match history
            this.matchHistory = [];

            this.startBtn.classList.remove('hidden');
            this.stopBtn.classList.add('hidden');
            this.status.textContent = 'Kamera durduruldu. Başlatmak için butona tıklayın.';
            this.result.style.display = 'none';
            this.redirectMessage.classList.add('hidden');
            this.isScanning = false;
        }

        startScanning() {
            if (!this.exhibits.some(exhibit => exhibit.hash !== null)) {
                this.status.textContent = 'Henüz referans görselleri yüklenemedi!';
                console.log('Eşleme işlemi başlatılamadı: Referans görselleri yüklenmemiş');
                return;
            }

            this.isScanning = true;

            // Show scanning indicator
            document.getElementById('scanningIndicator').classList.remove('hidden');
            // Hide redirection message when starting a new scan
            this.redirectMessage.classList.add('hidden');

            this.status.textContent = 'Tarama başladı. Kamerayı sistemdeki eserlerden birine odaklayın.';
            console.log('Tarama başladı, her 2 saniyede bir kare işlenecek');

            // Start scanning every 2 seconds
            this.scanInterval = setInterval(() => {
                this.scanFrame();
            }, 1000);


            console.log(`Toplam ${this.exhibits.filter(e => e.hash !== null).length} adet referans görsel mevcut`);
        }

        scanFrame() {
            if (!this.isScanning) return;

            // Create a temporary canvas to capture the frame
            const canvas = document.createElement('canvas');
            canvas.width = this.video.videoWidth;
            canvas.height = this.video.videoHeight;

            const ctx = canvas.getContext('2d');
            ctx.drawImage(this.video, 0, 0, canvas.width, canvas.height);

            // Update status to indicate scanning is in progress
            this.status.textContent = 'Eşleşme aranıyor...';

            // ÇOKLU ÖLÇEK TARAMA
            // Farklı mesafelerdeki eserleri yakalamak için 3 farklı ölçekte tara
            // Portrait (720x1280) ekran için optimize edilmiş boyutlar
            const scales = [
                {size: 480, weight: 0.8, name: 'Yakın'},    // Yakın mesafe (kullanıcı esere çok yakın)
                {size: 600, weight: 1.0, name: 'Normal'},   // Normal mesafe (ideal)
                {size: 700, weight: 0.85, name: 'Uzak'}     // Uzak mesafe (kullanıcı uzakta)
            ];

            console.log('🔍 Çoklu ölçek tarama başlıyor...');
            const scaleResults = [];

            for (const scale of scales) {
                // Extract the region of interest (center of the frame)
                const scanAreaX = (canvas.width - scale.size) / 2;
                const scanAreaY = (canvas.height - scale.size) / 2;

                const scanCanvas = document.createElement('canvas');
                scanCanvas.width = scale.size;
                scanCanvas.height = scale.size;
                const scanCtx = scanCanvas.getContext('2d');

                scanCtx.drawImage(
                    canvas,
                    scanAreaX, scanAreaY, scale.size, scale.size,
                    0, 0, scale.size, scale.size
                );

                // Compute hash for this scale
                const frameHash = this.computeAverageHash(scanCanvas);
                console.log(`📐 ${scale.name} ölçek (${scale.size}px) hash:`, frameHash.substring(0, 20) + '...');

                // Find matches for this scale
                const result = this.findMatchForScale(frameHash, scale);
                if (result.topMatch) {
                    scaleResults.push(result);
                }
            }

            // Tüm ölçeklerden gelen sonuçları birleştir
            const combinedResult = this.combineScaleResults(scaleResults);
            const match = combinedResult.match;
            const bestMatch = combinedResult.bestMatch;
            const pendingMatch = combinedResult.pendingMatch;

            if (match && combinedResult.confirmed) {
                // Onaylanmış eşleşme - işlem yap
                console.log('✓ Onaylanmış eşleşme!', match);
                const similarityPercentage = Math.round((400 - match.distance) / 400 * 100);
                this.status.textContent = `✓ Eşleşme ONAYLANDI! ${match.exhibit.title} - Benzerlik: ${similarityPercentage}%`;
                this.handleMatch(match);
            } else if (pendingMatch) {
                // Potansiyel eşleşme var ama henüz onaylanmadı
                const similarityPercentage = Math.round((400 - pendingMatch.distance) / 400 * 100);
                const confirmCount = this.matchHistory.filter(id => id === pendingMatch.exhibit.id).length;
                this.status.textContent = `⏳ Doğrulanıyor: ${pendingMatch.exhibit.title} - ${similarityPercentage}% (${confirmCount}/${this.CONFIRMATION_THRESHOLD})`;
                console.log('⏳ Potansiyel eşleşme, doğrulama bekleniyor');
            } else {
                console.log('Eşleşme bulunamadı.');
                // Display the best similarity found even if it didn't meet the threshold
                let displayedBestMatch = false;
                if (bestMatch) {
                    const bestSimilarityPercentage = Math.round((400 - bestMatch.distance) / 400 * 100);
                    this.status.textContent = `En iyi benzerlik: ${bestMatch.exhibit.title} - ${bestSimilarityPercentage}%`;
                    displayedBestMatch = true;
                } else {
                    this.status.textContent = 'Farklı bir açıyla deneyin.';
                }

                // Reset progress indicator after a short delay
                setTimeout(() => {
                    if (this.isScanning) {
                        // Update status to indicate no match found, but only if we previously showed a best match
                        if (displayedBestMatch) {
                            this.status.textContent = 'Farklı bir açıyla deneyin.';
                        }
                    }
                }, 1500); // Increased timeout to allow users to see the similarity percentage
            }
        }

        findMatchForScale(frameHash, scale) {
            const matches = [];
            let bestMatch = null;
            let bestDistance = Infinity;

            for (const exhibit of this.exhibits) {
                if (!exhibit.hash) continue;

                const distance = this.hammingDistance(frameHash, exhibit.hash);
                
                // Track the best match
                if (distance < bestDistance) {
                    bestDistance = distance;
                    bestMatch = {exhibit, distance, scale: scale.name, weight: scale.weight};
                }

                // Threshold'u geçen eşleşmeleri topla
                if (distance <= this.MATCH_THRESHOLD) {
                    matches.push({
                        exhibit, 
                        distance, 
                        scale: scale.name,
                        weight: scale.weight,
                        score: (400 - distance) * scale.weight // Ağırlıklı skor (20x20 hash)
                    });
                }
            }

            // En iyi eşleşmeyi bul
            matches.sort((a, b) => b.score - a.score);
            const topMatch = matches.length > 0 ? matches[0] : null;

            if (topMatch) {
                const similarity = Math.round((400 - topMatch.distance) / 400 * 100);
                console.log(`   ${scale.name}: ${topMatch.exhibit.title} - ${similarity}% (Skor: ${topMatch.score.toFixed(1)})`);
            }

            return {topMatch, bestMatch, scale: scale.name};
        }

        combineScaleResults(scaleResults) {
            if (scaleResults.length === 0) {
                console.log('❌ Hiçbir ölçekte eşleşme bulunamadı');
                return {match: null, bestMatch: null, confirmed: false};
            }

            // Tüm ölçeklerden gelen eşleşmeleri grupla
            const exhibitScores = new Map();

            scaleResults.forEach(result => {
                if (!result.topMatch) return;

                const exhibitId = result.topMatch.exhibit.id;
                if (!exhibitScores.has(exhibitId)) {
                    exhibitScores.set(exhibitId, {
                        exhibit: result.topMatch.exhibit,
                        totalScore: 0,
                        scaleCount: 0,
                        bestDistance: Infinity,
                        scales: []
                    });
                }

                const data = exhibitScores.get(exhibitId);
                data.totalScore += result.topMatch.score;
                data.scaleCount++;
                data.scales.push(result.scale);
                if (result.topMatch.distance < data.bestDistance) {
                    data.bestDistance = result.topMatch.distance;
                }
            });

            // En yüksek skoru bul
            let bestExhibit = null;
            let highestScore = 0;

            exhibitScores.forEach((data, exhibitId) => {
                // Birden fazla ölçekte görülene bonus ver
                const multiScaleBonus = data.scaleCount > 1 ? 1.2 : 1.0;
                const finalScore = data.totalScore * multiScaleBonus;

                if (finalScore > highestScore) {
                    highestScore = finalScore;
                    bestExhibit = {
                        exhibit: data.exhibit,
                        distance: data.bestDistance,
                        score: finalScore,
                        scaleCount: data.scaleCount,
                        scales: data.scales
                    };
                }
            });

            if (bestExhibit) {
                const similarity = Math.round((400 - bestExhibit.distance) / 400 * 100);
                console.log(`🎯 En İyi Sonuç: ${bestExhibit.exhibit.title} - ${similarity}% (${bestExhibit.scaleCount} ölçek: ${bestExhibit.scales.join(', ')})`);
                
                // Orijinal findMatch mantığını uygula
                return this.confirmMatch(bestExhibit);
            }

            return {match: null, bestMatch: null, confirmed: false};
        }

        confirmMatch(matchCandidate) {
            // Match history'e ekle (threshold kontrolü findMatchForScale'de yapıldı)
            this.matchHistory.push(matchCandidate.exhibit.id);
            
            // History boyutunu koru
            if (this.matchHistory.length > this.HISTORY_SIZE) {
                this.matchHistory.shift();
            }

            console.log('📝 Match history:', this.matchHistory);

            // Eğer yeterli history varsa, onaylama kontrolü yap
            if (this.matchHistory.length >= this.CONFIRMATION_THRESHOLD) {
                // Son frame'lerde bu eser kaç kez görüldü?
                const confirmCount = this.matchHistory.filter(id => id === matchCandidate.exhibit.id).length;
                console.log(`Eser "${matchCandidate.exhibit.title}" son ${this.matchHistory.length} frame'de ${confirmCount} kez görüldü`);
                
                // Yeterli onay varsa confirmed match döndür
                if (confirmCount >= this.CONFIRMATION_THRESHOLD) {
                    console.log(`✓ Eşleşme ONAYLANDI! Eser: ${matchCandidate.exhibit.title}, Benzerlik: ${matchCandidate.distance}`);
                    return {
                        match: {exhibit: matchCandidate.exhibit, distance: matchCandidate.distance}, 
                        bestMatch: matchCandidate, 
                        confirmed: true
                    };
                } else {
                    console.log(`⚠ Eşleşme bulundu ama henüz onaylanmadı (${confirmCount}/${this.CONFIRMATION_THRESHOLD})`);
                    return {
                        match: null, 
                        bestMatch: matchCandidate, 
                        confirmed: false, 
                        pendingMatch: {exhibit: matchCandidate.exhibit, distance: matchCandidate.distance}
                    };
                }
            } else {
                // Henüz yeterli history yok
                console.log(`⏳ Eşleşme bulundu, doğrulama için daha fazla frame bekleniyor (${this.matchHistory.length}/${this.CONFIRMATION_THRESHOLD})`);
                return {
                    match: null, 
                    bestMatch: matchCandidate, 
                    confirmed: false, 
                    pendingMatch: {exhibit: matchCandidate.exhibit, distance: matchCandidate.distance}
                };
            }
        }

        computeAverageHashFromImage(image) {
            // Create a canvas to draw the image
            const canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            const ctx = canvas.getContext('2d');

            // Draw the image on the canvas
            ctx.drawImage(image, 0, 0);

            // Compute average hash
            return this.computeAverageHash(canvas);
        }

        computeAverageHash(canvas) {
            // Resize to 28x28 for more detailed hash (optimized for mobile)
            const size = 28;
            const smallCanvas = document.createElement('canvas');
            smallCanvas.width = size;
            smallCanvas.height = size;
            const ctx = smallCanvas.getContext('2d');

            // Draw the image scaled down
            ctx.drawImage(canvas, 0, 0, size, size);

            // Get image data
            const imageData = ctx.getImageData(0, 0, size, size);
            const data = imageData.data;

            // Calculate average brightness
            let totalBrightness = 0;
            let count = 0;
            for (let i = 0; i < data.length; i += 4) {
                // Calculate brightness using RGB values
                const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
                totalBrightness += brightness;
                count++;
            }

            const avgBrightness = totalBrightness / count;

            // Create hash: 1 if pixel > average, 0 otherwise
            let hash = '';
            for (let i = 0; i < data.length; i += 4) {
                const brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
                hash += brightness > avgBrightness ? '1' : '0';
            }

            return hash;
        }

        hammingDistance(hash1, hash2) {
            if (hash1.length !== hash2.length) return Infinity;

            let distance = 0;
            for (let i = 0; i < hash1.length; i++) {
                if (hash1[i] !== hash2[i]) {
                    distance++;
                }
            }

            return distance;
        }

        handleMatch(matchResult) {
            const {exhibit, distance} = matchResult;

            // Hide scanning indicator
            document.getElementById('scanningIndicator').classList.add('hidden');

            // Stop progress bar updates
            this.isScanning = false;

            this.result.textContent = `${exhibit.title} bulundu! Benzerlik: ${Math.round((400-distance)/400*100)}%`;
            this.result.style.display = 'block';
            this.status.textContent = 'Eşleşme bulundu. Yönlendiriliyor...';

            // Add visual feedback for match
            const scanArea = document.getElementById('scanArea');
            scanArea.style.borderColor = '#00ffff';
            scanArea.style.boxShadow = '0 0 30px rgba(0, 255, 255, 0.8)';

            // Stop scanning
            if (this.scanInterval) {
                clearInterval(this.scanInterval);
                this.scanInterval = null;
            }

            // Show redirection notification
            this.redirectMessage.textContent = `Eser detay sayfasına yönlendiriliyorsunuz: ${exhibit.title}. Benzerlik: ${Math.round((400-distance)/400*100)}%`;
            this.redirectMessage.classList.remove('hidden');

            // Simulate redirect after a delay
            setTimeout(() => {
                // In a real implementation, you would redirect to the exhibit page
                // window.location.href = `/app/exhibits/${exhibit.id}`;
            }, 1500);
        }
    }

    // Console output display
    const consoleOutput = document.getElementById('consoleOutput');
    const originalLog = console.log;
    const maxLogLines = 40;
    let logLines = [];

    console.log = function(...args) {
        // Call original console.log
        originalLog.apply(console, args);
        
        // Format the message
        const message = args.map(arg => {
            if (typeof arg === 'object') {
                try {
                    return JSON.stringify(arg, null, 2);
                } catch (e) {
                    return String(arg);
                }
            }
            return String(arg);
        }).join(' ');
        
        // Add timestamp
        const timestamp = new Date().toLocaleTimeString('tr-TR');
        const logEntry = `[${timestamp}] ${message}`;
        
        // Add to log lines
        logLines.push(logEntry);
        
        // Keep only the last maxLogLines
        if (logLines.length > maxLogLines) {
            logLines.shift();
        }
        
        // Update the console output div
        if (consoleOutput) {
            consoleOutput.innerHTML = logLines.map(line => 
                `<div class="mb-1">${line}</div>`
            ).join('');
            
            // Auto-scroll to bottom
            consoleOutput.scrollTop = consoleOutput.scrollHeight;
        }
    };

    // Initialize the camera navigation when the page loads
    document.addEventListener('DOMContentLoaded', () => {
        new SimpleCameraNavigation();
    });
</script>
@endsection