@extends('layouts.camera-layout')

@section('title', 'Kamera ile Gezinme - V6 (Resemble.js Test)')

@section('content')
<div class="relative flex flex-col items-center justify-center w-screen h-screen bg-black">
    <style>
        #scanArea {
            position: relative;
            width: 80vw;
            max-width: 400px;
            aspect-ratio: 1;
            border: 2px solid rgba(255, 255, 255, 0.5);
            border-radius: 12px;
            overflow: hidden;
            margin: 20px 0;
            transition: border-color 0.3s ease;
        }
        #scanArea.scanning {
            border-color: #00ff99;
            animation: scanPulse 1.5s ease-in-out infinite;
        }
        @keyframes scanPulse {
            0%, 100% {
                box-shadow: 0 0 10px rgba(0, 255, 153, 0.3);
            }
            50% {
                box-shadow: 0 0 25px rgba(0, 255, 153, 0.8);
            }
        }
        #scanLine {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to bottom, transparent, #00ff99, transparent);
            box-shadow: 0 0 10px #00ff99;
            display: none;
            z-index: 10;
        }
        #scanArea.scanning #scanLine {
            display: block;
            animation: scanMove 1.5s linear infinite;
        }
        @keyframes scanMove {
            0% {
                top: 0;
            }
            100% {
                top: 100%;
            }
        }
        #scanCounter {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(0, 0, 0, 0.7);
            color: #00ff99;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 12px;
            font-weight: bold;
            z-index: 20;
            display: none;
        }
        #scanArea.scanning #scanCounter {
            display: block;
        }
        #cameraV6-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        #status {
            color: white;
            text-align: center;
            padding: 8px;
            font-size: 14px;
            min-height: 20px;
        }
        #status.scanning {
            color: #00ff99;
            animation: textPulse 1s ease-in-out infinite;
        }
        @keyframes textPulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.6;
            }
        }
        #result {
            color: #00ff99;
            text-align: center;
            padding: 10px;
            font-weight: bold;
            min-height: 24px;
        }
        #live-status {
            color: white;
            padding: 10px;
            max-width: 90vw;
            max-height: 40vh;
            overflow-y: auto;
            font-size: 12px;
        }
        #live-status table {
            width: 100%;
            border-collapse: collapse;
            margin-top: 10px;
        }
        #live-status th {
            background-color: rgba(255, 255, 255, 0.1);
            padding: 8px;
            text-align: left;
            font-weight: bold;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        #live-status td {
            padding: 6px 8px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        #live-status tr:nth-child(even) {
            background-color: rgba(255, 255, 255, 0.05);
        }
        #live-status .best-match {
            background-color: rgba(0, 255, 153, 0.2) !important;
            font-weight: bold;
        }
    </style>

    <p id="status">Referans görseller yükleniyor...</p>

    <div id="scanArea">
        <video id="cameraV6-video" autoplay playsinline muted class="w-full h-full object-cover"></video>
        <div id="scanLine"></div>
        <div id="scanCounter">Tarama: 0</div>
    </div>

    <div id="result"></div>
    <div id="live-status"></div>

    <div class="flex items-center mt-4">
        <button id="startBtn" class="p-4 bg-white text-black rounded-full">
            <span class="material-symbols-rounded text-5xl">camera</span>
        </button>
        <button id="stopBtn" class="hidden p-4 bg-red-500 text-white rounded-full">
            <span class="material-symbols-rounded text-5xl">stop</span>
        </button>
    </div>
</div>
@endsection

@section('camera-script')
<!-- Resemble.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/resemblejs@4.0.0/resemble.min.js"></script>

<script>
class SimpleResembleCamera {
    constructor() {
        this.video = document.getElementById('cameraV6-video');
        this.startBtn = document.getElementById('startBtn');
        this.stopBtn = document.getElementById('stopBtn');
        this.status = document.getElementById('status');
        this.result = document.getElementById('result');
        this.liveStatus = document.getElementById('live-status');
        this.scanArea = document.getElementById('scanArea');
        this.scanCounter = document.getElementById('scanCounter');

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

        // Laravel'den gelen eserler — image alanı mutlaka geçerli bir dosya yolu olmalı (örn: uploads/.../image.jpg)
        this.exhibits = @json($exhibits);

        // Geçersiz veya eksik görselleri filtrele
        this.exhibits = this.exhibits.filter(exhibit => 
            exhibit.image && typeof exhibit.image === 'string' && exhibit.image.trim() !== ''
        );

        if (this.exhibits.length === 0) {
            this.status.textContent = 'Hiçbir geçerli içerik bulunamadı.';
            console.warn('No valid exhibits loaded.');
        } else {
            this.status.textContent = `${this.exhibits.length} referans görsel yükleniyor...`;
        }

        this.loadedImages = [];
        this.init();
    }

    init() {
        this.startBtn.addEventListener('click', () => this.startCamera());
        this.stopBtn.addEventListener('click', () => this.stopCamera());
        this.preloadImages();
    }

