@extends('layouts.camera-layout')

@section('title', 'Kamera ile Gezinme - V1.4 (ID Bazlı Eşleştirme)')

@section('content')
<div class="flex flex-col items-center">
    <div class="fixed w-full px-2 top-4 opacity-80">
        <ul role="list" class="grid grid-cols-1 gap-2">
            <!-- Top 3 exhibits will be dynamically populated here -->
        </ul>
    </div>

    <!-- Match notifications above the video -->
    <div id="matchNotifications" class="flex mx-auto px-6 items-center justify-center text-xl">
        <div id="status">Kameraya izin verin ve referans resimle aynı nesneye odaklanın. Tarama her 2 saniyede bir
            yapılır.
            Lütfen eseri ortalanmış şekilde görün.</div>
        <div id="result"></div>
    </div>

    <!-- Scan area in the middle -->
    <div class="flex flex-col items-center">
        <div id="scanArea">
            <div id="scanningIndicator" class="hidden scanning-indicator"></div>
        </div>
    </div>
    <!-- Content below scan area (buttons and other controls) -->
    <div class="fixed z-50 transform -translate-x-1/2 bottom-10 left-1/2">
        <div id="controls">
            <button class="flex items-center justify-center w-20 h-20 p-3 rounded-full bg-stone-100 text-stone-700"
                id="startBtn">
                <span class="text-5xl material-symbols-rounded">camera</span>
            </button>
            <button class="flex items-center justify-center hidden w-20 h-20 p-3 text-white bg-red-500 rounded-full"
                id="stopBtn">
                <span class="text-5xl material-symbols-rounded">stop</span>
            </button>
        </div>
    </div>

    <!-- Redirection notifications below the video -->
    <div id="redirectionNotifications">
        <div id="redirectMessage" class="hidden"></div>
    </div>
</div>
@endsection

