@extends('layouts.app')

@section('title', 'Credits & Packages')

@section('content')
<div class="min-h-screen bg-gray-50 py-8">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <!-- Header -->
        <div class="text-center mb-8">
            <h1 class="text-3xl font-bold text-gray-900">Credits & Packages</h1>
            <p class="mt-2 text-lg text-gray-600">Purchase credits to unlock premium features like video calls</p>
        </div>

        <!-- Current Balance -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-semibold text-gray-900">Current Balance</h2>
                    <p class="text-3xl font-bold text-blue-600 mt-2">{{ auth()->user()->credits }} Credits</p>
                </div>
                <div class="text-right">
                    <p class="text-sm text-gray-500">Total Purchased</p>
                    <p class="text-lg font-semibold text-gray-900">{{ $statistics['total_purchased'] }} Credits</p>
                    <p class="text-sm text-gray-500 mt-1">Total Spent: {{ $statistics['total_spent'] }} Credits</p>
                </div>
            </div>
        </div>

        <!-- Credit Packages -->
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
            @foreach($packages as $package)
            <div class="bg-white rounded-lg shadow-sm border {{ $package['popular'] ? 'border-blue-500 ring-2 ring-blue-200' : 'border-gray-200' }} p-6 relative">
                @if($package['popular'])
                <div class="absolute -top-3 left-1/2 transform -translate-x-1/2">
                    <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm font-medium">Most Popular</span>
                </div>
                @endif
                
                <div class="text-center">
                    <h3 class="text-lg font-semibold text-gray-900">{{ $package['name'] }}</h3>
                    <div class="mt-4">
                        <span class="text-3xl font-bold text-gray-900">₹{{ number_format($package['price'] / 100, 2) }}</span>
                    </div>
                    <div class="mt-2">
                        <span class="text-lg text-blue-600 font-semibold">{{ $package['credits'] }} Credits</span>
                        @if($package['bonus_credits'] > 0)
                        <span class="text-sm text-green-600 block">+ {{ $package['bonus_credits'] }} Bonus Credits</span>
                        @endif
                    </div>
                    
                    <button 
                        onclick="purchaseCredits('{{ $package['id'] }}')"
                        class="mt-6 w-full bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition duration-200 font-medium"
                    >
                        Purchase Now
                    </button>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Credit Usage Information -->
        <div class="bg-white rounded-lg shadow-sm p-6 mb-8">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">How Credits Work</h3>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                <div class="flex items-center space-x-3">
                    <div class="flex-shrink-0">
                        <i class="fas fa-video text-blue-600 text-xl"></i>
                    </div>
                    <div>
                        <p class="font-medium text-gray-900">Video Calls</p>
                        <p class="text-sm text-gray-600">2 credits per minute</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="flex-shrink-0">
                        <i class="fas fa-phone text-green-600 text-xl"></i>
                    </div>
                    <div>
                        <p class="font-medium text-gray-900">Audio Calls</p>
                        <p class="text-sm text-gray-600">1 credit per minute</p>
                    </div>
                </div>
                <div class="flex items-center space-x-3">
                    <div class="flex-shrink-0">
                        <i class="fas fa-heart text-red-600 text-xl"></i>
                    </div>
                    <div>
                        <p class="font-medium text-gray-900">Super Like</p>
                        <p class="text-sm text-gray-600">3 credits each</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Recent Transactions -->
        <div class="bg-white rounded-lg shadow-sm p-6">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-semibold text-gray-900">Recent Transactions</h3>
                <a href="{{ route('credits.transactions') }}" class="text-blue-600 hover:text-blue-700 text-sm font-medium">
                    View All
                </a>
            </div>
            
            @if($statistics['total_transactions'] > 0)
            <div class="space-y-3">
                <!-- This would be populated with recent transactions -->
                <p class="text-gray-600">You have {{ $statistics['total_transactions'] }} total transactions.</p>
                <p class="text-sm text-gray-500">
                    @if($statistics['last_purchase'])
                    Last purchase: {{ $statistics['last_purchase']->format('M j, Y') }}
                    @else
                    No purchases yet
                    @endif
                </p>
            </div>
            @else
            <p class="text-gray-600">No transactions yet. Purchase your first credit package above!</p>
            @endif
        </div>
    </div>
</div>

<!-- Razorpay Payment Modal -->
<div id="payment-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
    <div class="flex items-center justify-center min-h-screen p-4">
        <div class="bg-white rounded-lg p-6 max-w-md w-full">
            <h3 class="text-lg font-semibold text-gray-900 mb-4">Processing Payment...</h3>
            <div class="flex items-center justify-center py-8">
                <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            </div>
        </div>
    </div>
</div>

@endsection

@push('scripts')
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>
<script>
let currentOrder = null;

async function purchaseCredits(packageId) {
    try {
        // Show loading
        document.getElementById('payment-modal').classList.remove('hidden');
        
        // Create order
        const response = await fetch('/api/credits/create-order', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify({ package_id: packageId })
        });
        
        const data = await response.json();
        
        if (!data.success) {
            throw new Error(data.message);
        }
        
        currentOrder = data.order;
        
        // Hide loading modal
        document.getElementById('payment-modal').classList.add('hidden');
        
        // Initialize Razorpay
        const options = {
            key: currentOrder.key,
            amount: currentOrder.amount,
            currency: currentOrder.currency,
            name: currentOrder.name,
            description: currentOrder.description,
            order_id: currentOrder.order_id,
            prefill: currentOrder.prefill,
            theme: currentOrder.theme,
            handler: function(response) {
                verifyPayment(response);
            },
            modal: {
                ondismiss: function() {
                    handlePaymentFailure('Payment cancelled by user');
                }
            }
        };
        
        const rzp = new Razorpay(options);
        rzp.open();
        
    } catch (error) {
        document.getElementById('payment-modal').classList.add('hidden');
        alert('Error: ' + error.message);
    }
}

async function verifyPayment(response) {
    try {
        document.getElementById('payment-modal').classList.remove('hidden');
        
        const verifyResponse = await fetch('/api/credits/verify-payment', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            body: JSON.stringify(response)
        });
        
        const data = await verifyResponse.json();
        
        document.getElementById('payment-modal').classList.add('hidden');
        
        if (data.success) {
            alert('Payment successful! ' + data.message);
            location.reload(); // Refresh to show updated balance
        } else {
            throw new Error(data.message);
        }
        
    } catch (error) {
        document.getElementById('payment-modal').classList.add('hidden');
        alert('Payment verification failed: ' + error.message);
    }
}

async function handlePaymentFailure(reason) {
    if (currentOrder) {
        try {
            await fetch('/api/credits/payment-failed', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                },
                body: JSON.stringify({
                    order_id: currentOrder.order_id,
                    reason: reason
                })
            });
        } catch (error) {
            console.error('Failed to record payment failure:', error);
        }
    }
}
</script>
@endpush