@extends('layouts.dashboard')

@section('page_title', 'ACTIVITY LOGS')

@section('content')
<div class="ff-table-card mb-3">
    <form method="GET" action="{{ route('activity-logs.index') }}" class="row g-3 align-items-end">
        <div class="col-md-3">
            <label class="form-label mb-1">Search</label>
            <input type="text" class="form-control ff-search-premium ff-filter-control" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="User, action, IP, model id">
        </div>
        <div class="col-md-2">
            <label class="form-label mb-1">Action</label>
            <select class="form-select ff-filter-control" name="action">
                <option value="">All Actions</option>
                @foreach($actions as $action)
                    <option value="{{ $action }}" @selected(($filters['action'] ?? '') === $action)>
                        {{ \Illuminate\Support\Str::headline($action) }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label mb-1">Module</label>
            <select class="form-select ff-filter-control" name="model">
                <option value="">All Modules</option>
                @foreach($models as $model)
                    <option value="{{ $model }}" @selected(($filters['model'] ?? '') === $model)>
                        {{ \Illuminate\Support\Str::headline(class_basename($model)) }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-2">
            <label class="form-label mb-1">User</label>
            <select class="form-select ff-filter-control" name="user_id">
                <option value="">All Users</option>
                @foreach($users as $user)
                    <option value="{{ $user->id }}" @selected((string) ($filters['user_id'] ?? '') === (string) $user->id)>
                        {{ $user->name }}
                    </option>
                @endforeach
            </select>
        </div>
        <div class="col-md-1">
            <label class="form-label mb-1">From</label>
            <input type="date" class="form-control ff-filter-control" name="date_from" value="{{ $filters['date_from'] ?? '' }}">
        </div>
        <div class="col-md-1">
            <label class="form-label mb-1">To</label>
            <input type="date" class="form-control ff-filter-control" name="date_to" value="{{ $filters['date_to'] ?? '' }}">
        </div>
        <div class="col-md-1 d-flex gap-2">
            <button type="submit" class="btn ff-btn-primary w-100">Apply</button>
        </div>
        <div class="col-md-1 d-flex gap-2">
            <a href="{{ route('activity-logs.index') }}" class="btn ff-btn-secondary w-100">Reset</a>
        </div>
    </form>
</div>

<div class="ff-table-card table-responsive">
    <h5 class="mb-3">SYSTEM ACTIVITY LOGS</h5>
    <table class="ff-table" id="logsTable" style="min-width: 1050px;">
        <thead>
            <tr>
                <th>No</th>
                <th>User</th>
                <th>Action</th>
                <th>Activity</th>
                <th>Module</th>
                <th>IP Address</th>
                <th>Date & Time</th>
                <th>Changes</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($logs as $key => $log)
            @php
                $oldValues = is_array($log->changes['old'] ?? null) ? $log->changes['old'] : [];
                $newValues = is_array($log->changes['new'] ?? null) ? $log->changes['new'] : [];
                $hiddenFields = ['id', 'created_at', 'updated_at', 'deleted_at', 'remember_token', 'password', 'google2fa_secret', 'email_verified_at'];
                $changedFields = collect(array_unique(array_merge(array_keys($oldValues), array_keys($newValues))))
                    ->reject(fn ($field) => in_array($field, $hiddenFields, true))
                    ->values();

                $activitySummary = $log->activity_headline;

                if ($log->action === 'updated' && $changedFields->isNotEmpty()) {
                    $labelMap = [
                        'theme' => 'theme',
                        'two_factor_enabled' => 'two-factor login',
                        'name' => 'name',
                        'email' => 'email',
                    ];

                    $formatValue = function ($value, $field = null): string {
                        return \App\Support\Format\AmountFormatter::formatDisplayValue($value, is_string($field) ? $field : null);
                    };

                    if ($changedFields->count() === 1) {
                        $field = $changedFields->first();
                        $label = $labelMap[$field] ?? strtolower(str_replace('_', ' ', $field));
                        $old = $formatValue($oldValues[$field] ?? null, $field);
                        $new = $formatValue($newValues[$field] ?? null, $field);
                        $activitySummary = "{$log->actor_label} changed {$label} from {$old} to {$new}";
                    } else {
                        $labels = $changedFields->take(3)->map(
                            fn ($field) => $labelMap[$field] ?? strtolower(str_replace('_', ' ', $field))
                        )->implode(', ');
                        $remaining = $changedFields->count() - 3;
                        $activitySummary = $remaining > 0
                            ? "{$log->actor_label} updated {$labels} and {$remaining} more fields"
                            : "{$log->actor_label} updated {$labels}";
                    }
                }
            @endphp
            <tr>
                <td>{{ $logs->firstItem() + $key }}</td>
                <td>
                    <div class="d-flex align-items-center gap-2">
                        <div class="ff-profile-avatar" style="width: 32px; height: 32px; border-width: 1px;">
                            <img src="https://ui-avatars.com/api/?name={{ urlencode($log->user->name ?? 'System') }}&background=random&color=fff" alt="User">
                        </div>
                        <span>{{ $log->user->name ?? 'System' }}</span>
                    </div>
                </td>
                <td>
                    @php
                        $badgeClass = match($log->action) {
                            'created' => 'ff-done',
                            'updated' => 'ff-transit',
                            'deleted' => 'ff-delayed',
                            default => 'ff-pending'
                        };
                    @endphp
                    <span class="ff-badge {{ $badgeClass }}">{{ $log->action_label }}</span>
                </td>
                <td>
                    <div class="fw-semibold">{{ $activitySummary }}</div>
                    @if($log->entity_name)
                        <small class="text-muted">Record: {{ $log->entity_name }}</small>
                    @elseif($log->model_id)
                        <small class="text-muted">Record ID: #{{ $log->model_id }}</small>
                    @endif
                </td>
                <td>{{ $log->model_label }}</td>
                <td>{{ $log->ip_address }}</td>
                <td>{{ $log->created_at->format('M d, Y h:i A') }}</td>
                <td>
                    @if($log->changes)
                        <button type="button" class="btn btn-sm btn-outline-info" 
                                onclick='viewChanges(@json($log->changes), @json($activitySummary), @json($log->entity_label), @json($log->created_at->format("M d, Y h:i A")))'>
                            <i class="fa-solid fa-eye"></i> View
                        </button>
                    @else
                        <span class="text-muted small">{{ $log->change_summary }}</span>
                    @endif
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>
</div>

<div class="mt-4">
    {!! $logs->links('pagination::bootstrap-5') !!}
</div>

<!-- Changes Modal -->
<div class="modal fade" id="changesModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content" style="background: var(--bg-sidepanel); color: var(--text-main); border: 1px solid var(--border-color);">
            <div class="modal-header border-bottom border-color">
                <h5 class="modal-title">Activity Details</h5>
                <button type="button" class="btn-close dark-theme-fix" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div id="changesContent" class="p-3 rounded ff-changes-panel" style="font-family: monospace; white-space: pre-wrap; max-height: 400px; overflow-y: auto;">
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Keep client-side table features only for the current page results.
    initDataTable('#logsTable', {
        paging: false,
        info: false,
        searching: false,
        language: {
            search: "",
            searchPlaceholder: "Search logs..."
        }
    });

    // Theme fix for modal close button
    if($('html').attr('data-theme') === 'dark') {
        $('.dark-theme-fix').addClass('btn-close-white');
    }
});

