@extends('layouts.app')

@section('title', $config['service_title'] ?? 'Quick Fun')

@section('content')
<div class="min-h-screen bg-white flex flex-col items-center pt-8 pb-10 px-4 font-sans">

    <!-- Logo -->
    <div class="w-full max-w-md flex justify-center mb-6">
        <img src="{{ asset('images/he-landing/logo.png') }}" alt="Quick Fun" class="w-48 sm:w-56 h-auto object-contain">
    </div>

    <!-- Banner -->
    <div class="w-full max-w-md mb-8">
        <img src="{{ asset('images/he-landing/banner.png') }}" alt="Banner" class="w-full h-auto object-contain">
    </div>

    <!-- Title -->
    <div class="w-full max-w-md mb-12 px-2">
        <img src="{{ asset('images/he-landing/title.png') }}" alt="عيش أجواء المنافسة مع أسود الرافدين" class="w-full h-auto object-contain">
    </div>

    <!-- Form & Subscribe Button -->
    <div class="w-full max-w-md mb-12 px-4">
        <div id="alertMessage" class="hidden mb-4 p-4 rounded-lg text-center font-bold"></div>
        <form id="subscribeForm" class="w-full flex justify-center">
            <input type="hidden" name="service_name" value="{{ $config['service_name'] ?? '' }}">
            <button type="submit" id="subscribe_btn" class="w-full bg-transparent border-none p-0 cursor-pointer hover:scale-105 transition-transform duration-300 focus:outline-none">
                <img src="{{ asset('images/he-landing/button.png') }}" alt="اشترك الآن" class="w-full h-auto object-contain">
            </button>
        </form>
    </div>

    <!-- Disclaimer Text -->
    <div class="w-full max-w-md mb-8 px-8">
        <img src="{{ asset('images/he-landing/text.png') }}" alt="Disclaimer" class="w-full h-auto object-contain">
    </div>

    <!-- Terms and Conditions -->
    <div class="w-full max-w-md mt-auto flex justify-center px-12">
        <a href="{{ route('terms') }}" class="w-full block hover:opacity-80 transition-opacity duration-200">
            <img src="{{ asset('images/he-landing/terms.png') }}" alt="Terms and Conditions" class="w-full h-auto object-contain">
        </a>
    </div>

</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
<script>
// Configuration from backend
const config = {
    serviceName:      '{{ $config['service_name'] ?? '' }}',
    enableEvinaFraud: {{ isset($config['enable_evina_fraud']) && $config['enable_evina_fraud'] ? 'true' : 'false' }},
    otpLandingName:   '{{ $otp_landing_name ?? '' }}',
    campaign:         '{{ request()->get("campaign", "direct") }}',
    visitorId:        '{{ session("visitor_id") ?? "" }}',
    @if(!empty($evina_config))
    evinaConfig: {!! json_encode($evina_config) !!},
    @endif
};

// Evina state
let evinaState = { ti: null, ts: null, heRedirectUrl: null };

// ─── PostHog helpers ──────────────────────────────────────────────────────────
function phTrack(event, props) {
    if (typeof posthog === 'undefined') return;
    try {
        posthog.capture(event, Object.assign({
            service_name: config.serviceName,
            landing_type: 'he',
            page_url:     window.location.href,
        }, props || {}));
    } catch(e) {
        console.warn('PostHog track error:', e);
    }
}

// Page viewed
document.addEventListener('DOMContentLoaded', function() {
    phTrack('lp_viewed', {
        evina_enabled: config.enableEvinaFraud,
        step: 'he_landing',
    });
});

// Subscribe button click tracking
document.getElementById('subscribe_btn').addEventListener('click', function() {
    phTrack('lp_button_clicked', {
        button_id:   'subscribe_btn',
        button_text: 'Subscribe',
        step:        'he_subscribe',
    });
});
// ─────────────────────────────────────────────────────────────────────────────

function generateTransactionId() { return uuidv4(); }
function generateTimestamp()     { return new Date().getTime(); }

