
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Demo BladeCAPTCHA - Checkbox ajustado</title>
        <link rel="stylesheet" href="css/css.css">
        <style>
            :root {
                --bg-color: #1e1e1e;
                --text-color: #f5f5f5;
                --accent-color: #00bfa6;
                --button-bg: #00bfa6;
                --button-text: #000;
                --button-hover: #00a08d;
                font-size: 14px;
            }

            body {
                background-color: var(--bg-color);
                color: var(--text-color);
                font-family: Verdana, Geneva, sans-serif;
                margin: 2rem;
            }

            form {
                margin: 0 auto;
                max-width: 480px;
            }

            .form-group {
                display: flex;
                flex-direction: column;
                margin-bottom: 1.5rem;
            }

            label {
                color: var(--accent-color);
                font-weight: 600;
                margin-bottom: .3rem;
            }

            input[type=email],
            input[type=text],
            textarea {
                background-color: #222;
                border: 1px solid #555;
                border-radius: 5px;
                color: var(--text-color);
                font-family: font-family: Verdana, Geneva, sans-serif;
                font-size: 1rem;
                padding: .6rem .8rem;
                resize: vertical;
                transition: border-color .2s ease;
            }
            input:-webkit-autofill,
            input:-webkit-autofill:hover, 
            input:-webkit-autofill:focus,
            input:-webkit-autofill:active {
                -webkit-box-shadow: 0 0 0 30px #222 inset !important;
                -webkit-text-fill-color: var(--text-color) !important;
                caret-color: var(--text-color) !important;
            }
            @media (pointer: coarse) {
                textarea::-webkit-resizer {
                    display: none;
                }
                textarea {
                    resize: none;
                }
            }

            input[type=email]:focus,
            input[type=text]:focus,
            textarea:focus {
                border-color: var(--button-bg);
                outline: none;
            }

            .checkbox-button-group {
                align-items: center;
                color: var(--accent-color);
                cursor: pointer;
                display: flex;
                flex-direction: row;
                font-size: 1rem;
                font-weight: 600;
                gap: .2rem;
                justify-content: center;
                user-select: none;
            }

            .checkbox-button-group input[type=checkbox] {
                appearance: none;
                -webkit-appearance: none;
                background-color: transparent;
                border: 2px solid var(--accent-color);
                border-radius: 4px;
                cursor: pointer;
                height: 18px;
                position: relative;
                top: -3px;
                transition: background-color .3s, border-color .3s;
                width: 18px;
            }

            .checkbox-button-group input[type=checkbox]:checked {
                display: none;
            }

            #btnEnviar,
            .checkbox-button-group label {
                cursor: pointer;
            }

            #btnEnviar {
                background-color: var(--accent-color);
                border: none;
                border-radius: 6px;
                color: var(--button-text);
                font-size: 1.1rem;
                font-weight: 700;
                padding: .8rem 2.2rem;
                transition: background-color .3s ease;
                user-select: none;
            }

            #btnEnviar:disabled {
                background-color: #555;
                cursor: not-allowed;
            }

            #btnEnviar:not(:disabled):hover {
                background-color: #008e7c;
            }

            .progress-circle {
                display: block;
                margin: 1rem auto;
            }

            .progress-bg {
                opacity: .3;
            }

            #verification-status>div {
                align-items: center;
                color: var(--accent-color);
                display: flex;
                font-size: 1.1rem;
                font-weight: 600;
                gap: .6rem;
                justify-content: center;
                margin-top: .3rem;
            }

            .check-icon {
                font-size: 1.8rem;
                margin: 0;
            }

            body,
            html {
                overflow: hidden;
            }

            .typing-dots .dots:after {
                animation: dots 1.5s steps(3) infinite;
                content: "";
                display: inline-block;
                text-align: left;
                width: 1em;
            }

            @keyframes dots {
                0% {
                    content: "";
                }

                33% {
                    content: ".";
                }

                66% {
                    content: "..";
                }

                to {
                    content: "...";
                }
            }

            .error {
                color: #f44336;
                display: none;
                font-size: 1rem;
                padding: 3px 2px 0;
            }

            .onerror .error {
                display: block;
            }

        </style>
    </head>
    <body>
        <p style="max-width:480px; margin: 1rem auto 2rem; color: #aaa; font-style: italic; text-align: center;">
            Esta demo es un ejemplo funcional: <strong>podés enviarnos un mensaje o consulta real usando este formulario.</strong>
        </p>
        <form id="demo-form" action="dispatcher.php" novalidate target="">
            <div class="form-group">
                <label for="nombre">Nombre</label>
                <input type="text" id="nombre" name="nombre" required autocomplete="given-name" />
                <div class="error">Por favor complete este dato.</div>
            </div>
            <div class="form-group">
                <label for="apellido">Apellido</label>
                <input type="text" id="apellido" name="apellido" required autocomplete="family-name" />
                <div class="error">Por favor complete este dato.</div>
            </div>
            <div class="form-group">
                <label for="email">Correo electrónico</label>
                <input type="email" id="email" name="email" required autocomplete="email" />
                <div class="error">Por favor complete este dato.</div>
            </div>
            <div class="form-group">
                <label for="comentarios">Comentarios</label>
                <textarea id="comentarios" name="comentarios" rows="4" required></textarea>
                <div class="error">Por favor complete este dato.</div>
            </div>


            <div class="form-group checkbox-button-group">
                <input type="checkbox" id="soyHumano" name="soyHumano" aria-describedby="verification-status" />
                <label for="soyHumano">Soy humano</label>
            </div>

            <div id="verification-status" aria-live="polite" role="status"></div>
            <input type="hidden" name="captcha_token">
            <div class="form-group" style="text-align:center; margin-top: 2rem;">
                <button type="submit" id="btnEnviar" disabled>
                    Enviar
                </button>
            </div>
        </form>
        
        <script type="module">
            import {initCaptcha} from './BladeCAPTCHA/public/js/captcha.min.js?v=2';

            const checkbox = document.getElementById('soyHumano');
            checkbox.checked = false;
            const statusDiv = document.getElementById('verification-status');
            const btnEnviar = document.getElementById('btnEnviar');
            let timmer = null;
            let lastPercent = 0;
            let animFrame = null;
            
            function setProgress(percent) {
                if (percent === 0) return;

                const circle = document.querySelector('.progress-bar');
                if (!circle) return;

                const radius = 20;
                const circumference = 2 * Math.PI * radius;

                if (animFrame) cancelAnimationFrame(animFrame);
                
                // lerp
                function step() {
                    lastPercent += (percent - lastPercent) * 0.15; // suavizado

                    const offset = circumference - (lastPercent / 100) * circumference;
                    circle.style.strokeDashoffset = offset;

                    if (Math.abs(percent - lastPercent) > 0.5) {
                        animFrame = requestAnimationFrame(step);
                    } else {
                        lastPercent = percent;
                        circle.style.strokeDashoffset = circumference - (percent / 100) * circumference;
                    }
                }
                step();
            }

            function showProgress() {
                statusDiv.innerHTML = `
                    <svg class="progress-circle" width="48" height="48" viewBox="0 0 48 48" aria-hidden="true" role="img">
                        <circle class="progress-bg" cx="24" cy="24" r="20" stroke="#444" stroke-width="4" fill="none"></circle>
                        <circle class="progress-bar" cx="24" cy="24" r="20" stroke="var(--accent-color)" stroke-width="4" fill="none" stroke-linecap="round" stroke-dasharray="125.6" stroke-dashoffset="125.6" transform="rotate(-90 24 24)"></circle>
                    </svg>
                    <div>
                        <div class="typing-dots">Verificando<span class="dots"></span></div>
                    </div>
                `;
            }
            
            function showSuccess() {
                const messageSpace = window.matchMedia("(min-width: 412px)").matches;
                setTimeout(() => {
                    if (messageSpace) {
                        statusDiv.innerHTML = `
                            <div>
                                <div><span class="emoji">✅</span> Efectivamente, sos humano <span class="emoji">😊</span></div>
                            </div>
                        `;
                    } else {
                        statusDiv.innerHTML = `
                            <div>
                                <div><span class="emoji">✅</span> Sos humano</div>
                            </div>
                        `;
                    }
                    btnEnviar.disabled = false;
                }, 50); // pequeño retraso para percibir la animación final
            }

            function start() {
                if (!checkbox.checked) {
                    statusDiv.innerHTML = '';
                    btnEnviar.disabled = true;
                    return;
                }
                lastPercent = 0;
                btnEnviar.disabled = true;
                showProgress();
                checkbox.closest('div').style.display = 'none';
            }

            function ok(token) {
                showProgress();
                setProgress(100);
                showSuccess();
                document.querySelector('[name="captcha_token"]').value = token;

                timmer = setTimeout(() => {
                    checkbox.closest('div').style.display = 'flex';
                    checkbox.checked = false;
                    const msg = `Tu validación ha <strong>expirado</strong>, volvé a presionar <em>‘Soy humano’</em>. <span class="emoji" style="white-space:nowrap">🤖 ⛔ 👨 💻</span>`;
                    window.parent.postMessage({ type: 'showErrorModal', html: msg }, window.location.origin);
                    btnEnviar.disabled = true;
                    statusDiv.innerHTML = '';
                }, 55000);
            }

            function ko(err) {
                clearTimeout(timmer);
                setProgress(100); // opcional: mostrar el progreso completo antes de fallar
                setTimeout(() => {
                    const msg = `Mmm… ¿Alguna vez dudaste de tu propia <strong>humanidad</strong>? <span class="emoji" style="white-space:nowrap">👀 🌍</span><br>
                    <strong>¡Tranqui!</strong> Solo tocá <em>‘Soy humano’</em> otra vez… Así nos aseguramos 
                    (y vos dormís tranquilo, sin preguntas existenciales a las 3 AM). <span class="emoji" style="white-space:nowrap">🤖 ❔ 👶</span>`;
                    window.parent.postMessage({ type: 'showErrorModal', html: msg }, window.location.origin);
                    statusDiv.innerHTML = '';
                    checkbox.closest('div').style.display = 'flex';
                    checkbox.checked = false;
                    btnEnviar.disabled = true;
                }, 100); // pequeño retraso para percibir la animación
            }

            function addErrorHandlers(input, padre) {
                padre.classList.add('onerror');
                input.focus();
                input.addEventListener('input', function removeError() {
                    padre.classList.remove('onerror');
                    input.removeEventListener('input', removeError);
                });
            }

            function isValidEmail(email) {
                const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
                return re.test(email);
            }

            function showLoading() {
                const myOrigin = window.location.origin;
                window.parent.postMessage({
                        type: 'showLoading'
                    },
                    myOrigin
                );
            }

            function hideLoading() {
                const myOrigin = window.location.origin;
                window.parent.postMessage({
                        type: 'hideLoading'
                    },
                    myOrigin
                );
            }

            async function externalFetchWithErrorHandling(url, options = {}) {
                const response = await fetch(url, options);
                if (!response.ok) {
                    let errorData;
                    try {
                        errorData = await response.json();
                    } catch {
                        errorData = {
                            message: await response.text().catch(() => '') || `HTTP ${response.status}`
                        };
                    }
                    throw new Error(errorData.message || `HTTP ${response.status}`);
                }
                const contentType = response.headers.get('content-type') || '';
                return contentType.includes('application/json') ?
                    await response.json() :
                    await response.text();
            }

            document.getElementById('demo-form').addEventListener(
                'submit',
                async e => {
                    e.preventDefault();
                    try {
                        let nombre, apellido, email, comentarios, captcha_token, proceso;
                        let input = document.querySelector('[name="nombre"]');
                        let padre = input.closest('div');
                        if (input.value.length < 2) {
                            addErrorHandlers(input, padre);
                            return;
                        }
                        nombre = input.value;
                        input = document.querySelector('[name="apellido"]');
                        padre = input.closest('div');
                        if (input.value.length < 2) {
                            addErrorHandlers(input, padre);
                            return;
                        }
                        apellido = input.value;

                        input = document.querySelector('[name="email"]');
                        padre = input.closest('div');
                        if (!isValidEmail(input.value)) {
                            addErrorHandlers(input, padre);
                            return;
                        }
                        email = input.value;

                        input = document.querySelector('[name="comentarios"]');
                        padre = input.closest('div');
                        if (input.value.length < 2) {
                            addErrorHandlers(input, padre);
                            return;
                        }
                        comentarios = input.value;

                        const captchaInput = document.querySelector('[name="captcha_token"]');
                        if (!captchaInput) {
                            throw new Error('Token CAPTCHA no encontrado en el formulario');
                        }
                        captcha_token = captchaInput.value;
                        proceso = 'contacto';

                        clearTimeout(timmer);
                        btnEnviar.disabled = true;
                        btnEnviar.innerHTML = `<div class="typing-dots">Enviando<span class="dots"></span></div>`;
                        showLoading();

                        let response = await externalFetchWithErrorHandling(
                            './BladeCAPTCHA/public/php/dispatcher.php', {
                                method: 'POST',
                                headers: {
                                    'Accept': 'application/json'
                                },
                                body: JSON.stringify({
                                    proceso,
                                    nombre,
                                    apellido,
                                    email,
                                    comentarios,
                                    captcha_token
                                })
                            }
                        );

                        btnEnviar.innerHTML = 'Enviar';
                        hideLoading();
                        statusDiv.innerHTML = '';
                        checkbox.closest('div').style.display = 'flex';
                        checkbox.checked = false;
                        btnEnviar.disabled = true;

                        const msg = response.message;
                        const myOrigin = window.location.origin;
                        window.parent.postMessage({
                            type: response.success ? 'showSuccessModal' : 'showErrorModal',
                            html: msg
                        }, myOrigin);

                        if(response.success) e.target.reset();
                        
                    } catch (err) {
                        btnEnviar.innerHTML = 'Enviar';
                        statusDiv.innerHTML = '';
                        checkbox.closest('div').style.display = 'flex';
                        checkbox.checked = false;
                        btnEnviar.disabled = true;
                        hideLoading();
                        const msg = err || err.message;
                        const myOrigin = window.location.origin;
                        window.parent.postMessage({
                                type: 'showErrorModal',
                                html: msg
                            },
                            myOrigin
                        );
                    }
                }
            );

            (async () => {
                try {
                    await initCaptcha({
                        mode: 'manualHandling',
                        apiBaseUrl: './BladeCAPTCHA/public/php',
                        verifyButtonSelector: '#soyHumano',
                        onStart: start,
                        onProgress: setProgress,
                        onSuccess: ok,
                        onError: ko
                    });
                } catch (err) {
                    console.error(err || err.message);
                }
            })();
        </script>
        
        <script>
            function sendHeight() {
                const bodyRect = document.body.getBoundingClientRect();
                const htmlRect = document.documentElement.getBoundingClientRect();
                const height = Math.max(bodyRect.height, htmlRect.height);
                const myOrigin = window.location.origin;
                window.parent.postMessage({
                    type: 'iframe-height',
                    height
                }, myOrigin);
            }
            window.addEventListener('load', sendHeight);
            new MutationObserver(sendHeight).observe(document.body, {
                childList: true,
                subtree: true,
                attributes: true,
                characterData: true
            });
            window.addEventListener('resize', sendHeight);
        </script>
    </body>
</html>