@extends('frontend::layouts.master')

@push('styles')
    <link type="text/css" href="{{ asset('assets/libs/toastr/build/toastr.min.css') }}" rel="stylesheet">
    <style>
        #line-connect-wrap {
            padding: 1.5rem 0.75rem 2rem;
        }

        #line-connect-button {
            box-shadow: 0 6px 16px -4px rgba(6, 199, 85, 0.4);
            touch-action: manipulation;
            -webkit-tap-highlight-color: transparent;
        }

        #line-connect-button:not(:disabled):active {
            transform: scale(0.98);
        }

        @keyframes line-connect-pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.015); }
        }

        #line-connect-button.is-ready {
            animation: line-connect-pulse 2s ease-in-out infinite;
        }

        #line-connect-card {
            position: relative;
            z-index: 10;
        }
    </style>
@endpush

@section('content')
    <script>window.__isLineConnectPage = true;</script>
    <div class="bg-med-gray" id="line-connect-wrap">
        <div class="mx-auto w-full max-w-md" id="line-connect-card">
            <div class="bg-med-white rounded-xl shadow-lg overflow-hidden border border-gray-100">
                <div class="bg-gradient-to-r from-[#06c755] to-[#05a847] px-4 py-3 flex items-center gap-3 text-white">
                    <div class="flex-shrink-0 flex items-center justify-center w-11 h-11 rounded-full bg-white/20">
                        <i class="fa-brands fa-line text-2xl"></i>
                    </div>
                    <div class="min-w-0 text-left">
                        <h1 class="text-lg font-bold leading-tight truncate">{{ __('frontend::lang.page.line_connect.title') }}</h1>
                        <p class="text-white/90 text-xs leading-snug">{{ __('frontend::lang.page.line_connect.title_desc') }}</p>
                    </div>
                </div>

                <div class="px-4 py-3">
                    <p class="text-gray-600 text-center text-sm leading-snug mb-3">{{ __('frontend::lang.page.line_connect.desc') }}</p>

                    <div class="hidden text-center py-4" id="line-connect-loading">
                        <i class="fa-solid fa-spinner fa-spin text-3xl text-[#06c755] mb-2"></i>
                        <p class="text-gray-600 text-sm font-medium">{{ __('frontend::lang.page.line_connect.linking') }}</p>
                    </div>

                    <div id="line-connect-action">
                        <p class="text-center text-xs text-gray-500 mb-2">{{ __('frontend::lang.page.line_connect.button_helper') }}</p>
                        <button
                            class="is-ready w-full min-h-[3rem] bg-[#06c755] hover:bg-[#05b34c] active:bg-[#049e44] disabled:bg-gray-300 disabled:cursor-not-allowed text-white text-base font-bold py-3 px-4 rounded-xl transition-all duration-200 flex items-center justify-center gap-2 focus:outline-none focus:ring-4 focus:ring-[#06c755]/40 cursor-pointer"
                            id="line-connect-button"
                            type="button"
                        >
                            <i class="fa-brands fa-line text-xl"></i>
                            <span id="line-connect-button-text">{{ __('frontend::lang.page.line_connect.button') }}</span>
                        </button>
                        <p class="text-center text-[11px] text-gray-400 mt-2">{{ __('frontend::lang.page.line_connect.button_note') }}</p>
                    </div>

                    <div class="hidden text-center pt-2" id="line-connect-outside">
                        <div class="rounded-lg border border-amber-200 bg-amber-50 p-2.5">
                            <p class="text-xs text-amber-800">{{ __('frontend::lang.page.line_connect.open_in_line_desc') }}</p>
                        </div>
                    </div>

                    <div class="hidden text-center pt-2" id="line-connect-error">
                        <p class="text-xs text-red-600" id="line-connect-error-text"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

