@extends('layouts.camera-layout')

@section('title', 'Kamera ile Gezinme - V3.0 (ORB Feature Matching)')

@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 items-center justify-center px-6 mx-auto text-xl">
        <div id="status">Kameraya izin verin ve eseri tarayın. ORB özellik eşleştirme ile profesyonel tarama yapılıyor.
            Lütfen eseri ortalanmış şekilde gösterin.</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 OrbCameraNavigation {
        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;
            this.selectionModal = null;
            this.isProcessing = false; // Prevent overlapping API calls

            // Pre-loaded exhibit data from the controller (for UI display)
            this.exhibits = @json($exhibits);

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

            // Scoring system (same proven approach as V1-5)
            this.exhibitScores = {};
            this.exhibits.forEach(exhibit => {
                const normalizedId = this.normalizeExhibitId(exhibit.id);
                if (!this.exhibitScores[normalizedId]) {
                    this.exhibitScores[normalizedId] = 0;
                }
            });

            // Build slug lookup from loaded exhibit data
            this.exhibitLookup = {};
            this.exhibits.forEach(exhibit => {
                const normalizedId = this.normalizeExhibitId(exhibit.id);
                if (!this.exhibitLookup[normalizedId]) {
                    this.exhibitLookup[normalizedId] = {
                        id: exhibit.id,
                        slug: exhibit.slug,
                        title: exhibit.title,
                        image: exhibit.image
                    };
                }
            });

            // Make instance globally accessible
            window.cameraNav = this;

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

            this.status.textContent = `${this.exhibits.length} referans görsel yüklendi. Kamera ile eşleştirme yapmaya hazır.`;
        }

        // ==================== Camera Control ====================

        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...';

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

            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. Başlatmak için butona tıklayın.';
            this.result.style.display = 'none';
            this.redirectMessage.classList.add('hidden');
            this.isScanning = false;
            this.isProcessing = false;

            this.resetScores();
        }

        // ==================== Scanning ====================

        startScanning() {
            this.isScanning = true;
            this.isProcessing = false;

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

            this.status.textContent = 'ORB tarama başladı. Kamerayı esere odaklayın.';
            console.log('ORB tarama başladı, her 2 saniyede bir kare işlenecek');

            this.resetScores();

            // Scan every 2 seconds to allow server-side processing time
            this.scanInterval = setInterval(() => {
                this.scanFrame();
            }, 2000);

            // Do first scan immediately
            this.scanFrame();
        }

        async scanFrame() {
            if (!this.isScanning || this.isProcessing) return;

            this.isProcessing = true;
            this.status.textContent = 'Eşleşme aranıyor...';

            try {
                // Capture center crop from video
                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);

                // Fixed 400x400 square crop
                const cropSize = 400;
                const scanAreaX = (canvas.width - cropSize) / 2;
                const scanAreaY = (canvas.height - cropSize) / 2;

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

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

                // Convert to base64 JPEG (quality 0.8 for balance)
                const imageData = scanCanvas.toDataURL('image/jpeg', 0.8);

                console.log('📸 Tarama gönderiliyor...', {
                    videoW: canvas.width,
                    videoH: canvas.height,
                    cropSize: cropSize,
                    imageLen: imageData.length,
                    params: this.routeParams
                });

                // Send to server for ORB matching
                const response = await fetch('/api/opencv/match-frame', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
                    },
                    body: JSON.stringify({
                        image: imageData,
                        city: this.routeParams.city,
                        district: this.routeParams.district,
                        venue: this.routeParams.venue,
                        section: this.routeParams.section
                    })
                });

                console.log('📡 Sunucu yanıtı:', response.status, response.statusText);

                const data = await response.json();
                console.log('📦 Yanıt verisi:', JSON.stringify(data, null, 2));

                if (!response.ok) {
                    console.error('❌ HTTP hatası:', response.status, data);
                    this.status.textContent = `Sunucu hatası (${response.status}): ${data.message || 'Bilinmeyen hata'}`;
                    return;
                }

                if (data.success && data.matches && data.matches.length > 0) {
                    console.log('✅ Eşleşmeler bulundu:', data.matches.length, 'adet');
                    this.processMatchResults(data.matches);
                } else {
                    const errorMsg = data.error || 'Eşleşme bulunamadı';
                    const debugInfo = data.debug ? ` [Debug: ${JSON.stringify(data.debug)}]` : '';
                    console.log('⚠️ ORB sonucu:', errorMsg, debugInfo);
                    this.status.textContent = data.error || 'Eşleşme bulunamadı. Farklı bir açıyla deneyin.';
                }

            } catch (error) {
                console.error('🔴 Tarama hatası:', error.message, error.stack);
                this.status.textContent = 'Sunucu hatası: ' + error.message;
            } finally {
                this.isProcessing = false;
            }
        }

        // ==================== Match Processing ====================

        processMatchResults(matches) {
            console.log('ORB eşleşmeleri:', matches);

            // matches is array of { exhibit_id, exhibit_title, confidence, matches_count }
            // Sort by confidence (highest first)
            const sorted = [...matches].sort((a, b) => b.confidence - a.confidence);
            const bestMatch = sorted[0];

            if (!bestMatch) return;

            const confidencePercent = Math.round(bestMatch.confidence * 100);
            console.log(`En iyi: ${bestMatch.exhibit_title} - Güven: ${confidencePercent}%, Özellik: ${bestMatch.matches_count}`);

            // Convert allMatches to scoring format
            const allMatches = sorted.map(m => ({
                exhibit: {
                    id: m.exhibit_id,
                    title: m.exhibit_title,
                    slug: this.exhibitLookup[this.normalizeExhibitId(m.exhibit_id)]?.slug || ''
                },
                confidence: m.confidence,
                distance: 1 - m.confidence // Inverse for compatibility with scoring
            }));

            // Instant match on very high confidence
            if (bestMatch.confidence >= 0.35 && bestMatch.matches_count >= 6) {
                this.status.textContent = `Eşleşme bulundu! ${bestMatch.exhibit_title} - Güven: ${confidencePercent}%`;
                this.scoreExhibits(allMatches);
                return;
            }

            // Good enough for scoring if the confidence and match count are reasonable
            if (bestMatch.confidence >= 0.10 && bestMatch.matches_count >= 3) {
                this.status.textContent = `En iyi: ${bestMatch.exhibit_title} - Güven: ${confidencePercent}%`;
                this.scoreExhibits(allMatches);
            } else {
                this.status.textContent = `Güven düşük (${confidencePercent}%) veya eşleşme sayısı az; lütfen daha yakından tarayın.`;
            }
        }

        // ==================== Scoring (same as V1-5) ====================

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

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

            // Same proven V1-5 scoring: +1 to the closest match
            const sortedMatches = [...allMatches].sort((a, b) => b.confidence - a.confidence);
            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;
            }

            // Redirect at 5 points
            if (this.exhibitScores[normalizedId] >= 3) {
                this.checkAndRedirect(normalizedId);
                return;
            }

            this.updateTopExhibitsUI();
        }

        // ==================== Redirect & Selection ====================

        checkAndRedirect(topNormalizedId) {
            const allScores = Object.entries(this.exhibitScores)
                .map(([id, score]) => ({ id, score }))
                .filter(item => item.score > 0)
                .sort((a, b) => b.score - a.score);

            const hasCompetitor = allScores.length > 1 && allScores[1].score >= 2;

            if (hasCompetitor) {
                this.showExhibitSelection(allScores[0], allScores[1]);
            } else {
                this.redirectToExhibit(topNormalizedId);
            }
        }

        showExhibitSelection(firstChoice, secondChoice) {
            this.isScanning = false;
            if (this.scanInterval) {
                clearInterval(this.scanInterval);
                this.scanInterval = null;
            }

            const firstInfo = this.exhibitLookup[firstChoice.id];
            const secondInfo = this.exhibitLookup[secondChoice.id];

            if (!firstInfo || !secondInfo) {
                console.error('Eser bilgileri bulunamadı');
                this.redirectToExhibit(firstChoice.id);
                return;
            }

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

            document.getElementById('scanningIndicator').classList.add('hidden');
            this.status.textContent = 'İki olası eşleşme bulundu. Lütfen seçiminizi yapın.';

            const firstImage = firstInfo.image ? '/' + firstInfo.image : '/assets/img/placeholder.jpg';
            const secondImage = secondInfo.image ? '/' + secondInfo.image : '/assets/img/placeholder.jpg';

            const selectionModal = document.createElement('div');
            selectionModal.id = 'exhibitSelectionModal';
            selectionModal.className = 'fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-70 p-4';

            selectionModal.innerHTML = `
                <div class="w-full max-w-2xl mx-auto bg-white rounded-lg shadow-xl">
                    <div class="p-6">
                        <h2 class="mb-2 text-2xl font-bold text-center text-gray-800">Hangi eseri görüntülemek istiyorsunuz?</h2>
                        <div class="grid grid-cols-1 gap-6 mb-6 md:grid-cols-2">
                            <button onclick="window.cameraNav.selectExhibit('${firstInfo.slug}')"
                                    class="relative overflow-hidden transition-all transform bg-white border-2 border-pink-500 rounded-lg group hover:border-pink-600 hover:scale-105">
                                <div class="overflow-hidden aspect-video">
                                    <img src="${firstImage}" alt="${firstInfo.title}"
                                         class="object-cover w-full h-full transition-opacity group-hover:opacity-90"
                                         onerror="this.src='/assets/img/placeholder.jpg'">
                                </div>
                                <div class="absolute px-2 py-1 text-sm font-bold text-white bg-teal-600 rounded-full shadow-lg top-2 right-2">
                                    ${firstChoice.score} eşleşme puanı
                                </div>
                                <div class="p-3 bg-gradient-to-t from-white to-transparent">
                                    <h3 class="mb-1 text-base font-bold text-gray-800">${firstInfo.title}</h3>
                                    <p class="text-xs text-gray-500">Seçmek için görsele dokunun</p>
                                </div>
                            </button>
                            <button onclick="window.cameraNav.selectExhibit('${secondInfo.slug}')"
                                    class="relative overflow-hidden transition-all transform bg-white border-2 border-blue-500 rounded-lg group hover:border-blue-600 hover:scale-105">
                                <div class="overflow-hidden aspect-video">
                                    <img src="${secondImage}" alt="${secondInfo.title}"
                                         class="object-cover w-full h-full transition-opacity group-hover:opacity-90"
                                         onerror="this.src='/assets/img/placeholder.jpg'">
                                </div>
                                <div class="absolute px-2 py-1 text-sm font-bold text-white rounded-full shadow-lg top-2 right-2 bg-sky-600">
                                    ${secondChoice.score} eşleşme puanı
                                </div>
                                <div class="p-3 bg-gradient-to-t from-white to-transparent">
                                    <h3 class="mb-1 text-base font-bold text-gray-800">${secondInfo.title}</h3>
                                    <p class="text-xs text-gray-500">Seçmek için görsele dokunun</p>
                                </div>
                            </button>
                        </div>
                    </div>
                </div>
            `;

            document.body.appendChild(selectionModal);
            this.selectionModal = selectionModal;
        }

        selectExhibit(slug) {
            if (this.selectionModal) {
                this.selectionModal.remove();
                this.selectionModal = null;
            }

            this.redirectMessage.textContent = `Eser detay sayfasına yönlendiriliyorsunuz...`;
            this.redirectMessage.classList.remove('hidden');

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

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

            const info = this.exhibitLookup[normalizedId];
            if (!info || !info.slug) {
                console.error('Eser bulunamadı:', normalizedId);
                this.status.textContent = 'Yönlendirme hatası: Eser bilgisi bulunamadı.';
                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 = `✅ ${info.title} - 5 puana ulaşıldı!`;
            this.result.style.display = 'block';

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

            setTimeout(() => {
                const url = `/app/${this.routeParams.city}/${this.routeParams.district}/${this.routeParams.venue}/${info.slug}`;
                console.log('Otomatik yönlendiriliyor:', url);
                window.location.href = url;
            }, 1500);
        }

        // ==================== UI ====================

        updateTopExhibitsUI() {
            const sortedExhibits = Object.entries(this.exhibitScores)
                .map(([id, score]) => {
                    const info = this.exhibitLookup[id];
                    return { id, score, info };
                })
                .filter(item => item.info && item.score > 0)
                .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 = 'opacity-100';
                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.info.title}</a>
                            <p class="text-gray-500">
                                <span class="font-bold">${item.score}</span> eşleşme puanı</p>
                        </div>
                    </div>
                `;

                listElement.appendChild(li);
            });
        }
    }

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