@extends('layouts.camera-layout')

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

@section('content')
<div class="flex flex-col items-center">
    <!-- 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">
            <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() {
            // DOM elements
            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');

            // State
            this.stream = null;
            this.isScanning = false;
            this.scanInterval = null;
            this.progressInterval = null;

            // Constants
            this.HASH_SIZE = 16; // dHash için 16x16 → 256-bit hash
            this.HASH_LENGTH = this.HASH_SIZE * this.HASH_SIZE;
            this.SIMILARITY_THRESHOLD = 0.50; // Hassasiyeti düşürdük
            this.MAX_HAMMING_DISTANCE = Math.floor(this.HASH_LENGTH * (1 - this.SIMILARITY_THRESHOLD));

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

            this.preloadExhibitImages();
        }

        async preloadExhibitImages() {
            this.status.textContent = 'Referans görselleri yükleniyor...';
            const promises = this.exhibits.map(exhibit => {
                if (!exhibit.image) return Promise.resolve();
                return new Promise((resolve, reject) => {
                    const img = new Image();
                    img.crossOrigin = 'Anonymous';
                    img.onload = () => {
                        try {
                            // ⬇️ Artık dHash kullanıyoruz
                            exhibit.hash = this.computeDHashFromImage(img);
                            resolve();
                        } catch (e) {
                            console.error(`Hash error for ${exhibit.title}:`, e);
                            reject(e);
                        }
                    };
                    img.onerror = () => reject(new Error(`Failed to load ${exhibit.image}`));
                    img.src = '/' + exhibit.image;
                });
            });

            try {
                await Promise.all(promises);
                const valid = this.exhibits.filter(e => e.hash).length;
                this.status.textContent = `${valid} referans görsel hazır. Kamerayı başlatın.`;
            } catch (err) {
                console.error('Preload error:', err);
                this.status.textContent = 'Referans görselleri yüklenirken hata oluştu.';
            }
        }

        async startCamera() {
            try {
                this.stream = await navigator.mediaDevices.getUserMedia({
                    video: {
                        facingMode: 'environment',
                        width: { ideal: 800 },
                        height: { ideal: 800 }
                    }
                });
                this.video.srcObject = this.stream;
                this.startBtn.classList.add('hidden');
                this.stopBtn.classList.remove('hidden');
                this.status.textContent = 'Kamera aktif. Eseri çerçevenin içine alın...';

                setTimeout(() => this.startScanning(), 1000);
            } catch (err) {
                console.error('Kamera hatası:', err);
                this.status.textContent = 'Kamera açılamadı.';
            }
        }

        stopCamera() {
            this.isScanning = false;
            if (this.scanInterval) clearInterval(this.scanInterval);
            if (this.progressInterval) clearInterval(this.progressInterval);
            if (this.stream) {
                this.stream.getTracks().forEach(t => t.stop());
                this.stream = null;
            }

            ['scanningIndicator', 'scanProgress'].forEach(id => {
                const el = document.getElementById(id);
                if (el) el.classList.add('hidden');
            });
            const scanArea = document.getElementById('scanArea');
            if (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.';
            this.result.style.display = 'none';
        }

        startScanning() {
            if (!this.exhibits.some(e => e.hash)) {
                this.status.textContent = 'Referans görselleri hazır değil!';
                return;
            }

            this.isScanning = true;
            document.getElementById('scanningIndicator')?.classList.remove('hidden');
            document.getElementById('scanProgress')?.classList.remove('hidden');
            this.status.textContent = 'Tarama başladı...';

            this.scanInterval = setInterval(() => this.scanFrame(), 2000);
            this.updateProgressBar();
        }

        updateProgressBar() {
            if (this.progressInterval) clearInterval(this.progressInterval);
            let progress = 0;
            this.progressInterval = setInterval(() => {
                if (!this.isScanning) {
                    clearInterval(this.progressInterval);
                    return;
                }
                progress += 5;
                if (progress >= 100) progress = 100;
                const bar = document.getElementById('progressBar');
                const text = document.getElementById('scanProgressText');
                if (bar) bar.style.width = progress + '%';
                if (text) text.textContent = progress + '%';
                if (progress === 100) {
                    clearInterval(this.progressInterval);
                }
            }, 100);
        }

        scanFrame() {
            if (!this.isScanning || !this.video.videoWidth) return;

            // Kare çerçeveyi al
            const canvas = document.createElement('canvas');
            const size = Math.min(this.video.videoWidth, this.video.videoHeight);
            canvas.width = size;
            canvas.height = size;
            const ctx = canvas.getContext('2d');
            const dx = (this.video.videoWidth - size) / 2;
            const dy = (this.video.videoHeight - size) / 2;
            ctx.drawImage(this.video, dx, dy, size, size, 0, 0, size, size);

            // ⬇️ dHash ile hash hesapla
            const frameHash = this.computeDHash(canvas);
            this.status.textContent = 'Eşleşme aranıyor...';

            const match = this.findMatch(frameHash);
            if (match) {
                const similarity = (this.HASH_LENGTH - match.distance) / this.HASH_LENGTH;
                const pct = Math.round(similarity * 100);
                this.handleMatch(match.exhibit, pct);
            } else {
                setTimeout(() => {
                    if (this.isScanning) {
                        this.status.textContent = 'Eşleşme yok. Görseli net ve ortada tutun.';
                        this.updateProgressBar();
                    }
                }, 500);
            }
        }

        findMatch(frameHash) {
            for (const exhibit of this.exhibits) {
                if (!exhibit.hash) continue;
                const distance = this.hammingDistance(frameHash, exhibit.hash);
                if (distance <= this.MAX_HAMMING_DISTANCE) {
                    return { exhibit, distance };
                }
            }
            return null;
        }

        computeAverageHashFromImage(img) {
            // Create a canvas to draw the image
            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);

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

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

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

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

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

            const avgBrightness = totalBrightness / count;

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

            return hash;
        }

        hammingDistance(a, b) {
            if (a.length !== b.length) return Infinity;
            let dist = 0;
            for (let i = 0; i < a.length; i++) {
                if (a[i] !== b[i]) dist++;
            }
            return dist;
        }

        handleMatch(exhibit, similarityPercentage) {
            this.isScanning = false;
            if (this.scanInterval) clearInterval(this.scanInterval);
            if (this.progressInterval) clearInterval(this.progressInterval);

            document.getElementById('scanningIndicator')?.classList.add('hidden');
            this.result.textContent = `${exhibit.title} bulundu! Benzerlik: ${similarityPercentage}%`;
            this.result.style.display = 'block';
            this.status.textContent = 'Yönlendiriliyor...';

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

            setTimeout(() => {
                alert(`Eser: ${exhibit.title} (${similarityPercentage}% benzerlik)`);
                // window.location.href = `/app/exhibits/${exhibit.id}`;
            }, 1500);
        }
    }

    document.addEventListener('DOMContentLoaded', () => {
        new SimpleCameraNavigation();
    });
</script>
@endsection