function formatFieldName(key) {
    const labels = {
        theme: 'Theme',
        two_factor_enabled: 'Two Factor Login',
        name: 'Name',
        email: 'Email',
        phone: 'Phone',
        status: 'Status',
        role: 'Role',
        company_name: 'Company Name',
        legal_name: 'Legal Name',
        mc_number: 'MC Number',
        usdot_number: 'USDOT Number',
        address_line1: 'Address Line 1',
        address_line2: 'Address Line 2',
        city: 'City',
        state: 'State',
        postal_code: 'Postal Code',
        country: 'Country',
    };

    if (labels[key]) {
        return labels[key];
    }

    return key
        .replace(/_/g, ' ')
        .replace(/\b\w/g, function(character) {
            return character.toUpperCase();
        });
}

function shouldHideField(key) {
    const hiddenFields = new Set([
        'id',
        'created_at',
        'updated_at',
        'deleted_at',
        'remember_token',
        'password',
        'password_confirmation',
        'google2fa_secret',
        'email_verified_at',
        'two_factor_confirmed',
    ]);

    return hiddenFields.has(key);
}

function escapeHtml(value) {
    const div = document.createElement('div');
    div.textContent = value === null || value === undefined ? '-' : String(value);
    return div.innerHTML;
}

function formatReadableValue(value, fieldName) {
    if (window.FlinkAmount && typeof window.FlinkAmount.formatDisplayValue === 'function') {
        return window.FlinkAmount.formatDisplayValue(value, fieldName);
    }

    if (value === null || value === undefined || value === '') {
        return 'empty';
    }

    if (typeof value === 'boolean') {
        return value ? 'Yes' : 'No';
    }

    const normalized = String(value).trim();

    if (normalized === '1') {
        return 'Yes';
    }

    if (normalized === '0') {
        return 'No';
    }

    if (normalized.includes('T') && normalized.includes('Z')) {
        const date = new Date(normalized);
        if (!Number.isNaN(date.getTime())) {
            return date.toLocaleString();
        }
    }

    if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/.test(normalized)) {
        const date = new Date(normalized.replace(' ', 'T'));
        if (!Number.isNaN(date.getTime())) {
            return date.toLocaleString();
        }
    }

    return normalized
        .replace(/\b\w/g, function(character) { return character.toUpperCase(); });
}

