@extends('layouts.app')

@section('title', 'Waiting for M-Pesa Payment — ecanetworks.com')

@push('styles')
<style>
    /* ── Page Shell ─────────────────────────────────────────── */
    .mpesa-wait-page {
        min-height: 80vh;
        background: linear-gradient(135deg, #0f1c3a 0%, #1a3360 50%, #1e3a8a 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
    }

    /* ── Card ───────────────────────────────────────────────── */
    .mpesa-card {
        background: #ffffff;
        border-radius: 1.25rem;
        box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
        width: 100%;
        max-width: 520px;
        overflow: hidden;
    }

    /* ── Card Header ────────────────────────────────────────── */
    .mpesa-card__header {
        background: linear-gradient(135deg, #1e3a8a, #2563eb);
        padding: 2rem 2rem 1.5rem;
        text-align: center;
        color: #ffffff;
    }

    .mpesa-card__header .brand {
        font-size: 0.8rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        opacity: 0.75;
        margin-bottom: 0.5rem;
    }

    .mpesa-card__header h1 {
        font-size: 1.4rem;
        font-weight: 700;
        margin: 0;
    }

    /* ── Card Body ──────────────────────────────────────────── */
    .mpesa-card__body {
        padding: 2rem;
    }

    /* ── Order Summary ──────────────────────────────────────── */
    .order-summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f0f5ff;
        border: 1px solid #c7d7fd;
        border-radius: 0.75rem;
        padding: 1rem 1.25rem;
        margin-bottom: 1.75rem;
        font-size: 0.9rem;
        color: #1e3a8a;
    }

    .order-summary .label {
        font-weight: 600;
    }

    .order-summary .amount {
        font-size: 1.3rem;
        font-weight: 800;
        color: #1d4ed8;
    }

    /* ── Phone Icon (animated) ──────────────────────────────── */
    .phone-icon-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 1.5rem;
    }

    .phone-icon {
        width: 72px;
        height: 72px;
        background: linear-gradient(135deg, #1e3a8a, #2563eb);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: phonePulse 1.8s ease-in-out infinite;
        margin-bottom: 1rem;
        position: relative;
    }

    .phone-icon svg {
        width: 34px;
        height: 34px;
        fill: #ffffff;
    }

    /* Ripple rings */
    .phone-icon::before,
    .phone-icon::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        border: 2px solid rgba(37, 99, 235, 0.4);
        animation: ripple 1.8s ease-out infinite;
    }

    .phone-icon::before {
        width: 96px;
        height: 96px;
    }

    .phone-icon::after {
        width: 120px;
        height: 120px;
        animation-delay: 0.4s;
    }

    @keyframes phonePulse {
        0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.4); }
        50%       { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(37, 99, 235, 0); }
    }

    @keyframes ripple {
        0%   { transform: scale(0.85); opacity: 0.8; }
        100% { transform: scale(1.4);  opacity: 0; }
    }

    /* ── Main Text ──────────────────────────────────────────── */
    .instruction-text {
        text-align: center;
        color: #1e293b;
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.35rem;
    }

    .instruction-sub {
        text-align: center;
        color: #64748b;
        font-size: 0.875rem;
        margin-bottom: 1.75rem;
        line-height: 1.55;
    }

    /* ── Spinner + Status ───────────────────────────────────── */
    .status-row {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.6rem;
        margin-bottom: 1.5rem;
    }

    .spinner {
        width: 36px;
        height: 36px;
        border: 3px solid #e2e8f0;
        border-top-color: #2563eb;
        border-radius: 50%;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        to { transform: rotate(360deg); }
    }

    .status-label {
        font-size: 0.85rem;
        color: #475569;
        font-weight: 500;
    }

    /* ── Elapsed + Countdown ────────────────────────────────── */
    .timer-row {
        display: flex;
        justify-content: space-between;
        font-size: 0.8rem;
        color: #94a3b8;
        border-top: 1px solid #f1f5f9;
        padding-top: 0.9rem;
        margin-bottom: 1.5rem;
    }

    /* ── Success State ──────────────────────────────────────── */
    .state-success {
        display: none;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
        padding: 0.5rem 0 1rem;
    }

    .state-success .icon-circle {
        width: 72px;
        height: 72px;
        background: #16a34a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .state-success .icon-circle svg {
        width: 36px;
        height: 36px;
        stroke: #ffffff;
        stroke-width: 3;
        fill: none;
    }

    .state-success h3 {
        color: #15803d;
        font-size: 1.2rem;
        font-weight: 700;
        margin: 0;
    }

    .state-success p {
        color: #4b5563;
        font-size: 0.875rem;
        margin: 0;
    }

    /* ── Failed State ───────────────────────────────────────── */
    .state-failed {
        display: none;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.75rem;
        padding: 0.5rem 0 1rem;
    }

    .state-failed .icon-circle {
        width: 72px;
        height: 72px;
        background: #dc2626;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    .state-failed .icon-circle svg {
        width: 36px;
        height: 36px;
        stroke: #ffffff;
        stroke-width: 3;
        fill: none;
    }

    .state-failed h3 {
        color: #b91c1c;
        font-size: 1.1rem;
        font-weight: 700;
        margin: 0;
    }

    .state-failed p {
        color: #4b5563;
        font-size: 0.875rem;
        margin: 0;
    }

    .state-failed .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.75rem;
        justify-content: center;
        margin-top: 0.5rem;
    }

    /* ── Timeout Notice ─────────────────────────────────────── */
    .timeout-notice {
        display: none;
        background: #fffbeb;
        border: 1px solid #fbbf24;
        border-radius: 0.6rem;
        padding: 0.85rem 1rem;
        font-size: 0.85rem;
        color: #92400e;
        text-align: center;
        line-height: 1.5;
        margin-top: 0.5rem;
    }

    /* ── Buttons ────────────────────────────────────────────── */
    .btn-primary {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: linear-gradient(135deg, #1e3a8a, #2563eb);
        color: #ffffff;
        font-weight: 600;
        font-size: 0.875rem;
        padding: 0.6rem 1.4rem;
        border-radius: 0.5rem;
        border: none;
        cursor: pointer;
        text-decoration: none;
        transition: opacity 0.15s;
    }

    .btn-primary:hover { opacity: 0.88; color: #ffffff; }

    .btn-outline {
        display: inline-flex;
        align-items: center;
        gap: 0.4rem;
        background: transparent;
        color: #1e3a8a;
        font-weight: 600;
        font-size: 0.875rem;
        padding: 0.6rem 1.4rem;
        border-radius: 0.5rem;
        border: 2px solid #1e3a8a;
        cursor: pointer;
        text-decoration: none;
        transition: background 0.15s, color 0.15s;
    }

    .btn-outline:hover {
        background: #1e3a8a;
        color: #ffffff;
    }

    @keyframes popIn {
        0%   { transform: scale(0.5); opacity: 0; }
        100% { transform: scale(1);   opacity: 1; }
    }

    /* ── Footer ─────────────────────────────────────────────── */
    .mpesa-card__footer {
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        padding: 1rem 2rem;
        text-align: center;
        font-size: 0.78rem;
        color: #94a3b8;
    }

    .mpesa-card__footer a {
        color: #2563eb;
        text-decoration: none;
    }
</style>
@endpush

@section('content')
<div class="mpesa-wait-page">
    <div class="mpesa-card"
         x-data="mpesaWait({
             statusUrl:  '{{ route('mpesa.status', $order->id) }}',
             retryUrl:   '{{ route('mpesa.retry', $order->id) }}',
             ordersUrl:  '{{ route('account.orders') }}',
             phone:      '{{ $order->shipping_phone }}',
             csrfToken:  '{{ csrf_token() }}'
         })"
         x-init="startPolling()">

        {{-- Header --}}
        <div class="mpesa-card__header">
            <p class="brand">ecanetworks.com</p>
            <h1>Complete Your Payment</h1>
        </div>

        {{-- Body --}}
        <div class="mpesa-card__body">

            {{-- Order Summary --}}
            <div class="order-summary">
                <div>
                    <div class="label">Order #{{ $order->order_number }}</div>
                    <div style="font-size:0.78rem;color:#64748b;margin-top:0.2rem;">
                        {{ $order->items_count ?? $order->orderItems->count() }}
                        {{ Str::plural('item', $order->items_count ?? $order->orderItems->count()) }}
                    </div>
                </div>
                <div class="amount">
                    KSh {{ number_format($order->total, 2) }}
                </div>
            </div>

            {{-- Pending State --}}
            <div x-show="state === 'pending'" x-cloak>
                <div class="phone-icon-wrap">
                    <div class="phone-icon">
                        {{-- Phone SVG --}}
                        <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                            <path d="M17 1H7C5.9 1 5 1.9 5 3v18c0 1.1.9 2 2 2h10c1.1
                                     0 2-.9 2-2V3c0-1.1-.9-2-2-2zm0 18H7V5h10v14zm-5
                                     2c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"/>
                        </svg>
                    </div>

                    <p class="instruction-text">
                        Check your phone
                    </p>
                    <p class="instruction-sub">
                        We sent a payment request to
                        <strong>{{ $order->shipping_phone }}</strong>.<br>
                        Enter your M-Pesa PIN to complete the payment.
                    </p>
                </div>

                <div class="status-row">
                    <div class="spinner"></div>
                    <span class="status-label">
                        Do not close this page &mdash; waiting for payment confirmation&hellip;
                    </span>
                </div>

                <div class="timer-row">
                    <span>
                        Elapsed: <strong x-text="elapsedLabel"></strong>
                    </span>
                    <span>
                        Checking again in <strong x-text="nextCheckLabel + 's'"></strong>
                    </span>
                </div>

                {{-- Timeout notice (shown after 3 minutes) --}}
                <div class="timeout-notice" x-show="timedOut" x-cloak>
                    Taking longer than expected.
                    Please check your M-Pesa messages or contact our support team at
                    <a href="mailto:support@ecanetworks.com">support@ecanetworks.com</a>.
                </div>
            </div>

            {{-- Success State --}}
            <div class="state-success" x-show="state === 'paid'" x-cloak style="display:none;">
                <div class="icon-circle">
                    <svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>
                </div>
                <h3>Payment Received!</h3>
                <p>Your order is confirmed. Redirecting you now&hellip;</p>
                <div class="spinner" style="border-top-color:#16a34a;margin-top:0.5rem;"></div>
            </div>

            {{-- Failed State --}}
            <div class="state-failed" x-show="state === 'failed'" x-cloak style="display:none;">
                <div class="icon-circle">
                    <svg viewBox="0 0 24 24">
                        <line x1="18" y1="6" x2="6" y2="18"/>
                        <line x1="6"  y1="6" x2="18" y2="18"/>
                    </svg>
                </div>
                <h3>Payment Failed</h3>
                <p x-text="failedMessage"></p>

                <div class="actions">
                    {{-- Retry: POST form --}}
                    <form :action="retryUrl" method="POST" style="display:inline;">
                        <input type="hidden" name="_token" :value="csrfToken">
                        <button type="submit" class="btn-primary">
                            <svg width="14" height="14" viewBox="0 0 24 24"
                                 fill="none" stroke="currentColor" stroke-width="2.5">
                                <polyline points="1 4 1 10 7 10"/>
                                <path d="M3.51 15a9 9 0 1 0 .49-4.95"/>
                            </svg>
                            Retry Payment
                        </button>
                    </form>

                    <a :href="ordersUrl" class="btn-outline">
                        Pay Later
                    </a>
                </div>
            </div>

        </div>{{-- /.mpesa-card__body --}}

        <div class="mpesa-card__footer">
            Secured by Safaricom M-Pesa Daraja &bull;
            Need help? <a href="mailto:support@ecanetworks.com">support@ecanetworks.com</a>
        </div>

    </div>{{-- /.mpesa-card --}}
