@extends('layouts.app')

@section('title', 'Scan QR Absensi')
@section('page-title', 'Scan QR Code Absensi')
@section('page-subtitle', 'Arahkan kamera smartphone Anda ke QR Code kantor resmi. Pastikan GPS lokasi aktif.')

@push('styles')
<style>
    .scanner-card {
        background: #ffffff;
        border-radius: 1.25rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }
    .scanner-wrapper {
        position: relative;
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        border-radius: 1rem;
        overflow: hidden;
        background: #111827;
    }
    #reader {
        width: 100% !important;
        border: none !important;
    }
    #reader video {
        border-radius: 0.75rem;
        object-fit: cover;
    }
    .radar-indicator {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        animation: pulseRadar 1.5s infinite;
    }
    @keyframes pulseRadar {
        0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
        70% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
        100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
    }
    .live-clock-badge {
        font-family: 'Courier New', Courier, monospace;
        font-size: 1.1rem;
        font-weight: 700;
        letter-spacing: 1px;
    }
    .profile-badge-card {
        background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
        border: 1px solid #e2e8f0;
        border-radius: 0.85rem;
    }
</style>
@endpush

@section('content')
<div class="row justify-content-center">
    <div class="col-12 col-lg-8">
        {{-- Status Today Banner if Completed --}}
        @if($attendance && $attendance->check_in && $attendance->check_out)
            <div class="card shadow-sm border-0 mb-4 bg-light-success text-center py-4">
                <div class="card-body">
                    <div class="avatar avatar-xl bg-success text-white mx-auto mb-2">
                        <i class="bi bi-check2-all fs-1"></i>
                    </div>
                    <h4 class="text-success fw-bold mb-1">Absensi Hari Ini Lengkap!</h4>
                    <p class="text-muted mb-3">
                        Masuk: <strong>{{ \Carbon\Carbon::parse($attendance->check_in)->format('H:i') }} WIB</strong> • 
                        Pulang: <strong>{{ \Carbon\Carbon::parse($attendance->check_out)->format('H:i') }} WIB</strong>
                    </p>
                    <a href="{{ route('employee.dashboard') }}" class="btn btn-primary btn-sm px-4">
                        <i class="bi bi-house me-1"></i> Kembali ke Dashboard
                    </a>
                </div>
            </div>
        @else
            <div class="card scanner-card border-0 mb-4">
                {{-- Header with Mode & Live Clock --}}
                <div class="card-header bg-white py-3 border-bottom d-flex justify-content-between align-items-center">
                    <div>
                        <h5 class="fw-bold mb-0 text-dark"><i class="bi bi-qr-code-scan text-primary me-2"></i> Scanner QR Absensi</h5>
                        <small class="text-muted">
                            Mode: 
                            @if(!$attendance || !$attendance->check_in)
                                <span class="badge bg-success"><i class="bi bi-box-arrow-in-right me-1"></i> Absen Masuk (Check-In)</span>
                            @else
                                <span class="badge bg-danger"><i class="bi bi-box-arrow-right me-1"></i> Absen Pulang (Check-Out)</span>
                            @endif
                        </small>
                    </div>
                    <div class="badge bg-light-primary text-primary px-3 py-2 live-clock-badge" id="liveClock">--:--:--</div>
                </div>

                <div class="card-body p-4">
                    {{-- Verified Logged-in Employee Profile Card --}}
                    <div class="profile-badge-card p-3 mb-3 d-flex align-items-center justify-content-between">
                        <div class="d-flex align-items-center">
                            <div class="avatar avatar-lg me-3">
                                @if($employee->photo)
                                    <img src="{{ asset($employee->photo) }}" alt="{{ $employee->name }}" style="width: 50px; height: 50px; border-radius: 50%; object-fit: cover; border: 2px solid #435ebe;">
                                @else
                                    <div class="avatar-content bg-primary text-white fs-5 fw-bold" style="width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center;">
                                        {{ strtoupper(substr($employee->name, 0, 2)) }}
                                    </div>
                                @endif
                            </div>
                            <div>
                                <h6 class="fw-bold mb-0 text-dark">{{ $employee->name }}</h6>
                                <span class="text-muted text-xs d-block">{{ $employee->nik }} • {{ $employee->department?->name ?? 'Staff' }} ({{ $employee->position?->name ?? 'Karyawan' }})</span>
                                <span class="badge bg-light-info text-info text-xs mt-1">
                                    <i class="bi bi-clock me-1"></i> {{ $shift ? $shift->name.' ('.\Carbon\Carbon::parse($shift->start_time)->format('H:i').' - '.\Carbon\Carbon::parse($shift->end_time)->format('H:i').')' : 'Shift Reguler' }}
                                </span>
                            </div>
                        </div>
                        <div class="text-end d-none d-sm-block">
                            <span class="badge bg-success bg-opacity-10 text-success border border-success border-opacity-25 px-2 py-1 text-xs">
                                <i class="bi bi-shield-check me-1"></i> Akun Terverifikasi
                            </span>
                        </div>
                    </div>

                    {{-- GPS & Geofence Radar Status Card --}}
                    <div class="bg-light p-3 rounded-3 mb-3 border">
                        <div class="d-flex justify-content-between align-items-center mb-2">
                            <span class="fw-bold text-xs text-uppercase text-muted"><i class="bi bi-geo-alt-fill text-danger me-1"></i> Status Radar GPS Perangkat</span>
                            <span id="gpsStatusBadge" class="badge bg-warning text-dark"><span class="radar-indicator bg-warning me-1"></span> Mendeteksi Lokasi...</span>
                        </div>
                        <div class="row g-2 text-xs">
                            <div class="col-6 col-md-3">
                                <span class="text-muted d-block">Akurasi GPS HP:</span>
                                <strong id="gpsAccuracyText" class="text-dark">Memuat...</strong>
                            </div>
                            <div class="col-6 col-md-3">
                                <span class="text-muted d-block">Jarak ke Kantor:</span>
                                <strong id="gpsDistanceText" class="text-dark">Memuat...</strong>
                            </div>
                            <div class="col-6 col-md-3">
                                <span class="text-muted d-block">Batas Radius:</span>
                                <strong class="text-primary">{{ $officeRadius }} Meter</strong>
                            </div>
                            <div class="col-6 col-md-3">
                                <span class="text-muted d-block">Max Akurasi GPS:</span>
                                <strong class="text-secondary">{{ $maxGpsAccuracy }} Meter</strong>
                            </div>
                        </div>
                    </div>

                    {{-- QR Scanner Viewport --}}
                    <div class="scanner-wrapper mb-3 shadow">
                        <div id="reader"></div>
                    </div>

                    {{-- Scanner Controls --}}
                    <div class="d-flex justify-content-center gap-2 mb-3">
                        <button type="button" class="btn btn-outline-primary btn-sm" id="btnRestartScanner" onclick="startScanner()">
                            <i class="bi bi-arrow-repeat me-1"></i> Refresh Kamera
                        </button>
                        <button type="button" class="btn btn-outline-secondary btn-sm" onclick="getGPSCoordinates(true)">
                            <i class="bi bi-crosshair me-1"></i> Refresh GPS
                        </button>
                    </div>

                    <div class="alert alert-info py-2 mb-0 text-xs">
                        <i class="bi bi-info-circle-fill me-1"></i> <strong>Info:</strong> Pastikan Anda berada dalam radius kantor (< {{ $officeRadius }}m) dan izin lokasi browser aktif.
                    </div>
                </div>
            </div>
        @endif
    </div>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/html5-qrcode"></script>
