@extends('layouts.camera-layout')

@section('title', 'Kamera ile Gezinme - H0.1 (Dikey Optimize)')

@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. Dikey optimize edilmiş tarama
            aktif.</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 PortraitOptimizedCamera {
        constructor() {
            this.video = null;
            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
            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") }}'
            };

            // Dikey optimizasyon ayarları - PERFORMANS ODAKLI
            this.PORTRAIT_CONFIG = {
                hashWidth: 16,             // Hash genişliği (düşürüldü)
                hashHeight: 32,            // Hash yüksekliği (dikey oran, düşürüldü)
                scanWidth: 480,            // Tarama genişliği (optimize edildi)
                scanHeight: 960,           // Tarama yüksekliği (dikey, optimize)
                threshold: 80              // Eşleşme eşiği (512-bit hash için ~85% benzerlik)
            };

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

            if (this.startBtn && this.stopBtn) {
                this.startBtn.addEventListener('click', () => this.startCamera());
                this.stopBtn.addEventListener('click', () => this.stopCamera());
            } else {
                console.error('Button elements not found!');
            }

            // Dikey format için referans görselleri yükle
            this.preloadExhibitImages();
        }

        async preloadExhibitImages() {
            this.status.textContent = 'Referans görselleri yükleniyor (dikey optimize)...';
            console.log(`${this.exhibits.length} adet referans görsel işleniyor`);

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

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

                    const img = new Image();
                    img.crossOrigin = 'Anonymous';

                    return new Promise((resolve, reject) => {
                        img.onload = async () => {
                            try {
                                // Direkt hash hesapla (görseller zaten 1024x2048)
                                const hash = this.computeAverageHashFromImage(img);
                                exhibit.hash = hash;

                                console.log(`Hash hesaplandı - ${exhibit.title}: ${hash.substring(0, 20)}... (${hash.length}-bit)`);
                                resolve();
                            } catch (error) {
                                console.error(`Hash hesaplama hatası - ${exhibit.title}:`, error);
                                reject(error);
                            }
                        };

                        img.onerror = (error) => {
                            console.error(`Görsel yükleme hatası - ${exhibit.title}:`, error);
                            reject(error);
                        };

                        img.src = '/' + exhibit.image;
                    });
                } catch (error) {
                    console.error(`İşlem hatası - ${exhibit.title}:`, error);
                }
            });

            try {
                await Promise.all(promises);
                const validExhibitsCount = this.exhibits.filter(e => e.hash !== null).length;
                const hashBits = this.PORTRAIT_CONFIG.hashWidth * this.PORTRAIT_CONFIG.hashHeight;
                this.status.textContent = `${validExhibitsCount} referans görsel yüklendi (${hashBits}-bit dikey hash). Telefonu dikey tutun.`;
                console.log(`Tüm referans görselleri yüklendi (${hashBits}-bit hash)`);
            } catch (error) {
                console.error('Referans görsel yükleme hatası:', error);
                this.status.textContent = 'Bazı görseller yüklenirken hata oluştu.';
            }
        }

        async startCamera() {
            try {
                // Dikey kullanım için kamera ayarları
                this.stream = await navigator.mediaDevices.getUserMedia({
                    video: {
                        facingMode: 'environment',
                        width: { ideal: 1080 },   // Daha yüksek çözünürlük
                        height: { ideal: 1920 }   // Dikey orientation
                    }
                });

                this.video.srcObject = this.stream;
                this.startBtn.classList.add('hidden');
                this.stopBtn.classList.remove('hidden');
                this.status.textContent = 'Kamera aktif. Telefonu dikey tutun ve eseri odaklayın...';

                setTimeout(() => {
                    this.startScanning();
                }, 1000);
            } catch (err) {
                console.error('Kamera erişim hatası:', err);
                this.status.textContent = 'Kamera erişimi reddedildi veya 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;
            }

            document.getElementById('scanningIndicator').classList.add('hidden');

            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.';
            this.result.style.display = 'none';
            this.redirectMessage.classList.add('hidden');
            this.isScanning = false;

            this.resetScores();
        }

        normalizeExhibitId(id) {
            const idStr = id.toString();
            const parts = idStr.split('-');
            return parts[0];
        }

        resetScores() {
            for (const id in this.exhibitScores) {
                this.exhibitScores[id] = 0;
            }
            this.updateTopExhibitsUI();
        }

        startScanning() {
            if (!this.exhibits.some(exhibit => exhibit.hash !== null)) {
                this.status.textContent = 'Referans görselleri yüklenemedi!';
                return;
            }

            this.isScanning = true;

            document.getElementById('scanningIndicator').classList.remove('hidden');
            this.redirectMessage.classList.add('hidden');

            this.status.textContent = 'Dikey tarama aktif. Telefonu dikey tutun.';
            console.log('Dikey tarama başladı');

            this.resetScores();

            // Her 1 saniyede tarama
            this.scanInterval = setInterval(() => {
                this.scanFrame();
            }, 1000);

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

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

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

            // Dikey tarama alanı - ekranın ortasından dikey dikdörtgen
            const scanAreaX = (canvas.width - this.PORTRAIT_CONFIG.scanWidth) / 2;
            const scanAreaY = (canvas.height - this.PORTRAIT_CONFIG.scanHeight) / 2;

            const scanCanvas = document.createElement('canvas');
            scanCanvas.width = this.PORTRAIT_CONFIG.scanWidth;
            scanCanvas.height = this.PORTRAIT_CONFIG.scanHeight;
            const scanCtx = scanCanvas.getContext('2d');

            scanCtx.drawImage(
                canvas,
                scanAreaX, scanAreaY,
                this.PORTRAIT_CONFIG.scanWidth, this.PORTRAIT_CONFIG.scanHeight,
                0, 0,
                this.PORTRAIT_CONFIG.scanWidth, this.PORTRAIT_CONFIG.scanHeight
            );

            // Dikey hash hesapla
            const frameHash = this.computeAverageHash(scanCanvas);

            console.log('Frame hash:', frameHash.substring(0, 20) + '...');

            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;

            this.scoreExhibits(allMatches);

            if (match) {
                console.log('Eşleşme bulundu!', match);
                const similarityPercentage = Math.round(
                    (this.getTotalHashBits() - match.distance) / this.getTotalHashBits() * 100
                );
                this.status.textContent = `Eşleşme bulundu! ${match.exhibit.title} - Benzerlik: ${similarityPercentage}%`;
                this.handleMatch(match);
            } else {
                console.log('Eşleşme bulunamadı.');

                let displayedBestMatch = false;
                if (bestMatch) {
                    const bestSimilarityPercentage = Math.round(
                        (this.getTotalHashBits() - bestMatch.distance) / this.getTotalHashBits() * 100
                    );
                    this.status.textContent = `En iyi benzerlik: ${bestMatch.exhibit.title} - ${bestSimilarityPercentage}%`;
                    displayedBestMatch = true;
                } else {
                    this.status.textContent = 'Farklı bir açıyla deneyin.';
                }

                setTimeout(() => {
                    if (this.isScanning && displayedBestMatch) {
                        this.status.textContent = 'Farklı bir açıyla deneyin.';
                    }
                }, 1500);
            }
        }

        findMatch(frameHash) {
            const THRESHOLD = this.PORTRAIT_CONFIG.threshold;
            console.log(`Karşılaştırma yapılıyor (${this.exhibits.length} görsel, threshold: ${THRESHOLD})`);

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

            for (const exhibit of this.exhibits) {
                if (!exhibit.hash) continue;

                const distance = this.hammingDistance(frameHash, exhibit.hash);

                if (distance < bestDistance) {
                    bestDistance = distance;
                    bestMatch = {exhibit, distance};
                }

                allMatches.push({exhibit, distance});

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

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

        computeAverageHashFromImage(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 this.computeAverageHash(canvas);
        }

        computeAverageHash(canvas) {
            // Optimize edilmiş dikey hash: 16x32 = 512-bit (hızlı ve yeterli)
            const width = this.PORTRAIT_CONFIG.hashWidth;
            const height = this.PORTRAIT_CONFIG.hashHeight;

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

            ctx.drawImage(canvas, 0, 0, width, height);

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

            // Ortalama parlaklık hesapla (tek döngü)
            let totalBrightness = 0;
            const pixelCount = data.length / 4;

            // İlk geçiş: ortalama parlaklık
            for (let i = 0; i < data.length; i += 4) {
                // Daha hızlı parlaklık hesabı (yeşil kanalı ağırlıklı - insan gözüne uygun)
                totalBrightness += data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
            }

            const avgBrightness = totalBrightness / pixelCount;

            // İkinci geçiş: hash oluştur (Array kullan - string birleştirmeden hızlı)
            const hashBits = [];
            for (let i = 0; i < data.length; i += 4) {
                const brightness = data[i] * 0.299 + data[i + 1] * 0.587 + data[i + 2] * 0.114;
                hashBits.push(brightness > avgBrightness ? '1' : '0');
            }

            return hashBits.join(''); // Tek seferde birleştir
        }

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

        getTotalHashBits() {
            return this.PORTRAIT_CONFIG.hashWidth * this.PORTRAIT_CONFIG.hashHeight;
        }

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

            const sortedMatches = [...allMatches].sort((a, b) => a.distance - b.distance);
            const closestMatch = sortedMatches[0];

            const normalizedId = this.normalizeExhibitId(closestMatch.exhibit.id);

            if (this.exhibitScores[normalizedId] !== undefined) {
                this.exhibitScores[normalizedId] += 1;
            } else {
                this.exhibitScores[normalizedId] = 1;
            }

            // 5 puana ulaşınca yönlendir
            if (this.exhibitScores[normalizedId] >= 3) {
                this.redirectToExhibit(normalizedId);
                return;
            }

            this.updateTopExhibitsUI();
        }

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

            const targetExhibit = this.exhibits.find(e =>
                this.normalizeExhibitId(e.id) === normalizedId
            );

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

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

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

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

            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() {
            const sortedExhibits = Object.entries(this.exhibitScores)
                .map(([id, score]) => {
                    const exhibit = this.exhibits.find(e => this.normalizeExhibitId(e.id) === id);
                    return { id, score, exhibit };
                })
                .filter(item => item.exhibit)
                .sort((a, b) => b.score - a.score)
                .slice(0, 3);

            this.displayTopExhibits(sortedExhibits);
        }

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

            listElement.innerHTML = '';

            topExhibits.forEach((item, index) => {
                const li = document.createElement('li');
                let opacityClass = 'bg-pink-600';
                if (index === 0) opacityClass = 'opacity-100';
                else if (index === 1) opacityClass = 'opacity-70';
                else if (index === 2) opacityClass = 'opacity-40';

                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;

            document.getElementById('scanningIndicator').classList.add('hidden');

            this.isScanning = false;

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

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

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

            this.redirectMessage.textContent = `Eser detayına yönlendiriliyorsunuz: ${exhibit.title}. Benzerlik: ${similarityPercentage}%`;
            this.redirectMessage.classList.remove('hidden');

            setTimeout(() => {
                // Redirect handled in redirectToExhibit
            }, 1500);
        }
    }

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