@extends('layouts.kiosk')

@php
$scannerMode      = $scannerMode ?? 'check_in';
$isCheckOut       = $scannerMode === 'check_out';
$scannerModeLabel = $isCheckOut ? 'Check-Out' : 'Check-In';
$scanRouteName    = $scanRouteName ?? 'kiosk.scan.checkin';

// Mode-specific styling tokens
$modeAccent        = $isCheckOut ? 'blue'  : 'green';
$modeBgGlow        = $isCheckOut ? 'rgba(59,130,246,0.08)' : 'rgba(34,197,94,0.08)';
$modeBannerBg      = $isCheckOut ? 'bg-blue-500/10 border-blue-500/30'  : 'bg-green-500/10 border-green-500/30';
$modeBannerText    = $isCheckOut ? 'text-blue-300'  : 'text-green-300';
$modeBadgeBg       = $isCheckOut ? 'bg-blue-500/20 border border-blue-400/50 text-blue-200' : 'bg-green-500/20 border border-green-400/50 text-green-200';
$modeBorderActive  = $isCheckOut ? 'border-blue-500/40'  : 'border-green-500/40';
$modeIconColor     = $isCheckOut ? 'text-blue-400'  : 'text-green-400';
$modePulseColor    = $isCheckOut ? 'bg-blue-400'    : 'bg-green-400';
$modeAccentHex     = $isCheckOut ? '#60a5fa'        : '#4ade80';
$modeInstruction   = $isCheckOut
    ? 'Mesin ini khusus CHECK-OUT. Scan yang belum check-in akan ditolak otomatis.'
    : 'Mesin ini khusus CHECK-IN. Jika sudah check-in, lanjutkan di mesin check-out.';
@endphp

@section('title', 'Kiosk Scanner ' . $scannerModeLabel . ' — ' . ($kiosk->name ?? 'Absensi'))