</div>
@endsection

@push('scripts')
<script>
    function mpesaWait({ statusUrl, retryUrl, ordersUrl, phone, csrfToken }) {
        return {
            /* ── reactive state ── */
            state:          'pending',   // 'pending' | 'paid' | 'failed'
            timedOut:       false,
            failedMessage:  'Payment was cancelled or failed. Please try again.',

            /* ── timer bookkeeping ── */
            elapsedSeconds: 0,
            nextCheck:      5,           // seconds until next poll
            maxSeconds:     180,         // 3 minutes

            _pollTimer:     null,
            _tickTimer:     null,

            /* ── computed labels ── */
            get elapsedLabel() {
                const m = Math.floor(this.elapsedSeconds / 60);
                const s = this.elapsedSeconds % 60;
                return m > 0
                    ? `${m}m ${String(s).padStart(2, '0')}s`
                    : `${s}s`;
            },
            get nextCheckLabel() {
                return this.nextCheck > 0 ? this.nextCheck : 0;
            },

            /* ── lifecycle ── */
            startPolling() {
                // Tick every second to update elapsed time and countdown
                this._tickTimer = setInterval(() => {
                    if (this.state !== 'pending') return;

                    this.elapsedSeconds++;
                    this.nextCheck--;

                    if (this.nextCheck <= 0) {
                        this.checkStatus();
                    }

                    if (this.elapsedSeconds >= this.maxSeconds && !this.timedOut) {
                        this.timedOut = true;
                    }
                }, 1000);

                // Do an immediate check after the first 5-second window
                this._pollTimer = setTimeout(() => this.checkStatus(), 5000);
            },

            /* ── poll the server ── */
            async checkStatus() {
                if (this.state !== 'pending') return;

                try {
                    const response = await fetch(statusUrl, {
                        headers: {
                            'Accept':           'application/json',
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-CSRF-TOKEN':     csrfToken,
                        },
                        credentials: 'same-origin',
                    });

                    if (!response.ok) {
                        this.scheduleNext();
                        return;
                    }

                    const data = await response.json();

                    if (data.status === 'paid') {
                        this.state = 'paid';
                        clearInterval(this._tickTimer);

                        // Redirect after a brief moment so user sees the success state
                        setTimeout(() => {
                            window.location.href = data.redirect;
                        }, 2200);
                        return;
                    }

                    if (data.status === 'failed') {
                        this.state         = 'failed';
                        this.failedMessage = data.message || this.failedMessage;
                        clearInterval(this._tickTimer);
                        return;
                    }

                    // Still pending — schedule next check
                    this.scheduleNext();

                } catch (err) {
                    console.warn('M-Pesa status check error:', err);
                    this.scheduleNext();
                }
            },

            scheduleNext() {
                this.nextCheck = 5;
                // Already handled by the setInterval tick; nothing extra needed
            },

            /* ── cleanup ── */
            destroy() {
                clearInterval(this._tickTimer);
                clearTimeout(this._pollTimer);
            },
        };
    }
</script>
@endpush