function buildHeRedirectUrl(evinaConfig, ti, ts) {
    const url    = evinaConfig.base_url.replace(/\/$/, '') + '/' + evinaConfig.he_redirect_endpoint.replace(/^\//, '');
    const params = new URLSearchParams({
        serviceId:   evinaConfig.service_id,
        spId:        evinaConfig.sp_id,
        shortcode:   evinaConfig.shortcode,
        ti,
        ts,
        servicename: evinaConfig.service_name,
        merchantname:evinaConfig.merchant_name,
        otp_landing: config.otpLandingName,
        clickid: evinaConfig.click_id,
        ...(evinaConfig.campaign ? { campaign: evinaConfig.campaign } : {})
    });
    return url + '?' + params.toString();
}

function append_script(returnedScript) {
    var scriptElement       = document.createElement("script");
    scriptElement.type      = "text/javascript";
    scriptElement.innerHTML = returnedScript;
    $('head').append(scriptElement);
    var event = new Event('DCBProtectRun');
    document.dispatchEvent(event);
}

function exec_anti_fraud() {
    if (!config.enableEvinaFraud || !config.evinaConfig) return;

    evinaState.ti = generateTransactionId();
    evinaState.ts = generateTimestamp();
    evinaState.heRedirectUrl = buildHeRedirectUrl(config.evinaConfig, evinaState.ti, evinaState.ts);

    const scriptUrl    = config.evinaConfig.base_url.replace(/\/$/, '') + '/' +
                         config.evinaConfig.get_script_endpoint.replace(/^\//, '');
    const scriptParams = new URLSearchParams({
        action:      'script',
        ti:          evinaState.ti,
        ts:          evinaState.ts.toString(),
        te:          '#subscribe_btn',
        servicename: config.evinaConfig.service_name,
        merchantname:config.evinaConfig.merchant_name || 'MediaWorld',
        type:        'he',
    });

    $.ajax({
        url:    scriptUrl + '?' + scriptParams.toString(),
        method: 'GET',
        success: function(response) {
            append_script(response.s);
        },
        error: function(xhr, status, error) {
            console.error('Error loading Evina script:', status, error);
            fetch(scriptUrl + '?' + scriptParams.toString())
                .then(r => r.text())
                .then(text => append_script(text))
                .catch(err => console.error('Failed to load Evina script:', err));
        }
    });
}

window.onload = () => {
    // Clarity Event: Page Loaded
    if (typeof clarity !== 'undefined') {
        clarity("event", "he_landing_page_loaded");
    }

    if (config.enableEvinaFraud && config.evinaConfig) {
        exec_anti_fraud();
    }
};

// ── Subscribe button – redirect to HE ────────────────────────────────────────
$('#subscribeForm').on('submit', function(e) {
    e.preventDefault();

    // Clarity Event: HE Form Start
    if (typeof clarity !== 'undefined') {
        clarity("event", "he_form_start");
    }

    // GA4 Event: form_start (HE subscribe)
    if (typeof dataLayer !== 'undefined') {
        dataLayer.push({
            'event': 'form_start',
            'form_id': 'subscribeForm',
            'form_type': 'he_subscribe',
            'service_name': config.serviceName,
            'campaign': config.campaign,
            'visitor_id': config.visitorId
        });
    }

    if (evinaState.heRedirectUrl) {
        // Clarity Event: HE Redirect Initiated
        if (typeof clarity !== 'undefined') {
            clarity("event", "he_redirect_initiated");
        }

        // GA4 Event: form_submit (HE redirect)
        if (typeof dataLayer !== 'undefined') {
            dataLayer.push({
                'event': 'form_submit',
                'form_id': 'subscribeForm',
                'form_type': 'he_subscribe',
                'step': 'he_redirect_initiated',
                'service_name': config.serviceName,
                'campaign': config.campaign,
                'visitor_id': config.visitorId
            });
        }

        phTrack('he_request_sent', {
            service_name: config.serviceName,
            ti:           evinaState.ti,
        });
        window.location.href = evinaState.heRedirectUrl;
    } else {
        // Clarity Event: HE Error
        if (typeof clarity !== 'undefined') {
            clarity("event", "he_redirect_error");
        }

        phTrack('he_request_failed', {
            service_name: config.serviceName,
            reason:       'he_redirect_url_missing',
        });
        showAlert('Error: Unable to redirect. Please try again.', 'error');
    }
});

function showAlert(message, type) {
    const alert   = document.getElementById('alertMessage');
    const bgColor = type === 'error'   ? 'bg-red-100 text-red-700' :
                    type === 'success' ? 'bg-green-100 text-green-700' :
                                         'bg-blue-100 text-blue-700';
    alert.className = `mb-4 p-4 rounded-lg ${bgColor}`;
    alert.textContent = message;
    alert.classList.remove('hidden');
    if (type !== 'info') {
        setTimeout(() => alert.classList.add('hidden'), 5000);
    }
}

if (config.enableEvinaFraud) {
    document.addEventListener('DCBProtectRun', function() {
        phTrack('he_request_success', { service_name: config.serviceName, step: 'evina_loaded' });
    });
}
</script>
@endsection