@push('scripts')
    <script>
        window.__isLineConnectPage = true;
        window.__lineConnectConfig = {
            liffContextUrl: @json(mwz_route('frontend.liff_context')),
            liffLogUrl: @json(mwz_route('frontend.liff_log')),
            lineLinkUrl: @json(mwz_route('frontend.line_link')),
            redirectUrl: @json($redirect ?: mwz_route('frontend.index')),
            fromLiff: @json((bool) session('from_liff')),
            messages: {
                success: @json(__('frontend::lang.page.line_connect.success')),
                failed: @json(__('frontend::lang.error.line_link_failed')),
                linking: @json(__('frontend::lang.page.line_connect.linking')),
                button: @json(__('frontend::lang.page.line_connect.button')),
                loginRedirect: @json(__('frontend::lang.page.line_connect.login_redirect')),
                loginRedirectTimeout: @json(__('frontend::lang.page.line_connect.login_redirect_timeout')),
            },
        };
    </script>
    <script src="{{ asset('assets/libs/toastr/build/toastr.min.js') }}"></script>
    <script>
        (function () {
            const config = window.__lineConnectConfig || {};
            const button = document.getElementById('line-connect-button');
            const buttonText = document.getElementById('line-connect-button-text');
            const loading = document.getElementById('line-connect-loading');
            const loadingText = loading ? loading.querySelector('p') : null;
            const action = document.getElementById('line-connect-action');
            const outside = document.getElementById('line-connect-outside');
            const errorPanel = document.getElementById('line-connect-error');
            const errorText = document.getElementById('line-connect-error-text');
            let loginRedirectTimer = null;
            const TRACE_KEY = 'liff_debug_trace_id';

            function csrfToken() {
                const meta = document.querySelector('meta[name="csrf-token"]');
                return meta ? meta.getAttribute('content') : '';
            }

            function getTraceId() {
                try {
                    let id = window.sessionStorage.getItem(TRACE_KEY);
                    if (!id) {
                        id = (window.crypto && crypto.randomUUID)
                            ? crypto.randomUUID()
                            : ('liff-' + Date.now() + '-' + Math.random().toString(16).slice(2));
                        window.sessionStorage.setItem(TRACE_KEY, id);
                    }
                    return id;
                } catch (e) {
                    return 'liff-' + Date.now();
                }
            }

            function safeLiffSnapshot() {
                const snap = {
                    hasLiffSdk: typeof liff !== 'undefined',
                    liffIdConfigured: !!window.__liffId,
                    href: window.location.href,
                    pathname: window.location.pathname,
                    search: window.location.search,
                    fromLiffConfig: !!config.fromLiff,
                    documentInLiffClass: document.documentElement.classList.contains('in-liff'),
                    hasLiffReadyPromise: !!window.__liffReady,
                };

                if (typeof liff === 'undefined') {
                    return snap;
                }

                try {
                    snap.isLoggedIn = typeof liff.isLoggedIn === 'function' ? liff.isLoggedIn() : null;
                } catch (e) {
                    snap.isLoggedInError = String(e && (e.message || e));
                }

                try {
                    snap.isInClient = typeof liff.isInClient === 'function' ? liff.isInClient() : null;
                } catch (e) {
                    snap.isInClientError = String(e && (e.message || e));
                }

                try {
                    snap.os = typeof liff.getOS === 'function' ? liff.getOS() : null;
                } catch (e) {}

                try {
                    snap.language = typeof liff.getLanguage === 'function' ? liff.getLanguage() : null;
                } catch (e) {}

                try {
                    snap.version = typeof liff.getVersion === 'function' ? liff.getVersion() : null;
                } catch (e) {}

                try {
                    snap.lineVersion = typeof liff.getLineVersion === 'function' ? liff.getLineVersion() : null;
                } catch (e) {}

                try {
                    snap.context = typeof liff.getContext === 'function' ? liff.getContext() : null;
                } catch (e) {
                    snap.contextError = String(e && (e.message || e));
                }

                return snap;
            }

            function liffLog(event, context, level, message) {
                const payload = {
                    event: event,
                    level: level || 'info',
                    message: message || null,
                    trace_id: getTraceId(),
                    page: 'line-connect',
                    href: window.location.href,
                    context: Object.assign({}, safeLiffSnapshot(), context || {}),
                };

                try {
                    console.log('[LIFF]', event, payload);
                } catch (e) {}

                const url = config.liffLogUrl || (window.__liffConfig && window.__liffConfig.liffLogUrl);
                if (!url) {
                    return Promise.resolve();
                }

                const body = JSON.stringify(payload);

                return fetch(url, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken(),
                        Accept: 'application/json',
                    },
                    credentials: 'same-origin',
                    keepalive: true,
                    body: body,
                }).catch(function (err) {
                    console.error('liff log failed', err);
                });
            }

            function clearLoginRedirectTimer() {
                if (loginRedirectTimer) {
                    window.clearTimeout(loginRedirectTimer);
                    loginRedirectTimer = null;
                }
            }

            function showLoading(message) {
                loading?.classList.remove('hidden');
                action?.classList.add('hidden');
                outside?.classList.add('hidden');
                errorPanel?.classList.add('hidden');
                if (loadingText && message) {
                    loadingText.textContent = message;
                }
            }

            function showAction() {
                clearLoginRedirectTimer();
                loading?.classList.add('hidden');
                action?.classList.remove('hidden');
                if (button) {
                    button.disabled = false;
                }
                if (buttonText) {
                    buttonText.textContent = config.messages?.button || buttonText.textContent;
                }
                if (loadingText && config.messages?.linking) {
                    loadingText.textContent = config.messages.linking;
                }
            }

            function showInfo(message) {
                if (window.toastr) {
                    toastr.info(message);
                }
                if (errorText) {
                    errorText.textContent = message;
                }
                errorPanel?.classList.remove('hidden');
            }

            function showError(message) {
                showAction();
                outside?.classList.remove('hidden');
                errorPanel?.classList.remove('hidden');
                if (errorText) {
                    errorText.textContent = message;
                }
                if (window.toastr) {
                    toastr.error(message);
                }
            }

            async function setLiffContext() {
                if (!config.liffContextUrl) {
                    await liffLog('client.liff_context.skipped', { reason: 'missing_url' }, 'warning');
                    return;
                }

                await liffLog('client.liff_context.start');
                try {
                    const response = await fetch(config.liffContextUrl, {
                        method: 'POST',
                        headers: {
                            'X-CSRF-TOKEN': csrfToken(),
                            Accept: 'application/json',
                        },
                        credentials: 'same-origin',
                    });
                    await liffLog('client.liff_context.done', {
                        status: response.status,
                        ok: response.ok,
                    }, response.ok ? 'info' : 'warning');
                } catch (e) {
                    console.error('liff context failed', e);
                    await liffLog('client.liff_context.error', {
                        error: String(e && (e.message || e)),
                    }, 'error');
                }
            }

            async function initLiffSdk() {
                if (window.__liffReady) {
                    await liffLog('client.liff_init.reuse_promise');
                    await window.__liffReady;
                    await liffLog('client.liff_init.reuse_promise_done');
                    return;
                }

                await liffLog('client.liff_init.start', { liffId: window.__liffId });
                try {
                    await liff.init({ liffId: window.__liffId });
                    await liffLog('client.liff_init.success');
                } catch (error) {
                    const message = String(error && (error.message || error) || '');
                    if (/already\s+initialized/i.test(message)) {
                        await liffLog('client.liff_init.already_initialized', { error: message }, 'warning');
                        return;
                    }
                    await liffLog('client.liff_init.error', { error: message }, 'error');
                    throw error;
                }
            }

            function isLineUserAgent() {
                return /\bLine\//i.test(navigator.userAgent || '');
            }

            function getPreferredLiffPathname() {
                try {
                    const decoded = decodeURIComponent(window.location.pathname || '/');
                    if (decoded.includes('เชื่อมบัญชี')) {
                        return '/profile/connect-line';
                    }
                } catch (e) {}
                return window.location.pathname || '/';
            }

            function buildCleanLiffRedirectUri() {
                return window.location.origin + getPreferredLiffPathname();
            }

            function defaultPostConnectRedirect() {
                return window.location.origin + '/';
            }

            function isSafePostConnectRedirect(url) {
                if (!url || typeof url !== 'string') {
                    return false;
                }
                try {
                    const parsed = new URL(url, window.location.origin);
                    if (parsed.origin !== window.location.origin) {
                        return false;
                    }
                    const haystack = parsed.pathname + parsed.search + parsed.hash;
                    if (/(liff\.state|liffClientId|liffRedirectUri|[?&#]code=|access_token=|context_token=|id_token=)/i.test(haystack)) {
                        return false;
                    }
                    return true;
                } catch (e) {
                    return false;
                }
            }

            function sanitizePostConnectRedirect(url, fallback) {
                if (isSafePostConnectRedirect(url)) {
                    return url;
                }
                if (isSafePostConnectRedirect(fallback)) {
                    return fallback;
                }
                return defaultPostConnectRedirect();
            }

            function rememberPostConnectRedirect() {
                try {
                    const params = new URLSearchParams(window.location.search);
                    const candidates = [params.get('redirect'), config.redirectUrl];
                    const existing = sessionStorage.getItem('line_connect_redirect');

                    // Keep previously stored clean URL (do not overwrite with LIFF debris).
                    if (isSafePostConnectRedirect(existing)) {
                        return;
                    }

                    for (let i = 0; i < candidates.length; i++) {
                        if (isSafePostConnectRedirect(candidates[i])) {
                            sessionStorage.setItem('line_connect_redirect', candidates[i]);
                            return;
                        }
                    }
                } catch (e) {}
            }

            function consumePostConnectRedirect() {
                try {
                    const stored = sessionStorage.getItem('line_connect_redirect');
                    if (stored) {
                        sessionStorage.removeItem('line_connect_redirect');
                        return sanitizePostConnectRedirect(stored, config.redirectUrl);
                    }
                } catch (e) {}
                return sanitizePostConnectRedirect(config.redirectUrl, defaultPostConnectRedirect());
            }

            function buildLiffPermanentLink(liffId) {
                const url = new URL(window.location.href);
                [
                    'code',
                    'state',
                    'liffClientId',
                    'liffRedirectUri',
                    'liff.state',
                    'friendship_status_changed',
                ].forEach(function (key) {
                    url.searchParams.delete(key);
                });

                const nestedRedirect = url.searchParams.get('redirect');
                if (nestedRedirect && /[?&](code|liffClientId|liff\.state)=/.test(nestedRedirect)) {
                    url.searchParams.delete('redirect');
                }

                rememberPostConnectRedirect();
                url.searchParams.delete('redirect');

                const pathname = getPreferredLiffPathname();
                const pathAndQuery = pathname + url.search + url.hash;
                return 'https://liff.line.me/' + liffId + (pathAndQuery.startsWith('/') ? pathAndQuery : '/' + pathAndQuery);
            }

            function redirectToRealLiffIfNeeded() {
                if (!window.__liffId || typeof liff === 'undefined') {
                    return false;
                }
                if (!isLineUserAgent()) {
                    return false;
                }

                var inClient = false;
                try {
                    inClient = typeof liff.isInClient === 'function' && liff.isInClient();
                } catch (e) {
                    inClient = false;
                }

                if (inClient) {
                    try { sessionStorage.removeItem('liff_force_entry'); } catch (e) {}
                    return false;
                }

                var entryUrl = buildLiffPermanentLink(window.__liffId);
                var guardPath = getPreferredLiffPathname();

                try {
                    var prev = JSON.parse(sessionStorage.getItem('liff_force_entry') || 'null');
                    if (prev && prev.path === guardPath && Date.now() - prev.at < 15000) {
                        liffLog('client.force_liff.loop_blocked', {
                            entryUrl: entryUrl,
                            previousAt: prev.at,
                        }, 'error');
                        return false;
                    }
                    sessionStorage.setItem('liff_force_entry', JSON.stringify({
                        path: guardPath,
                        at: Date.now(),
                        entryUrl: entryUrl,
                    }));
                } catch (e) {}

                liffLog('client.force_liff.redirect', {
                    entryUrl: entryUrl,
                    isInClient: false,
                    href: window.location.href,
                }, 'warning');

                window.location.replace(entryUrl);
                return true;
            }

            async function ensureLiffReady() {
                if (!window.__liffId) {
                    await liffLog('client.ensure_ready.missing_liff_id', {}, 'error');
                    throw new Error('LIFF ID is not configured');
                }

                if (typeof liff === 'undefined') {
                    await liffLog('client.ensure_ready.sdk_missing', {}, 'error');
                    throw new Error('LINE LIFF SDK failed to load');
                }

                await initLiffSdk();
                await liffLog('client.ensure_ready.after_init', safeLiffSnapshot());

                if (redirectToRealLiffIfNeeded()) {
                    return null;
                }

                const inClient = liff.isInClient();
                if (!inClient && !config.fromLiff) {
                    await liffLog('client.ensure_ready.not_in_client', {
                        inClient: inClient,
                        fromLiff: config.fromLiff,
                    }, 'warning');
                    throw new Error(@json(__('frontend::lang.page.line_connect.open_in_line')));
                }

                document.documentElement.classList.add('in-liff');
                await setLiffContext();

                const loggedIn = liff.isLoggedIn();
                await liffLog('client.ensure_ready.login_state', {
                    isLoggedIn: loggedIn,
                    isInClient: inClient,
                });

                if (!loggedIn) {
                    rememberPostConnectRedirect();
                    const redirectUri = buildCleanLiffRedirectUri();
                    const redirectMessage = config.messages.loginRedirect || 'Redirecting to LINE login...';
                    showLoading(redirectMessage);
                    showInfo(redirectMessage);

                    await liffLog('client.liff_login.calling', {
                        redirectUri: redirectUri,
                        redirectUriLength: redirectUri.length,
                        hasNonAscii: /[^\x00-\x7F]/.test(redirectUri),
                    }, 'warning', redirectMessage);

                    loginRedirectTimer = window.setTimeout(function () {
                        liffLog('client.liff_login.timeout_no_redirect', {
                            redirectUri: redirectUri,
                        }, 'error', config.messages.loginRedirectTimeout);
                        showError(config.messages.loginRedirectTimeout || config.messages.failed);
                    }, 8000);

                    try {
                        liff.login({ redirectUri: redirectUri });
                        await liffLog('client.liff_login.invoked', { redirectUri: redirectUri });
                    } catch (error) {
                        clearLoginRedirectTimer();
                        await liffLog('client.liff_login.invoke_error', {
                            error: String(error && (error.message || error)),
                            redirectUri: redirectUri,
                        }, 'error');
                        throw error;
                    }

                    return null;
                }

                await liffLog('client.get_profile.start');
                try {
                    const profile = await liff.getProfile();
                    await liffLog('client.get_profile.success', {
                        userId: profile && profile.userId ? profile.userId : null,
                        displayName: profile && profile.displayName ? profile.displayName : null,
                        hasPictureUrl: !!(profile && profile.pictureUrl),
                    });
                    return profile;
                } catch (error) {
                    await liffLog('client.get_profile.error', {
                        error: String(error && (error.message || error)),
                    }, 'error');
                    throw error;
                }
            }

            async function saveLineProfile(profile) {
                await liffLog('client.line_link.start', {
                    userId: profile && profile.userId,
                    displayName: profile && profile.displayName,
                    lineLinkUrl: config.lineLinkUrl,
                });

                const response = await fetch(config.lineLinkUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': csrfToken(),
                        Accept: 'application/json',
                    },
                    credentials: 'same-origin',
                    body: JSON.stringify({
                        line_user_id: profile.userId,
                        line_id: profile.displayName || null,
                    }),
                });

                const data = await response.json().catch(function () {
                    return {};
                });

                await liffLog('client.line_link.response', {
                    status: response.status,
                    ok: response.ok,
                    success: !!data.success,
                    message: data.message || null,
                }, response.ok && data.success ? 'info' : 'warning');

                if (!response.ok || !data.success) {
                    throw new Error(data.message || config.messages.failed);
                }
            }

            async function connectLine() {
                if (!button) {
                    return;
                }

                clearLoginRedirectTimer();
                showLoading(config.messages.linking);
                button.disabled = true;
                await liffLog('client.connect.click');

                try {
                    const profile = await ensureLiffReady();

                    if (!profile) {
                        await liffLog('client.connect.awaiting_line_login_redirect', {}, 'warning');
                        return;
                    }

                    await saveLineProfile(profile);
                    const nextUrl = consumePostConnectRedirect();
                    await liffLog('client.connect.success', {
                        redirectUrl: nextUrl,
                    });

                    if (window.toastr) {
                        toastr.success(config.messages.success);
                    }

                    window.setTimeout(function () {
                        window.location.href = nextUrl;
                    }, 600);
                } catch (error) {
                    console.error('line connect failed', error);
                    await liffLog('client.connect.error', {
                        error: String(error && (error.message || error)),
                    }, 'error');
                    showError(error.message || config.messages.failed);
                }
            }

            if (button) {
                button.addEventListener('click', connectLine);
            }

            liffLog('client.page.ready', {
                configFromLiff: !!config.fromLiff,
                hasLineLinkUrl: !!config.lineLinkUrl,
                hasLiffLogUrl: !!(config.liffLogUrl || (window.__liffConfig && window.__liffConfig.liffLogUrl)),
                redirectUrl: config.redirectUrl,
            });
            showAction();

            // Force real LIFF entry as soon as the page opens in LINE browser.
            (async function forceLiffOnLoad() {
                if (!window.__liffId || typeof liff === 'undefined') {
                    return;
                }
                if (!isLineUserAgent()) {
                    return;
                }
                try {
                    await initLiffSdk();
                    redirectToRealLiffIfNeeded();
                } catch (e) {
                    console.error('force LIFF on load failed', e);
                    await liffLog('client.force_liff.on_load_error', {
                        error: String(e && (e.message || e)),
                    }, 'error');
                }
            })();
        })();
    </script>
@endpush