{% extends "base.html" %}

{% block title %}{{ 'scan_qr'|t }} - {{ event.name }}{% endblock %}

{% block content %}
<div class="scan-page">
    <div class="scan-header">
        <h1>{{ event.name }}</h1>
        <p>{{ 'qr_scanner_checkin'|t }}</p>
        <a href="{{ url_for('event_detail', code=event.code) }}" class="btn btn-outline">{{ 'back_to_event'|t }}</a>
    </div>

    <div class="scanner-container">
        <div id="qr-reader" class="qr-reader"></div>
        <div id="scan-result" class="scan-result hidden">
            <div class="result-icon" id="result-icon"></div>
            <h2 id="result-title"></h2>
            <p id="result-message"></p>
            <button id="scan-again" class="btn btn-primary">{{ 'scan_again'|t }}</button>
        </div>
    </div>

    <div class="scan-stats">
        <div class="stat">
            <span class="stat-number" id="total-count">{{ attendees|length }}</span>
            <span class="stat-label">{{ 'total'|t }}</span>
        </div>
        <div class="stat">
            <span class="stat-number" id="checked-in-count">{{ attendees|selectattr('checked_in')|list|length }}</span>
            <span class="stat-label">{{ 'checked_in'|t }}</span>
        </div>
        <div class="stat">
            <span class="stat-number" id="remaining-count">{{ attendees|rejectattr('checked_in')|list|length }}</span>
            <span class="stat-label">{{ 'remaining'|t }}</span>
        </div>
    </div>

    <div class="recent-checkins">
        <h3>{{ 'recent_checkins'|t }}</h3>
        <ul id="recent-list">
            <li class="empty-state">{{ 'no_checkins_yet'|t }}</li>
        </ul>
    </div>
</div>

<style>
.scan-page {
    max-width: 600px;
    margin: 0 auto;
}

.scan-header {
    text-align: center;
    margin-bottom: 20px;
}

.scan-header h1 {
    margin-bottom: 5px;
}

.scan-header p {
    color: #666;
    margin-bottom: 15px;
}

.scanner-container {
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.qr-reader {
    width: 100%;
}

.qr-reader video {
    width: 100% !important;
    border-radius: 12px;
}

.scan-result {
    text-align: center;
    padding: 40px 20px;
    background: #fff;
    width: 100%;
}

.scan-result.hidden {
    display: none;
}

.result-icon {
    font-size: 64px;
    margin-bottom: 10px;
}

.result-icon.success::before {
    content: '✓';
    color: #22c55e;
}

.result-icon.error::before {
    content: '✗';
    color: #ef4444;
}

.result-icon.duplicate::before {
    content: '⏳';
    color: #f59e0b;
}

#result-title {
    margin: 0 0 10px 0;
}

#result-message {
    color: #666;
    margin-bottom: 20px;
}

.scan-stats {
    display: flex;
    justify-content: space-around;
    padding: 20px;
    background: #f8fafc;
    border-radius: 12px;
    margin: 20px 0;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 32px;
    font-weight: bold;
    color: #1e293b;
}

.stat-label {
    font-size: 14px;
    color: #64748b;
}

.recent-checkins {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    border: 1px solid #e2e8f0;
}

.recent-checkins h3 {
    margin: 0 0 15px 0;
    font-size: 16px;
}