function viewChanges(changes, headline, entityLabel, timestamp) {
    const content = document.getElementById('changesContent');
    const oldValues = changes?.old || {};
    const newValues = changes?.new || {};
    const keys = Array.from(new Set([...Object.keys(oldValues), ...Object.keys(newValues)]))
        .filter(function(key) {
            return !shouldHideField(key);
        });

    let html = '<div class="activity-modal-header mb-3">';
    html += `<div class="activity-modal-title">${escapeHtml(headline)}</div>`;
    html += `<div class="activity-modal-meta">Target: ${escapeHtml(entityLabel)}</div>`;
    html += `<div class="activity-modal-meta">When: ${escapeHtml(timestamp)}</div>`;
    html += '</div>';

    if (!keys.length) {
        html += '<div class="text-muted">No field-level changes were recorded.</div>';
    } else {
        const changeItems = [];

        keys.forEach(function(key) {
            const label = formatFieldName(key);
            const oldText = formatReadableValue(oldValues[key], key);
            const newText = formatReadableValue(newValues[key], key);

            if (oldText === newText) {
                return;
            }

            changeItems.push(`<div class="activity-change-item">
                <div class="activity-change-field">${escapeHtml(label)}</div>
                <div class="activity-change-values">
                    <span class="activity-old-value">${escapeHtml(oldText)}</span>
                    <i class="fa-solid fa-arrow-right-long activity-change-arrow"></i>
                    <span class="activity-new-value">${escapeHtml(newText)}</span>
                </div>
            </div>`);
        });

        if (!changeItems.length) {
            html += '<div class="text-muted">No user-visible changes were recorded.</div>';
            content.innerHTML = html;
            new bootstrap.Modal(document.getElementById('changesModal')).show();
            return;
        }

        html += '<div class="fw-semibold mb-2">What changed</div>';
        html += '<div class="activity-change-list">';
        html += changeItems.join('');
        html += '</div>';
    }

    content.innerHTML = html;
    new bootstrap.Modal(document.getElementById('changesModal')).show();
}
</script>

@push('styles')
<style>
    .activity-modal-title {
        font-size: 1rem;
        font-weight: 700;
        color: var(--text-main);
    }

    .activity-modal-meta {
        font-size: 0.9rem;
        color: var(--text-muted);
        margin-top: 0.2rem;
    }

    .activity-change-list {
        display: grid;
        gap: 0.75rem;
    }

    .activity-change-item {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        background: var(--bg-card);
        padding: 0.7rem 0.85rem;
    }

    .activity-change-field {
        font-weight: 700;
        margin-bottom: 0.35rem;
        color: var(--text-main);
    }

    .activity-change-values {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.45rem;
        color: var(--text-main);
        font-size: 0.92rem;
    }

    .activity-old-value {
        background: rgba(220, 38, 38, 0.12);
        border: 1px solid rgba(220, 38, 38, 0.28);
        border-radius: 999px;
        padding: 0.15rem 0.55rem;
    }

    .activity-new-value {
        background: rgba(22, 163, 74, 0.12);
        border: 1px solid rgba(22, 163, 74, 0.28);
        border-radius: 999px;
        padding: 0.15rem 0.55rem;
    }

    .activity-change-arrow {
        color: var(--text-muted);
        font-size: 0.85rem;
    }
</style>
@endpush
@endsection