@extends('layouts.camera-layout')

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

@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"
                style="background-color: #ef4444 !important;">
                <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 = 64; // 64x64 = 4096 bits (was 16x16=256) - More precision
            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.10; // 10% tolerance (was 5%) - More strict
            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 {
                        const hashes = this.computeAllHashTypes(img);
                        exhibit.ahash = hashes.ahash;
                        exhibit.dhash = hashes.dhash;
                        exhibit.phash = hashes.phash;

                        console.log(`Hashes computed for exhibit ${exhibit.title}:`);
                        console.log(`  AHash: ${hashes.ahash.substring(0, 20)}...`);
                        console.log(`  DHash: ${hashes.dhash.substring(0, 20)}...`);
                        console.log(`  PHash: ${hashes.phash.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;
            });
        }

        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();
            }, 500);

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

            // Calculate dynamic ROI based on device orientation
            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);

            // Dynamic ROI calculation
            const roiInfo = this.calculateOptimalROI(canvas);
            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
            );

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

            // 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, 20) + '...');
            console.log('Frame DHash:', frameHashes.dhash.substring(0, 20) + '...');
            console.log('Frame PHash:', frameHashes.phash.substring(0, 20) + '...');

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

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

            // Use a consistent square ROI that matches the visual scan area (4/5 = 80% of smallest dimension)
            const roiScale = 0.8; // Matches the w-4/5 h-4/5 classes (80%)
            const roiSize = Math.floor(Math.min(width, height) * roiScale);

            return {
                size: roiSize,
                x: (width - roiSize) / 2,
                y: (height - roiSize) / 2
            };
        }

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

            // Histogram equalization
            const histogram = new Array(256).fill(0);
            for (let i = 0; i < data.length; i += 4) {
                const gray = this.toGrayscale(data[i], data[i + 1], data[i + 2]);
                histogram[Math.floor(gray)]++;
            }

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

            // Normalize and apply
            const totalPixels = width * height;
            for (let i = 0; i < data.length; i += 4) {
                const gray = this.toGrayscale(data[i], data[i + 1], data[i + 2]);
                const newValue = Math.floor((cumulative[Math.floor(gray)] / totalPixels) * 255);
                data[i] = data[i + 1] = data[i + 2] = newValue;
            }

            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 - More emphasis on DHash and PHash for better accuracy
                const combinedDistance = Math.round(
                    ahashDist * 0.3 +
                    dhashDist * 0.4 +
                    phashDist * 0.35
                );

                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.60) { // At least 60% 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: 75%)`);
            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: this.computePerceptualHash(canvas)
            };
        }

        computeAllHashTypesFromCanvas(canvas) {
            return {
                ahash: this.computeAverageHash(canvas),
                dhash: this.computeDifferenceHash(canvas),
                phash: this.computePerceptualHash(canvas)
            };
        }

        /**
         * Improved perceptual hash using DCT
         */
        computePerceptualHash(canvas) {
            const size = 64; // 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);

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

            // 2D DCT calculation
            const dct = this.compute2DDCT(grayscale);

            // Take DC coefficients (low frequency components)
            const dcCoefficients = [];
            for (let i = 0; i < 8; i++) {
                for (let j = 0; j < 8; j++) {
                    dcCoefficients.push(dct[i][j]);
                }
            }

            const median = this.median(dcCoefficients);
            return dcCoefficients.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];
                const gray = this.toGrayscale(r, g, b);
                grayscale.push(gray);
            }

            return grayscale;
        }

        compute2DDCT(grayscale) {
            const N = 64; // 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 = this.HASH_SIZE;
            const ctx = this.reuseCanvasContext(this.smallCanvas, size, size);

            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;

            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;

            let hash = '';
            for (const brightness of pixels) {
                hash += brightness > avgBrightness ? '1' : '0';
            }

            return hash;
        }

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

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

            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;

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

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

        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