@extends('layouts.camera-layout')

@section('title', 'Kamera ile Gezinme - V4.2')

@section('content')
<div class="relative flex flex-col w-screen h-screen">
    <style>
        #scanArea {
            position: relative;
        }

        .confidence-indicator {
            position: absolute;
            top: 20px;
            left: 20px;
            font-size: 14px;
            background: rgba(0, 0, 0, 0.5);
            padding: 5px 10px;
            border-radius: 5px;
            display: none;
        }

        .scanning-indicator {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, transparent 40%, rgba(255, 132, 0, 0.2) 40%, rgba(255, 132, 0, 0.2) 60%, transparent 60%),
                linear-gradient(to bottom, transparent 40%, rgba(255, 132, 0, 0.2) 40%, rgba(255, 132, 0, 0.2) 60%, transparent 60%);
            display: none;
        }

        .scan-progress {
            position: absolute;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 8px;
            border-radius: 5px;
            display: none;
        }

        .progress-bar-container {
            width: 100%;
            height: 5px;
            background-color: #333;
            border-radius: 3px;
            overflow: hidden;
            margin-top: 5px;
        }

        .progress-bar {
            height: 100%;
            background-color: #ff7b00;
            width: 0%;
            transition: width 0.2s ease;
        }
    </style>

    <!-- Status information at the top -->
    <div class="absolute left-0 right-0 z-40 p-4 top-12">
        <p id="status" class="p-2 text-sm text-center text-white">
            Kameraya izin verin ve nesneyi ekranın ortasına odaklayın.
        </p>
    </div>

    <!-- Scan area in the middle -->
    <div id="scanArea" class="relative flex items-center justify-center flex-1">
        <div
            class="absolute w-4/5 h-4/5 max-w-[70vh] max-h-[70vh] border-2 border-white border-opacity-70 rounded-lg shadow-[0_0_0_9999px_rgba(0,0,0,0.6)] z-10 pointer-events-none">
        </div>
        <div id="scanningIndicator" class="z-20 scanning-indicator"></div>
        <div id="scanProgress" class="z-30 scan-progress">
            <div class="text-xs text-white">Tarama: <span id="scanProgressText">0%</span></div>
            <div class="progress-bar-container">
                <div id="progressBar" class="progress-bar"></div>
            </div>
        </div>
        <video id="video" autoplay playsinline class="object-cover w-full h-full"></video>
        <div id="confidenceDisplay" class="z-40 confidence-indicator"></div>
    </div>

    <!-- Controls at the bottom -->
    <div
        class="absolute left-0 right-0 z-50 flex items-center justify-center p-6 bottom-20 bg-gradient-to-t from-black to-transparent">
        <div id="controls" class="flex items-center justify-between w-full max-w-md">
            <button id="startBtn"
                class="flex items-center justify-center w-16 h-16 font-bold text-black bg-white rounded-full">
                <span class="text-4xl material-symbols-rounded">camera_alt</span>
            </button>
            <button id="stopBtn"
                class="flex items-center justify-center hidden w-16 h-16 font-bold text-white !bg-red-500 rounded-full">
                <span class="text-4xl material-symbols-rounded">stop</span>
            </button>
        </div>
    </div>

    <!-- Debug canvas in corner -->
    <div class="absolute z-50 hidden top-20 right-4">
        <canvas id="debugCanvas" class="border border-green-500 max-w-[80px] max-h-[80px]"></canvas>
        <p class="mt-1 text-xs text-white">Debug</p>
    </div>

    <!-- Result at the bottom -->
    <div class="absolute left-0 right-0 z-50 flex justify-center hidden bottom-24">
        <div id="result" class="max-w-xs p-3 text-center text-white bg-black rounded bg-opacity-70"></div>
    </div>
</div>
@endsection

