@extends('layouts.app')

@section('content')
<div class="container-fluid py-5 mt-3">
    <div class="row justify-content-center">
        <div class="col-md-8">
            {{-- Plan Summary --}}
            <div class="card shadow-sm mb-4">
                <div class="card-body">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h4 class="card-title mb-1">{{ $plan['name'] }}</h4>
                            <p class="text-muted mb-2">{{ $plan['description'] }}</p>
                            <p class="text-muted mb-0">
                                <strong>Duration:</strong> {{ $plan['duration_days'] }} days
                            </p>
                        </div>
                        <div class="col-md-4 text-end">
                            <h3 class="text-primary mb-0">KES {{ number_format($plan['price']) }}</h3>
                            <a href="{{ route('payments.pricing') }}" class="btn btn-sm btn-outline-warning mt-2">
                                Change Plan
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            {{-- Payment Methods --}}
            <div class="card shadow-sm">
                <div class="card-header bg-white">
                    <h4 class="mb-0">Select Payment Method</h4>
                </div>
                <div class="card-body">
                    {{-- M-Pesa Payment Method --}}
                    <div class="payment-method-card mb-4">
                        <div class="card border-success">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('public/images/mpesa-logo.png') }}" alt="M-Pesa" class="me-3" style="height: 30px;">
                                            <div>
                                                <h5 class="mb-1">M-Pesa</h5>
                                                <p class="text-muted mb-0">Pay instantly via M-Pesa</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#mpesaModal">
                                            Pay with M-Pesa
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Airtel Money Payment Method --}}
                    <div class="payment-method-card mb-4">
                        <div class="card border-danger">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('public/images/airtel-money-logo.png') }}" alt="Airtel Money" class="me-3" style="height: 30px;">
                                            <div>
                                                <h5 class="mb-1">Airtel Money</h5>
                                                <p class="text-muted mb-0">Pay via Airtel Money</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <button class="btn btn-outline-danger" onclick="showComingSoon()">
                                            Pay with Airtel
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- PayPal Payment Method --}}
                    <div class="payment-method-card mb-4">
                        <div class="card border-info">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <div class="d-flex align-items-center">
                                            <img src="{{ asset('public/images/paypal-logo.png') }}" alt="PayPal" class="me-3" style="height: 25px;">
                                            <div>
                                                <h5 class="mb-1">PayPal</h5>
                                                <p class="text-muted mb-0">Pay via PayPal</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <button class="btn btn-outline-info" onclick="showComingSoon()">
                                            Pay with PayPal
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- Card Payment Method --}}
                    <div class="payment-method-card">
                        <div class="card border-warning">
                            <div class="card-body">
                                <div class="row align-items-center">
                                    <div class="col-md-8">
                                        <div class="d-flex align-items-center">
                                            <i class="fas fa-credit-card fa-2x text-warning me-3"></i>
                                            <div>
                                                <h5 class="mb-1">Credit/Debit Card</h5>
                                                <p class="text-muted mb-0">Pay with Visa, Mastercard</p>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4 text-end">
                                        <button class="btn btn-outline-warning" onclick="showComingSoon()">
                                            Pay with Card
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{{-- M-Pesa Payment Modal --}}
<div class="modal fade" id="mpesaModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Pay with M-Pesa</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="mpesaPaymentForm" action="{{ route('payment.initiate.stk') }}" method="POST">
                @csrf
                <input type="hidden" name="plan_id" value="{{ $plan['id'] }}">
                
                <div class="modal-body">
                    {{-- Plan Summary in Modal --}}
                    <div class="alert alert-info">
                        <div class="d-flex justify-content-between">
                            <span><strong>Plan:</strong> {{ $plan['name'] }}</span>
                            <span><strong>Amount:</strong> KES {{ number_format($plan['price']) }}</span>
                        </div>
                    </div>

                    {{-- Phone Number Input --}}
                    {{-- Phone Number Input --}}
                    <div class="mb-3">
                        <label for="phone" class="form-label">M-Pesa Phone Number</label>
                        <div class="input-group">
                            <input type="tel" 
                                class="form-control" 
                                id="phone" 
                                name="phone" 
                                placeholder="07XX XXX XXX" 
                                required
                                novalidate
                                oninput="validatePhoneNumber(this)">
                            <span class="input-group-text">
                                <i class="fas fa-check text-success d-none" id="phoneValidIcon"></i>
                                <i class="fas fa-times text-danger d-none" id="phoneInvalidIcon"></i>
                            </span>
                        </div>
                        <div class="form-text">
                            Enter your M-Pesa registered phone number starting with 07 (10 digits)
                        </div>
                        <div class="invalid-feedback" id="phoneError">
                            Please enter a valid 10-digit Kenyan phone number starting with 07
                        </div>
                    </div>

                    {{-- Payment Instructions --}}
                    <div class="alert alert-warning">
                        <small>
                            <strong>Instructions:</strong><br>
                            1. Enter your M-Pesa registered phone number<br>
                            2. Click "Confirm Payment"<br>
                            3. Check your phone for M-Pesa prompt<br>
                            4. Enter your M-Pesa PIN to complete payment
                        </small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                    <button type="submit" class="btn btn-primary" id="confirmPaymentBtn">
                        <i class="fas fa-lock me-2"></i>Confirm Payment
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

