@php
    $record = $getRecord();
    $oldValues = $record->old_values ?? [];
    $newValues = $record->new_values ?? [];
    
    $allKeys = array_unique(array_merge(array_keys($oldValues), array_keys($newValues)));
    sort($allKeys);

    $formatValue = function ($val, $key = null) {
        if (is_null($val)) return 'null';
        if (is_bool($val)) return $val ? 'true' : 'false';
        if (is_array($val) || is_object($val)) {
            return json_encode($val, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE);
        }
        
        $str = (string) $val;
        
        // Format empty HTML tags
        if ($str === '<p></p>' || trim($str) === '') {
            return '[empty]';
        }
        
        // Format simple HTML strings
        if (str_contains($str, '<p>')) {
            $stripped = strip_tags($str);
            return empty(trim($stripped)) ? '[empty]' : trim($stripped);
        }
        
        // Parse date strings
        if (preg_match('/^\d{4}-\d{2}-\d{2}[T ]\d{2}:\d{2}:\d{2}/', $str)) {
            try {
                return \Carbon\Carbon::parse($str)->format('M j, Y H:i:s');
            } catch (\Exception $e) {
                // Fallback to original
            }
        }
        
        return $str;
    };
@endphp

<style>
    .activity-diff-container {
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .activity-table-wrapper {
        width: 100%;
        border-radius: 8px;
        border: 1px solid #e2e8f0;
        overflow: hidden;
    }
    .dark .activity-table-wrapper {
        border-color: #374151;
    }
    .activity-diff-table {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border: none;
        margin: 0;
        font-family: inherit;
    }
    @media (min-width: 641px) {
        .activity-diff-table {
            min-width: 500px;
        }
    }
    .activity-diff-table th {
        background-color: #f8fafc;
        padding: 10px 14px;
        font-weight: 600;
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #475569;
        border-bottom: 1px solid #e2e8f0;
        text-align: left;
    }
    .dark .activity-diff-table th {
        background-color: #1f2937;
        color: #9ca3af;
        border-bottom-color: #374151;
    }
    .activity-diff-table td {
        padding: 12px 14px;
        font-size: 0.875rem;
        color: #334155;
        border-bottom: 1px solid #f1f5f9;
        vertical-align: middle;
    }
    .dark .activity-diff-table td {
        color: #cbd5e1;
        border-bottom-color: #374151;
    }
    .activity-diff-table tr:last-child td {
        border-bottom: none;
    }
    .activity-diff-table tr.changed-row {
        background-color: rgba(245, 158, 11, 0.02);
    }
    .dark .activity-diff-table tr.changed-row {
        background-color: rgba(245, 158, 11, 0.01);
    }
    .field-badge {
        display: inline-block;
        padding: 2px 6px;
        border-radius: 4px;
        font-family: monospace;
        font-size: 0.75rem;
        font-weight: 600;
        background-color: #f1f5f9;
        color: #475569;
        border: 1px solid #e2e8f0;
        word-break: break-all;
        white-space: normal;
    }
    .dark .field-badge {
        background-color: #374151;
        color: #e5e7eb;
        border-color: #4b5563;
    }
    .value-box {
        display: inline-block;
        max-width: 100%;
        padding: 6px 10px;
        border-radius: 6px;
        font-family: monospace;
        font-size: 0.75rem;
        white-space: pre-wrap;
        word-break: break-all;
        box-sizing: border-box;
    }
    .value-box-old {
        background-color: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
        text-decoration: line-through;
    }
    .dark .value-box-old {
        background-color: rgba(239, 68, 68, 0.15);
        color: #fca5a5;
        border-color: rgba(239, 68, 68, 0.2);
    }
    .value-box-new {
        background-color: #d1fae5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }
    .dark .value-box-new {
        background-color: rgba(16, 185, 129, 0.15);
        color: #6ee7b7;
        border-color: rgba(16, 185, 129, 0.2);
    }
    .value-box-neutral {
        background-color: #f8fafc;
        color: #64748b;
        border: 1px solid #e2e8f0;
    }
    .dark .value-box-neutral {
        background-color: #111827;
        color: #9ca3af;
        border-color: #374151;
    }
    .value-box-empty {
        font-style: italic;
        color: #94a3b8;
    }

    @media (max-width: 640px) {
        .activity-diff-table, 
        .activity-diff-table tbody, 
        .activity-diff-table tr, 
        .activity-diff-table td {
            display: block;
            width: 100% !important;
        }
        
        .activity-diff-table thead {
            display: none;
        }
        
        .activity-diff-table tr {
            padding: 12px;
            border-bottom: 1px solid #e2e8f0;
        }
        .dark .activity-diff-table tr {
            border-bottom-color: #374151;
        }
        .activity-diff-table tr:last-child {
            border-bottom: none;
        }
        
        .activity-diff-table td {
            padding: 6px 0 !important;
            border-bottom: none !important;
        }
        
        .activity-diff-table td[data-label="Old Value"]::before {
            content: "Old Value";
            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }
        .dark .activity-diff-table td[data-label="Old Value"]::before {
            color: #64748b;
        }
        
        .activity-diff-table td[data-label="New Value"]::before {
            content: "New Value";
            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }
        .dark .activity-diff-table td[data-label="New Value"]::before {
            color: #64748b;
        }

        .activity-diff-table td[data-label="Value"]::before {
            content: "Value";
            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            color: #94a3b8;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: 4px;
        }
        .dark .activity-diff-table td[data-label="Value"]::before {
            color: #64748b;
        }
    }
</style>

<div class="activity-diff-container">
    <div class="activity-table-wrapper">
        <table class="activity-diff-table">
            <thead>
                <tr>
                    <th style="width: 25%;">Field</th>
                    <th style="width: 37%;">Old Value</th>
                    <th style="width: 38%;">New Value</th>
                </tr>
            </thead>
            <tbody>
                @forelse ($allKeys as $key)
                    @php
                        $old = $oldValues[$key] ?? null;
                        $new = $newValues[$key] ?? null;
                        $hasOld = array_key_exists($key, $oldValues);
                        $hasNew = array_key_exists($key, $newValues);
                        $changed = $old !== $new;
                    @endphp
                    <tr class="{{ $changed ? 'changed-row' : '' }}">
                        <td data-label="Field">
                            <span class="field-badge">{{ $key }}</span>
                        </td>
                        <td data-label="Old Value">
                            @if ($hasOld)
                                @if ($changed)
                                    <span class="value-box value-box-old">{{ $formatValue($old, $key) }}</span>
                                @else
                                    <span class="value-box value-box-neutral">{{ $formatValue($old, $key) }}</span>
                                @endif
                            @else
                                <span class="value-box-empty">not set</span>
                            @endif
                        </td>
                        <td data-label="New Value">
                            @if ($hasNew)
                                @if ($changed)
                                    <span class="value-box value-box-new">{{ $formatValue($new, $key) }}</span>
                                @else
                                    <span class="value-box value-box-neutral">{{ $formatValue($new, $key) }}</span>
                                @endif
                            @else
                                <span class="value-box-empty">removed</span>
                            @endif
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="3" style="text-align: center; color: #94a3b8; padding: 20px;">
                            No modified attributes recorded.
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
