@extends('layouts.app')
@section('title', __('Transaction #:id', ['id' => $transaction->id]))
@section('content')
@php
    $statusColors = [
        'pending'    => 'bg-amber-100 text-amber-800',
        'processing' => 'bg-blue-100 text-blue-800',
        'succeeded'  => 'bg-emerald-100 text-emerald-800',
        'failed'     => 'bg-rose-100 text-rose-800',
        'canceled'   => 'bg-slate-100 text-slate-700',
        'refunded'   => 'bg-violet-100 text-violet-800',
    ];
@endphp

<div class="flex items-center justify-between mb-6">
    <div>
        <h1 class="text-xl sm:text-2xl font-semibold flex items-center gap-3">
            {{ __('Transaction') }} <span class="font-mono text-slate-400">#{{ $transaction->id }}</span>
            <span class="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded-full {{ $statusColors[$transaction->status] ?? 'bg-slate-100 text-slate-700' }}">
                {{ __($transaction->status) }}
            </span>
        </h1>
        <p class="text-sm text-slate-500">{{ $transaction->created_at->format('Y-m-d H:i') }}</p>
    </div>
    <a href="{{ route('super-admin.transactions.index') }}" class="btn-ghost text-sm">{{ __('Back') }}</a>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
    <div class="card card-pad text-sm space-y-2 lg:col-span-2">
        <h2 class="font-semibold mb-2">{{ __('Summary') }}</h2>
        <div class="grid grid-cols-2 gap-2">
            <div class="text-slate-500">{{ __('Tenant') }}</div>
            <div>{{ $transaction->tenant?->name ?? '—' }}</div>

            <div class="text-slate-500">{{ __('Plan') }}</div>
            <div>{{ $transaction->plan?->displayName() ?? '—' }}</div>

            <div class="text-slate-500">{{ __('Cycle') }}</div>
            <div>{{ $transaction->cycle ? __($transaction->cycle) : '—' }}</div>

            <div class="text-slate-500">{{ __('Purpose') }}</div>
            <div>{{ __($transaction->purpose) }}</div>

            <div class="text-slate-500">{{ __('Gateway') }}</div>
            <div class="capitalize">{{ $transaction->gateway }}</div>

            <div class="text-slate-500">{{ __('Amount') }}</div>
            <div class="font-mono">{{ number_format((float) $transaction->amount, 2) }} {{ $transaction->currency }}</div>

            <div class="text-slate-500">{{ __('Gateway ID') }}</div>
            <div class="font-mono break-all">{{ $transaction->gateway_id ?? '—' }}</div>

            <div class="text-slate-500">{{ __('Session ID') }}</div>
            <div class="font-mono break-all">{{ $transaction->gateway_session_id ?? '—' }}</div>

            <div class="text-slate-500">{{ __('Paid at') }}</div>
            <div>{{ $transaction->paid_at?->format('Y-m-d H:i') ?? '—' }}</div>

            <div class="text-slate-500">{{ __('Initiated by') }}</div>
            <div>{{ $transaction->user?->name ?? '—' }}</div>
        </div>

        @if($transaction->error_message)
            <div class="mt-3 p-3 rounded-lg bg-rose-50 text-rose-800 text-xs">
                <div class="font-semibold mb-1">{{ __('Last error') }}</div>
                {{ $transaction->error_message }}
            </div>
        @endif
    </div>

    <div class="card card-pad text-sm space-y-2">
        <h2 class="font-semibold mb-2">{{ __('Subscription') }}</h2>
        @if($transaction->subscription)
            <div>{{ $transaction->subscription->plan?->displayName() }} ({{ __($transaction->subscription->cycle) }})</div>
            <div class="text-xs text-slate-500">{{ __('State') }}: {{ __($transaction->subscription->state) }}</div>
            <a href="{{ route('super-admin.subscriptions.show', $transaction->subscription) }}" class="btn-ghost text-xs mt-2 inline-block">{{ __('Open subscription') }}</a>
        @else
            <p class="text-slate-500">{{ __('No subscription linked yet.') }}</p>
        @endif
    </div>
</div>

@if(! empty($transaction->metadata))
<div class="card card-pad mt-4">
    <h2 class="font-semibold mb-2">{{ __('Metadata') }}</h2>
    <pre class="text-xs bg-slate-50 dark:bg-slate-800/40 rounded-lg p-3 overflow-x-auto">{{ json_encode($transaction->metadata, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) }}</pre>
</div>
@endif
@endsection