{{-- Payment Status Modal --}}
<div class="modal fade" id="paymentStatusModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static" data-bs-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Payment Status</h5>
            </div>
            <div class="modal-body text-center py-4">
                <div id="paymentStatusContent">
                    <i class="fas fa-spinner fa-spin fa-3x text-primary mb-3"></i>
                    <h5 class="text-primary">Processing Payment</h5>
                    <p class="text-muted">Please check your phone for M-Pesa prompt...</p>
                    <div class="progress mb-3">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
                    </div>
                    <p class="small text-muted" id="statusMessage">Waiting for payment confirmation...</p>
                </div>
            </div>
            <div class="modal-footer justify-content-center">
                <button type="button" class="btn btn-success d-none" id="successBtn" onclick="window.location.reload()">
                    <i class="fas fa-check me-2"></i>Continue
                </button>
                <button type="button" class="btn btn-warning d-none" id="retryBtn" onclick="retryPayment()">
                    <i class="fas fa-redo me-2"></i>Try Again
                </button>
            </div>
        </div>
    </div>
</div>

{{-- Coming Soon Modal --}}
<div class="modal fade" id="comingSoonModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Coming Soon</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body text-center py-4">
                <i class="fas fa-tools fa-3x text-warning mb-3"></i>
                <h5 class="text-warning">Payment Method Coming Soon</h5>
                <p class="text-muted">This payment method is currently under development. Please use M-Pesa for now.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .payment-method-card .card {
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .payment-method-card .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }

    .payment-method-card .card.border-primary:hover {
        border-color: #0d6efd !important;
    }

    .payment-status-success {
        color: #198754;
    }

    .payment-status-error {
        color: #dc3545;
    }

    .payment-status-pending {
        color: #0d6efd;
    }
</style>
@endpush

