<x-app-layout>
    <x-module-hero
        :title="'Payment: ' . $payment->reference"
        :description="'Amount: ' . $payment->formatted_amount"
        icon="fa-receipt">

        <x-slot name="backButton">
            <a href="{{ route('mentorship.payments.index') }}"
               class="inline-flex items-center gap-1 text-sm text-[#475569] hover:text-[#1e293b] transition-colors">
                <i class="fas fa-arrow-left text-xs"></i> Back to Payments
            </a>
        </x-slot>

        <x-slot name="tabs">
            @can('view mentorship payments')
                <a href="{{ route('mentorship.payments.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.payments.index') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-credit-card text-sm"></i> All Payments
                </a>
            @endcan
            @can('view own mentorship payments')
                <a href="{{ route('mentorship.payments.my-payments') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.payments.my-payments') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-history text-sm"></i> My Payments
                </a>
            @endcan
            @can('view mentorship programmes')
                <a href="{{ route('mentorship.programmes.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.programmes.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-list text-sm"></i> Programmes
                </a>
            @endcan
            @can('view mentorship certificates')
                <a href="{{ route('mentorship.certificates.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.certificates.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-certificate text-sm"></i> Certificates
                </a>
            @endcan
            @can('view mentorship categories')
                <a href="{{ route('mentorship.categories.index') }}"
                   class="module-hero-tab {{ request()->routeIs('mentorship.categories.*') ? 'border-b-2 border-[#1e293b]' : 'opacity-70 hover:opacity-100 transition-opacity' }} inline-flex items-center gap-2 px-4 py-3 text-[#1e293b] text-sm font-medium md:w-auto w-full border-b border-[#cbd5e1] md:border-b-0">
                    <i class="fas fa-folder text-sm"></i> Categories
                </a>
            @endcan
        </x-slot>

        <x-slot name="actions">
            @if($payment->isSuccessful())
                <a href="{{ route('mentorship.payments.receipt', $payment) }}" target="_blank"
                   class="inline-flex items-center gap-2 px-4 py-2 bg-white text-green-800 text-sm font-medium rounded hover:bg-green-50 transition-colors">
                    <i class="fas fa-print"></i> Print Receipt
                </a>
            @endif
        </x-slot>
    </x-module-hero>

    <div class="p-6">
        @if(session('success'))
            <div class="mb-4 p-4 bg-green-100 border border-green-400 text-green-700 rounded-lg flex items-center gap-2">
                <i class="fas fa-check-circle"></i> {{ session('success') }}
            </div>
        @endif

        {{-- Status Banner --}}
        <div class="mb-4 p-4 rounded-lg
            @if($payment->isSuccessful()) bg-green-100 border border-green-400
            @elseif($payment->isFailed()) bg-red-100 border border-red-400
            @else bg-yellow-100 border border-yellow-400 @endif">
            <div class="flex items-center gap-3">
                @if($payment->isSuccessful())
                    <i class="fas fa-check-circle text-green-600 text-2xl"></i>
                    <div>
                        <h3 class="font-semibold text-green-800">Payment Successful</h3>
                        <p class="text-sm text-green-700">Your payment has been processed successfully.</p>
                    </div>
                @elseif($payment->isFailed())
                    <i class="fas fa-times-circle text-red-600 text-2xl"></i>
                    <div>
                        <h3 class="font-semibold text-red-800">Payment Failed</h3>
                        <p class="text-sm text-red-700">{{ $payment->error_message ?? 'An error occurred during payment processing.' }}</p>
                    </div>
                @else
                    <i class="fas fa-clock text-yellow-600 text-2xl"></i>
                    <div>
                        <h3 class="font-semibold text-yellow-800">Payment {{ $payment->status_label }}</h3>
                        <p class="text-sm text-yellow-700">Your payment is being processed.</p>
                    </div>
                @endif
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
            <div class="lg:col-span-2 space-y-4">
                <div class="bg-white rounded-lg border border-gray-200 p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                        <i class="fas fa-exchange-alt text-green-600"></i> Transaction Details
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                        <div>
                            <p class="text-xs text-gray-500">Reference Number</p>
                            <p class="font-mono font-semibold text-gray-900">{{ $payment->reference }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Amount</p>
                            <p class="text-xl font-bold text-green-600">{{ $payment->formatted_amount }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Payment Method</p>
                            <p class="font-medium text-gray-900">
                                @if($payment->payment_method === 'mtn_momo')
                                    <i class="fas fa-mobile-alt text-yellow-500 mr-1"></i> MTN Mobile Money
                                @else
                                    {{ ucfirst(str_replace('_', ' ', $payment->payment_method ?? 'N/A')) }}
                                @endif
                            </p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Status</p>
                            @php $statusColors = ['pending' => 'bg-yellow-100 text-yellow-800', 'processing' => 'bg-blue-100 text-blue-800', 'successful' => 'bg-green-100 text-green-800', 'failed' => 'bg-red-100 text-red-800', 'refunded' => 'bg-purple-100 text-purple-800']; @endphp
                            <span class="px-2 py-0.5 rounded-full text-xs font-semibold {{ $statusColors[$payment->status] ?? 'bg-gray-100 text-gray-800' }}">
                                {{ $payment->status_label }}
                            </span>
                        </div>
                        @if($payment->phone_number)
                            <div>
                                <p class="text-xs text-gray-500">Phone Number</p>
                                <p class="font-medium text-gray-900">{{ $payment->phone_number }}</p>
                            </div>
                        @endif
                        @if($payment->transaction_id)
                            <div>
                                <p class="text-xs text-gray-500">Transaction ID</p>
                                <p class="font-mono text-xs text-gray-900">{{ $payment->transaction_id }}</p>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                        <i class="fas fa-user text-green-600"></i> Applicant Information
                    </h3>
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
                        <div>
                            <p class="text-xs text-gray-500">Name</p>
                            <p class="font-medium text-gray-900">{{ $payment->user->name ?? $payment->application->name ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Email</p>
                            <p class="font-medium text-gray-900">{{ $payment->user->email ?? $payment->application->email ?? 'N/A' }}</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">Programme</p>
                            <p class="font-medium text-gray-900">{{ $payment->programme->title ?? 'N/A' }}</p>
                        </div>
                        @if($payment->application)
                            <div>
                                <p class="text-xs text-gray-500">Role</p>
                                <span class="px-2 py-0.5 rounded-full text-xs font-semibold
                                    {{ $payment->application->role_preference === 'mentor' ? 'bg-blue-100 text-blue-800' : 'bg-purple-100 text-purple-800' }}">
                                    {{ ucfirst($payment->application->role_preference) }}
                                </span>
                            </div>
                        @endif
                    </div>
                </div>
            </div>

            <div class="space-y-4">
                <div class="bg-white rounded-lg border border-gray-200 p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-4 flex items-center gap-2">
                        <i class="fas fa-history text-green-600"></i> Timeline
                    </h3>
                    <div class="space-y-3">
                        <div class="flex items-start gap-3">
                            <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0">
                                <i class="fas fa-check text-white text-xs"></i>
                            </div>
                            <div>
                                <p class="text-sm font-medium text-gray-900">Created</p>
                                <p class="text-xs text-gray-500">{{ $payment->created_at->format('M d, Y H:i') }}</p>
                            </div>
                        </div>
                        @if($payment->completed_at)
                            <div class="flex items-start gap-3">
                                <div class="w-6 h-6 rounded-full bg-green-500 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-check text-white text-xs"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-green-700">Completed</p>
                                    <p class="text-xs text-gray-500">{{ $payment->completed_at->format('M d, Y H:i') }}</p>
                                </div>
                            </div>
                        @endif
                        @if($payment->failed_at)
                            <div class="flex items-start gap-3">
                                <div class="w-6 h-6 rounded-full bg-red-500 flex items-center justify-center flex-shrink-0">
                                    <i class="fas fa-times text-white text-xs"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium text-red-700">Failed</p>
                                    <p class="text-xs text-gray-500">{{ $payment->failed_at->format('M d, Y H:i') }}</p>
                                </div>
                            </div>
                        @endif
                    </div>
                </div>

                <div class="bg-white rounded-lg border border-gray-200 p-6">
                    <h3 class="text-base font-semibold text-gray-800 mb-3">Actions</h3>
                    <div class="space-y-2">
                        @if($payment->isSuccessful())
                            <a href="{{ route('mentorship.payments.receipt', $payment) }}" target="_blank"
                               class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition text-sm">
                                <i class="fas fa-receipt"></i> View Receipt
                            </a>
                        @endif
                        @if($payment->canBeRetried())
                            <form action="{{ route('mentorship.payments.retry', $payment) }}" method="POST">
                                @csrf
                                <button type="submit"
                                        class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition text-sm">
                                    <i class="fas fa-redo"></i> Retry Payment
                                </button>
                            </form>
                        @endif
                        @if($payment->application)
                            <a href="{{ route('mentorship.applications.show', $payment->application) }}"
                               class="w-full inline-flex items-center justify-center gap-2 px-4 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition text-sm">
                                <i class="fas fa-file-alt"></i> View Application
                            </a>
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</x-app-layout>