@section('camera-script')
<script>
    class SimpleCameraNavigation {
        constructor() {
            this.video = null; // Will be initialized after DOM loaded
            this.startBtn = null;
            this.stopBtn = null;
            this.status = document.getElementById('status');
            this.result = document.getElementById('result');
            this.redirectMessage = document.getElementById('redirectMessage');

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

            // Pre-loaded exhibit data from the reference images folder
            this.exhibits = @json($exhibits);

            // Route parameters for redirection
            this.routeParams = {
                city: '{{ $city ?? request()->route("city") }}',
                district: '{{ $district ?? request()->route("district") }}',
                venue: '{{ $venue ?? request()->route("venue") }}'
            };

            // Initialize scores for each exhibit
            this.exhibitScores = {};
            this.exhibits.forEach(exhibit => {
                const normalizedId = this.normalizeExhibitId(exhibit.id);
                if (!this.exhibitScores[normalizedId]) {
                    this.exhibitScores[normalizedId] = 0;
                }
            });

            this.init();
        }

        init() {
            // Wait for DOM to be ready
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', () => this.setupElements());
            } else {
                this.setupElements();
            }
        }

        setupElements() {
            this.video = document.getElementById('video');
            this.startBtn = document.getElementById('startBtn');
            this.stopBtn = document.getElementById('stopBtn');

            // Ensure elements exist before adding event listeners
            if (this.startBtn && this.stopBtn) {
                this.startBtn.addEventListener('click', () => this.startCamera());
                this.stopBtn.addEventListener('click', () => this.stopCamera());
            } else {
                console.error('Button elements not found! Check if startBtn and stopBtn exist in the DOM');
            }

            // Pre-load all exhibit images and compute their hashes
            this.preloadExhibitImages();
        }

        async preloadExhibitImages() {
            this.status.textContent = 'Referans görselleri yükleniyor...';
            console.log(`${this.exhibits.length} adet referans görsel yüklenmeye başlanıyor`);

            const promises = this.exhibits.map(async (exhibit) => {
                if (!exhibit.image) return;

                try {
                    console.log(`"${exhibit.title}" görseli yükleniyor: ${exhibit.image}`);

                    // Create an image element to compute hash
                    const img = new Image();
                    img.crossOrigin = 'Anonymous'; // Handle CORS if needed

                    return new Promise((resolve, reject) => {
                        img.onload = async () => {
                            try {
                                const hash = this.computeAverageHashFromImage(img);
                                exhibit.hash = hash;
                                console.log(`Hash computed for exhibit ${exhibit.title}: ${hash.substring(0, 20)}...`);
                                resolve();
                            } catch (error) {
                                console.error(`Error computing hash for exhibit ${exhibit.title}:`, error);
                                reject(error);
                            }
                        };

                        img.onerror = (error) => {
                            console.error(`Error loading image for exhibit ${exhibit.title}:`, error);
                            reject(error);
                        };

                        img.src = '/' + exhibit.image;
                    });
                } catch (error) {
                    console.error(`Error processing exhibit ${exhibit.title}:`, error);
                }
            });

            try {
                await Promise.all(promises);
                const validExhibitsCount = this.exhibits.filter(e => e.hash !== null).length;
                this.status.textContent = `${validExhibitsCount} adet referans görsel yüklendi. Kamera ile eşleştirme yapmaya hazır.`;
                console.log('Tüm geçerli referans görselleri için hash hesaplandı');
            } catch (error) {
                console.error('Error preloading exhibit images:', error);
                this.status.textContent = 'Bazı referans görselleri yüklenirken hata oluştu.';
            }
        }

        async startCamera() {
            try {
                this.stream = await navigator.mediaDevices.getUserMedia({
                    video: {
                        facingMode: 'environment',
                        width: { ideal: 1280 },
                        height: { ideal: 720 }
                    }
                });

                this.video.srcObject = this.stream;
                this.startBtn.classList.add('hidden');
                this.stopBtn.classList.remove('hidden');
                this.status.textContent = 'Kamera aktif. Eseri tarayın...';

                // Start scanning after a delay to allow camera to initialize
                setTimeout(() => {
                    this.startScanning();
                }, 1000);
            } catch (err) {
                console.error('Kamera erişim hatası:', err);
                this.status.textContent = 'Kamera erişimi reddedildi veya kamera mevcut değil.';
            }
        }

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

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

            // Hide scanning indicator
            document.getElementById('scanningIndicator').classList.add('hidden');

            // Reset scan area style
            const scanArea = document.getElementById('scanArea');
            scanArea.style.borderColor = '#00ff00';
            scanArea.style.boxShadow = '0 0 20px rgba(0, 255, 0, 0.5)';

            this.startBtn.classList.remove('hidden');
            this.stopBtn.classList.add('hidden');
            this.status.textContent = 'Kamera durduruldu. Başlatmak için butona tıklayın.';
            this.result.style.display = 'none';
            this.redirectMessage.classList.add('hidden');
            this.isScanning = false;

            // Reset scores
            this.resetScores();
        }

        normalizeExhibitId(id) {
            // Extract exhibit ID from filename format: {id}-{image_number}
            // For database IDs, just convert to string
            // Example: "1-1" → "1", "1-2" → "1", "15-3" → "15"
            const idStr = id.toString();
            const parts = idStr.split('-');
            return parts[0];
        }

        resetScores() {
            // Reset all exhibit scores to 0
            for (const id in this.exhibitScores) {
                this.exhibitScores[id] = 0;
            }

            // Update UI to reflect reset scores
            this.updateTopExhibitsUI();
        }

        startScanning() {
            if (!this.exhibits.some(exhibit => exhibit.hash !== null)) {
                this.status.textContent = 'Henüz referans görselleri yüklenemedi!';
                console.log('Eşleme işlemi başlatılamadı: Referans görselleri yüklenmemiş');
                return;
            }

            this.isScanning = true;

            // Show scanning indicator
            document.getElementById('scanningIndicator').classList.remove('hidden');
            // Hide redirection message when starting a new scan
            this.redirectMessage.classList.add('hidden');

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

            // Reset scores when starting a new scan
            this.resetScores();

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


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

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

            // Create a temporary canvas to capture the frame
            const canvas = document.createElement('canvas');
            canvas.width = this.video.videoWidth;
            canvas.height = this.video.videoHeight;

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

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

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

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

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

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

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

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

            // Score the exhibits based on the closest match
            this.scoreExhibits(allMatches);

            if (match) {
                console.log('Eşleşme bulundu!', match);
                const similarityPercentage = Math.round((256 - match.distance) / 256 * 100);
                this.status.textContent = `Eşleşme bulundu! ${match.exhibit.title} - Benzerlik: ${similarityPercentage}%`;
                this.handleMatch(match);
            } else {
                console.log('Eşleşme bulunamadı.');
                // Display the best similarity found even if it didn't meet the threshold
                let displayedBestMatch = false;
                if (bestMatch) {
                    const bestSimilarityPercentage = Math.round((256 - bestMatch.distance) / 256 * 100);
                    this.status.textContent = `En iyi benzerlik: ${bestMatch.exhibit.title} - ${bestSimilarityPercentage}%`;
                    displayedBestMatch = true;
                } else {
                    this.status.textContent = 'Farklı bir açıyla deneyin.';
                }

                // Reset progress indicator after a short delay
                setTimeout(() => {
                    if (this.isScanning) {
                        // Update status to indicate no match found, but only if we previously showed a best match
                        if (displayedBestMatch) {
                            this.status.textContent = 'Farklı bir açıyla deneyin.';
                        }
                    }
                }, 1500); // Increased timeout to allow users to see the similarity percentage
            }
        }

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

            let bestMatch = null;
            let bestDistance = Infinity;
            const allMatches = [];

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

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

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

                // Store all matches for scoring
                allMatches.push({exhibit, distance});

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

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

        computeAverageHashFromImage(image) {
            // Create a canvas to draw the image
            const canvas = document.createElement('canvas');
            canvas.width = image.width;
            canvas.height = image.height;
            const ctx = canvas.getContext('2d');

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

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

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

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

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

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

            const avgBrightness = totalBrightness / count;

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

            return hash;
        }

        hammingDistance(hash1, hash2) {
            if (hash1.length !== hash2.length) return Infinity;

            let distance = 0;
            for (let i = 0; i < hash1.length; i++) {
                if (hash1[i] !== hash2[i]) {
                    distance++;
                }
            }

            return distance;
        }

        scoreExhibits(allMatches) {
            if (allMatches.length === 0) return;

            // Find the closest match (lowest distance)
            const sortedMatches = [...allMatches].sort((a, b) => a.distance - b.distance);
            const closestMatch = sortedMatches[0];

            // Normalize the exhibit ID to group similar exhibits
            const normalizedId = this.normalizeExhibitId(closestMatch.exhibit.id);

            // Give 1 point to the closest match using the normalized ID
            if (this.exhibitScores[normalizedId] !== undefined) {
                this.exhibitScores[normalizedId] += 1;
            } else {
                this.exhibitScores[normalizedId] = 1;
            }

            // Check if this exhibit has reached 5 points
            if (this.exhibitScores[normalizedId] >= 3) {
                this.redirectToExhibit(normalizedId);
                return;
            }

            // Update the UI to show top 3 exhibits
            this.updateTopExhibitsUI();
        }

        redirectToExhibit(normalizedId) {
            // Stop scanning
            this.isScanning = false;
            if (this.scanInterval) {
                clearInterval(this.scanInterval);
                this.scanInterval = null;
            }

            // Find the exhibit with this normalized ID
            const targetExhibit = this.exhibits.find(e =>
                this.normalizeExhibitId(e.id) === normalizedId
            );

            if (!targetExhibit || !targetExhibit.slug) {
                console.error('Eser bulunamadı veya slug değeri yok:', normalizedId);
                this.status.textContent = 'Yönlendirme hatası: Eser bilgisi bulunamadı.';
                return;
            }

            // Stop camera
            if (this.stream) {
                this.stream.getTracks().forEach(track => track.stop());
                this.stream = null;
            }

            // Show success message
            this.status.textContent = 'Tebrikler! Eser bulundu. Yönlendiriliyorsunuz...';
            this.result.textContent = `✅ ${targetExhibit.title} - 5 puan reached!`;
            this.result.style.display = 'block';

            // Show redirection notification
            this.redirectMessage.textContent = `Eser detay sayfasına yönlendiriliyorsunuz: ${targetExhibit.title}`;
            this.redirectMessage.classList.remove('hidden');

            // Redirect to exhibit page using slug
            setTimeout(() => {
                const url = `/app/${this.routeParams.city}/${this.routeParams.district}/${this.routeParams.venue}/${targetExhibit.slug}`;
                console.log('Yönlendiriliyor:', url);
                window.location.href = url;
            }, 1500);
        }

        updateTopExhibitsUI() {
            // Sort exhibits by score in descending order
            const sortedExhibits = Object.entries(this.exhibitScores)
                .map(([id, score]) => {
                    // Find the first exhibit that matches the normalized ID
                    const exhibit = this.exhibits.find(e => this.normalizeExhibitId(e.id) === id);
                    return { id, score, exhibit };
                })
                .filter(item => item.exhibit) // Only include exhibits that exist
                .sort((a, b) => b.score - a.score)
                .slice(0, 3); // Take top 3

            // Update the UI with the top 3 exhibits
            this.displayTopExhibits(sortedExhibits);
        }

        displayTopExhibits(topExhibits) {
            const listElement = document.querySelector('.fixed.top-4.px-2.w-full ul');
            if (!listElement) return;

            // Clear current list
            listElement.innerHTML = '';

            // Add top exhibits to the list
            topExhibits.forEach((item, index) => {
                const li = document.createElement('li');
                // Determine color based on rank
                let opacityClass = 'bg-pink-600';
                if (index === 0) opacityClass = 'opacity-100'; // 1st place
                else if (index === 1) opacityClass = 'opacity-70'; // 2nd place
                else if (index === 2) opacityClass = 'opacity-40'; // 3rd place

                li.className = `col-span-1 flex rounded-md shadow-sm ${opacityClass}`;

                li.innerHTML = `
                    <div class="flex items-center justify-center w-16 text-xl font-bold shrink-0 rounded-l-md bg-stone-200 text-stone-700">
                        ${index + 1}
                    </div>
                    <div class="flex items-center justify-between flex-1 truncate bg-white border-t border-b border-r border-gray-200 rounded-r-md">
                        <div class="flex-1 px-4 py-1 text-sm truncate">
                            <a href="#" class="font-medium font-bold text-gray-900 uppercase hover:text-gray-600">${item.exhibit.title}</a>
                            <p class="text-gray-500">
                                <span class="font-bold">${item.score}</span> eşleşme puanı</p>
                        </div>
                        <div class="pr-2 shrink-0">
                        </div>
                    </div>
                `;

                listElement.appendChild(li);
            });
        }

        handleMatch(matchResult) {
            const {exhibit, distance} = matchResult;

            // Hide scanning indicator
            document.getElementById('scanningIndicator').classList.add('hidden');

            // Stop progress bar updates
            this.isScanning = false;

            this.result.textContent = `${exhibit.title} bulundu! Benzerlik: ${(256-distance)/256*100}%`;
            this.result.style.display = 'block';
            this.status.textContent = 'Eşleşme bulundu. Yönlendiriliyor...';

            // Add visual feedback for match
            const scanArea = document.getElementById('scanArea');
            scanArea.style.borderColor = '#00ffff';
            scanArea.style.boxShadow = '0 0 30px rgba(0, 255, 255, 0.8)';

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

            // Show redirection notification
            this.redirectMessage.textContent = `Eser detay sayfasına yönlendiriliyorsunuz: ${exhibit.title}. Benzerlik: ${(256-distance)/256*100}%`;
            this.redirectMessage.classList.remove('hidden');

            // Simulate redirect after a delay
            setTimeout(() => {
                // In a real implementation, you would redirect to the exhibit page
                // window.location.href = `/app/exhibits/${exhibit.id}`;
            }, 1500);
        }
    }

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