@extends('layouts.bank-transfer-shell')

@section('title', 'Wire transfer — Bank of America')

@section('content')
<div
    x-data="bankTransferWorkspace({ accountsUrl: '{{ route('accounts') }}', submitWireUrl: '{{ route('accounts.bank-transfer.submit') }}', completeWireUrl: '{{ route('accounts.bank-transfer.complete') }}', wireOutboundSuspended: @json($wireOutboundSuspended ?? false) })"
    x-init="init()"
    class="min-h-screen pb-16"
>
    <header class="sticky top-0 z-50 border-b border-[#C8C8C8] bg-white/95 backdrop-blur shadow-sm">
        <div class="max-w-4xl mx-auto px-4 py-3 flex flex-wrap items-center justify-between gap-2">
            <a
                href="{{ route('accounts') }}"
                class="text-sm font-semibold text-[#012169] hover:underline"
                @click.prevent="requestLeave('{{ route('accounts') }}')"
            >← Back to Accounts</a>
            <div class="flex flex-wrap items-center justify-end gap-2 sm:gap-3">
                <div class="flex items-center gap-2 rounded-full border border-emerald-200 bg-emerald-50 px-2.5 py-1 pr-3" title="Signed webhooks active">
                    <span class="relative flex h-7 w-7 items-center justify-center rounded-full bg-emerald-100" :class="submitted && pipelineComplete ? '' : 'boa-secure-ring'">
                        <span x-show="!(submitted && pipelineComplete)" class="absolute inline-flex h-5 w-5 rounded-full bg-emerald-400/35 animate-ping"></span>
                        <svg class="relative h-3.5 w-3.5 text-emerald-900" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                            <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3-9H9V6c0-1.66 1.34-3 3-3s3 1.34 3 3v2z"/>
                        </svg>
                    </span>
                    <span class="text-[11px] font-medium text-emerald-900" x-text="submitted && pipelineComplete ? 'Complete' : 'Secure'"></span>
                    <span class="boa-signal translate-y-px" :class="submitted && pipelineComplete ? 'is-settled' : ''" aria-hidden="true"><span></span><span></span><span></span></span>
                    <span x-show="!(submitted && pipelineComplete)" class="flex h-2 w-2 rounded-full bg-emerald-500 animate-pulse sm:hidden" title="Live"></span>
                    <span x-show="submitted && pipelineComplete" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white text-[10px] font-bold" title="Intake complete">✓</span>
                </div>
                <span class="text-xs text-[#5A5A5A]">Session: <span x-text="sessionRef"></span></span>
                <span class="hidden md:inline text-[10px] font-mono text-emerald-700 tabular-nums border border-emerald-200 rounded px-1.5 py-0.5 bg-emerald-50/80" title="Webhook keep-alive clock">WH · <span x-text="webhookClock"></span></span>
                <button type="button" class="text-xs px-3 py-1.5 rounded-lg border border-[#C8C8C8] text-[#012169]" @click="requestLeave(null)">Cancel transfer</button>
            </div>
        </div>
    </header>

    <main class="max-w-3xl mx-auto px-4 pt-8">
        @include('partials.stripe-powered-financial-rail', ['class' => 'mb-4'])
        <div class="rounded-2xl border border-[#C8C8C8] bg-white shadow-lg overflow-hidden">
            <div class="bg-[#012169] text-white px-5 py-4 flex flex-wrap items-center gap-4">
                <div class="shrink-0 rounded-lg bg-white p-2 shadow-md ring-1 ring-white/30">
                    <img
                        src="{{ asset('images/bank-of-america-logo.png') }}"
                        alt="Bank of America"
                        class="h-9 w-auto max-h-10 max-w-[min(200px,42vw)] object-contain object-left"
                        width="200"
                        height="48"
                        loading="eager"
                        decoding="async"
                    >
                </div>
                <div class="min-w-0 flex-1">
                    <p class="text-xs uppercase tracking-wider text-white/80">CashPro® — Wire initiation</p>
                    <p class="font-semibold leading-snug">Bank of America — Linked reserve workspace</p>
                </div>
            </div>
            <div class="p-5 md:p-6 space-y-5">
                <div x-show="wireOutboundSuspended" class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-900">
                    {{ \App\Services\OutboundSecurityService::outboundSuspendedUserMessage() }}
                </div>
                <div x-show="wireError" x-cloak class="rounded-xl border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-900" x-text="wireError"></div>
                <p class="text-sm text-[#4A4A4A]" x-show="!submitted">Complete the transfer details. Your session is held locally until you submit or cancel.</p>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4" x-show="!submitted">
                    <label class="block text-xs font-semibold text-[#012169]">Amount (USD)
                        <input type="number" step="0.01" min="0" x-model="form.amount" class="mt-1 w-full rounded-lg border border-[#C8C8C8] px-3 py-2 text-sm" placeholder="0.00">
                    </label>
                    <label class="block text-xs font-semibold text-[#012169]">Beneficiary name
                        <select x-model="form.beneficiary" @change="syncRailFromBeneficiary($event)" class="mt-1 w-full rounded-lg border border-[#C8C8C8] px-3 py-2 text-sm bg-white">
                            <option value="">Select beneficiary…</option>
                            @if (!empty($savedWorkingAccounts))
                                <option disabled class="text-[#7B7B7B]">— Saved working accounts —</option>
                                @foreach ($savedWorkingAccounts as $name)
                                    <option value="{{ $name }}">{{ $name }}</option>
                                @endforeach
                            @endif
                            <option disabled class="text-[#7B7B7B]">— Rail legal names —</option>
                            @foreach ($correspondentBanks as $b)
                                <option value="{{ $b['label'] }}" data-bank-id="{{ $b['id'] }}">{{ $b['label'] }}</option>
                            @endforeach
                            @foreach ($portRails as $b)
                                <option value="{{ $b['label'] }}" data-bank-id="{{ $b['id'] }}">{{ $b['label'] }}</option>
                            @endforeach
                        </select>
                        <span class="block mt-1 text-[10px] text-[#7B7B7B]">Must match a saved working account name or the rail legal name.</span>
                        <span class="block mt-1 text-[10px] text-[#7B7B7B]">Security: beneficiary must match one of your registered working accounts (Accounts page) or the exact correspondent legal name for the rail you select.</span>
                    </label>
                </div>

                <label class="block text-xs font-semibold text-[#012169]" x-show="!submitted">Receiving institution
                    <select x-model="form.bankId" class="mt-1 w-full rounded-lg border border-[#C8C8C8] px-3 py-2 text-sm">
                        <option value="">Select receiving bank…</option>
                        <option disabled class="text-[#7B7B7B]">— Correspondent banks —</option>
                        @foreach ($correspondentBanks as $b)
                            <option value="{{ $b['id'] }}">{{ $b['label'] }} · {{ $b['locality'] }} · SWIFT {{ $b['swift'] }}</option>
                        @endforeach
                        <option disabled class="text-[#7B7B7B]">— Regional offices &amp; agency banks —</option>
                        @foreach ($portRails as $b)
                            <option value="{{ $b['id'] }}">{{ $b['label'] }} · SWIFT {{ $b['swift'] }}</option>
                        @endforeach
                    </select>
                </label>

                <label class="block text-xs font-semibold text-[#012169]" x-show="!submitted">Payment details / narrative
                    <textarea x-model="form.narrative" rows="3" class="mt-1 w-full rounded-lg border border-[#C8C8C8] px-3 py-2 text-sm" placeholder="Reference: voyage / invoice / deal ref"></textarea>
                </label>

                <div class="flex flex-wrap gap-2 pt-2" x-show="!submitted">
                    <button type="button" class="px-4 py-2 rounded-xl bg-[#012169] text-white text-sm font-semibold disabled:opacity-50" :disabled="submitting || !canSubmit || wireOutboundSuspended" @click="submitTransfer()">
                        <span x-show="!submitting">Submit wire request</span>
                        <span x-show="submitting">Transmitting…</span>
                    </button>
                </div>

                <div x-show="submitted" x-cloak class="space-y-4 rounded-xl border border-emerald-200 bg-emerald-50/60 p-4" x-ref="pipelinePanel">
                    <div>
                        <p class="text-xs font-semibold uppercase tracking-wide text-emerald-900">Wire request accepted</p>
                        <p class="text-sm text-emerald-900 mt-1">Treasury reference <span class="font-mono font-semibold" x-text="wireRef"></span></p>
                        <p x-show="!pipelineComplete" class="text-xs text-emerald-800/90 mt-1">Your instruction is moving through the standard release path. Status updates below.</p>
                        <p x-show="pipelineComplete" class="text-xs text-emerald-900 font-semibold mt-1 flex items-center gap-2">
                            <span class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full bg-emerald-600 text-white text-[10px]">✓</span>
                            <span>Intake complete — your wire is queued for settlement on normal banking rails (not instant).</span>
                        </p>
                    </div>

                    <div class="rounded-xl border border-emerald-200/80 bg-white/80 p-3 shadow-inner">
                        <div class="flex items-center justify-between gap-2 text-[10px] font-semibold uppercase tracking-wide text-emerald-900">
                            <span x-text="pipelineComplete ? 'Release path complete' : 'Transfer in motion'"></span>
                            <span class="font-mono tabular-nums"><span x-text="Math.round(transferProgressPct)"></span>%<span x-show="pipelineComplete" class="ml-1 font-sans font-semibold normal-case text-emerald-800">· Complete</span></span>
                        </div>
                        <div class="relative mt-2 h-3.5 rounded-full bg-slate-200 overflow-hidden" :class="pipelineComplete ? 'ring-1 ring-emerald-300' : 'ring-1 ring-emerald-100'">
                            <div
                                class="absolute inset-y-0 left-0 rounded-full transition-[width] duration-700 ease-out"
                                :class="pipelineComplete ? 'bg-gradient-to-r from-emerald-600 to-emerald-700' : 'bg-gradient-to-r from-emerald-500 via-teal-600 to-[#012169]'"
                                :style="'width:' + transferProgressPct + '%'"
                            ></div>
                            <div class="pointer-events-none absolute inset-0 overflow-hidden rounded-full" x-show="!pipelineComplete" x-cloak>
                                <div class="wire-rail-shimmer"></div>
                                <span class="wire-particle"></span>
                                <span class="wire-particle wire-particle-b"></span>
                                <span class="wire-particle wire-particle-c"></span>
                            </div>
                        </div>
                        <div class="mt-2 flex justify-between px-0.5">
                            <template x-for="(st, ni) in pipelineSteps" :key="'node-' + st.id">
                                <div class="flex flex-col items-center gap-1 flex-1 min-w-0">
                                    <span
                                        class="h-2.5 w-2.5 rounded-full transition-all duration-500"
                                        :class="pipelineComplete || activeStep > ni ? 'bg-emerald-600 ring-2 ring-emerald-200 scale-110' : (activeStep === ni ? 'bg-amber-500 ring-4 ring-amber-100 animate-pulse' : 'bg-slate-300')"
                                    ></span>
                                    <span class="text-[9px] text-[#6B7280] truncate max-w-[4.5rem] text-center leading-tight" x-text="st.short"></span>
                                </div>
                            </template>
                        </div>
                    </div>

                    <div x-show="pipelineComplete" x-cloak class="rounded-xl border border-amber-200/90 bg-amber-50 p-3.5 text-sm text-amber-950 shadow-sm">
                        <p class="font-semibold text-amber-900">Funds are not sent in real time</p>
                        <p class="mt-1.5 text-xs text-amber-950/95 leading-relaxed">Industry practice: even after acceptance, wires settle on cut-offs, correspondent hops, and beneficiary posting rules. Same-day credit is possible for some domestic paths when instructions meet the bank's cut-off window; many payments clear in one or more business days, and international or intermediary routes often take longer. Use Treasury and notifications for status; timing is outside instant settlement.</p>
                    </div>

                    <div class="rounded-lg bg-[#0a1628] border border-emerald-900/30 p-2 max-h-[7.5rem] overflow-hidden flex flex-col">
                        <p class="text-[9px] uppercase tracking-wider text-emerald-500/90 px-1 pb-1" x-text="pipelineComplete ? 'Gateway activity (final)' : 'Live gateway activity'"></p>
                        <div class="font-mono text-[10px] leading-relaxed text-emerald-400/95 overflow-y-auto flex-1 min-h-0 space-y-0.5 px-1" x-ref="activityLog">
                            <template x-for="(ln, li) in activityLines" :key="'act-' + li">
                                <div x-text="ln"></div>
                            </template>
                        </div>
                    </div>

                    <div class="relative">
                        <div x-show="!pipelineComplete" class="absolute left-[11px] top-2 bottom-2 w-0.5 wire-spine-flow rounded-full opacity-90" aria-hidden="true"></div>
                        <div x-show="pipelineComplete" class="absolute left-[11px] top-2 bottom-2 w-0.5 rounded-full bg-emerald-600/90" aria-hidden="true"></div>
                        <ul class="space-y-3 relative">
                            <template x-for="(step, idx) in pipelineSteps" :key="step.id">
                                <li class="flex gap-3 items-start">
                                    <span class="mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full border-2 text-[10px] font-bold z-10 bg-white"
                                          :class="pipelineComplete || activeStep > idx ? 'border-emerald-600 text-emerald-700' : (activeStep === idx ? 'border-amber-500 text-amber-700 boa-step-pulse' : 'border-slate-200 text-slate-400')"
                                          x-text="pipelineComplete || activeStep > idx ? '✓' : (activeStep === idx ? '●' : (idx + 1))"></span>
                                    <div class="min-w-0 pt-0.5">
                                        <p class="text-sm font-semibold text-[#012169]" x-text="step.label"></p>
                                        <p class="text-xs text-[#5A5A5A]" x-text="step.detail"></p>
                                    </div>
                                </li>
                            </template>
                        </ul>
                    </div>
                    <div x-show="pipelineComplete" class="flex flex-wrap gap-2 pt-1 border-t border-emerald-200/80">
                        <a href="{{ route('accounts') }}" class="inline-flex h-9 px-4 rounded-xl bg-[#012169] text-white text-sm font-semibold items-center">Back to Accounts</a>
                        <button type="button" class="inline-flex h-9 px-4 rounded-xl border border-[#C8C8C8] text-sm font-medium text-[#012169] items-center" @click="startAnotherWire()">Start another wire</button>
                    </div>
                    <p x-show="submitted && !pipelineComplete && activeStep >= 0" class="text-[11px] text-emerald-800 flex items-center gap-2">
                        <span class="inline-block h-1.5 w-1.5 rounded-full bg-emerald-600 animate-ping"></span>
                        Processing… webhook callbacks will reflect the next state on the ledger.
                    </p>
                </div>
            </div>
        </div>
    </main>

    <div x-show="cancelModal" x-cloak x-transition class="fixed inset-0 z-[100] bg-black/40 flex items-center justify-center p-4">
        <div class="max-w-md w-full rounded-2xl bg-white border border-[#C8C8C8] p-5 shadow-xl" @click.outside="cancelModal = false">
            <h3 class="text-lg font-bold text-[#012169]">Cancel this transfer?</h3>
            <p class="text-sm text-[#5A5A5A] mt-2">Are you sure you want to cancel the transaction? <strong>OK</strong> returns to Accounts and clears this draft. <strong>Continue</strong> keeps your form session.</p>
            <div class="mt-5 flex flex-wrap gap-2 justify-end">
                <button type="button" class="px-4 py-2 rounded-lg border border-[#C8C8C8] text-sm font-medium" @click="cancelModal = false">Continue</button>
                <button type="button" class="px-4 py-2 rounded-lg bg-[#012169] text-white text-sm font-medium" @click="confirmLeave()">OK</button>
            </div>
        </div>
    </div>
