@extends('layouts.camera-layout')

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

@section('content')
<div class="flex flex-col items-center">
    <style>
        #scanArea {
            width: 80vw;
            max-width: 500px;
            height: 80vw;
            max-height: 500px;
            aspect-ratio: 1;
            border: 3px solid #00ff00;
            border-radius: 10px;
            position: relative;
            box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
        }

        @media (min-width: 768px) {
            #scanArea {
                width: 500px;
                height: 500px;
            }
        }
    </style>

    <!-- Status information above scan area -->
    <div 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>

    <!-- Scan area in the middle -->
    <div class="flex flex-col items-center">
        <div id="scanArea">
            <div id="scanningIndicator" class="hidden scanning-indicator"></div>
            <div id="scanProgress" class="hidden scan-progress">
                <div>Tarama: <span id="scanProgressText">0%</span></div>
                <div class="progress-bar-container">
                    <div id="progressBar" class="progress-bar"></div>
                </div>
            </div>
        </div>
    </div>

    <!-- Content below scan area (buttons and other controls) -->
    <div class="mt-4">
        <div id="controls">
            <div style="margin: 10px 0;">
                <canvas id="debugCanvas" style="border: 2px solid #00ff00; max-width: 200px; max-height: 200px;"></canvas>
                <p style="font-size: 12px; margin: 5px 0;">Debug: Taranan Alan</p>
            </div>
            <div class="p-3 text-white bg-black">
                <p>v3 - Portrait Mode Optimized</p>
            </div>
            <button id="startBtn">Kamerayı Aç</button>
            <button id="stopBtn" class="hidden">Kamerayı Kapat</button>
        </div>
    </div>

    <!-- Result at the bottom -->
    <div class="fixed bottom-4">
        <div id="result"></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.referenceImagePreview = document.getElementById('referenceImagePreview');

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

            // Hash configuration
            this.HASH_SIZE = 16; // 16x16 = 256 bits
            this.HASH_BITS = this.HASH_SIZE * this.HASH_SIZE;

            // Reference image dimensions (for optimal ROI calculation)
            this.REFERENCE_SIZE = 1280; // Reference images are 1280x1280

            // Threshold as percentage of hash bits (increased for better matching)
            this.MATCH_THRESHOLD_PERCENT = 0.30; // 30% tolerance
            this.MATCH_THRESHOLD = Math.floor(this.HASH_BITS * this.MATCH_THRESHOLD_PERCENT);

            // Debug options
            this.ENABLE_IMAGE_ENHANCEMENT = false; // Disable enhancement for now

            // 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 hashes = this.computeMultipleHashes(img);
                                exhibit.ahash = hashes.ahash;
                                exhibit.dhash = hashes.dhash;
                                console.log(`Hashes computed for exhibit ${exhibit.title}:`);
                                console.log(`  AHash: ${hashes.ahash.substring(0, 20)}...`);
                                console.log(`  DHash: ${hashes.dhash.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.ahash !== null).length;
                this.status.textContent = `${validExhibitsCount} adet referans görsel yüklendi. Threshold: ${this.MATCH_THRESHOLD}/${this.HASH_BITS} bits (${Math.round(this.MATCH_THRESHOLD_PERCENT * 100)}% tolerance)`;
                console.log('Tüm geçerli referans görselleri için hash hesaplandı');
                console.log(`Match threshold: ${this.MATCH_THRESHOLD} bits out of ${this.HASH_BITS}`);
            } 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: 1080 },
                        height: { ideal: 1920 }
                    }
                });

                this.video.srcObject = this.stream;
                this.startBtn.classList.add('hidden');
                this.stopBtn.classList.remove('hidden');

                // Wait for video to be ready and log actual dimensions
                this.video.addEventListener('loadedmetadata', () => {
                    console.log(`Actual video resolution: ${this.video.videoWidth}×${this.video.videoHeight}`);
                    this.status.textContent = `Kamera aktif (${this.video.videoWidth}×${this.video.videoHeight}). Eseri tarayın...`;
                }, { once: true });

                // 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');
            document.getElementById('scanProgress').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.isScanning = false;
        }


        startScanning() {
            if (!this.exhibits.some(exhibit => exhibit.ahash !== 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');
            document.getElementById('scanProgress').classList.remove('hidden');

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

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

            // Update progress bar
            this.updateProgressBar();

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

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

            let progress = 0;
            const increment = 15; // 15% every 225ms (1500ms total)
            const interval = setInterval(() => {
                if (!this.isScanning) {
                    clearInterval(interval);
                    return;
                }

                progress += increment;
                if (progress > 100) progress = 0;

                document.getElementById('progressBar').style.width = progress + '%';
                document.getElementById('scanProgressText').textContent = progress + '%';

                if (progress >= 100) {
                    clearInterval(interval);
                    this.updateProgressBar();
                }
            }, 225);
        }

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

            // Calculate dynamic ROI size (85% of the smaller dimension for optimal capture)
            // For portrait 1080×1920, this gives ~918×918
            const roiSize = Math.floor(Math.min(canvas.width, canvas.height) * 0.85);
            const scanAreaX = (canvas.width - roiSize) / 2;
            const scanAreaY = (canvas.height - roiSize) / 2;

            console.log(`ROI: ${roiSize}×${roiSize} from ${canvas.width}×${canvas.height} video`);

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

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

            // Show debug preview
            const debugCanvas = document.getElementById('debugCanvas');
            if (debugCanvas) {
                debugCanvas.width = 200;
                debugCanvas.height = 200;
                const debugCtx = debugCanvas.getContext('2d');
                debugCtx.drawImage(scanCanvas, 0, 0, 200, 200);
            }

            // Enhance image before hashing (optional)
            if (this.ENABLE_IMAGE_ENHANCEMENT) {
                this.enhanceImage(scanCtx, roiSize, roiSize);
            }

            // Compute hashes for the captured frame
            const frameHashes = this.computeMultipleHashesFromCanvas(scanCanvas);

            console.log('Frame AHash:', frameHashes.ahash.substring(0, 20) + '...');
            console.log('Frame DHash:', frameHashes.dhash.substring(0, 20) + '...');

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

            const match = this.findBestMatch(frameHashes);

            if (match) {
                console.log('Eşleşme bulundu!', match);
                const similarityPercentage = Math.round((this.HASH_BITS - match.combinedDistance) / this.HASH_BITS * 100);
                this.status.textContent = `Eşleşme bulundu! ${match.exhibit.title} - Benzerlik: ${similarityPercentage}%`;
                this.handleMatch(match);
            } else {
                console.log('Eşleşme bulunamadı.');
                setTimeout(() => {
                    if (this.isScanning) {
                        this.status.textContent = 'Eşleşme bulunamadı. Kamerayı farklı bir açıyla deneyin.';
                    }
                }, 500);
            }
        }

        findBestMatch(frameHashes) {
            console.log('='.repeat(60));
            console.log(`🔍 Toplam ${this.exhibits.length} adet referans görsel ile karşılaştırma yapılacak`);
            console.log(`📊 Threshold: ${this.MATCH_THRESHOLD}/${this.HASH_BITS} bits (${Math.round(this.MATCH_THRESHOLD_PERCENT * 100)}%)`);
            console.log('='.repeat(60));

            let bestMatch = null;
            let bestScore = Infinity;
            const allResults = [];

            for (const exhibit of this.exhibits) {
                if (!exhibit.ahash || !exhibit.dhash) continue;

                const ahashDist = this.hammingDistance(frameHashes.ahash, exhibit.ahash);
                const dhashDist = this.hammingDistance(frameHashes.dhash, exhibit.dhash);

                // Weighted combination (AHash is more stable for similar objects)
                const combinedDistance = Math.round(ahashDist * 0.6 + dhashDist * 0.4);
                const similarity = Math.round((this.HASH_BITS - combinedDistance) / this.HASH_BITS * 100);

                allResults.push({ exhibit: exhibit.title, ahashDist, dhashDist, combinedDistance, similarity });

                // Keep track of best match even if it doesn't meet threshold
                if (combinedDistance < bestScore) {
                    bestScore = combinedDistance;
                    bestMatch = { exhibit, ahashDistance: ahashDist, dhashDistance: dhashDist, combinedDistance };
                }
            }

            // Sort and display all results
            allResults.sort((a, b) => a.combinedDistance - b.combinedDistance);
            console.table(allResults);

            // Log best match for debugging
            if (bestMatch) {
                const similarity = Math.round((this.HASH_BITS - bestScore) / this.HASH_BITS * 100);
                console.log('='.repeat(60));
                console.log(`🏆 En iyi eşleşme: ${bestMatch.exhibit.title}`);
                console.log(`   Benzerlik: ${similarity}%`);
                console.log(`   Combined Distance: ${bestScore}/${this.MATCH_THRESHOLD} (threshold)`);
                console.log(`   AHash: ${bestMatch.ahashDistance}/${this.HASH_BITS}`);
                console.log(`   DHash: ${bestMatch.dhashDistance}/${this.HASH_BITS}`);
            }

            // Only return match if it meets threshold
            if (bestScore <= this.MATCH_THRESHOLD) {
                console.log(`✅ EŞLEŞME BULUNDU! Eser: ${bestMatch.exhibit.title}`);
                console.log('='.repeat(60));
                return bestMatch;
            }

            console.log(`❌ Eşleşme bulunamadı (en yakın: ${bestScore}, gerekli: ${this.MATCH_THRESHOLD})`);
            console.log('='.repeat(60));
            return null;
        }

        /**
         * Enhance image contrast and normalize brightness
         */
        enhanceImage(ctx, width, height) {
            const imageData = ctx.getImageData(0, 0, width, height);
            const data = imageData.data;

            // Calculate histogram
            let min = 255, max = 0;
            for (let i = 0; i < data.length; i += 4) {
                const gray = this.toGrayscale(data[i], data[i + 1], data[i + 2]);
                if (gray < min) min = gray;
                if (gray > max) max = gray;
            }

            // Contrast stretching
            const range = max - min;
            if (range > 0) {
                for (let i = 0; i < data.length; i += 4) {
                    const gray = this.toGrayscale(data[i], data[i + 1], data[i + 2]);
                    const normalized = ((gray - min) / range) * 255;
                    data[i] = data[i + 1] = data[i + 2] = normalized;
                }
                ctx.putImageData(imageData, 0, 0);
            }
        }

        /**
         * Convert RGB to grayscale using weighted formula
         */
        toGrayscale(r, g, b) {
            // ITU-R BT.601 formula (more perceptually accurate)
            return 0.299 * r + 0.587 * g + 0.114 * b;
        }

        computeMultipleHashes(image) {
            const canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0);

            // Enhance the reference image too (if enabled)
            if (this.ENABLE_IMAGE_ENHANCEMENT) {
                this.enhanceImage(ctx, canvas.width, canvas.height);
            }

            return this.computeMultipleHashesFromCanvas(canvas);
        }

        computeMultipleHashesFromCanvas(canvas) {
            return {
                ahash: this.computeAverageHash(canvas),
                dhash: this.computeDifferenceHash(canvas)
            };
        }

        computeAverageHash(canvas) {
            const size = this.HASH_SIZE;
            const smallCanvas = document.createElement('canvas');
            smallCanvas.width = size;
            smallCanvas.height = size;
            const ctx = smallCanvas.getContext('2d');

            // Use better interpolation
            ctx.imageSmoothingEnabled = true;
            ctx.imageSmoothingQuality = 'high';
            ctx.drawImage(canvas, 0, 0, size, size);

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

            // Calculate average brightness using proper grayscale conversion
            let totalBrightness = 0;
            const pixels = [];

            for (let i = 0; i < data.length; i += 4) {
                const brightness = this.toGrayscale(data[i], data[i + 1], data[i + 2]);
                pixels.push(brightness);
                totalBrightness += brightness;
            }

            const avgBrightness = totalBrightness / pixels.length;

            // Create hash: 1 if pixel > average, 0 otherwise
            let hash = '';
            for (const brightness of pixels) {
                hash += brightness > avgBrightness ? '1' : '0';
            }

            return hash;
        }

        /**
         * Difference Hash (dHash) - tracks gradients, more robust to lighting changes
         */
        computeDifferenceHash(canvas) {
            const width = this.HASH_SIZE + 1; // One extra column for difference calculation
            const height = this.HASH_SIZE;

            const smallCanvas = document.createElement('canvas');
            smallCanvas.width = width;
            smallCanvas.height = height;
            const ctx = smallCanvas.getContext('2d');

            ctx.imageSmoothingEnabled = true;
            ctx.imageSmoothingQuality = 'high';
            ctx.drawImage(canvas, 0, 0, width, height);

            const imageData = ctx.getImageData(0, 0, width, height);
            const data = imageData.data;

            // Convert to grayscale array
            const grayscale = [];
            for (let i = 0; i < data.length; i += 4) {
                grayscale.push(this.toGrayscale(data[i], data[i + 1], data[i + 2]));
            }

            // Create hash based on horizontal gradients
            let hash = '';
            for (let row = 0; row < height; row++) {
                for (let col = 0; col < this.HASH_SIZE; col++) {
                    const idx = row * width + col;
                    const left = grayscale[idx];
                    const right = grayscale[idx + 1];
                    hash += left > right ? '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, combinedDistance } = matchResult;

            document.getElementById('scanningIndicator').classList.add('hidden');
            this.isScanning = false;

            const similarity = Math.round((this.HASH_BITS - combinedDistance) / this.HASH_BITS * 100);

            this.result.textContent = `${exhibit.title} bulundu! Benzerlik: ${similarity}%`;
            this.result.style.display = 'block';
            this.status.textContent = 'Eşleşme bulundu. Yönlendiriliyor...';

            const scanArea = document.getElementById('scanArea');
            scanArea.style.borderColor = '#00ffff';
            scanArea.style.boxShadow = '0 0 30px rgba(0, 255, 255, 0.8)';

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

            setTimeout(() => {
                alert(`Eser detay sayfasına yönlendiriliyorsunuz: ${exhibit.title}. Benzerlik: ${similarity}%`);
                // window.location.href = `/app/exhibits/${exhibit.id}`;
            }, 1500);
        }
    }

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