{% extends "admin/layout.twig" %}

{% block title %}Check-in / Validação de Ingressos{% endblock %}

{% block header_title %}Check-in / Validação de Ingressos{% endblock %}

{% block extra_css %}
    .checkin-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-top: 10px;
    }
    @media (max-width: 768px) {
        .checkin-grid {
            grid-template-columns: 1fr;
        }
    }
    .scanner-card, .search-card, .detail-card, .history-card {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 20px;
        margin-bottom: 20px;
    }
    .scanner-container {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
        border: 2px dashed #ccc;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        background: #fafafa;
    }
    #reader {
        width: 100%;
    }
    .status-badge {
        display: inline-block;
        padding: 6px 12px;
        border-radius: 20px;
        font-weight: bold;
        font-size: 0.9em;
        text-align: center;
    }
    .status-pending { background: #ffeaa7; color: #d63031; }
    .status-approved { background: #dff9fb; color: #0984e3; }
    .status-checkedin { background: #badc58; color: #6ab04c; }
    
    .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }
    .detail-row:last-child {
        border-bottom: none;
    }
    .detail-label {
        font-weight: bold;
        color: #555;
    }
    .detail-value {
        color: #333;
    }
    .alert {
        padding: 15px;
        border-radius: 4px;
        margin-bottom: 20px;
        font-weight: bold;
    }
    .alert-danger { background: #ff7675; color: #fff; border: 1px solid #d63031; }
    .alert-warning { background: #ffeaa7; color: #2d3436; border: 1px solid #e1b12c; }
    .alert-success { background: #55efc4; color: #2d3436; border: 1px solid #26de81; }
    
    .btn-block {
        display: block;
        width: 100%;
        padding: 12px;
        font-size: 1.1em;
        margin-top: 15px;
    }
    .scanner-controls {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin-top: 15px;
    }
{% endblock %}

{% block content %}
<div class="checkin-grid">
    <!-- Left Column: Scanner and Search -->
    <div>
        <div class="scanner-card">
            <h3>Leitor de QR Code</h3>
            <div class="scanner-container">
                <div id="reader"></div>
            </div>
            <div class="scanner-controls">
                <button id="btn-start" class="btn btn-success">Iniciar Câmera</button>
                <button id="btn-stop" class="btn btn-danger" style="display:none;">Parar Câmera</button>
            </div>
        </div>

        <div class="search-card">
            <h3>Busca Manual</h3>
            <form id="search-form" method="GET" action="/admin/checkin">
                <div class="form-group" style="display: flex; gap: 10px;">
                    <input type="text" id="ticket_code_input" name="code" placeholder="Código do Ingresso (ex: TCK-XXXXXX)" value="{{ code }}" required>
                    <button type="submit" class="btn">Buscar</button>
                </div>
            </form>
        </div>
    </div>

    <!-- Right Column: Verification Details -->
    <div>
        <div class="detail-card">
            <h3>Ficha de Validação</h3>
            
            <div id="feedback-alert" style="display: none;"></div>

            {% if error %}
                <div class="alert alert-danger">{{ error }}</div>
            {% endif %}

            {% if warning %}
                <div class="alert alert-warning">{{ warning }}</div>
            {% endif %}

            {% if ticket %}
                <div id="ticket-info">
                    <div class="detail-row">
                        <span class="detail-label">Participante</span>
                        <span class="detail-value" style="font-weight: bold;">{{ ticket.attendee_name }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">E-mail</span>
                        <span class="detail-value">{{ ticket.attendee_email }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Documento</span>
                        <span class="detail-value">{{ ticket.attendee_document ?: 'N/A' }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Evento</span>
                        <span class="detail-value">{{ ticket.event_title }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Categoria / Lote</span>
                        <span class="detail-value">{{ ticket.category_name }} - {{ ticket.batch_name }}</span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Código</span>
                        <span class="detail-value"><code style="font-size: 1.1em; background: #eee; padding: 2px 6px; border-radius: 4px;">{{ ticket.ticket_code }}</code></span>
                    </div>
                    <div class="detail-row">
                        <span class="detail-label">Status do Check-in</span>
                        <span id="checkin-status" class="detail-value">
                            {% if ticket.checked_in_at %}
                                <span class="status-badge status-checkedin">✓ Realizado</span>
                            {% else %}
                                <span class="status-badge status-pending">Pendente</span>
                            {% endif %}
                        </span>
                    </div>

                    {% if not ticket.checked_in_at %}
                        <form id="checkin-form" method="POST" action="/admin/checkin">
                            <input type="hidden" name="ticket_code" value="{{ ticket.ticket_code }}">
                            <button type="submit" id="btn-confirm-checkin" class="btn btn-success btn-block">Confirmar Check-in</button>
                        </form>
                    {% else %}
                        <div class="alert alert-warning" style="margin-top: 15px; text-align: center; margin-bottom: 10px;">
                            Check-in já realizado em {{ ticket.checked_in_at|date('d/m/Y H:i:s') }}
                        </div>
                        <div style="text-align: center;">
                            <a href="/admin/tickets/{{ ticket.ticket_code }}/badge" target="_blank" class="btn btn-secondary btn-block">Imprimir Crachá</a>
                        </div>
                    {% endif %}
                </div>
            {% else %}
                <div id="no-ticket-placeholder" style="text-align: center; color: #777; padding: 40px 20px;">
                    <i style="font-size: 3em; display: block; margin-bottom: 10px; color: #ccc;">🎫</i>
                    Aguardando leitura de ingresso ou busca manual.
                </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="history-card">
    <h3>Check-ins Recentes (Esta Sessão)</h3>
    <table id="history-table">
        <thead>
            <tr>
                <th>Código</th>
                <th>Nome</th>
                <th>Evento</th>
                <th>Categoria</th>
                <th>Horário</th>
            </tr>
        </thead>
        <tbody id="history-body">
            <tr id="no-history-row">
                <td colspan="5" style="text-align: center; color: #777;">Nenhum check-in realizado nesta sessão ainda.</td>
            </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/html5-qrcode/2.3.8/html5-qrcode.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
    let html5Qrcode = null;
    const history = [];

    const btnStart = document.getElementById('btn-start');
    const btnStop = document.getElementById('btn-stop');
    const feedbackAlert = document.getElementById('feedback-alert');
    const checkinForm = document.getElementById('checkin-form');
    const ticketCodeInput = document.getElementById('ticket_code_input');

    // Handle Start/Stop scanner
    btnStart.addEventListener('click', function() {
        btnStart.style.display = 'none';
        btnStop.style.display = 'inline-block';
        
        html5Qrcode = new Html5Qrcode("reader");
        html5Qrcode.start(
            { facingMode: "environment" },
            {
                fps: 10,
                qrbox: { width: 250, height: 250 }
            },
            onScanSuccess,
            onScanError
        ).catch(err => {
            showFeedback('alert-danger', 'Erro ao acessar câmera: ' + err);
            btnStart.style.display = 'inline-block';
            btnStop.style.display = 'none';
        });
    });

    btnStop.addEventListener('click', stopScanner);

    function stopScanner() {
        if (html5Qrcode) {
            html5Qrcode.stop().then(() => {
                btnStart.style.display = 'inline-block';
                btnStop.style.display = 'none';
                document.getElementById("reader").innerHTML = "";
            }).catch(err => console.error(err));
        }
    }

    function onScanSuccess(decodedText) {
        // Stop scanner to prevent multiple scans during request
        stopScanner();
        
        let code = decodedText.trim();
        // If code is a full URL, extract the query parameter 'code'
        if (code.includes('code=')) {
            try {
                let url = new URL(code);
                let params = new URLSearchParams(url.search);
                code = params.get('code') || code;
            } catch (e) {
                // If URL parsing fails, use fallback splitting
                let parts = code.split('code=');
                if (parts[1]) {
                    code = parts[1].split('&')[0];
                }
            }
        }

        ticketCodeInput.value = code;
        
        // Fetch ticket details via JSON
        fetchTicketDetails(code);
    }

    function onScanError(errorMessage) {
        // Silent error logging, standard behavior for html5-qrcode
    }

    function showFeedback(type, message) {
        feedbackAlert.className = 'alert ' + type;
        feedbackAlert.textContent = message;
        feedbackAlert.style.display = 'block';
    }

    function fetchTicketDetails(code) {
        // Fetch JSON details
        fetch('/admin/checkin?code=' + encodeURIComponent(code) + '&format=json')
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    // Redirect to the page to load it properly with Twig
                    window.location.href = '/admin/checkin?code=' + encodeURIComponent(code);
                } else {
                    showFeedback('alert-danger', data.error || 'Ingresso inválido.');
                    // Re-start scanner if needed after short delay
                    setTimeout(() => {
                        btnStart.click();
                    }, 2000);
                }
            })
            .catch(err => {
                showFeedback('alert-danger', 'Erro na conexão de rede.');
            });
    }

    // Handle AJAX Check-in confirmation
    if (checkinForm) {
        checkinForm.addEventListener('submit', function(e) {
            e.preventDefault();
            const submitBtn = document.getElementById('btn-confirm-checkin');
            submitBtn.disabled = true;
            submitBtn.textContent = 'Enviando...';

            const formData = new FormData(checkinForm);

            fetch('/admin/checkin', {
                method: 'POST',
                body: formData
            })
            .then(res => res.json())
            .then(data => {
                if (data.success) {
                    showFeedback('alert-success', 'Check-in realizado com sucesso!');
                    
                    // Update check-in status badge
                    const statusVal = document.getElementById('checkin-status');
                    if (statusVal) {
                        statusVal.innerHTML = '<span class="status-badge status-checkedin">✓ Realizado</span>';
                    }
                    
                    // Hide confirm button
                    checkinForm.style.display = 'none';

                    // Automatically open PDF badge for printing
                    if (data.badge_url) {
                        window.open(data.badge_url, '_blank');
                    }

                    // Add to session history log
                    addToHistory(data.ticket);
                } else {
                    showFeedback('alert-danger', data.message || 'Erro ao realizar check-in.');
                    submitBtn.disabled = false;
                    submitBtn.textContent = 'Confirmar Check-in';
                }
            })
            .catch(err => {
                showFeedback('alert-danger', 'Erro na conexão de rede.');
                submitBtn.disabled = false;
                submitBtn.textContent = 'Confirmar Check-in';
            });
        });
    }

    function addToHistory(ticket) {
        const noHistoryRow = document.getElementById('no-history-row');
        if (noHistoryRow) {
            noHistoryRow.remove();
        }

        const body = document.getElementById('history-body');
        const row = document.createElement('tr');
        
        let date = new Date(ticket.checked_in_at);
        let timeStr = date.toLocaleTimeString('pt-BR');

        row.innerHTML = `
            <td><code>${ticket.ticket_code}</code></td>
            <td style="font-weight: bold;">${ticket.attendee_name}</td>
            <td>${ticket.event_title}</td>
            <td>${ticket.category_name}</td>
            <td><span class="status-badge status-checkedin">${timeStr}</span></td>
        `;

        // Insert at the top of history body
        body.insertBefore(row, body.firstChild);
    }
});
</script>
{% endblock %}