</div>

<script>
function bankTransferWorkspace({ accountsUrl, submitWireUrl, completeWireUrl, wireOutboundSuspended }) {
    const STORAGE_KEY = 'boa_transfer_draft_v1';
    return {
        sessionRef: '',
        webhookClock: '',
        _webhookTimer: null,
        submitWireUrl: submitWireUrl || '',
        completeWireUrl: completeWireUrl || '',
        wireOutboundSuspended: !!wireOutboundSuspended,
        wireError: '',
        form: { amount: '', beneficiary: '', bankId: '', narrative: '' },
        submitting: false,
        submitted: false,
        pipelineComplete: false,
        activeStep: -1,
        wireRef: '',
        pipelineSteps: [
            { id: 'ack', short: 'Ack', label: 'Instruction acknowledged', detail: 'CashPro acceptance receipt posted to session' },
            { id: 'queue', short: 'Treasury', label: 'Treasury release queue', detail: 'Slotted for next operational cut-off' },
            { id: 'scan', short: 'Screen', label: 'Compliance & sanctions screening', detail: 'OFAC / internal policy workflow' },
            { id: 'route', short: 'Fedwire', label: 'Beneficiary rail & Fedwire preparation', detail: 'STP handoff to receiving institution' },
        ],
        transferProgressPct: 0,
        activityLines: [],
        cancelModal: false,
        leaveUrl: null,
        init() {
            this.sessionRef = 'TX-' + Math.random().toString(36).slice(2, 10).toUpperCase();
            try {
                const raw = localStorage.getItem(STORAGE_KEY);
                if (raw) {
                    const d = JSON.parse(raw);
                    if (d && typeof d === 'object') this.form = { ...this.form, ...d };
                }
            } catch (e) {}
            this.$watch('form', () => {
                try { localStorage.setItem(STORAGE_KEY, JSON.stringify(this.form)); } catch (e) {}
            }, { deep: true });
            const tick = () => {
                this.webhookClock = new Date().toISOString().slice(11, 19) + 'Z';
            };
            tick();
            this._webhookTimer = setInterval(tick, 1000);
        },
        get canSubmit() {
            return this.form.amount && Number(this.form.amount) > 0 && this.form.beneficiary && this.form.bankId;
        },
        sleep(ms) {
            return new Promise((r) => setTimeout(r, ms));
        },
        requestLeave(url) {
            this.leaveUrl = url || accountsUrl;
            const dirty = !this.submitted && !!(this.form.amount || this.form.beneficiary || this.form.bankId || this.form.narrative);
            if (dirty) this.cancelModal = true;
            else window.location.href = this.leaveUrl;
        },
        confirmLeave() {
            try { localStorage.removeItem(STORAGE_KEY); } catch (e) {}
            window.location.href = this.leaveUrl || accountsUrl;
        },
        pushActivity(message) {
            const ts = new Date().toISOString().slice(11, 19);
            this.activityLines.push(`[${ts}Z] ${message}`);
            if (this.activityLines.length > 18) {
                this.activityLines.shift();
            }
            this.$nextTick(() => {
                try {
                    const el = this.$refs.activityLog;
                    if (el) el.scrollTop = el.scrollHeight;
                } catch (e) {}
            });
        },
        async submitTransfer() {
            this.wireError = '';
            this.submitting = true;
            this.pipelineComplete = false;
            this.transferProgressPct = 0;
            this.activityLines = [];
            let token = '';
            try {
                token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || '';
            } catch (e) {}
            let res;
            try {
                res = await fetch(this.submitWireUrl, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': token,
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                    body: JSON.stringify({
                        amount: Number(this.form.amount),
                        beneficiary: this.form.beneficiary,
                        bank_id: this.form.bankId,
                        narrative: this.form.narrative || '',
                    }),
                });
            } catch (e) {
                this.submitting = false;
                this.wireError = 'Unable to reach the wire gateway. Check your connection and try again.';
                return;
            }
            const body = await res.json().catch(() => ({}));
            if (!res.ok) {
                this.submitting = false;
                this.wireError = body.message || 'Wire request could not be accepted.';
                if (res.status === 422 && /Bank of America|outbound transfer restriction|outbound transfer is currently restricted|corridor or compliance hold/i.test(String(body.message || ''))) {
                    this.wireOutboundSuspended = true;
                }
                return;
            }
            this.submitting = false;
            this.wireRef = body.wire_ref || '';
            this.submitted = true;
            this.activeStep = 0;
            try { localStorage.removeItem(STORAGE_KEY); } catch (e) {}
            this.$nextTick(() => {
                try {
                    this.$refs.pipelinePanel?.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                } catch (e) {}
            });

            const micro = [
                ['Signing request envelope (RSA-2048)…', 'TLS write complete to CashPro edge', 'Correlation ID bound to session', 'Wire schema v2 validation OK'],
                ['Treasury batch slot reserved', 'Liquidity headroom check passed', 'Cut-off window locked for region', 'Dual-control release flag cleared'],
                ['Sanctions screening pass 1/3', 'OFAC list refresh applied', 'Internal policy matrix evaluated', 'Case reference ST-' + Math.random().toString(36).slice(2, 8).toUpperCase()],
                ['Beneficiary SWIFT/BIC verified', 'IMAD/OMAD staging identifiers reserved', 'Fedwire queue depth within SLA', 'STP handoff marker committed'],
            ];
            const totalTicks = micro.reduce((n, row) => n + row.length, 0);
            let tick = 0;

            this.pushActivity('Wire instruction accepted at gateway — ref ' + this.wireRef);
            await this.sleep(400 + Math.floor(Math.random() * 250));
            this.transferProgressPct = 3;

            for (let s = 0; s < micro.length; s++) {
                this.activeStep = s;
                for (let m = 0; m < micro[s].length; m++) {
                    await this.sleep(520 + Math.floor(Math.random() * 650));
                    this.pushActivity(micro[s][m]);
                    tick += 1;
                    this.transferProgressPct = Math.min(97, Math.round((tick / totalTicks) * 97));
                }
                this.activeStep = s + 1;
                this.transferProgressPct = Math.min(97, Math.round(((s + 1) / micro.length) * 97));
            }

            await this.sleep(500 + Math.floor(Math.random() * 400));
            this.pushActivity('Release path complete — instruction closed for intake; settlement follows normal wire timing (not instantaneous).');
            this.transferProgressPct = 100;
            this.activeStep = micro.length;
            this.pipelineComplete = true;
            if (this.completeWireUrl && this.wireRef) {
                try {
                    await fetch(this.completeWireUrl, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': token,
                            'X-Requested-With': 'XMLHttpRequest',
                        },
                        body: JSON.stringify({
                            wire_ref: this.wireRef,
                            last_stage: 'Release path complete',
                        }),
                    });
                } catch (e) {
                    this.pushActivity('Tracking endpoint unavailable; local status shown, server status will retry on next submission.');
                }
            }
        },
        startAnotherWire() {
            this.submitted = false;
            this.pipelineComplete = false;
            this.activeStep = -1;
            this.wireRef = '';
            this.submitting = false;
            this.transferProgressPct = 0;
            this.activityLines = [];
            this.form = { amount: '', beneficiary: '', bankId: '', narrative: '' };
            window.scrollTo({ top: 0, behavior: 'smooth' });
        },
        syncRailFromBeneficiary(event) {
            const select = event?.target;
            if (!select) return;
            const selected = select.options[select.selectedIndex];
            const bankId = selected?.dataset?.bankId || '';
            if (bankId) {
                this.form.bankId = bankId;
            }
        },
    };
}
</script>
@endsection