@php
    use App\Enums\PaymentAuditEvent;
    use App\Services\Audit\AuditPresenter;
    use App\Support\Format;

    $record = $getRecord();
    $auditLogs = $record->auditLogs()
        ->with('user')
        ->orderByDesc('created_at')
        ->limit(50)
        ->get();

    /**
     * Resuelve la configuración visual de una acción desde el enum.
     */
    $getActionConfig = function(string $action): array {
        $event = PaymentAuditEvent::tryFrom($action);

        if ($event) {
            $colorToIconClass = [
                'success' => 'timeline-icon-success',
                'warning' => 'timeline-icon-warning',
                'danger' => 'timeline-icon-danger',
                'info' => 'timeline-icon-info',
                'purple' => 'timeline-icon-purple',
                'gray' => 'timeline-icon-gray',
            ];

            $colorToBadgeClass = [
                'success' => 'badge-success',
                'warning' => 'badge-warning',
                'danger' => 'badge-danger',
                'info' => 'badge-info',
                'purple' => 'badge-purple',
                'gray' => 'badge-gray',
            ];

            $color = $event->color();
            $iconName = str_replace('heroicon-o-', '', $event->icon());

            return [
                'label' => $event->label(),
                'iconClass' => $colorToIconClass[$color] ?? 'timeline-icon-gray',
                'badgeClass' => $colorToBadgeClass[$color] ?? 'badge-gray',
                'icon' => $iconName,
            ];
        }

        return [
            'label' => ucfirst(str_replace('_', ' ', $action)),
            'iconClass' => 'timeline-icon-gray',
            'badgeClass' => 'badge-gray',
            'icon' => 'document-text',
        ];
    };
@endphp

<div>
    @if($auditLogs->isEmpty())
        <div class="empty-state">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="width: 3rem; height: 3rem; margin: 0 auto; color: rgb(156 163 175);">
                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25zM6.75 12h.008v.008H6.75V12zm0 3h.008v.008H6.75V15zm0 3h.008v.008H6.75V18z" />
            </svg>
            <p style="margin-top: 0.75rem;">No hay eventos registrados</p>
        </div>
    @else
        <div class="timeline-container">
            <div class="timeline-line"></div>
            <div class="timeline-events">
                @foreach($auditLogs as $log)
                    @php
                        $config = $getActionConfig($log->action);
                        $newData = is_array($log->new_data) ? $log->new_data : [];
                        $previousData = is_array($log->previous_data) ? $log->previous_data : [];
                        $event = PaymentAuditEvent::tryFrom($log->action);

                        $summary = $event?->summary($newData);
                        $showSummary = $summary && $summary !== $event?->label();

                        $reason = $newData['reason'] ?? $newData['notes'] ?? $previousData['void_reason'] ?? null;

                        $changes = AuditPresenter::computeChanges(
                            !empty($previousData) ? $previousData : null,
                            !empty($newData) ? $newData : null
                        );
                    @endphp
                    <div class="timeline-event">
                        <div class="timeline-icon {{ $config['iconClass'] }}">
                            @switch($config['icon'])
                                @case('banknotes')
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" /></svg>
                                    @break
                                @case('arrow-uturn-left')
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" /></svg>
                                    @break
                                @case('pencil-square')
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" /></svg>
                                    @break
                                @case('x-circle')
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 9.75l4.5 4.5m0-4.5l-4.5 4.5M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
                                    @break
                                @default
                                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" /></svg>
                            @endswitch
                        </div>

                        <div class="timeline-content">
                            <div class="timeline-header">
                                <div>
                                    <span class="credit-badge {{ $config['badgeClass'] }}">{{ $config['label'] }}</span>
                                    @if($showSummary)
                                        <p class="timeline-summary">{{ $summary }}</p>
                                    @endif
                                    @if($reason)
                                        <p class="timeline-note">{{ $reason }}</p>
                                    @endif
                                </div>
                                <div class="timeline-date">
                                    <div>{{ $log->created_at->format('d/m/Y') }}</div>
                                    <div>{{ $log->created_at->format('H:i') }}</div>
                                </div>
                            </div>

                            <div class="timeline-meta">
                                @if($log->user)
                                    <div class="timeline-meta-item">
                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clip-rule="evenodd" /></svg>
                                        <span>{{ $log->user->name }}</span>
                                    </div>
                                @endif
                            </div>

                            {{-- Changes before/after (expandible) --}}
                            @if(!empty($changes))
                                <details class="timeline-details">
                                    <summary>Ver cambios</summary>
                                    <div class="timeline-data-block">
                                        @foreach($changes as $change)
                                            <div class="timeline-data-row">
                                                <span class="timeline-data-key">{{ $change['label'] }}</span>
                                                <span class="timeline-data-value">
                                                    @if($change['before'] !== null && $change['after'] !== null)
                                                        <span style="text-decoration: line-through; opacity: 0.6;">{{ $change['before'] }}</span>
                                                        &rarr;
                                                        <span>{{ $change['after'] }}</span>
                                                    @elseif($change['after'] !== null)
                                                        {{ $change['after'] }}
                                                    @elseif($change['before'] !== null)
                                                        <span style="text-decoration: line-through; opacity: 0.6;">{{ $change['before'] }}</span>
                                                    @endif
                                                </span>
                                            </div>
                                        @endforeach
                                    </div>
                                </details>
                            @endif

                            {{-- JSON original (expandible) --}}
                            @if(!empty($newData))
                                <details class="timeline-details">
                                    <summary>Ver JSON original</summary>
                                    <pre>{{ json_encode($newData, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                                </details>
                            @endif
                        </div>
                    </div>
                @endforeach
            </div>
        </div>

        @if($auditLogs->count() >= 50)
            <div class="timeline-footer">
                Mostrando los últimos 50 eventos
            </div>
        @endif
    @endif
</div>