    async preloadImages() {
        console.log('Görseller yükleniyor...');
        this.status.textContent = 'Referans görseller yükleniyor...';
        
        const promises = this.exhibits.map(exhibit => {
            return new Promise((resolve) => {
                const img = new Image();
                img.crossOrigin = 'Anonymous';
                img.onload = () => {
                    this.loadedImages.push({ exhibit, img });
                    console.log(`✓ Yüklendi: ${exhibit.image}`);
                    resolve(true);
                };
                img.onerror = (err) => {
                    console.warn(`✗ Yüklenemedi: ${exhibit.image}`, err);
                    resolve(false);
                };
                img.src = '/' + exhibit.image;
            });
        });

        await Promise.all(promises);
        console.log(`${this.loadedImages.length}/${this.exhibits.length} görsel yüklendi.`);
        
        if (this.loadedImages.length > 0) {
            this.status.textContent = `${this.loadedImages.length} referans görsel hazır. Kamerayı başlatın.`;
        } else {
            this.status.textContent = 'Hiçbir referans görsel yüklenemedi.';
        }
    }

    async startCamera() {
        try {
            // Görseller yüklenene kadar bekle
            if (this.loadedImages.length === 0) {
                this.status.textContent = 'Görseller yükleniyor, lütfen bekleyin...';
                await this.preloadImages();
            }

            if (this.loadedImages.length === 0) {
                this.status.textContent = 'Karşılaştırılacak geçerli görsel bulunamadı.';
                return;
            }

            this.stream = await navigator.mediaDevices.getUserMedia({
                video: { facingMode: 'environment', width: { ideal: 640 }, height: { ideal: 640 } }
            });
            this.video.srcObject = this.stream;
            this.startBtn.classList.add('hidden');
            this.stopBtn.classList.remove('hidden');
            this.status.textContent = 'Kamera aktif. Tarama başlıyor...';

            // Video meta verisi yüklendikten sonra taramayı hemen başlat
            this.video.onloadedmetadata = () => {
                this.startScanning();
            };
        } catch (err) {
            console.error('Kamera başlatma hatası:', err);
            if (err.name === 'NotAllowedError') {
                this.status.textContent = 'Kamera erişimi reddedildi. Lütfen izin verin.';
            } else if (err.name === 'NotFoundError') {
                this.status.textContent = 'Cihazınızda kamera bulunamadı.';
            } else if (err.name === 'NotReadableError') {
                this.status.textContent = 'Kamera başka bir uygulama tarafından kullanılıyor.';
            } else {
                this.status.textContent = 'Kamera başlatılamadı: ' + (err.message || 'Bilinmeyen hata');
            }
        }
    }

    stopCamera() {
        if (this.stream) {
            this.stream.getTracks().forEach(t => t.stop());
            this.stream = null;
        }
        if (this.scanInterval) {
            clearInterval(this.scanInterval);
            this.scanInterval = null;
        }
        this.isScanning = false;
        this.startBtn.classList.remove('hidden');
        this.stopBtn.classList.add('hidden');
        this.status.textContent = 'Kamera durduruldu.';
        this.result.textContent = '';
        if (this.scanArea) {
            this.scanArea.classList.remove('scanning');
        }
        if (this.status) {
            this.status.classList.remove('scanning');
        }
        if (this.liveStatus) {
            this.liveStatus.innerHTML = '';
        }
    }

    startScanning() {
        if (this.loadedImages.length === 0) {
            this.status.textContent = 'Karşılaştırılacak geçerli görsel yok.';
            return;
        }
        this.isScanning = true;
        this.scanCount = 0;
        if (this.scanArea) {
            this.scanArea.classList.add('scanning');
        }
        if (this.status) {
            this.status.classList.add('scanning');
        }
        this.scanInterval = setInterval(() => this.scanFrame(), 1500);
    }

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

        this.scanCount++;
        if (this.scanCounter) {
            this.scanCounter.textContent = `Tarama: ${this.scanCount}`;
        }

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

        const x = (this.video.videoWidth - size) / 2;
        const y = (this.video.videoHeight - size) / 2;
        ctx.drawImage(this.video, x, y, size, size, 0, 0, size, size);

