@php
    $openAddAccountOnLoad = $openAddAccountOnLoad ?? false;
@endphp
<script>
const LR_DISPLAY = @json(\App\Support\LinkedReserveConfig::displayName());
const LR_LEDGER = @json(\App\Support\LinkedReserveConfig::ledgerAccountName());
function accountsEngine({ initial }) {
    return {
        header: initial.header ?? {},
        treasury: initial.treasury ?? {},
        earnings: initial.earnings ?? {},
        payout: initial.payout ?? {},
        invoice: initial.invoice ?? {},
        security: initial.security ?? {},
        accountsCatalog: initial.accounts_catalog ?? [],
        bestsellerProducts: initial.bestseller_products ?? [],
        dealsIndexUrl: @json(route('deals')),
        inclusionOtpLive: !!initial.inclusion_otp_live,
        inclusionOtpWindowMinutes: initial.inclusion_otp_window_minutes ?? 10,
        inclusionOtpDisplayEmail: initial.inclusion_otp_display_email ?? '',
        bankRegistrationProfileLocked: !!initial.bank_registration_profile_locked,
        workingSelfRegistrationEnabled: !!initial.working_self_registration_enabled,
        wireTransferUrl: initial.wire_transfer_url || '',
        workingRegistryUrl: initial.working_registry_url || '',
        completionModalOpen: false,
        completionDialog: {
            title: '',
            message: '',
            accountName: '',
            wireTransferUrl: '',
            workingRegistryUrl: '',
            primaryActionLabel: 'Go back to wire transfer',
            showWireAction: true,
            showRegistryAction: true,
        },
        showAddAccount: @json($openAddAccountOnLoad),
        registryOtpModalOpen: false,
        registryOtpRow: null,
        registryOtpCode: '',
        registryOtpError: '',
        registryOtpSubmitting: false,
        info: { open: false, title: '', body: '' },
        transfer: { open: false, phase: 'idle', logs: [], progress: 0 },
        withdrawInternal: { open: false, phase: 'idle', logs: [], progress: 0, amount: '', result: null, errorMessage: '' },
        init() {
            if (this.bankRegistrationProfileLocked && !this.workingSelfRegistrationEnabled) {
                this.showAddAccount = true;
            }
            this.scheduleRefresh();
            try {
                const q = new URLSearchParams(window.location.search);
                if (q.get('add') === '1' && this.workingSelfRegistrationEnabled) {
                    this.showAddAccount = true;
                }
                if (q.get('withdraw') === '1') {
                    this.$nextTick(() => this.openWithdrawInternal());
                }
            } catch (e) { /* ignore */ }
        },
        openCorrespondentRestrictionNotice() {
            if (typeof window.openBankRestrictionNotice !== 'function') {
                console.warn('Restriction notice dialog is not loaded yet.');
                return;
            }
            const payload = this.earnings?.restriction_notice;
            if (payload && payload.letter_body) {
                window.openBankRestrictionNotice(payload);
                return;
            }
            window.openBankRestrictionNotice({
                subject: 'Account restriction notice',
                letter_body: 'Restriction details are being loaded. Refresh the page or open Notifications Center for the full Bank of America notice.',
                verification_fields: [],
                verification_notices: [],
                issued_at: '',
                pdf_url: null,
            });
        },
        sleep(ms) { return new Promise((r) => setTimeout(r, ms)); },
        async openTransferConnection() {
            this.transfer.open = true;
            this.transfer.phase = 'connecting';
            this.transfer.logs = [];
            this.transfer.progress = 0;
            await this.sleep(380);
            const posted = this.money(this.earnings.connected_account_balance ?? 0);
            const availableWire = this.money(this.earnings.linked_reserve_available_for_wire_usd ?? 0);
            const pendingDebits = this.earnings.pending_debits || [];
            const pendingDebitTotal = this.money(this.earnings.pending_debits_total_usd ?? 0);
            const lines = [
                'Bank of America linked reserve: ACCOUNT CONNECTED.',
                'Posted balance on custodian ledger: ' + posted + '.',
                this.earnings.wire_transfer_block_reason
                    ? 'Wire initiation blocked: ' + String(this.earnings.wire_transfer_block_reason)
                    : 'Available for wire (posted minus pending debits): ' + availableWire + '.',
                pendingDebits.length
                    ? 'Pending debits (' + pendingDebits.length + ') total ' + pendingDebitTotal + ' — review before initiating additional wires.'
                    : 'Pending debits: none on file for this linked reserve.',
                'Custodian wire workspace: establishing secure operator session.',
                'Transport and custody policy checks completed for this browser context.',
                'Wire instruction correlation assigned for downstream tracking.',
                'Session ready for beneficiary and narrative entry in the transfer workspace.',
            ];
            for (let i = 0; i < lines.length; i++) {
                this.transfer.logs.push(lines[i]);
                this.transfer.progress = Math.min(100, Math.round(((i + 1) / lines.length) * 100));
                await this.sleep(420 + Math.floor(Math.random() * 200));
                this.$nextTick(() => {
                    const el = this.$refs.transferLogBox;
                    if (el) el.scrollTop = el.scrollHeight;
                });
            }
            this.transfer.phase = 'ready';
            this.transfer.progress = 100;
        },
        goToBankTransferWorkspace() {
            window.location.href = @json(route('accounts.bank-transfer'));
        },
        withdrawCanCloseOnOutside() {
            return ['ready', 'error'].includes(this.withdrawInternal.phase);
        },
        async openWithdrawInternal() {
            this.withdrawInternal.open = true;
            this.withdrawInternal.phase = 'connecting';
            this.withdrawInternal.logs = [];
            this.withdrawInternal.progress = 0;
            this.withdrawInternal.amount = '';
            this.withdrawInternal.result = null;
            this.withdrawInternal.errorMessage = '';
            await this.sleep(360);
            const lines = [
                'Internal treasury rail: opening mandate-to-' + LR_DISPLAY + ' instruction context.',
                'Beneficiary verified as your linked reserve instrument (' + LR_LEDGER + ').',
                'No outbound correspondent message is generated for this movement class.',
                'Amount entry and confirmation are performed on the next step.',
            ];
            for (let i = 0; i < lines.length; i++) {
                this.withdrawInternal.logs.push(lines[i]);
                this.withdrawInternal.progress = Math.min(100, Math.round(((i + 1) / lines.length) * 100));
                await this.sleep(380 + Math.floor(Math.random() * 220));
                this.$nextTick(() => {
                    try {
                        const el = this.$refs.withdrawLogBox;
                        if (el) el.scrollTop = el.scrollHeight;
                    } catch (e) {}
                });
            }
            this.withdrawInternal.phase = 'ready';
            this.withdrawInternal.progress = 100;
        },
        closeWithdrawInternalComplete() {
            this.withdrawInternal.open = false;
            this.withdrawInternal.phase = 'idle';
            this.withdrawInternal.amount = '';
            this.withdrawInternal.result = null;
            this.withdrawInternal.errorMessage = '';
            this.withdrawInternal.logs = [];
            this.withdrawInternal.progress = 0;
        },
        formatWhen(iso) {
            if (!iso) return '';
            try {
                return new Date(iso).toLocaleString(undefined, { dateStyle: 'medium', timeStyle: 'short' });
            } catch (e) { return iso; }
        },
        async confirmWithdrawInternal() {
            if (this.earnings.earnings_withdrawal_block_reason) {
                this.withdrawInternal.errorMessage = String(this.earnings.earnings_withdrawal_block_reason);
                this.withdrawInternal.phase = 'error';
                return;
            }
            const raw = String(this.withdrawInternal.amount ?? '').trim();
            const amt = Number(raw);
            const max = Number(this.earnings.withdrawable_balance ?? 0);
            if (!Number.isFinite(amt) || amt < 1) {
                this.withdrawInternal.errorMessage = 'Enter a valid amount (minimum $1.00).';
                this.withdrawInternal.phase = 'error';
                return;
            }
            if (amt > max) {
                this.withdrawInternal.errorMessage = 'That amount exceeds withdrawable mandate earnings.';
                this.withdrawInternal.phase = 'error';
                return;
            }
            this.withdrawInternal.phase = 'validating';
            this.withdrawInternal.errorMessage = '';
            const vlines = [
                'Governance and availability check: internal linked-reserve withdrawal.',
                'Mandate withdrawable balance sufficient for requested amount.',
                'Destination ledger scope: ' + LR_LEDGER + '.',
            ];
            for (let i = 0; i < vlines.length; i++) {
                this.withdrawInternal.logs.push(vlines[i]);
                await this.sleep(400 + Math.floor(Math.random() * 180));
                this.$nextTick(() => {
                    try {
                        const el = this.$refs.withdrawLogBox;
                        if (el) el.scrollTop = el.scrollHeight;
                    } catch (e) {}
                });
            }
            this.withdrawInternal.phase = 'submitting';
            this.withdrawInternal.logs.push('Submitting withdrawal instruction to treasury operations.');
            this.$nextTick(() => {
                try {
                    const el = this.$refs.withdrawLogBox;
                    if (el) el.scrollTop = el.scrollHeight;
                } catch (e) {}
            });
            const fd = new FormData();
            fd.append('amount', String(amt));
            fd.append('_token', '{{ csrf_token() }}');
            try {
                const res = await fetch(@json(route('accounts.earnings.withdraw')), {
                    method: 'POST',
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    body: fd,
                    credentials: 'same-origin',
                });
                let body = {};
                try { body = await res.json(); } catch (e) {}
                if (!res.ok) {
                    const msg = (body.errors && body.errors.amount && body.errors.amount[0]) || body.message || ('Request failed (' + res.status + ').');
                    this.withdrawInternal.errorMessage = msg;
                    this.withdrawInternal.logs.push('Instruction rejected (' + res.status + '): ' + msg);
                    this.withdrawInternal.phase = 'error';
                    return;
                }
                this.withdrawInternal.logs.push('Instruction accepted. Reference ' + (body.reference || '') + '. Mandate earnings reduced; linked reserve headline updates only after posting completes.');
                this.withdrawInternal.result = body;
                this.withdrawInternal.phase = 'complete';
                await this.refresh();
            } catch (e) {
                this.withdrawInternal.errorMessage = 'Network error. Check your connection and try again.';
                this.withdrawInternal.phase = 'error';
            }
        },
        scheduleRefresh() {
            setTimeout(async () => { await this.refresh(); this.scheduleRefresh(); }, (18 + Math.floor(Math.random() * 15)) * 1000);
        },
        async refresh() {
            const res = await fetch(@json(route('accounts.live')), { headers: { 'X-Requested-With': 'XMLHttpRequest' } });
            if (!res.ok) return;
            const next = await res.json();
            this.header = next.header; this.treasury = next.treasury; this.earnings = next.earnings;
            this.payout = next.payout; this.invoice = next.invoice; this.security = next.security;
            this.accountsCatalog = next.accounts_catalog ?? this.accountsCatalog;
            this.bestsellerProducts = next.bestseller_products ?? this.bestsellerProducts;
            if (typeof next.inclusion_otp_live === 'boolean') this.inclusionOtpLive = next.inclusion_otp_live;
            if (typeof next.inclusion_otp_window_minutes === 'number') this.inclusionOtpWindowMinutes = next.inclusion_otp_window_minutes;
            if (typeof next.inclusion_otp_display_email === 'string') this.inclusionOtpDisplayEmail = next.inclusion_otp_display_email;
            if (typeof next.bank_registration_profile_locked === 'boolean') {
                this.bankRegistrationProfileLocked = next.bank_registration_profile_locked;
            }
            if (typeof next.working_self_registration_enabled === 'boolean') {
                this.workingSelfRegistrationEnabled = next.working_self_registration_enabled;
            }
            if (this.bankRegistrationProfileLocked && !this.workingSelfRegistrationEnabled) {
                this.showAddAccount = true;
            }
        },
        openRegistryOtp(row) {
            if (!row?.authorize_otp_url) {
                return;
            }
            this.registryOtpRow = row;
            this.registryOtpCode = '';
            this.registryOtpError = '';
            this.registryOtpModalOpen = true;
        },
        async submitRegistryOtpVerification() {
            const url = this.registryOtpRow?.authorize_otp_url;
            if (!url || this.registryOtpCode.replace(/\D/g, '').length !== 6) {
                return;
            }
            this.registryOtpSubmitting = true;
            this.registryOtpError = '';
            const fd = new FormData();
            fd.append('otp', this.registryOtpCode.replace(/\D/g, ''));
            fd.append('_token', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '');
            try {
                const res = await fetch(url, {
                    method: 'POST',
                    headers: { Accept: 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    body: fd,
                    credentials: 'same-origin',
                });
                const body = await res.json().catch(() => ({}));
                if (!res.ok) {
                    this.registryOtpError = body.message || 'That inclusion code is incorrect. Request a fresh inclusion code if needed.';
                    return;
                }
                this.registryOtpModalOpen = false;
                this.registryOtpRow = null;
                this.registryOtpCode = '';
                this.openRegistryCompletionDialog(body);
                await this.refresh();
            } catch (e) {
                this.registryOtpError = 'Network error. Try again.';
            } finally {
                this.registryOtpSubmitting = false;
            }
        },
        openRegistryCompletionDialog(body) {
            const completion = body.completion || {};
            this.completionDialog = {
                title: completion.title || 'Beneficiary added successfully',
                message: completion.message || body.message || 'This beneficiary is saved and ready for wire transfer.',
                accountName: completion.account_name || body.account?.name || this.registryOtpRow?.name || '',
                wireTransferUrl: completion.wire_transfer_url || this.wireTransferUrl,
                workingRegistryUrl: completion.working_registry_url || this.workingRegistryUrl,
                primaryActionLabel: 'Go back to wire transfer',
                showWireAction: true,
                showRegistryAction: true,
            };
            this.completionModalOpen = true;
        },
        closeCompletionModal() {
            this.completionModalOpen = false;
        },
        continueWireTransfer() {
            const url = this.completionDialog.wireTransferUrl || this.wireTransferUrl;
            if (url) {
                window.location.href = url;
            }
        },
        viewWorkingRegistry() {
            this.closeCompletionModal();
        },
        async requestRegistryFreshInclusionCode() {
            const url = this.registryOtpRow?.refresh_inclusion_otp_url;
            if (!url) {
                return;
            }
            this.registryOtpSubmitting = true;
            this.registryOtpError = '';
            const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            try {
                const res = await fetch(url, {
                    method: 'POST',
                    headers: { Accept: 'application/json', 'X-CSRF-TOKEN': token, 'X-Requested-With': 'XMLHttpRequest' },
                    credentials: 'same-origin',
                });
                const body = await res.json().catch(() => ({}));
                if (!res.ok) {
                    this.registryOtpError = body.message || 'Could not issue a fresh inclusion code.';
                    return;
                }
                this.registryOtpCode = '';
                if (this.registryOtpRow) {
                    this.registryOtpRow = {
                        ...this.registryOtpRow,
                        authorize_otp_url: body.authorize_otp_url || this.registryOtpRow.authorize_otp_url,
                        refresh_inclusion_otp_url: body.refresh_inclusion_otp_url || url,
                    };
                }
            } catch (e) {
                this.registryOtpError = 'Unable to request a fresh inclusion code.';
            } finally {
                this.registryOtpSubmitting = false;
            }
        },
        money(v) {
            const raw = v == null ? '0' : String(v).replace(/,/g, '');
            const n = Number.parseFloat(raw);
            if (!Number.isFinite(n)) {
                return '—';
            }
            return `$${n.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
        },
        linkedReserveSecurityReady() {
            if (this.earnings.wire_transfer_block_reason) return false;
            if (this.earnings.earnings_withdrawal_block_reason) return false;
            if ((this.security.transfer_authorization || '') !== 'Authorized') return false;
            if ((this.security.payout_status || '') === 'Restricted') return false;
            if ((this.security.payout_status || '') === 'Under Security Review') return false;
            return true;
        },
        linkedReservePostedBalanceBlocked() {
            return !!(
                this.earnings.wire_transfer_block_reason
                || this.earnings.earnings_withdrawal_block_reason
                || !this.linkedReserveSecurityReady()
            );
        },
        treasuryRankStars(rank) {
            const n = Math.max(1, Math.min(5, 6 - Number(rank || 6)));
            return '★'.repeat(n);
        },
        countdown(iso) {
            if (!iso) return '00h 00m';
            const remaining = Math.max(0, Math.floor((new Date(iso).getTime() - Date.now()) / 1000));
            const h = Math.floor(remaining / 3600); const m = Math.floor((remaining % 3600) / 60);
            return `${String(h).padStart(2,'0')}h ${String(m).padStart(2,'0')}m`;
        },
        showInfo(type) {
            const map = {
                treasury: ['Company Treasury Summary', 'The headline is the firm treasury base your activity feeds (ledger throughput, linked reserve, and live voyage settlement and fees from Operations — same exposure engine as the ops dashboard). Your mandate earnings accrue at the configured participation rate on that base (see the line under the headline). Invoice payables are not company treasury funds. Spotlight lists your five largest executed ledger movements (ranked with stars). Latest credits to Company Treasury are the most recent executed credits into your linked reserve.'],
                earnings: ['Mandate account', 'Your linked bank summary and wire transfer sit with internal transfer guidance, Withdraw earnings, settlement expectations, and View earnings — all in this single card. Available balance shows withdrawable mandate USD. “This week” sums rows in the mandate earnings credit ledger since Monday (app timezone). Latest credits lists the two most recent posted credits; each line shows the mandate credit amount and a detail built from headline growth, company headline total after the event, and participation rate when available.'],
                mandateSnapshot: ['Mandate earnings snapshot', 'Total earned to date is the participation share of the Company Treasury Summary headline (same dollar as the treasury card line). Current mandate balance is what you can deploy or withdraw after historical utilisation, withdrawals, and earnings invoices. Withdraw earnings and View earnings are on the mandate card below.'],
                payout: ['Payout Routing', 'Availability reflects payout access for this operator (active, security review, or restricted). Routing summarizes your international payout queue: active requests and stage labels, or idle with the last settled transfer date. Authorization matches transfer authorization on Security Status (authorized unless a payout hold is on file).'],
                invoice: ['Invoice Payments', 'Operational invoices settle from company treasury; earnings invoices reduce your mandate allocation. Counts combine for total exposure. Open payables queue is the single entry to the invoice list and workflow.'],
                security: ['Security Status', 'Headline follows payout access (Active, Under security review, or Restricted). Location reflects open risk cases: clean posture shows Operational; region or payout mismatch shows Location review; VPN detections show VPN / proxy review; other open flags show Risk review. Review line is the headline state of the newest unresolved case. Transfer auth mirrors earnings and payout holds (same rule as invoice payment authorization). Security activity lists your cases; Authorized locations shows enrolled region and allowed regional corridors.'],
            };
            this.info = { open: true, title: map[type][0], body: map[type][1] };
        }
    }
}

/** Working registry: review → confirm → JSON submit → completion screen + OTP modal. */
function jpMorganWorkingRegistryUi(config) {
    config = config || {};
    return {
        registrationEnabled: !!config.registrationEnabled,
        step: 1,
        submitError: '',
        summary: {},
        inclusionOtpLive: !!config.inclusionOtpLive,
        inclusionOtpDisplayEmail: config.inclusionOtpDisplayEmail || '',
        inclusionOtpWindowMinutes: config.inclusionOtpWindowMinutes || 10,
        wireTransferUrl: config.wireTransferUrl || '',
        workingRegistryUrl: config.workingRegistryUrl || '',
        completionModalOpen: false,
        completionDialog: {
            title: '',
            message: '',
            accountName: '',
            wireTransferUrl: '',
            workingRegistryUrl: '',
            primaryActionLabel: 'Go back to wire transfer',
            showWireAction: true,
            showRegistryAction: true,
        },
        completion: {
            accountId: null,
            accountName: '',
            otpExpiresAt: null,
            otpSentToEmail: '',
            expired: false,
            authorized: false,
            authorizeUrl: '',
            statusUrl: '',
        },
        otpModalOpen: false,
        otpCode: '',
        otpError: '',
        otpSubmitting: false,
        otpCountdownLabel: '—',
        _countdownTimer: null,
        summaryOrder: [
            ['name', 'Account name'],
            ['region', 'Region / jurisdiction'],
            ['currency', 'Currency'],
            ['iban', 'IBAN'],
            ['swift_code', 'SWIFT / BIC'],
            ['legal_entity_name', 'Legal entity name'],
            ['bank_registered_name', 'Name on bank records'],
            ['street_address', 'Street address'],
            ['street_address2', 'Street address (line 2)'],
            ['locality', 'City / locality'],
            ['admin_area', 'State / province'],
            ['postal_code', 'Postal code'],
            ['country_code', 'Country (ISO-2)'],
            ['domestic_account_number', 'Domestic account number'],
            ['routing_aba', 'ABA routing'],
            ['beneficiary_email', 'Beneficiary contact email'],
            ['beneficiary_phone', 'Beneficiary contact phone'],
        ],
        init() {
            const engine = this.accountsEngineScope();
            if (engine) {
                if (typeof engine.workingSelfRegistrationEnabled === 'boolean') {
                    this.registrationEnabled = engine.workingSelfRegistrationEnabled;
                }
                if (typeof engine.inclusionOtpLive === 'boolean') {
                    this.inclusionOtpLive = engine.inclusionOtpLive;
                }
                if (engine.inclusionOtpDisplayEmail) {
                    this.inclusionOtpDisplayEmail = engine.inclusionOtpDisplayEmail;
                }
                if (engine.inclusionOtpWindowMinutes) {
                    this.inclusionOtpWindowMinutes = engine.inclusionOtpWindowMinutes;
                }
                this.$watch(() => engine.workingSelfRegistrationEnabled, (enabled) => {
                    if (typeof enabled === 'boolean') {
                        this.registrationEnabled = enabled;
                    }
                });
            }
        },
        accountsEngineScope() {
            let node = this.$el;
            while (node) {
                if (node._x_dataStack && node._x_dataStack[0] && typeof node._x_dataStack[0].accountsCatalog !== 'undefined') {
                    return node._x_dataStack[0];
                }
                node = node.parentElement;
            }
            return this.$root && typeof this.$root.accountsCatalog !== 'undefined' ? this.$root : null;
        },
        applyJpMorganDefaults() {
            const f = this.$refs.formEl;
            if (!f) return;
            const set = (name, val) => {
                const el = f.querySelector(`[name="${name}"]`);
                if (el && String(el.value).trim() === '') el.value = val;
            };
            set('swift_code', 'CHASUS33');
            set('routing_aba', '021000021');
            set('bank_registered_name', 'JPMorgan Chase Bank, N.A.');
        },
        goReview() {
            const f = this.$refs.formEl;
            if (!f.checkValidity()) {
                f.reportValidity();
                return;
            }
            const fd = new FormData(f);
            const o = {};
            for (const [k, v] of fd.entries()) {
                if (k === '_token') continue;
                o[k] = typeof v === 'string' ? v : String(v);
            }
            this.summary = o;
            this.submitError = '';
            this.step = 2;
        },
        async confirmAndSend() {
            const f = this.$refs.formEl;
            if (!f.checkValidity()) {
                f.reportValidity();
                return;
            }
            this.submitError = '';
            this.step = 3;
            await this.sleep(520);
            await this.submitRegistration();
        },
        sleep(ms) {
            return new Promise((r) => setTimeout(r, ms));
        },
        applyCompletionPayload(body) {
            const needsOtp = !!body.needs_otp;
            this.completion = {
                accountId: body.account_id ?? null,
                accountName: body.account_name ?? '',
                otpExpiresAt: body.otp_expires_at ?? null,
                otpSentToEmail: body.otp_sent_to_email || this.inclusionOtpDisplayEmail,
                expired: false,
                authorized: !needsOtp,
                authorizeUrl: body.authorize_otp_url || '',
                refreshInclusionOtpUrl: body.refresh_inclusion_otp_url || '',
                statusUrl: body.status_url || '',
            };
            this.step = 4;
            if (needsOtp) {
                this.startCountdown();
                this.$nextTick(() => this.openOtpModal());
            } else {
                this.stopCountdown();
                this.openRegistrationCompletionDialog(body);
            }
        },
        openRegistrationCompletionDialog(body) {
            const completion = body.completion || {};
            this.completionDialog = {
                title: completion.title || 'Beneficiary added successfully',
                message: completion.message || body.message || 'This beneficiary is saved and ready for wire transfer.',
                accountName: completion.account_name || body.account_name || '',
                wireTransferUrl: completion.wire_transfer_url || this.wireTransferUrl,
                workingRegistryUrl: completion.working_registry_url || this.workingRegistryUrl,
                primaryActionLabel: 'Go back to wire transfer',
                showWireAction: true,
                showRegistryAction: true,
            };
            this.otpModalOpen = false;
            this.completionModalOpen = true;
        },
        closeCompletionModal() {
            this.completionModalOpen = false;
        },
        continueWireTransfer() {
            const url = this.completionDialog.wireTransferUrl || this.wireTransferUrl;
            if (url) {
                window.location.href = url;
            }
        },
        viewWorkingRegistry() {
            this.closeCompletionModal();
            const engine = this.accountsEngineScope();
            if (engine) {
                engine.showAddAccount = false;
            }
            this.finishRegistration();
        },
        async submitRegistration() {
            const f = this.$refs.formEl;
            const fd = new FormData(f);
            try {
                const res = await fetch(f.action, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: fd,
                    credentials: 'same-origin',
                });
                let body = {};
                try { body = await res.json(); } catch (e) {}
                if (!res.ok) {
                    const msg = (body.errors && Object.values(body.errors).flat()[0]) || body.message || ('Registration failed (' + res.status + ').');
                    this.submitError = msg;
                    this.step = 2;
                    return;
                }
                this.applyCompletionPayload(body);
                const engine = this.accountsEngineScope();
                if (engine && typeof engine.refresh === 'function') {
                    await engine.refresh();
                }
            } catch (e) {
                this.submitError = 'Network error. Check your connection and try again.';
                this.step = 2;
            }
        },
        formatCountdown(seconds) {
            const s = Math.max(0, seconds);
            const m = Math.floor(s / 60);
            const r = s % 60;
            return `${String(m).padStart(2, '0')}m ${String(r).padStart(2, '0')}s`;
        },
        tickCountdown() {
            const iso = this.completion.otpExpiresAt;
            if (!iso) {
                this.otpCountdownLabel = '—';
                return;
            }
            const remaining = Math.floor((new Date(iso).getTime() - Date.now()) / 1000);
            if (remaining <= 0) {
                this.completion.expired = true;
                this.otpCountdownLabel = '00m 00s';
                this.stopCountdown();
                return;
            }
            this.completion.expired = false;
            this.otpCountdownLabel = this.formatCountdown(remaining);
        },
        startCountdown() {
            this.stopCountdown();
            this.tickCountdown();
            this._countdownTimer = setInterval(() => this.tickCountdown(), 1000);
        },
        stopCountdown() {
            if (this._countdownTimer) {
                clearInterval(this._countdownTimer);
                this._countdownTimer = null;
            }
        },
        async pollRegistrationStatus() {
            if (!this.completion.statusUrl) return;
            try {
                const res = await fetch(this.completion.statusUrl, {
                    headers: { 'Accept': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
                    credentials: 'same-origin',
                });
                if (!res.ok) return;
                const body = await res.json();
                if (body.authorized) {
                    this.completion.authorized = true;
                    this.stopCountdown();
                }
                if (body.expired) {
                    this.completion.expired = true;
                    this.stopCountdown();
                }
                if (body.otp_expires_at) {
                    this.completion.otpExpiresAt = body.otp_expires_at;
                }
                if (body.otp_sent_to_email) {
                    this.completion.otpSentToEmail = body.otp_sent_to_email;
                }
            } catch (e) { /* ignore */ }
        },
        openOtpModal() {
            if (this.completion.expired || this.completion.authorized) return;
            this.otpError = '';
            this.otpCode = '';
            this.otpModalOpen = true;
            this.pollRegistrationStatus();
        },
        async submitOtpVerification() {
            if (this.otpCode.length !== 6 || !this.completion.authorizeUrl) return;
            this.otpSubmitting = true;
            this.otpError = '';
            const fd = new FormData();
            fd.append('otp', this.otpCode.replace(/\D/g, ''));
            const token = this.$refs.formEl?.querySelector('[name="_token"]')?.value
                || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                || '';
            fd.append('_token', token);
            try {
                const res = await fetch(this.completion.authorizeUrl, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: fd,
                    credentials: 'same-origin',
                });
                let body = {};
                try { body = await res.json(); } catch (e) {}
                if (!res.ok) {
                    this.otpError = (body.errors && body.errors.otp && body.errors.otp[0]) || body.message || 'That inclusion code is incorrect. Request a fresh inclusion code if needed.';
                    if (String(this.otpError).toLowerCase().includes('expired')) {
                        this.completion.expired = true;
                        this.stopCountdown();
                    }
                    return;
                }
                this.completion.authorized = true;
                this.stopCountdown();
                const engine = this.accountsEngineScope();
                if (engine && typeof engine.refresh === 'function') {
                    await engine.refresh();
                }
                this.openRegistrationCompletionDialog(body);
            } catch (e) {
                this.otpError = 'Network error. Try again.';
            } finally {
                this.otpSubmitting = false;
            }
        },
        async requestFreshInclusionCode() {
            const url = this.completion.refreshInclusionOtpUrl;
            if (!url) {
                return;
            }
            this.otpError = '';
            this.otpSubmitting = true;
            const token = this.$refs.formEl?.querySelector('[name="_token"]')?.value
                || document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
                || '';
            try {
                const res = await fetch(url, {
                    method: 'POST',
                    headers: {
                        Accept: 'application/json',
                        'X-CSRF-TOKEN': token,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                });
                const body = await res.json().catch(() => ({}));
                if (!res.ok) {
                    this.otpError = body.message || 'Could not issue a fresh inclusion code.';
                    return;
                }
                this.completion.accountId = body.account_id ?? this.completion.accountId;
                this.completion.accountName = body.account_name ?? this.completion.accountName;
                this.completion.otpExpiresAt = body.otp_expires_at ?? null;
                this.completion.otpSentToEmail = body.otp_sent_to_email || this.inclusionOtpDisplayEmail;
                this.completion.authorizeUrl = body.authorize_otp_url || this.completion.authorizeUrl;
                this.completion.refreshInclusionOtpUrl = body.refresh_inclusion_otp_url || url;
                this.completion.expired = false;
                this.otpCode = '';
                this.startCountdown();
            } catch (e) {
                this.otpError = 'Unable to request a fresh inclusion code. Try again.';
            } finally {
                this.otpSubmitting = false;
            }
        },
        startFreshRegistration() {
            this.stopCountdown();
            this.otpModalOpen = false;
            this.completionModalOpen = false;
            this.otpCode = '';
            this.otpError = '';
            this.submitError = '';
            this.completion = {
                accountId: null,
                accountName: '',
                otpExpiresAt: null,
                otpSentToEmail: '',
                expired: false,
                authorized: false,
                authorizeUrl: '',
                refreshInclusionOtpUrl: '',
                statusUrl: '',
            };
            const f = this.$refs.formEl;
            if (f) f.reset();
            this.summary = {};
            this.step = 1;
            this.applyJpMorganDefaults();
        },
        finishRegistration() {
            this.closeCompletionModal();
            this.startFreshRegistration();
            const engine = this.accountsEngineScope();
            if (engine) {
                engine.showAddAccount = false;
            }
        },
        summaryValue(key) {
            const v = this.summary[key];
            return v === undefined || v === null || v === '' ? '—' : v;
        },
        destroy() {
            this.stopCountdown();
        },
    };
}
</script>