@props(['type', 'id', 'balance', 'modalId' => 'mpesa'])
{{--
    M-Pesa payment window. Usage:
      <x-mpesa-modal type="restaurant" :id="$order->id" :balance="$order->balanceDue()" />
      x-on:click="$dispatch('open-modal-mpesa')"
    The cashier types the customer's number, the phone shows the M-Pesa PIN prompt, and this window
    waits for the result. The payment is recorded by the server as soon as M-Pesa confirms.
--}}
<x-modal :id="$modalId" title="M-Pesa payment">
    <div class="space-y-4"
         x-data="mpesaPush({ pushUrl: '{{ route('mpesa.push', [$type, $id]) }}', statusUrl: '{{ url('mpesa/status') }}', amount: {{ (int) ceil($balance) }} })">

        <p class="text-sm">Balance due: <span class="font-bold">{{ config('pos.company.currency_symbol') }} {{ number_format($balance, 2) }}</span></p>

        <div x-show="stage === 'form'" class="space-y-3">
            <div>
                <label class="field-label">Customer’s M-Pesa number</label>
                <input type="tel" inputmode="tel" x-model="phone" class="input" placeholder="0712 345 678" autocomplete="off">
            </div>
            <div>
                <label class="field-label">Amount to request ({{ config('pos.company.currency_symbol') }})</label>
                <input type="number" min="1" step="1" x-model="amount" class="input">
                <p class="text-xs text-ink-muted mt-1">Whole shillings only. Ask for less than the balance if the customer is paying part by M-Pesa.</p>
            </div>
            <p x-show="error" x-cloak x-text="error" class="text-sm text-danger"></p>
            <button type="button" class="btn-primary w-full" x-on:click="send()" x-bind:disabled="busy">
                <span x-show="!busy">Send M-Pesa request</span><span x-show="busy" x-cloak>Sending…</span>
            </button>
        </div>

        <div x-show="stage === 'waiting'" x-cloak class="text-center space-y-3 py-2">
            <i data-lucide="smartphone" class="w-8 h-8 mx-auto text-primary-500"></i>
            <p class="text-sm font-medium" x-text="message"></p>
            <p class="text-xs text-ink-muted">This window updates by itself. Please do not close it until it says paid.</p>
        </div>

        <div x-show="stage === 'done'" x-cloak class="space-y-3">
            <p class="text-sm font-semibold" :class="ok ? 'text-success' : 'text-danger'" x-text="message"></p>
            <div class="flex gap-2">
                <button type="button" class="btn-primary flex-1" x-on:click="window.location.reload()">Done</button>
                <button type="button" class="btn-secondary flex-1" x-show="!ok" x-on:click="reset()">Try again</button>
            </div>
        </div>
    </div>
</x-modal>

@once
    @push('scripts')
        <script>
            document.addEventListener('alpine:init', () => {
                Alpine.data('mpesaPush', (cfg) => ({
                    stage: 'form', phone: '', amount: cfg.amount, error: '', message: '', ok: false,
                    busy: false, txId: null, timer: null,
                    headers() {
                        return {
                            'Content-Type': 'application/json', 'Accept': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name=csrf-token]').content,
                        };
                    },
                    async send() {
                        this.error = '';
                        this.busy = true;
                        try {
                            const r = await fetch(cfg.pushUrl, { method: 'POST', headers: this.headers(), body: JSON.stringify({ phone: this.phone, amount: parseInt(this.amount, 10) || 0 }) });
                            const d = await r.json().catch(() => ({}));
                            if (!r.ok || !d.ok) {
                                this.error = d.message || (d.errors ? Object.values(d.errors)[0][0] : 'Could not send the request.');
                                return;
                            }
                            this.txId = d.id; this.message = d.message; this.stage = 'waiting';
                            this.poll();
                        } catch (e) {
                            this.error = 'Could not reach the server. Check the connection and try again.';
                        } finally {
                            this.busy = false;
                        }
                    },
                    poll() {
                        let tries = 0;
                        clearInterval(this.timer);
                        this.timer = setInterval(async () => {
                            tries++;
                            try {
                                const r = await fetch(cfg.statusUrl + '/' + this.txId, { headers: { 'Accept': 'application/json' } });
                                const d = await r.json();
                                this.message = d.message;
                                if (d.status !== 'pending') {
                                    clearInterval(this.timer);
                                    this.ok = d.status === 'success' && d.applied;
                                    this.stage = 'done';
                                }
                            } catch (e) { /* keep trying */ }
                            if (tries > 70 && this.stage === 'waiting') {
                                clearInterval(this.timer);
                                this.ok = false; this.stage = 'done';
                                this.message = 'Still no answer from M-Pesa. Do not ask the customer to pay again yet — refresh this page in a minute to see whether it came through.';
                            }
                        }, 3000);
                    },
                    reset() { clearInterval(this.timer); this.stage = 'form'; this.error = ''; },
                }));
            });
        </script>
    @endpush
@endonce