@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="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>
</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;

            // 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: 1280 },
                        height: { ideal: 720 }
                    }
                });

                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)';

            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);

            // Extract the region of interest (center of the frame)
            // Using 400x400 to match reference image dimensions (800x800 at 1:2 ratio)
            const scanAreaX = (canvas.width - 400) / 2;
            const scanAreaY = (canvas.height - 400) / 2;

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

            scanCtx.drawImage(
                canvas,
                scanAreaX, scanAreaY, 400, 400,
                0, 0, 400, 400
            );

            // Compute hash for the captured frame
            const frameHash = this.computeAverageHash(scanCanvas);

            // Compare with all known exhibit hashes
            console.log('Frame hash:', frameHash.substring(0, 20) + '...'); // First 20 chars for debugging

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

            const result = this.findMatch(frameHash);
            const match = result.match;
            const bestMatch = result.bestMatch;

            if (match) {
                console.log('Eşleşme bulundu!', match);
                const similarityPercentage = Math.round((256 - match.distance) / 256 * 100);
                this.status.textContent = `Eşleşme bulundu! ${match.exhibit.title} - Benzerlik: ${similarityPercentage}%`;
                this.handleMatch(match);
            } 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((256 - bestMatch.distance) / 256 * 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
            }
        }

        findMatch(frameHash) {
            const THRESHOLD = 75; // Allow for more differences to increase sensitivity (about 71% similarity for 256-bit hash)
            console.log(`Toplam ${this.exhibits.length} adet referans görsel ile karşılaştırma yapılacak`);

            let bestMatch = null;
            let bestDistance = Infinity;

            for (const exhibit of this.exhibits) {
                if (!exhibit.hash) continue; // Skip exhibits without a hash

                const distance = this.hammingDistance(frameHash, exhibit.hash);
                console.log(`Eser "${exhibit.title}" ile karşılaştırıldı. Benzerlik: ${distance}`);

                // Track the best match found regardless of threshold
                if (distance < bestDistance) {
                    bestDistance = distance;
                    bestMatch = {exhibit, distance};
                }

                if (distance <= THRESHOLD) {
                    console.log(`Eşleşme bulundu! Eser: ${exhibit.title}, Benzerlik: ${distance}`);
                    return {match: {exhibit, distance}, bestMatch: bestMatch};
                }
            }

            console.log('Hiçbir eşleşme bulunamadı');
            return {match: null, bestMatch: bestMatch};
        }

        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 16x16 for more detailed hash
            const size = 16;
            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: ${(256-distance)/256*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: ${(256-distance)/256*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);
        }
    }

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