        this.status.textContent = 'Eşleşme aranıyor...';
        this.compareWithAllExhibits(canvas.toDataURL('image/jpeg', 0.9));
    }

    async compareWithAllExhibits(frameDataUrl) {
        if (this.loadedImages.length === 0) {
            this.status.textContent = 'Karşılaştırılacak geçerli görsel yok.';
            return;
        }

        let bestMatch = null;
        let minMismatch = Infinity;
        const comparisonResults = [];

        for (const item of this.loadedImages) {
            try {
                // Canvas üzerinden görsel verisini al
                const refCanvas = document.createElement('canvas');
                refCanvas.width = item.img.width;
                refCanvas.height = item.img.height;
                const refCtx = refCanvas.getContext('2d');
                refCtx.drawImage(item.img, 0, 0);
                const refDataUrl = refCanvas.toDataURL('image/jpeg', 0.9);

                const mismatch = await this.compareTwoImages(frameDataUrl, refDataUrl);
                const similarity = (100 - mismatch).toFixed(2);
                
                comparisonResults.push({
                    'Eser': item.exhibit.title,
                    'Benzerlik (%)': similarity,
                    'Uyuşmazlık (%)': mismatch.toFixed(2)
                });
                
                if (mismatch < minMismatch) {
                    minMismatch = mismatch;
                    bestMatch = { exhibit: item.exhibit, mismatch };
                }
            } catch (err) {
                console.warn(`Görsel karşılaştırılamadı: ${item.exhibit.image}`, err);
                comparisonResults.push({
                    'Eser': item.exhibit.title,
                    'Benzerlik (%)': 'HATA',
                    'Uyuşmazlık (%)': 'HATA'
                });
            }
        }

        // Sonuçları tabloya yazdır
        console.log('=== TARAMA SONUÇLARI ===');
        console.table(comparisonResults);

        // Sonuçları ekranda da göster
        this.displayLiveResults(comparisonResults, bestMatch);

        if (!bestMatch) {
            this.status.textContent = 'Hiçbir içerik karşılaştırılamadı.';
            return;
        }

        const similarity = 100 - bestMatch.mismatch;
        if (similarity >= 78) {
            this.handleMatch(bestMatch.exhibit, similarity.toFixed(1));
        } else {
            this.status.textContent = `En iyi eşleşme: ${bestMatch.exhibit.title} (%${similarity.toFixed(1)} benzerlik)`;
            this.result.textContent = '';
        }
    }

    displayLiveResults(results, bestMatch) {
        if (!this.liveStatus) return;

        // Sonuçları benzerliğe göre sırala (en yüksek benzerlik en üstte)
        const sortedResults = [...results].sort((a, b) => {
            const simA = parseFloat(a['Benzerlik (%)']) || 0;
            const simB = parseFloat(b['Benzerlik (%)']) || 0;
            return simB - simA;
        });

        let html = '<table><thead><tr>';
        html += '<th>Eser</th>';
        html += '<th>Benzerlik (%)</th>';
        html += '<th>Uyuşmazlık (%)</th>';
        html += '</tr></thead><tbody>';

        sortedResults.forEach(row => {
            const isBest = bestMatch && row['Eser'] === bestMatch.exhibit.title;
            const rowClass = isBest ? 'best-match' : '';
            html += `<tr class="${rowClass}">`;
            html += `<td>${row['Eser']}</td>`;
            html += `<td>${row['Benzerlik (%)']}</td>`;
            html += `<td>${row['Uyuşmazlık (%)']}</td>`;
            html += '</tr>';
        });

        html += '</tbody></table>';
        this.liveStatus.innerHTML = html;
    }

    compareTwoImages(img1, img2) {
        return new Promise((resolve, reject) => {
            try {
                resemble(img1)
                    .compareTo(img2)
                    .ignoreAntialiasing()
                    .scaleToSameSize()
                    .onComplete(data => {
                        if (data && data.misMatchPercentage !== undefined && data.misMatchPercentage !== null) {
                            resolve(parseFloat(data.misMatchPercentage));
                        } else {
                            console.error('Resemble.js yanıtı:', data);
                            reject(new Error('Geçersiz Resemble.js yanıtı'));
                        }
                    });
            } catch (err) {
                reject(err);
            }
        });
    }

    handleMatch(exhibit, similarity) {
        this.isScanning = false;
        if (this.scanInterval) {
            clearInterval(this.scanInterval);
            this.scanInterval = null;
        }
        
        // Kamerayı durdur
        if (this.stream) {
            this.stream.getTracks().forEach(t => t.stop());
            this.stream = null;
        }
        
        // Butonları güncelle
        this.startBtn.classList.remove('hidden');
        this.stopBtn.classList.add('hidden');
        
        if (this.scanArea) {
            this.scanArea.classList.remove('scanning');
        }
        if (this.status) {
            this.status.classList.remove('scanning');
        }
        this.result.textContent = `✅ ${exhibit.title} bulundu! (%${similarity} benzerlik)`;
        this.status.textContent = 'Yönlendiriliyor...';
        
        // Başarılı eşleşme bilgisini göster
        if (this.liveStatus) {
            this.liveStatus.innerHTML = `
                <div style="color: #00ff99; font-size: 16px; font-weight: bold; text-align: center; padding: 20px;">
                    🎯 EŞLEŞME BULUNDU!<br>
                    ${exhibit.title}<br>
                    <span style="font-size: 24px;">${similarity}%</span>
                </div>
            `;
        }
        
        setTimeout(() => {
            alert(`Eser: ${exhibit.title}`);
            // window.location.href = `/app/exhibits/${exhibit.id}`;
        }, 1500);
    }
}

document.addEventListener('DOMContentLoaded', () => {
    // Sadece tarayıcıda çalıştır
    if (typeof window !== 'undefined') {
        new SimpleResembleCamera();
    }
});
</script>
@endsection