@push('styles')
<style>
    #qr-reader { width: 100% !important; }
    #qr-reader video { border-radius: 8px; }

    @keyframes scanner-line {
        0%   { top: 0%; opacity: 1; }
        50%  { opacity: 0.6; }
        100% { top: 100%; opacity: 1; }
    }
    @keyframes feedback-in {
        from { opacity: 0; transform: translateY(12px) scale(0.97); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    @keyframes shrink-bar {
        from { width: 100%; }
        to   { width: 0%; }
    }
    .scanner-line {
        position: absolute;
        left: 0; right: 0; height: 2px;
        background: linear-gradient(90deg, transparent, {{ $modeAccentHex }}, transparent);
        animation: scanner-line 2.8s ease-in-out infinite;
        pointer-events: none;
    }
    .feedback-animate { animation: feedback-in 0.25s ease-out forwards; }
    .shrink-progress  { animation: shrink-bar 5s linear forwards; }
    .shrink-progress-short { animation: shrink-bar 2.8s linear forwards; }
</style>
@endpush

@section('content')
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex flex-col transition-colors duration-300"
     data-kiosk-scanner="1"
     x-data="{
         clock: '',
         connectionStatus: true,
         scanCount: 0,
         feedback: null,
         feedbackTimer: null,
         isFullscreen: false,

         init() {
             this.updateClock();
             setInterval(() => this.updateClock(), 1000);
             document.addEventListener('fullscreenchange', () => {
                 this.isFullscreen = !!document.fullscreenElement;
             });
         },

         updateClock() {
             const now = new Date();
             this.clock = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
         },

         showFeedback(type, name, message, photoUrl = null, role = '-') {
             if (this.feedbackTimer) clearTimeout(this.feedbackTimer);
             this.feedback = { type, name, message, photoUrl, role };
             this.scanCount++;
             const duration = (type === 'success_checkin' || type === 'success_checkout') ? 2600 : 4200;
             this.feedbackTimer = setTimeout(() => this.feedback = null, duration);
         },

         clearFeedback() {
             if (this.feedbackTimer) clearTimeout(this.feedbackTimer);
             this.feedback = null;
         },

         toggleFullscreen() {
             if (!document.fullscreenElement) {
                 document.documentElement.requestFullscreen().catch(() => {});
             } else {
                 document.exitFullscreen().catch(() => {});
             }
         },

         feedbackConfig(type) {
             const cfg = {
                 success_checkin:  { bg: 'bg-green-50 dark:bg-green-900/20', border: 'border-green-200 dark:border-green-800', text: 'text-green-800 dark:text-green-300', icon: '✅', short: true },
                 success_checkout: { bg: 'bg-blue-50 dark:bg-blue-900/20',  border: 'border-blue-200 dark:border-blue-800',   text: 'text-blue-800 dark:text-blue-300', icon: '✅', short: true },
                 double_scan:      { bg: 'bg-amber-50 dark:bg-amber-900/20', border: 'border-amber-200 dark:border-amber-800', text: 'text-amber-800 dark:text-amber-300', icon: '⚠️', short: false },
                 already_checkin:  { bg: 'bg-amber-50 dark:bg-amber-900/20', border: 'border-amber-200 dark:border-amber-800', text: 'text-amber-800 dark:text-amber-300', icon: '⚠️', short: false },
                 unknown:          { bg: 'bg-red-50 dark:bg-red-900/20',    border: 'border-red-200 dark:border-red-800',     text: 'text-red-800 dark:text-red-300', icon: '❌', short: false },
                 inactive:         { bg: 'bg-red-50 dark:bg-red-900/20',    border: 'border-red-200 dark:border-red-800',     text: 'text-red-800 dark:text-red-300', icon: '🚫', short: false },
                 invalid_payload:  { bg: 'bg-red-50 dark:bg-red-900/20',    border: 'border-red-200 dark:border-red-800',     text: 'text-red-800 dark:text-red-300', icon: '❌', short: false },
                 holiday:          { bg: 'bg-gray-50 dark:bg-gray-800',     border: 'border-gray-200 dark:border-gray-700',   text: 'text-gray-800 dark:text-gray-300', icon: 'ℹ️', short: false },
                 complete:         { bg: 'bg-cyan-50 dark:bg-cyan-900/20',  border: 'border-cyan-200 dark:border-cyan-800',   text: 'text-cyan-800 dark:text-cyan-300', icon: 'ℹ️', short: false },
             };
             return cfg[type] ?? { bg: 'bg-gray-50 dark:bg-gray-800', border: 'border-gray-200 dark:border-gray-700', text: 'text-gray-800 dark:text-gray-300', icon: 'ℹ️', short: false };
         }
     }"
     x-init="init()">

    {{-- ── HEADER ─────────────────────────────────────────────────── --}}
    <header class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 px-4 py-3 flex items-center justify-between sticky top-0 z-10 w-full shadow-sm">
        
        {{-- Brand --}}
        <div class="flex items-center gap-3">
            <div class="w-10 h-10 bg-primary-700 rounded-full flex items-center justify-center flex-shrink-0">
                <svg class="w-6 h-6 text-white" fill="currentColor" viewBox="0 0 20 20">
                    <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3z"/>
                    <path d="M3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"/>
                </svg>
            </div>
            <div>
                <h1 class="text-base font-bold text-gray-900 dark:text-white leading-tight">{{ config('app.name') }}</h1>
                <p class="text-xs text-gray-500 dark:text-gray-400">Scanner {{ $scannerModeLabel }} &bull; {{ $kiosk->name ?? 'Kiosk' }}</p>
            </div>
        </div>

        {{-- Right Controls --}}
        <div class="flex items-center gap-4 flex-shrink-0">
            {{-- Connection indicator --}}
            <div class="flex items-center gap-1.5" role="status">
                <div class="w-2 h-2 rounded-full transition-colors duration-500" :class="connectionStatus ? 'bg-green-500' : 'bg-red-500'"></div>
                <span class="text-xs font-medium" :class="connectionStatus ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'" x-text="connectionStatus ? 'Online' : 'Offline'">Online</span>
            </div>

            {{-- Clock --}}
            <div class="text-right hidden sm:block border-l border-gray-200 dark:border-gray-700 pl-4">
                <div class="text-lg font-mono font-bold text-gray-900 dark:text-white tabular-nums leading-none mb-1" x-text="clock">--:--:--</div>
                <p class="text-xs text-gray-500 dark:text-gray-400">{{ now()->translatedFormat('d M Y') }}</p>
            </div>

            {{-- Fullscreen --}}
            <button @click="toggleFullscreen()" class="p-2 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-white bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-lg transition-colors">
                <template x-if="!isFullscreen">
                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 4H4m0 0v4m0-4 5 5m7-5h4m0 0v4m0-4-5 5M8 20H4m0 0v-4m0 4 5-5m7 5h4m0 0v-4m0 4-5-5"/>
                    </svg>
                </template>
                <template x-if="isFullscreen">
                    <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8h4V4m0 4-5-5m17 5h-4V4m0 4 5-5M4 16h4v4m0-4-5 5m17-5h-4v4m0-4 5 5"/>
                    </svg>
                </template>
            </button>
        </div>
    </header>

    {{-- ── MAIN CONTENT ───────────────────────────────────────────── --}}
    <main class="w-full max-w-6xl mx-auto flex flex-col lg:flex-row gap-6 p-4 sm:p-6 lg:py-8 flex-1">

        {{-- ── QR Scan Column ── --}}
        <section class="flex-1 flex flex-col">
            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-100 dark:border-gray-700 p-5 flex flex-col h-full">

                <div class="mb-4 text-center">
                    <span class="inline-block px-3 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold uppercase tracking-wider mb-2">
                        Kamera Scanner
                    </span>
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        {{ $modeInstruction }}
                    </p>
                </div>

                {{-- Scanner frame --}}
                <div class="relative w-full max-w-md mx-auto rounded-xl overflow-hidden bg-black aspect-square flex-shrink-0 border-2 {{ $isCheckOut ? 'border-blue-500/50' : 'border-green-500/50' }}">

                    <div id="qr-reader" class="w-full h-full object-cover"></div>

                    {{-- Scanning line (CSS only) --}}
                    <div class="scanner-line {{ $isCheckOut ? 'bg-blue-500' : 'bg-green-500' }}" aria-hidden="true"></div>

                    {{-- Offline overlay --}}
                    <div x-show="!connectionStatus"
                         x-cloak
                         class="absolute inset-0 z-20 bg-gray-900/90 flex flex-col items-center justify-center p-6 text-center backdrop-blur-sm">
                        <svg class="w-12 h-12 text-red-500 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636a9 9 0 010 12.728M15.536 8.464a5 5 0 010 7.072M3 3l18 18"/>
                        </svg>
                        <p class="text-red-400 font-bold">Koneksi Terputus</p>
                        <p class="text-gray-300 text-xs mt-1">Menunggu jaringan kembali online...</p>
                    </div>
                </div>

                <div class="mt-auto pt-6 flex justify-between items-center text-xs text-gray-500 dark:text-gray-400">
                    <p>Pemindaian terjadi otomatis.</p>
                    <a href="{{ route('kiosk.scanner.options', $token) }}" class="text-primary-600 dark:text-primary-400 hover:underline font-medium">Ubah Mode</a>
                </div>
            </div>
        </section>

        {{-- ── Feedback / Stats Column ── --}}
        <aside class="w-full lg:w-80 flex flex-col gap-4 flex-shrink-0">

            {{-- Scan Counter --}}
            <div class="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl p-5 shadow-sm flex items-center justify-between">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400 font-medium">Total Scan</p>
                    <p class="text-xs text-gray-400">Perangkat Lokal (Sesi Ini)</p>
                </div>
                <div class="text-4xl font-bold font-mono text-gray-900 dark:text-white" x-text="scanCount">0</div>
            </div>

            {{-- Feedback Card --}}
            <div class="bg-white dark:bg-gray-800 border border-gray-100 dark:border-gray-700 rounded-xl p-5 shadow-sm flex-1 flex flex-col justify-center min-h-[200px]">
                
                <template x-if="feedback">
                    <div class="rounded-lg border p-4 text-center h-full flex flex-col justify-center items-center"
                         :class="[feedbackConfig(feedback.type).bg, feedbackConfig(feedback.type).border, feedbackConfig(feedback.type).text]"
                         role="alert"
                         aria-live="assertive">

                        <template x-if="feedback.photoUrl">
                            <img :src="feedback.photoUrl"
                                 :alt="'Foto ' + feedback.name"
                                 class="mx-auto mb-3 w-16 h-16 rounded-full object-cover border-2 shadow-sm border-white dark:border-gray-700">
                        </template>
                        <template x-if="!feedback.photoUrl">
                            <div class="text-4xl mb-3 leading-none" x-text="feedbackConfig(feedback.type).icon" aria-hidden="true"></div>
                        </template>

                        <p class="text-lg font-bold mb-0.5 leading-tight" x-text="feedback.name"></p>
                        <p class="text-xs font-medium opacity-80 mb-2 uppercase tracking-wide" x-text="feedback.role"></p>
                        <p class="text-sm font-medium mt-2 leading-relaxed opacity-90 border-t border-current/20 pt-2" x-text="feedback.message"></p>
                        
                        {{-- Progress bar --}}
                        <div class="w-full mt-4 h-1 bg-current/20 rounded-full overflow-hidden">
                            <div class="h-full bg-current rounded-full"
                                 :class="feedbackConfig(feedback.type).short ? 'shrink-progress-short' : 'shrink-progress'">
                            </div>
                        </div>
                    </div>
                </template>

                <template x-if="!feedback">
                    <div class="text-center py-8">
                        <svg class="mx-auto h-12 w-12 text-gray-300 dark:text-gray-600 mb-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                            <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M4 18V8a1 1 0 0 1 1-1h1.5l1.707-1.707A1 1 0 0 1 8.914 5h6.172a1 1 0 0 1 .707.293L17.5 7H19a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1Z"/>
                            <path stroke="currentColor" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
                        </svg>
                        <p class="text-gray-500 dark:text-gray-400 font-medium">Belum ada scan.</p>
                        <p class="text-gray-400 dark:text-gray-500 text-xs mt-1">Hasil scan kartu akan langsung tampil di panel ini.</p>
                    </div>
                </template>

            </div>

        </aside>
    </main>
</div>
@endsection

@push('scripts')
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function () {
    const kioskToken  = '{{ $kiosk->token ?? '' }}';
    const scannerMode = '{{ $scannerMode }}';
    const healthUrl   = `/kiosk/${encodeURIComponent(kioskToken)}/health`;
    const scanUrl     = '{{ route($scanRouteName, ['token' => '__TOKEN__']) }}'.replace('__TOKEN__', encodeURIComponent(kioskToken));
    const csrfToken   = document.querySelector('meta[name=csrf-token]')?.content ?? '';

    const root   = document.querySelector('[data-kiosk-scanner]');
    const alpine = () => Alpine.$data(root);

    let lastScanned   = '';
    let scanCooldown  = false;
    let scannerActive = false;
    let healthTimer   = null;

    const html5QrCode = new Html5Qrcode('qr-reader');

    // ------------------------------------------------------------------
    // Scanner lifecycle
    // ------------------------------------------------------------------

    async function startScanner() {
        if (scannerActive || !alpine().connectionStatus) return;
        try {
            await html5QrCode.start(
                { facingMode: 'environment' },
                { fps: 10, qrbox: { width: 250, height: 250 }, aspectRatio: 1.0 },
                onScanSuccess
            );
            scannerActive = true;
        } catch (err) {
            console.warn('Camera error:', err);
        }
    }

    async function stopScanner() {
        if (!scannerActive) return;
        try { await html5QrCode.stop(); } catch (e) { /* ignore */ }
        finally { scannerActive = false; }
    }

    // ------------------------------------------------------------------
    // Scan handler
    // ------------------------------------------------------------------

    async function onScanSuccess(decodedText) {
        if (!alpine().connectionStatus || scanCooldown || decodedText === lastScanned) return;

        scanCooldown  = true;
        lastScanned   = decodedText;

        try {
            const response = await fetch(scanUrl, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': csrfToken,
                    'X-Kiosk-Token': kioskToken,
                },
                body: JSON.stringify({ payload: decodedText }),
            });

            const data        = await response.json();
            const feedbackType = data.type || (response.ok ? 'success_checkin' : 'unknown');
            const fallback     = scannerMode === 'check_out' ? 'Respon check-out diterima.' : 'Respon check-in diterima.';

            alpine().showFeedback(
                feedbackType,
                data.name    || '–',
                data.message || fallback,
                data.photo_url || data.photo || null,
                data.role    || '-'
            );

            playBeep(data.sound === 'success' ? 880 : 220, data.sound === 'success' ? 180 : 350);

            if (feedbackType === 'success_checkin' || feedbackType === 'success_checkout') {
                await stopScanner();
                setTimeout(async () => {
                    if (alpine().connectionStatus) await startScanner();
                }, 2700);
            }
        } catch (e) {
            console.error('Scan error:', e);
            alpine().showFeedback('unknown', 'Koneksi Error', 'Gagal mengirim data scan ke server.', null, '-');
        }

        setTimeout(() => { scanCooldown = false; lastScanned = ''; }, 3200);
    }

    // ------------------------------------------------------------------
    // Health check
    // ------------------------------------------------------------------

    async function checkConnection() {
        try {
            const r           = await fetch(healthUrl, { cache: 'no-store' });
            const isConnected = r.ok;
            const wasConnected = alpine().connectionStatus;

            alpine().connectionStatus = isConnected;

            if (!isConnected) { await stopScanner(); return; }
            if (!wasConnected && isConnected) { await startScanner(); }
        } catch {
            alpine().connectionStatus = false;
            await stopScanner();
        }
    }

    // ------------------------------------------------------------------
    // Boot
    // ------------------------------------------------------------------

    if (!kioskToken) {
        alpine().connectionStatus = false;
        alpine().showFeedback('unknown', 'Token Tidak Valid', 'Token kiosk tidak tersedia pada halaman ini.', null, '-');
        return;
    }

    checkConnection().then(() => {
        if (alpine().connectionStatus) startScanner();
    });

    healthTimer = setInterval(checkConnection, 10_000);

    window.addEventListener('beforeunload', () => {
        clearInterval(healthTimer);
        stopScanner();
    });

    // ------------------------------------------------------------------
    // Audio feedback
    // ------------------------------------------------------------------

    function playBeep(freq, duration) {
        try {
            const ctx  = new (window.AudioContext || window.webkitAudioContext)();
            const osc  = ctx.createOscillator();
            const gain = ctx.createGain();
            osc.type          = 'sine';
            osc.frequency.value = freq;
            gain.gain.setValueAtTime(0.4, ctx.currentTime);
            gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + duration / 1000);
            osc.connect(gain);
            gain.connect(ctx.destination);
            osc.start();
            osc.stop(ctx.currentTime + duration / 1000);
        } catch (e) { /* audio not supported */ }
    }
});
</script>
@endpush