@push('scripts')
<script>
    let paymentCheckInterval;
    let checkoutRequestId = null;
    let pollingStartTime = null;
    const POLLING_TIMEOUT = 45000; // 45 seconds
    // Show Coming Soon Modal
    function showComingSoon() {
        $('#comingSoonModal').modal('show');
    }

    // Format phone input
    document.getElementById('phone')?.addEventListener('input', function(e) {
        let value = e.target.value.replace(/\D/g, '');
        if (value.length > 10) value = value.substring(0, 10);
        e.target.value = value;
    });

    // Handle M-Pesa form submission
    document.getElementById('mpesaPaymentForm')?.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const phoneNumber = document.getElementById('phone').value;
        if (phoneNumber.length !== 10 || !phoneNumber.startsWith('07')) {
            alert('Please enter a valid 10-digit Kenyan phone number starting with 07');
            return;
        }

        const submitBtn = document.getElementById('confirmPaymentBtn');
        const originalText = submitBtn.innerHTML;
        submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Processing...';
        submitBtn.disabled = true;

        // console.log('Inner text:', originalText);

        try {
            const formData = new FormData(this);
            const response = await fetch('{{ route("payment.initiate.stk") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}',
                    'Accept': 'application/json'
                }
            });

            const result = await response.json();
            console.log('STK Push initiation response:', result);

            if (result.success && result.data?.CheckoutRequestID) {
                $('#mpesaModal').modal('hide');
                checkoutRequestId = result.data.CheckoutRequestID;
                showPaymentStatusModal();
                startPaymentStatusPolling();
            } else {
                alert(result.message || 'Failed to initiate payment.');
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            }
        } catch (error) {
            console.error('Payment initiation error:', error);
            alert('Error: ' + error.message);
            submitBtn.innerHTML = originalText;
            submitBtn.disabled = false;
        }
    });

    function showPaymentStatusModal() {
        pollingStartTime = Date.now();
        $('#paymentStatusModal').modal('show');
    }

    function startPaymentStatusPolling() {
        if (paymentCheckInterval) clearInterval(paymentCheckInterval);
        paymentCheckInterval = setInterval(checkPaymentStatus, 3000);
        checkPaymentStatus();
    }

    async function checkPaymentStatus() {
        if (!checkoutRequestId) return;

        // Stop if timed out
        if (Date.now() - pollingStartTime > POLLING_TIMEOUT) {
            clearInterval(paymentCheckInterval);
            updatePaymentStatusUI({
                status: 'timeout',
                message: 'Payment timeout. Please try again or contact support.'
            });
            return;
        }

        try {
            const response = await fetch(`/api/payment/status?checkout_id=${checkoutRequestId}`, {
                method: 'GET',
                headers: {
                    'Accept': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                }
            });

            const result = await response.json();
            console.log('Payment status response:', result);

            // 🔥 IMPROVED: Better status extraction with proper cancellation detection
            let paymentData = {
                status: 'pending',
                message: 'Processing payment...',
                result_code: null
            };

            // Check if we have data in the response
            if (result.data) {
                // Map M-Pesa result codes to our status
                const resultCode = result.data.result_code;
                
                if (resultCode === 0) {
                    paymentData.status = 'completed';
                    paymentData.message = result.data.message || 'Payment completed successfully';
                } else if (resultCode === 1032) {
                    paymentData.status = 'cancelled';
                    paymentData.message = 'Payment was cancelled by user';
                } else if (resultCode === 1 || resultCode === 1031) {
                    paymentData.status = 'failed';
                    paymentData.message = result.data.message || 'Payment failed';
                } else {
                    // Use the status from backend if available
                    paymentData.status = result.data.status || 'pending';
                    paymentData.message = result.data.message || 'Processing payment...';
                }
                
                paymentData.result_code = resultCode;
            } else {
                // Fallback to direct status mapping
                paymentData.status = result.status || 'pending';
                paymentData.message = result.message || 'Processing payment...';
            }

            console.log('Processed payment data:', paymentData);
            updatePaymentStatusUI(paymentData);

            // Stop polling for final statuses
            if (['completed', 'failed', 'cancelled', 'timeout'].includes(paymentData.status)) {
                clearInterval(paymentCheckInterval);

                const modalEl = document.getElementById('paymentStatusModal');
                const modalInstance = bootstrap.Modal.getInstance(modalEl) || new bootstrap.Modal(modalEl);

                if (paymentData.status === 'completed') {
                    // ✅ Show success message directly inside the modal
                    const statusContent = document.getElementById('paymentStatusContent');
                    statusContent.innerHTML = `
                        <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                        <h5 class="text-success mb-2">Payment Successful!</h5>
                        <p class="text-muted">Your subscription has been activated successfully. You can now access all the features of your new plan.</p>
                        
                        <div class="card shadow-sm mb-3">
                            <div class="card-body text-start">
                                <strong>Status:</strong> <span class="badge bg-success">Active</span><br>
                                <p><strong>Amount:</strong> ${result.data?.amount || 'KSh —'}</p>
                            </div>
                        </div>

                        <div class="d-grid gap-2 mt-3">
                            <a href="{{ route('dashboard') }}" class="btn btn-primary btn-lg">
                                <i class="fas fa-rocket me-2"></i>Start Using Features
                            </a>
                            <a href="{{ route('payments.pricing') }}" class="btn btn-outline-secondary">
                                View Other Plans
                            </a>
                        </div>
                    `;

                    // Hide retry/success buttons if visible
                    document.getElementById('successBtn').classList.add('d-none');
                    document.getElementById('retryBtn').classList.add('d-none');
                } else {
                    // ❌ Keep modal open for other statuses (failed, cancelled, timeout)
                    // The updatePaymentStatusUI function already handles the UI updates
                    // Show retry button for failed/cancelled/timeout
                    document.getElementById('retryBtn').classList.remove('d-none');
                    document.getElementById('successBtn').classList.add('d-none');
                }
            }

        } catch (error) {
            console.error('Payment status check error:', error);
            updatePaymentStatusUI({
                status: 'pending',
                message: 'Checking payment status...'
            });
        }
    }

    function updatePaymentStatusUI(payment) {
        const statusContent = document.getElementById('paymentStatusContent');
        const successBtn = document.getElementById('successBtn');
        const retryBtn = document.getElementById('retryBtn');
        successBtn.classList.add('d-none');
        retryBtn.classList.add('d-none');

        console.log('Updating UI with payment status:', payment.status, 'Message:', payment.message);

        switch (payment.status) {
            case 'completed':
                statusContent.innerHTML = `
                    <i class="fas fa-check-circle fa-3x text-success mb-3"></i>
                    <h5 class="text-success">Payment Successful!</h5>
                    <p class="text-muted">${payment.message}</p>
                `;
                successBtn.classList.remove('d-none');
                break;

            case 'failed':
                statusContent.innerHTML = `
                    <i class="fas fa-times-circle fa-3x text-danger mb-3"></i>
                    <h5 class="text-danger">Payment Failed</h5>
                    <p class="text-muted">${payment.message}</p>
                    ${payment.result_code ? `<p class="small text-muted">Error Code: ${payment.result_code}</p>` : ''}
                `;
                retryBtn.classList.remove('d-none');
                break;

            case 'cancelled':
                statusContent.innerHTML = `
                    <i class="fas fa-ban fa-3x text-warning mb-3"></i>
                    <h5 class="text-warning">Payment Cancelled</h5>
                    <p class="text-muted">${payment.message}</p>
                    <p class="small text-muted">You cancelled the payment request on your phone.</p>
                `;
                retryBtn.classList.remove('d-none');
                break;

            case 'pending':
                const elapsed = Date.now() - pollingStartTime;
                const remainingSeconds = Math.ceil((POLLING_TIMEOUT - elapsed) / 1000);
                statusContent.innerHTML = `
                    <i class="fas fa-spinner fa-spin fa-3x text-primary mb-3"></i>
                    <h5 class="text-primary">Processing Payment</h5>
                    <p class="text-muted">${payment.message}</p>
                    <div class="progress mb-3">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 100%"></div>
                    </div>
                    <p class="small text-info">Auto-cancels in ${remainingSeconds} seconds</p>
                `;
                break;

            case 'timeout':
                statusContent.innerHTML = `
                    <i class="fas fa-clock fa-3x text-warning mb-3"></i>
                    <h5 class="text-warning">Payment Timeout</h5>
                    <p class="text-muted">${payment.message}</p>
                `;
                retryBtn.classList.remove('d-none');
                break;

            default:
                statusContent.innerHTML = `
                    <i class="fas fa-spinner fa-spin fa-3x text-primary mb-3"></i>
                    <h5 class="text-primary">Processing Payment</h5>
                    <p class="text-muted">${payment.message}</p>
                `;
        }
    }

    function retryPayment() {
        $('#paymentStatusModal').modal('hide');
        $('#mpesaModal').modal('show');
        document.getElementById('mpesaPaymentForm').reset();
        const btn = document.getElementById('confirmPaymentBtn');
        btn.innerHTML = '<i class="fas fa-lock me-2"></i>Confirm Payment';
        btn.disabled = false;
        checkoutRequestId = null;
        pollingStartTime = null;
    }

    $('#paymentStatusModal').on('hidden.bs.modal', function() {
        if (paymentCheckInterval) clearInterval(paymentCheckInterval);
        checkoutRequestId = null;
        pollingStartTime = null;
    });
</script>
@endpush