{% extends 'base.html' %}
{% load i18n static %}

{% block title %}{% trans "Smart Pass Kiosk" %}{% endblock %}

{% block content %}
<div x-data="kioskScanner()"
    class="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-indigo-800 flex items-center justify-center p-4">

    <!-- Main Kiosk Card -->
    <div class="w-full max-w-md">
        <!-- Status Indicator -->
        <div :class="{
            'bg-gray-800': status === 'ready',
            'bg-green-600': status === 'success',
            'bg-red-600': status === 'error',
            'bg-yellow-500': status === 'scanning'
        }" class="rounded-t-3xl p-6 text-center transition-colors duration-500">

            <template x-if="status === 'ready'">
                <div>
                    <svg class="w-16 h-16 mx-auto text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                            d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z" />
                    </svg>
                    <p class="text-white text-xl mt-4">{% trans "Present Your QR Code" %}</p>
                </div>
            </template>

            <template x-if="status === 'success'">
                <div>
                    <svg class="w-20 h-20 mx-auto text-white animate-bounce" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                    <p class="text-white text-2xl font-bold mt-4" x-text="message"></p>
                    <p class="text-white/80 text-lg" x-text="employeeName"></p>
                </div>
            </template>

            <template x-if="status === 'error'">
                <div>
                    <svg class="w-20 h-20 mx-auto text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M6 18L18 6M6 6l12 12" />
                    </svg>
                    <p class="text-white text-xl font-bold mt-4" x-text="message"></p>
                </div>
            </template>
        </div>

        <!-- Scanner Area -->
        <div class="bg-white rounded-b-3xl p-8 shadow-2xl">
            <!-- Camera Feed -->
            <div class="relative aspect-square bg-gray-900 rounded-2xl overflow-hidden mb-6">
                <video x-ref="video" autoplay playsinline muted class="w-full h-full object-cover"></video>

                <!-- Scanning Overlay -->
                <div class="absolute inset-0 flex items-center justify-center">
                    <div class="w-48 h-48 border-4 border-white/50 rounded-2xl relative">
                        <div
                            class="absolute top-0 left-0 w-8 h-8 border-t-4 border-l-4 border-indigo-400 rounded-tl-lg">
                        </div>
                        <div
                            class="absolute top-0 right-0 w-8 h-8 border-t-4 border-r-4 border-indigo-400 rounded-tr-lg">
                        </div>
                        <div
                            class="absolute bottom-0 left-0 w-8 h-8 border-b-4 border-l-4 border-indigo-400 rounded-bl-lg">
                        </div>
                        <div
                            class="absolute bottom-0 right-0 w-8 h-8 border-b-4 border-r-4 border-indigo-400 rounded-br-lg">
                        </div>

                        <!-- Scanning Line Animation -->
                        <div x-show="status === 'ready'"
                            class="absolute left-2 right-2 h-0.5 bg-indigo-400 animate-scan"></div>
                    </div>
                </div>
            </div>

            <!-- Time Display -->
            <div class="text-center">
                <p class="text-6xl font-bold text-gray-900" x-text="currentTime"></p>
                <p class="text-gray-500 mt-2" x-text="currentDate"></p>
            </div>
        </div>
    </div>
</div>

<style>
    @keyframes scan {

        0%,
        100% {
            top: 10%;
        }

        50% {
            top: 90%;
        }
    }

    .animate-scan {
        animation: scan 2s ease-in-out infinite;
    }
</style>

<script src="https://unpkg.com/html5-qrcode"></script>
<script>
    document.addEventListener('alpine:init', () => {
        Alpine.data('kioskScanner', () => ({
            status: 'ready',
            message: '',
            employeeName: '',
            currentTime: '',
            currentDate: '',
            scanner: null,

            init() {
                this.updateClock();
                setInterval(() => this.updateClock(), 1000);
                this.startScanner();
            },

            updateClock() {
                const now = new Date();
                this.currentTime = now.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' });
                this.currentDate = now.toLocaleDateString('fr-FR', { weekday: 'long', day: 'numeric', month: 'long' });
            },

            async startScanner() {
                try {
                    this.scanner = new Html5Qrcode("reader");
                    await this.scanner.start(
                        { facingMode: "environment" },
                        { fps: 10, qrbox: 250 },
                        (decodedText) => this.onScanSuccess(decodedText),
                        (errorMessage) => { }
                    );
                } catch (e) {
                    console.error('Camera error:', e);
                }
            },

            async onScanSuccess(token) {
                if (this.status !== 'ready') return;
                this.status = 'scanning';

                try {
                    const response = await fetch('/api/hr/attendance/scan/', {
                        method: 'POST',
                        headers: { 'Content-Type': 'application/json' },
                        body: JSON.stringify({ token })
                    });

                    const data = await response.json();

                    if (data.success) {
                        this.status = 'success';
                        this.message = data.message;
                        this.employeeName = data.employee;
                    } else {
                        this.status = 'error';
                        this.message = data.error || 'Scan failed';
                    }
                } catch (e) {
                    this.status = 'error';
                    this.message = 'Connection error';
                }

                setTimeout(() => {
                    this.status = 'ready';
                    this.message = '';
                    this.employeeName = '';
                }, 3000);
            }
        }));
    });
</script>
{% endblock %}