@section('camera-script')
<script>
    class OptimizedCameraNavigation {
        constructor() {
            this.video = document.getElementById('video');
            this.status = document.getElementById('status');
            this.result = document.getElementById('result');
            this.referenceImagePreview = document.getElementById('referenceImagePreview');
            this.confidenceDisplay = document.getElementById('confidenceDisplay');

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

            // Canvas nesneleri (yeniden kullanılabilir)
            this.workingCanvas = document.createElement('canvas');
            this.scanCanvas = document.createElement('canvas');
            this.smallCanvas = document.createElement('canvas');

            // Hash configuration
            this.HASH_SIZE = 48; // 48x48 = 2304 bits - Larger size for better accuracy
            this.HASH_BITS = this.HASH_SIZE * this.HASH_SIZE;

            // Threshold as percentage of hash bits - Increased sensitivity to avoid false matches
            this.MATCH_THRESHOLD_PERCENT = 0.25; // 25% tolerance - Adjusted for 48x48 hashes
            this.MATCH_THRESHOLD = Math.floor(this.HASH_BITS * this.MATCH_THRESHOLD_PERCENT);

            // Pre-loaded exhibit data - will be populated dynamically
            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.startCameraWithFallback());
                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 with error handling
            this.preloadExhibitImagesWithErrorHandling();
        }

        async preloadExhibitImagesWithErrorHandling() {
            this.status.textContent = 'Mekan içerikleri yükleniyor...';
            const successfulLoads = [];
            const failedLoads = [];

            for (const exhibit of this.exhibits) {
                try {
                    await this.loadSingleExhibit(exhibit);
                    successfulLoads.push(exhibit);
                } catch (error) {
                    console.error(`İçerik yüklenemedi: ${exhibit.title}`, error);
                    failedLoads.push({ exhibit, error });
                }
            }

            const successRate = (successfulLoads.length / this.exhibits.length) * 100;
            this.status.textContent = `${successfulLoads.length}/${this.exhibits.length} içerik yüklendi (%${successRate.toFixed(1)})`;

            if (failedLoads.length > 0) {
                console.warn(`${failedLoads.length} içerik yüklenemedi:`, failedLoads);
            }

            return successfulLoads;
        }

        async loadSingleExhibit(exhibit) {
            if (!exhibit.image) return;

            return new Promise((resolve, reject) => {
                const img = new Image();
                img.crossOrigin = 'Anonymous';

                img.onload = async () => {
                    try {
                        // Draw the image on a canvas to ensure proper processing
                        const canvas = document.createElement('canvas');
                        canvas.width = img.width;
                        canvas.height = img.height;
                        const ctx = canvas.getContext('2d');

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

                        // Apply the same preprocessing as camera frames
                        this.adaptiveEnhancement(ctx, canvas.width, canvas.height);

                        const hashes = this.computeAllHashTypesFromCanvas(canvas);
                        exhibit.ahash = hashes.ahash;
                        exhibit.dhash = hashes.dhash;
                        // Temporarily disable PHash - setting to a fixed value to avoid issues
                        exhibit.phash = '0'.repeat(this.HASH_SIZE * this.HASH_SIZE);

                        console.log(`Hashes computed for exhibit ${exhibit.title}:`);
                        console.log(`  AHash: ${hashes.ahash.substring(0, 40)}...`);
                        console.log(`  DHash: ${hashes.dhash.substring(0, 40)}...`);
                        console.log(`  PHash: Disabled temporarily`);

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

        async startCameraWithFallback() {
            const constraints = [
                {
                    video: {
                        facingMode: 'environment',
                        width: { ideal: 1920 },
                        height: { ideal: 1080 },
                        frameRate: { ideal: 30 }
                    }
                },
                {
                    video: {
                        facingMode: 'environment',
                        width: { ideal: 1280 },
                        height: { ideal: 720 }
                    }
                },
                {
                    video: { facingMode: 'environment' }
                }
            ];

            for (const constraint of constraints) {
                try {
                    this.stream = await navigator.mediaDevices.getUserMedia(constraint);

                    // Gerçek çözünürlüğü kontrol et
                    const track = this.stream.getVideoTracks()[0];
                    const settings = track.getSettings();
                    console.log(`Kamera ayarları: ${settings.width}x${settings.height}@${settings.frameRate}fps`);

                    break;
                } catch (err) {
                    console.warn(`Kamera ayarı başarısız:`, constraint, err);
                    continue;
                }
            }

            if (!this.stream) {
                throw new Error('Hiçbir kamera ayarı çalıştırılamadı');
            }

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

        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');
            this.confidenceDisplay.classList.add('hidden');

            // Reset scan area style
            const scanAreaOverlay = document.querySelector('#scanArea > div');
            if (scanAreaOverlay) {
                scanAreaOverlay.style.border = '2px solid oklch(86.9% 0.005 56.366)';
            }

            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 içerikler yüklenemedi!';
                console.log('Eşleme işlemi başlatılamadı: İçerikler yüklenmemiş');
                return;
            }

            this.isScanning = true;

            // Show scanning indicator
            document.getElementById('scanningIndicator').classList.remove('hidden');
            document.getElementById('scanProgress').classList.remove('hidden');
            this.confidenceDisplay.classList.remove('hidden');

            this.status.textContent = 'Tarama başladı. Kamerayı objelerden 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 içerik 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;

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

            // Yeni: Yuvarlak ROI hesapla
            const roiInfo = this.calculateOptimalROI(canvas);
            
            // ROI alanını al
            const scanCanvas = this.reuseCanvasElement(this.scanCanvas, roiInfo.size, roiInfo.size);
            const scanCtx = scanCanvas.getContext('2d');

            scanCtx.drawImage(
                canvas,
                roiInfo.x, roiInfo.y, roiInfo.size, roiInfo.size,
                0, 0, roiInfo.size, roiInfo.size
            );

            // Yeni: Yuvarlak maske uygula
            this.createCircularMask(scanCtx, roiInfo.radius, roiInfo.radius, roiInfo.radius);

            // Apply adaptive enhancement
            this.adaptiveEnhancement(scanCtx, roiInfo.size, roiInfo.size);

            // Compute all hash types for the captured frame
            const frameHashes = this.computeAllHashTypesFromCanvas(scanCanvas);

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

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

            const match = this.findBestMatchWithConfidence(frameHashes);

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

        createCircularMask(ctx, centerX, centerY, radius) {
            const imageData = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
            const data = imageData.data;

            // Create a soft edge for the mask to avoid harsh boundaries
            const softEdgeSize = Math.max(1, Math.floor(radius * 0.05)); // 5% of radius

            for (let y = 0; y < ctx.canvas.height; y++) {
                for (let x = 0; x < ctx.canvas.width; x++) {
                    const idx = (y * ctx.canvas.width + x) * 4;
                    const dx = x - centerX;
                    const dy = y - centerY;
                    const distance = Math.sqrt(dx * dx + dy * dy);

                    if (distance > radius) {
                        // Completely outside the circle - set to black
                        data[idx] = 0;     // R
                        data[idx + 1] = 0; // G
                        data[idx + 2] = 0; // B
                    } else if (distance > radius - softEdgeSize) {
                        // In the soft edge area - gradually reduce intensity
                        const factor = (radius - distance) / softEdgeSize;
                        data[idx] = data[idx] * factor;     // R
                        data[idx + 1] = data[idx + 1] * factor; // G
                        data[idx + 2] = data[idx + 2] * factor; // B
                    }
                    // Inside the circle - leave unchanged
                }
            }

            ctx.putImageData(imageData, 0, 0);
        }

        calculateOptimalROI(canvas) {
            const { width, height } = canvas;

            // Yuvarlak ROI için merkezi koordinatlar ve yarıçap
            const centerX = width / 2;
            const centerY = height / 2;
            const roiScale = 0.7; // Yuvarlak ROI için çap oranı (görselin %60'ı)
            const radius = Math.floor(Math.min(width, height) * roiScale / 2);

            return {
                x: centerX - radius,
                y: centerY - radius,
                size: radius * 2,
                centerX,
                centerY,
                radius
            };
        }

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

            // Histogram equalization - only consider non-black pixels
            const histogram = new Array(256).fill(0);
            let validPixelCount = 0;

            for (let i = 0; i < data.length; i += 4) {
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];

                // Only process non-black pixels
                if (!(r === 0 && g === 0 && b === 0)) {
                    const gray = this.toGrayscale(data[i], data[i + 1], data[i + 2]);
                    histogram[Math.floor(gray)]++;
                    validPixelCount++;
                }
            }

            // Cumulative distribution
            const cumulative = [histogram[0]];
            for (let i = 1; i < 256; i++) {
                cumulative[i] = cumulative[i - 1] + histogram[i];
            }

            // Normalize and apply - use only valid pixels for normalization
            for (let i = 0; i < data.length; i += 4) {
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];

                // Only enhance non-black pixels
                if (!(r === 0 && g === 0 && b === 0)) {
                    const gray = this.toGrayscale(data[i], data[i + 1], data[i + 2]);
                    // Apply histogram equalization with contrast enhancement
                    const normalizedValue = (cumulative[Math.floor(gray)] / validPixelCount) * 255;
                    // Enhance contrast by expanding the range
                    const enhancedValue = Math.min(255, Math.max(0, 128 + 1.2 * (normalizedValue - 128)));
                    data[i] = data[i + 1] = data[i + 2] = enhancedValue;
                }
            }

            ctx.putImageData(imageData, 0, 0);
        }

        findBestMatchWithConfidence(frameHashes) {
            console.log('='.repeat(60));
            console.log(`🔍 Toplam ${this.exhibits.length} adet içerik 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(`📊 Minimum confidence required: 50%`);
            console.log(`📊 Hash size: ${this.HASH_SIZE}x${this.HASH_SIZE} = ${this.HASH_BITS} bits`);
            console.log('='.repeat(60));

            const matches = [];

            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);
                const phashDist = this.hammingDistance(frameHashes.phash, exhibit.phash);

                // Weighted combination of multiple hash types - Reducing weight of PHash since it's problematic
                const combinedDistance = Math.round(
                    ahashDist * 0.35 +
                    dhashDist * 0.65 +
                    phashDist * 0.0  // Zero weight for PHash until it's fixed
                );

                const confidence = (this.HASH_BITS - combinedDistance) / this.HASH_BITS;

                matches.push({
                    exhibit,
                    combinedDistance,
                    confidence,
                    details: {
                        ahashDistance: ahashDist,
                        dhashDistance: dhashDist,
                        phashDistance: phashDist,
                        ahashConfidence: (this.HASH_BITS - ahashDist) / this.HASH_BITS,
                        dhashConfidence: (this.HASH_BITS - dhashDist) / this.HASH_BITS,
                        phashConfidence: (this.HASH_BITS - phashDist) / this.HASH_BITS
                    }
                });
            }

            // Sort by confidence (highest first)
            matches.sort((a, b) => b.confidence - a.confidence);

            // Display all results
            const allResults = matches.map(m => ({
                exhibit: m.exhibit.title,
                confidence: Math.round(m.confidence * 100),
                ...m.details
            }));

            console.table(allResults);

            // Log best match for debugging
            if (matches.length > 0) {
                const bestMatch = matches[0];
                const similarity = Math.round(bestMatch.confidence * 100);
                console.log('='.repeat(60));
                console.log(`🏆 En iyi eşleşme: ${bestMatch.exhibit.title}`);
                console.log(`   Benzerlik: ${similarity}%`);
                console.log(`   Confidence: ${bestMatch.confidence.toFixed(3)}`);
                console.log(`   Combined Distance: ${bestMatch.combinedDistance}/${this.MATCH_THRESHOLD} (threshold)`);
                console.log(`   AHash: ${bestMatch.details.ahashDistance}/${this.HASH_BITS}`);
                console.log(`   DHash: ${bestMatch.details.dhashDistance}/${this.HASH_BITS}`);
                console.log(`   PHash: ${bestMatch.details.phashDistance}/${this.HASH_BITS}`);
                console.log(`   Hash size: ${this.HASH_SIZE}x${this.HASH_SIZE} = ${this.HASH_BITS} bits`);
            }

            // Only return match if it meets threshold - Require higher confidence for match
            if (matches.length > 0 && matches[0].confidence > 0.82) { // At least 82% confidence required
                console.log(`✅ EŞLEŞME BULUNDU! Eser: ${matches[0].exhibit.title}`);
                console.log('='.repeat(60));
                return matches[0];
            }

            console.log(`❌ Eşleşme bulunamadı (en yüksek confidence: ${(matches.length > 0 ? matches[0].confidence : 0).toFixed(3)}, gerekli: 82%)`);
            console.log(`📊 Hash size: ${this.HASH_SIZE}x${this.HASH_SIZE} = ${this.HASH_BITS} bits`);
            console.log('='.repeat(60));
            return null;
        }

        /**
         * Reuse canvas element to prevent memory allocation
         */
        reuseCanvasElement(canvas, width, height) {
            if (canvas.width !== width || canvas.height !== height) {
                canvas.width = width;
                canvas.height = height;
            }
            return canvas;
        }

        /**
         * Reuse canvas context to prevent memory allocation
         */
        reuseCanvasContext(canvas, width, height) {
            if (canvas.width !== width || canvas.height !== height) {
                canvas.width = width;
                canvas.height = height;
            }
            return canvas.getContext('2d');
        }

        /**
         * Compute all hash types for better accuracy
         */
        computeAllHashTypes(image) {
            const canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            const ctx = canvas.getContext('2d');
            ctx.drawImage(image, 0, 0);

            return {
                ahash: this.computeAverageHash(canvas),
                dhash: this.computeDifferenceHash(canvas),
                phash: '0'.repeat(this.HASH_SIZE * this.HASH_SIZE) // Temporarily disabled
            };
        }

        computeAllHashTypesFromCanvas(canvas) {
            return {
                ahash: this.computeAverageHash(canvas),
                dhash: this.computeDifferenceHash(canvas),
                phash: '0'.repeat(this.HASH_SIZE * this.HASH_SIZE) // Temporarily disabled
            };
        }

        /**
         * Improved perceptual hash using DCT
         */
        computePerceptualHash(canvas) {
            const size = 32; // Use larger size for better frequency analysis
            const ctx = this.reuseCanvasContext(this.smallCanvas, size, size);

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

            // Apply circular mask
            this.createCircularMask(ctx, size/2, size/2, size/2);

            const imageData = ctx.getImageData(0, 0, size, size);
            const grayscale = this.convertToGrayscaleArray(imageData);

            // Perform DCT on 8x8 blocks to get more diverse features
            const hashBits = [];

            // Divide the image into 4x4 blocks (since we have 8 bits for hash)
            const blockSize = Math.floor(size / 2); // 16x16 blocks

            for (let blockRow = 0; blockRow < 2 && hashBits.length < this.HASH_SIZE; blockRow++) {
                for (let blockCol = 0; blockCol < 2 && hashBits.length < this.HASH_SIZE; blockCol++) {
                    // Extract the block
                    const blockValues = [];
                    for (let i = 0; i < blockSize; i++) {
                        for (let j = 0; j < blockSize; j++) {
                            const idx = ((blockRow * blockSize) + i) * size + (blockCol * blockSize) + j;
                            if (idx < grayscale.length) {
                                blockValues.push(grayscale[idx]);
                            }
                        }
                    }

                    if (blockValues.length > 0) {
                        // Calculate average of this block
                        const avg = blockValues.reduce((sum, val) => sum + val, 0) / blockValues.length;
                        hashBits.push(avg);
                    }
                }
            }

            // Pad with zeros if we have fewer than HASH_SIZE values
            while (hashBits.length < this.HASH_SIZE) {
                hashBits.push(0);
            }

            // Take only the first HASH_SIZE values
            const selectedValues = hashBits.slice(0, this.HASH_SIZE);

            const median = this.median(selectedValues);
            return selectedValues.map(val => val > median ? '1' : '0').join('');
        }

        convertToGrayscaleArray(imageData) {
            const data = imageData.data;
            const width = imageData.width;
            const height = imageData.height;
            const grayscale = [];

            for (let i = 0; i < data.length; i += 4) {
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];

                // Only convert non-black pixels to grayscale
                if (!(r === 0 && g === 0 && b === 0)) {
                    const gray = this.toGrayscale(r, g, b);
                    grayscale.push(gray);
                } else {
                    grayscale.push(0); // Placeholder for black pixels
                }
            }

            return grayscale;
        }

        compute2DDCT(grayscale) {
            const N = 32; // Input size
            const M = 8;  // Output size (8x8 low frequencies)
            const dct = Array(M).fill().map(() => Array(M).fill(0));

            for (let u = 0; u < M; u++) {
                for (let v = 0; v < M; v++) {
                    let sum = 0;
                    for (let x = 0; x < N; x++) {
                        for (let y = 0; y < N; y++) {
                            const cosU = Math.cos((Math.PI * u / N) * (x + 0.5));
                            const cosV = Math.cos((Math.PI * v / N) * (y + 0.5));
                            sum += grayscale[x * N + y] * cosU * cosV;
                        }
                    }

                    const cu = (u === 0) ? Math.sqrt(1/N) : Math.sqrt(2/N);
                    const cv = (v === 0) ? Math.sqrt(1/N) : Math.sqrt(2/N);
                    dct[u][v] = cu * cv * sum;
                }
            }

            return dct;
        }

        median(values) {
            values.sort((a, b) => a - b);
            const half = Math.floor(values.length / 2);

            if (values.length % 2) {
                return values[half];
            }

            return (values[half - 1] + values[half]) / 2.0;
        }

        computeAverageHash(canvas) {
            const size = 8; // Fixed size for average hash
            const ctx = this.reuseCanvasContext(this.smallCanvas, size, size);

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

            // Yuvarlak maskeyi uygula
            this.createCircularMask(ctx, size/2, size/2, size/2);

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

            let totalBrightness = 0;
            let pixelCount = 0;
            const pixels = [];

            for (let i = 0; i < data.length; i += 4) {
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];

                // Only count non-black pixels (part of the circular region)
                if (!(r === 0 && g === 0 && b === 0)) {
                    const brightness = this.toGrayscale(r, g, b);
                    pixels.push(brightness);
                    totalBrightness += brightness;
                    pixelCount++;
                } else {
                    pixels.push(0); // Placeholder for black pixels
                }
            }

            // Calculate average brightness only from non-black pixels
            const avgBrightness = pixelCount > 0 ? totalBrightness / pixelCount : 0;

            let hash = '';
            for (let i = 0; i < pixels.length && hash.length < this.HASH_SIZE * this.HASH_SIZE; i++) {
                // Only set bit based on actual pixels (not black placeholders)
                if (!(data[i * 4] === 0 && data[i * 4 + 1] === 0 && data[i * 4 + 2] === 0)) {
                    hash += pixels[i] > avgBrightness ? '1' : '0';
                } else {
                    hash += '0'; // Default to 0 for black pixels outside the circle
                }

                // Stop when we reach the required hash length
                if (hash.length >= this.HASH_SIZE * this.HASH_SIZE) break;
            }

            // Pad with zeros if needed
            while (hash.length < this.HASH_SIZE * this.HASH_SIZE) {
                hash += '0';
            }

            return hash;
        }

        computeDifferenceHash(canvas) {
            const width = this.HASH_SIZE + 1;  // 9
            const height = this.HASH_SIZE;      // 8

            const ctx = this.reuseCanvasContext(this.smallCanvas, width, height);

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

            // Yuvarlak maskeyi uygula
            this.createCircularMask(ctx, width/2, height/2, Math.min(width,height)/2); 

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

            // Create grayscale array considering only non-black pixels
            const grayscale = [];
            for (let i = 0; i < data.length; i += 4) {
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];

                // Only process non-black pixels
                if (!(r === 0 && g === 0 && b === 0)) {
                    grayscale.push(this.toGrayscale(r, g, b));
                } else {
                    grayscale.push(0); // Placeholder for black pixels
                }
            }

            let hash = '';
            for (let row = 0; row < height; row++) {
                for (let col = 0; col < this.HASH_SIZE; col++) {
                    const idx = row * width + col;

                    // Only compare if both pixels are non-black
                    const leftR = data[idx * 4];
                    const leftG = data[idx * 4 + 1];
                    const leftB = data[idx * 4 + 2];
                    const rightR = data[(idx + 1) * 4];
                    const rightG = data[(idx + 1) * 4 + 1];
                    const rightB = data[(idx + 1) * 4 + 2];

                    if (!(leftR === 0 && leftG === 0 && leftB === 0) &&
                        !(rightR === 0 && rightG === 0 && rightB === 0)) {
                        const left = grayscale[idx];
                        const right = grayscale[idx + 1];
                        hash += left > right ? '1' : '0';
                    } else {
                        hash += '0'; // Default to 0 if either pixel is black
                    }

                    // Stop when we reach the required hash length
                    if (hash.length >= this.HASH_SIZE * this.HASH_SIZE) break;
                }

                // Stop when we reach the required hash length
                if (hash.length >= this.HASH_SIZE * this.HASH_SIZE) break;
            }

            // Pad with zeros if needed
            while (hash.length < this.HASH_SIZE * this.HASH_SIZE) {
                hash += '0';
            }

            return hash;
        }

        toGrayscale(r, g, b) {
            return 0.299 * r + 0.587 * g + 0.114 * b;
        }

        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, confidence, details } = matchResult;

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

            const similarity = Math.round(confidence * 100);

            this.result.textContent = `${exhibit.title} bulundu! Benzerlik: ${similarity}%`;
            this.result.style.display = 'block';
            this.status.textContent = 'Eşleşme bulundu. Yönlendiriliyor...';
            this.confidenceDisplay.textContent = `Güven: ${Math.round(confidence * 100)}%`;

            const scanAreaOverlay = document.querySelector('#scanArea > div');
            if (scanAreaOverlay) {
                scanAreaOverlay.style.border = '4px solid #00ffff';
                scanAreaOverlay.style.boxShadow = '0 0 0 9999px rgba(0, 0, 0, 0.6), 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}%. AHash: ${details.ahashConfidence.toFixed(2)}, DHash: ${details.dhashConfidence.toFixed(2)}, PHash: ${details.phashConfidence.toFixed(2)}. Hash size: ${this.HASH_SIZE}x${this.HASH_SIZE}`);
                // window.location.href = `/app/exhibits/${exhibit.id}`;
            }, 1500);
        }

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

            // Clear canvas memory
            this.workingCanvas.width = this.workingCanvas.height = 0;
            this.scanCanvas.width = this.scanCanvas.height = 0;
            this.smallCanvas.width = this.smallCanvas.height = 0;
        }
    }

    // Initialize the camera navigation when the page loads
    document.addEventListener('DOMContentLoaded', () => {
        const app = new OptimizedCameraNavigation();

        // Add cleanup on page unload
        window.addEventListener('beforeunload', () => {
            app.cleanup();
        });
    });
</script>
@endsection