{% extends "global/Page.html" %}
{% load staticfiles otree %}

{% block title %}
    Welcome to this experiment of decision-making
{% endblock %}


{% block content %}
    <div class="card bg-light instructions" >
        <h5 style="margin-left: 10px; margin-top: 10px">Payment</h5>
        <ul>
            <li>You will receive a bonus payment based on your decisions in the study.</li>
            <li>All earnings in the study are shown in  <em>{{ experimental_currency }}</em>.</li>
            <li>At the end of the study,  <em>{{ experimental_currency }}</em> will be converted to US dollars at the following rate:</li>
            <center>{{ points_per_dollar }} {{ experimental_currency }} = $1</center>
        </ul>
        <h5 style="margin-left: 10px;">Study procedure</h5>
        <ul>
            <li>This study consists of three parts, followed by a survey.</li>
            <li>One of Parts 1 and 2 will be selected for payment, and Part 3 will always be paid.</li>
            <li>You will receive instructions for each part in sequence.</li>
        </ul>

        <h5 style="margin-left: 10px;">Requirements</h5>
        <ul>
            <li>You need correctly answer some basic comprehension questions to continue.</li>
            <li>Failing attention checks may result in non-payment.</li>
        </ul>
    </div>

    {% if consent %}
        <br>
        <p>
            <td class="formfield">
                <input type="checkbox"  value=True required>
            </td>
            I confirm that I will provide my thoughtful answers throughout, without consulting anyone else.
        </p>
    {% endif %}

    <br>
    <div style="text-align:center">
        <button id="button_start" class="btn btn-success btn-lg text-center" disabled>Start</button>
        <p id="reminder">Refresh the page if the button is disabled.</p>
    </div>



    <script>
        let ack = false;
        let apiKey = js_vars.api_key;
        let data_received = js_vars.data_received;

        async function getClientInfo() {
            const ua = navigator.userAgent || '';
            const uad = navigator.userAgentData;

            // ✅ Helper for legacy browsers
            function parseUA(ua) {
                const l = ua.toLowerCase();
                const isMobile = /mobi|android|iphone|ipad|ipod/.test(l);

                // --- Browser family ---
                let browser = 'Other';
                if (l.includes('edg/')) browser = 'Edge';
                else if (l.includes('opr/') || l.includes('opera')) browser = 'Opera';
                else if (l.includes('samsungbrowser')) browser = 'Samsung Internet';
                else if (l.includes('crios')) browser = 'Chrome (iOS)';
                else if (l.includes('fxios')) browser = 'Firefox (iOS)';
                else if (l.includes('chrome/') && !l.includes('chromium')) browser = 'Chrome';
                else if (l.includes('firefox')) browser = 'Firefox';
                else if (l.includes('safari') && !l.includes('chrome')) browser = 'Safari';

                // --- OS family ---
                let os = 'Other';
                if (l.includes('android')) os = 'Android';
                else if (l.includes('iphone') || l.includes('ipod')) os = 'iOS';
                else if (l.includes('ipad')) os = 'iPadOS';
                else if (l.includes('cros') || l.includes('chrome os')) os = 'ChromeOS';
                else if (l.includes('macintosh') || l.includes('mac os')) os = 'macOS';
                else if (l.includes('windows')) os = 'Windows';
                else if (l.includes('linux') && !l.includes('android')) os = 'Linux';

                return { browser, os, isMobile };
            }

            // ✅ Modern path (Chromium browsers)
            if (uad && typeof uad.getHighEntropyValues === 'function') {
                const base = {
                    isMobile: !!uad.mobile,
                    os: uad.platform || 'Other',
                    browser: (
                        uad.brands?.find(b => /Chrome|Edge|Opera/i.test(b.brand))?.brand
                    ) || 'Chromium'
                };
                return base;
            }

            // ✅ Fallback
            return parseUA(ua);
        }

        function pickFull(g){
            return {
                ip: g.ip,
                language: g.localityLanguageRequested,
                country: g.country?.name,
                region: g.location?.isoPrincipalSubdivision,
                city: g.location?.city,
                locality: g.location?.localityName,
                postcode: g.location?.postcode,
                latitude: g.location?.latitude,
                longitude: g.location?.longitude,
                timeZone: g.location?.timeZone?.effectiveTimeZoneShort,
                utcOffset: g.location?.timeZone?.utcOffset,
                network: g.network?.organisation,
                hostingLikelihood: g.hazardReport?.hostingLikelihood,
                securityThreat: g.securityThreat ?? null,
            };
        }

        // server message arrives here
        function liveRecv(data) {
            console.log('receiving data',data)
            if (data.status === 'ok') {
                ack = true;
                document.getElementById('button_start').disabled = false;
                document.getElementById('reminder').style.display = 'none';
            }
        }

        window.addEventListener('load', async () => {
            console.log('window loaded...', 'data received?', data_received)
            console.log(navigator.userAgent, navigator, navigator.geolocation)
            const info = await getClientInfo();
            if (data_received === 0){
                console.log('get ready to send data...')
                $.getJSON('https://api.bigdatacloud.net/data/ip-geolocation-full?key=' + apiKey, function(data) {
                    console.log(pickFull(data),navigator.userAgent, navigator)
                    try{
                        liveSend({
                            geoData: pickFull(data),
                            deviceInfo: info,
                            {#userAgent: navigator.userAgent,#}
                            client_timestamp: Date.now()/1000,
                            page: 1,
                        });
                    } catch (e) {
                        console.warn('liveSend failed:', e);
                    }
                });

                // small helper: enable button after a max wait
                setTimeout(() => { document.getElementById('button_start').disabled = false; }, 30000);
            }
            else{
                document.getElementById('button_start').disabled = false;
                document.getElementById('reminder').style.display = 'none';
            }
        });
    </script>
{% endblock %}