<script>
    let html5QrCode = null;
    let userLocation = null;
    let isProcessing = false;

    const officeLat = {{ $primaryOffice ? $primaryOffice->latitude : -6.225588 }};
    const officeLng = {{ $primaryOffice ? $primaryOffice->longitude : 106.808560 }};
    const maxAllowedAccuracy = {{ $maxGpsAccuracy }};
    const maxAllowedRadius = {{ $officeRadius }};

    // Beep sound on scan recognition via Web Audio API
    function playBeep(type = 'success') {
        try {
            const ctx = new (window.AudioContext || window.webkitAudioContext)();
            const osc = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.connect(gain);
            gain.connect(ctx.destination);
            
            if (type === 'success') {
                osc.frequency.setValueAtTime(800, ctx.currentTime);
                osc.frequency.setValueAtTime(1200, ctx.currentTime + 0.1);
                gain.gain.setValueAtTime(0.3, ctx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.25);
                osc.start(ctx.currentTime);
                osc.stop(ctx.currentTime + 0.25);
            } else {
                osc.frequency.setValueAtTime(350, ctx.currentTime);
                osc.frequency.setValueAtTime(250, ctx.currentTime + 0.15);
                gain.gain.setValueAtTime(0.4, ctx.currentTime);
                gain.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.35);
                osc.start(ctx.currentTime);
                osc.stop(ctx.currentTime + 0.35);
            }
        } catch(e) {}
    }

    // Haversine Distance in JS (for live client feedback preview)
    function calculateHaversine(lat1, lon1, lat2, lon2) {
        const R = 6371000;
        const dLat = (lat2 - lat1) * Math.PI / 180;
        const dLon = (lon2 - lon1) * Math.PI / 180;
        const a = Math.sin(dLat / 2) * Math.sin(dLat / 2) +
                  Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
                  Math.sin(dLon / 2) * Math.sin(dLon / 2);
        const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
        return Math.round(R * c * 10) / 10;
    }

    // Live Clock
    function updateLiveClock() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, '0');
        const minutes = String(now.getMinutes()).padStart(2, '0');
        const seconds = String(now.getSeconds()).padStart(2, '0');
        const elem = document.getElementById('liveClock');
        if (elem) elem.innerText = `${hours}:${minutes}:${seconds} WIB`;
    }
    setInterval(updateLiveClock, 1000);
    updateLiveClock();

    // Continuous High-Precision Browser Geolocation Watcher
    let gpsWatchId = null;

    function startGPSWatch() {
        if (!navigator.geolocation) {
            const badge = document.getElementById('gpsStatusBadge');
            if (badge) {
                badge.className = 'badge bg-danger';
                badge.innerHTML = '<i class="bi bi-x-circle me-1"></i> GPS Tidak Didukung';
            }
            return;
        }

        const geoOptions = {
            enableHighAccuracy: true,
            timeout: 15000,
            maximumAge: 0
        };

        const handleSuccess = (pos) => {
            const lat = pos.coords.latitude;
            const lng = pos.coords.longitude;
            const acc = pos.coords.accuracy;
            const dist = calculateHaversine(lat, lng, officeLat, officeLng);

            userLocation = {
                latitude: lat,
                longitude: lng,
                accuracy: acc,
                distance: dist
            };

            const accElem = document.getElementById('gpsAccuracyText');
            const distElem = document.getElementById('gpsDistanceText');
            const badgeElem = document.getElementById('gpsStatusBadge');

            if (accElem) accElem.innerHTML = `±${Math.round(acc)}m ` + (acc <= maxAllowedAccuracy ? '<span class="badge bg-success py-0">Bagus</span>' : '<span class="badge bg-danger py-0">Lemah</span>');
            if (distElem) distElem.innerHTML = `${dist}m ` + (dist <= maxAllowedRadius ? '<span class="badge bg-success py-0">Di Kantor</span>' : '<span class="badge bg-danger py-0">Luar Radius</span>');

            if (dist <= maxAllowedRadius && acc <= maxAllowedAccuracy) {
                if (badgeElem) {
                    badgeElem.className = 'badge bg-success';
                    badgeElem.innerHTML = '<span class="radar-indicator bg-white me-1"></span> GPS Akurat (' + dist + 'm)';
                }
            } else if (dist > maxAllowedRadius) {
                if (badgeElem) {
                    badgeElem.className = 'badge bg-danger';
                    badgeElem.innerHTML = '<i class="bi bi-exclamation-octagon me-1"></i> Di Luar Radius (' + dist + 'm)';
                }
            } else {
                if (badgeElem) {
                    badgeElem.className = 'badge bg-warning text-dark';
                    badgeElem.innerHTML = '<i class="bi bi-exclamation-triangle me-1"></i> GPS ±' + Math.round(acc) + 'm (Jarak: ' + dist + 'm)';
                }
            }
        };

        const handleError = (err) => {
            console.warn('GPS Watch Error:', err);
            const badgeElem = document.getElementById('gpsStatusBadge');
            if (badgeElem) {
                badgeElem.className = 'badge bg-danger';
                badgeElem.innerHTML = '<i class="bi bi-geo-alt-slash me-1"></i> Izin GPS Ditolak / Lemah';
            }
        };

        // Initial fetch
        navigator.geolocation.getCurrentPosition(handleSuccess, handleError, geoOptions);

        // Continuous watch for real-time precision lock
        if (gpsWatchId !== null) {
            navigator.geolocation.clearWatch(gpsWatchId);
        }
        gpsWatchId = navigator.geolocation.watchPosition(handleSuccess, handleError, geoOptions);
    }

    function getGPSCoordinates(showToast = false) {
        startGPSWatch();
        if (showToast && userLocation) {
            Swal.fire({
                icon: 'success',
                title: 'GPS Terdeteksi',
                html: `Jarak ke Kantor: <b>${userLocation.distance} meter</b><br>Akurasi GPS: <b>±${Math.round(userLocation.accuracy)} meter</b>`,
                timer: 2000,
                showConfirmButton: false
            });
        }
    }

    // HTML5 QR Code Scanner
    function startScanner() {
        if (typeof Html5Qrcode === 'undefined') return;

        const readerElem = document.getElementById('reader');
        if (!readerElem) return;

        if (html5QrCode) {
            html5QrCode.stop().then(() => {
                initializeScanner();
            }).catch(() => {
                initializeScanner();
            });
        } else {
            initializeScanner();
        }
    }

    function initializeScanner() {
        html5QrCode = new Html5Qrcode("reader");
        const config = {
            fps: 15,
            qrbox: { width: 250, height: 250 },
            aspectRatio: 1.0
        };

        html5QrCode.start(
            { facingMode: "environment" },
            config,
            onScanSuccess,
            onScanFailure
        ).catch(err => {
            console.warn("Camera start fallback to user camera:", err);
            html5QrCode.start(
                { facingMode: "user" },
                config,
                onScanSuccess,
                onScanFailure
            ).catch(err2 => {
                console.error("Camera access failed:", err2);
            });
        });
    }

    function resumeScannerAndGps() {
        if (html5QrCode) {
            try {
                html5QrCode.resume();
            } catch(e) {
                startScanner();
            }
        }
        startGPSWatch();
        isProcessing = false;
    }

    function onScanSuccess(decodedText, decodedResult) {
        if (isProcessing) return;
        isProcessing = true;

        // Pause camera immediately so no subsequent video frames trigger parallel scans
        if (html5QrCode) {
            try {
                html5QrCode.pause(true);
            } catch(e) {}
        }

        // Stop GPS watch to avoid parallel callbacks
        if (gpsWatchId !== null) {
            navigator.geolocation.clearWatch(gpsWatchId);
            gpsWatchId = null;
        }

        // Ensure user GPS is available
        if (!navigator.geolocation) {
            Swal.fire({
                icon: 'error',
                title: 'Error GPS',
                text: 'Perangkat tidak mendukung Geolocation GPS.',
                confirmButtonColor: '#dc3545',
                confirmButtonText: 'Coba Lagi'
            }).then(() => {
                resumeScannerAndGps();
            });
            return;
        }

        playBeep('success');

        Swal.fire({
            title: 'QR Code Terdeteksi!',
            text: 'Memverifikasi profil akun, jadwal shift & lokasi GPS...',
            allowOutsideClick: false,
            showConfirmButton: false,
            didOpen: () => Swal.showLoading()
        });

        // Get live high accuracy GPS at the exact scan moment
        navigator.geolocation.getCurrentPosition(
            (pos) => {
                const lat = pos.coords.latitude;
                const lng = pos.coords.longitude;
                const accuracy = pos.coords.accuracy;

                // Send to Server-Side for strict validation & recording
                fetch("{{ route('employee.attendance.scan-qr.post') }}", {
                    method: "POST",
                    headers: {
                        "Content-Type": "application/json",
                        "X-CSRF-TOKEN": "{{ csrf_token() }}",
                        "Accept": "application/json"
                    },
                    body: JSON.stringify({
                        qr_code: decodedText,
                        latitude: lat,
                        longitude: lng,
                        accuracy: accuracy
                    })
                })
                .then(res => res.json().then(data => ({ status: res.status, ok: res.ok, body: data })))
                .then(res => {
                    if (res.ok && res.body.success) {
                        const d = res.body.data;
                        const emp = d.employee;

                        Swal.fire({
                            icon: 'success',
                            title: res.body.type === 'check_in' ? 'Absensi Masuk Berhasil!' : 'Absensi Pulang Berhasil!',
                            html: `
                                <div class="card border shadow-sm p-3 text-start mt-2 bg-light">
                                    <div class="d-flex align-items-center mb-2 pb-2 border-bottom">
                                        <div class="avatar avatar-md bg-primary text-white rounded-circle me-2 d-flex align-items-center justify-content-center" style="width: 42px; height: 42px; font-weight: bold;">
                                            ${emp.name.substring(0, 2).toUpperCase()}
                                        </div>
                                        <div>
                                            <h6 class="fw-bold mb-0">${emp.name}</h6>
                                            <small class="text-muted">${emp.nik} • ${emp.department}</small>
                                        </div>
                                    </div>
                                    <div class="row g-1 text-xs">
                                        <div class="col-6 text-muted">Waktu Presensi:</div>
                                        <div class="col-6 fw-bold text-end text-dark">${d.time}</div>
                                        <div class="col-6 text-muted">Status Kehadiran:</div>
                                        <div class="col-6 text-end"><span class="badge ${d.status_badge}">${d.status}</span></div>
                                        <div class="col-6 text-muted">Lokasi Kantor:</div>
                                        <div class="col-6 text-end text-dark">${d.office_name} (${d.distance}m)</div>
                                        <div class="col-6 text-muted">Akurasi GPS:</div>
                                        <div class="col-6 text-end text-dark">±${d.accuracy} meter</div>
                                    </div>
                                </div>
                            `,
                            confirmButtonText: 'Selesai & Ke Dashboard',
                            confirmButtonColor: '#435ebe',
                            allowOutsideClick: false
                        }).then(() => {
                            window.location.href = "{{ route('employee.dashboard') }}";
                        });
                    } else {
                        playBeep('error');
                        Swal.fire({
                            icon: 'error',
                            title: 'Absensi Ditolak',
                            text: res.body.message || 'Presensi gagal diproses.',
                            confirmButtonColor: '#dc3545',
                            confirmButtonText: 'Coba Lagi'
                        }).then(() => {
                            resumeScannerAndGps();
                        });
                    }
                })
                .catch(err => {
                    playBeep('error');
                    Swal.fire({
                        icon: 'error',
                        title: 'Error Jaringan',
                        text: 'Gagal menghubungi server. Silakan periksa koneksi internet Anda.',
                        confirmButtonColor: '#dc3545',
                        confirmButtonText: 'Coba Lagi'
                    }).then(() => {
                        resumeScannerAndGps();
                    });
                });
            },
            (gpsError) => {
                playBeep('error');
                Swal.fire({
                    icon: 'error',
                    title: 'GPS Tidak Terdeteksi',
                    text: 'Mohon aktifkan izin lokasi (GPS) pada smartphone Anda untuk memvalidasi radius kantor.',
                    confirmButtonColor: '#dc3545',
                    confirmButtonText: 'Coba Lagi'
                }).then(() => {
                    resumeScannerAndGps();
                });
            },
            { enableHighAccuracy: true, timeout: 10000, maximumAge: 0 }
        );
    }

    function onScanFailure(error) {
        // Continuous scanning
    }

    document.addEventListener('DOMContentLoaded', function() {
        getGPSCoordinates();
        startScanner();
    });
</script>
@endpush