.recent-checkins ul {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

.recent-checkins li {
    padding: 10px;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
}

.recent-checkins li:last-child {
    border-bottom: none;
}

.recent-checkins li.empty-state {
    color: #94a3b8;
    text-align: center;
    padding: 20px;
}

.recent-checkins .attendee-name {
    font-weight: 500;
}

.recent-checkins .checkin-time {
    color: #22c55e;
    font-size: 14px;
}
</style>

<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script>
const eventId = {{ event.id }};
let html5QrCode;
let scanning = true;

function getAttendeeName(attendeeId) {
    const attendees = {{ attendees|tojson }};
    const attendee = attendees.find(a => a.id === attendeeId);
    return attendee ? `${attendee.first_name} ${attendee.last_name}` : `Attendee #${attendeeId}`;
}

function updateStats() {
    const attendees = {{ attendees|tojson }};
    const total = attendees.length;
    const checkedIn = attendees.filter(a => a.checked_in).length;
    document.getElementById('total-count').textContent = total;
    document.getElementById('checked-in-count').textContent = checkedIn;
    document.getElementById('remaining-count').textContent = total - checkedIn;
}

function addRecentCheckin(name) {
    const list = document.getElementById('recent-list');
    const emptyState = list.querySelector('.empty-state');
    if (emptyState) emptyState.remove();

    const li = document.createElement('li');
    const time = new Date().toLocaleTimeString();
    li.innerHTML = `<span class="attendee-name">${name}</span><span class="checkin-time">${time}</span>`;
    list.insertBefore(li, list.firstChild);

    while (list.children.length > 10) {
        list.removeChild(list.lastChild);
    }
}

async function checkInAttendee(attendeeId) {
    try {
        const response = await fetch(`/organizer/event/${eventId}/checkin/${attendeeId}`, {
            method: 'POST'
        });

        const data = await response.json();
        const resultDiv = document.getElementById('scan-result');
        const icon = document.getElementById('result-icon');
        const title = document.getElementById('result-title');
        const message = document.getElementById('result-message');

        icon.className = 'result-icon';

        if (data.success) {
            document.getElementById('qr-reader').style.display = 'none';
            resultDiv.classList.remove('hidden');

            if (data.already_checked_in) {
                icon.classList.add('duplicate');
                title.textContent = '{{ "already_checked_in"|t }}';
                message.textContent = `${data.attendee_name} {{ "was_already_checked_in"|t }}`;
            } else {
                icon.classList.add('success');
                title.textContent = '{{ "checked_in"|t }}!';
                message.textContent = `{{ "success_checked_in"|t }} ${data.attendee_name}`;
                addRecentCheckin(data.attendee_name);
                updateStats();
            }
        } else {
            icon.classList.add('error');
            title.textContent = '{{ "error"|t }}';
            message.textContent = data.error || '{{ "failed_checkin"|t }}';
        }

        scanning = false;
    } catch (error) {
        console.error('Check-in error:', error);
        alert('{{ "error_checking_in"|t }}');
    }
}

function onScanSuccess(decodedText) {
    if (!scanning) return;

    const parts = decodedText.split(':');
    if (parts.length === 3 && parts[0] === 'NETEVENT') {
        const qrEventId = parseInt(parts[1]);
        const attendeeId = parseInt(parts[2]);

        if (qrEventId === eventId) {
            checkInAttendee(attendeeId);
        } else {
            alert('{{ "qr_different_event"|t }}');
        }
    } else {
        const match = decodedText.match(/\/organizer\/event\/(\d+)\/checkin\/(\d+)/);
        if (match) {
            const qrEventId = parseInt(match[1]);
            const attendeeId = parseInt(match[2]);
            if (qrEventId === eventId) {
                checkInAttendee(attendeeId);
            } else {
                alert('{{ "qr_different_event"|t }}');
            }
        } else {
            console.log('Unknown QR format:', decodedText);
        }
    }
}

function startScanner() {
    html5QrCode = new Html5Qrcode("qr-reader");

    html5QrCode.start(
        { facingMode: "environment" },
        {
            fps: 10,
            qrbox: { width: 250, height: 250 }
        },
        onScanSuccess,
        (errorMessage) => {
        }
    ).catch(err => {
        console.error('Camera error:', err);
        alert('{{ "camera_permission_error"|t }}');
    });
}

function resetScanner() {
    document.getElementById('qr-reader').style.display = 'block';
    document.getElementById('scan-result').classList.add('hidden');
    scanning = true;
}

document.getElementById('scan-again').addEventListener('click', resetScanner);

window.addEventListener('DOMContentLoaded', startScanner);
</script>
{% endblock %}