@extends('layouts.admin')

@section('title', 'System Audit & Activity Logs')
@section('page-title', 'System Audit Trail & Operational Activity Logs')

@push('styles')
<style>
  .badge-success { background: rgba(16, 185, 129, 0.15); color: #059669; border: 1px solid rgba(16, 185, 129, 0.3); }
  .badge-info { background: rgba(14, 165, 233, 0.15); color: #0284c7; border: 1px solid rgba(14, 165, 233, 0.3); }
  .badge-danger { background: rgba(239, 68, 68, 0.15); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.3); }
  .badge-purple { background: rgba(168, 85, 247, 0.15); color: #7c3aed; border: 1px solid rgba(168, 85, 247, 0.3); }
  .badge-warning { background: rgba(245, 158, 11, 0.15); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.3); }
  .badge-neutral { background: rgba(148, 163, 184, 0.15); color: #475569; border: 1px solid rgba(148, 163, 184, 0.3); }
  .badge-primary { background: rgba(0, 102, 255, 0.15); color: #0066ff; border: 1px solid rgba(0, 102, 255, 0.3); }

  .audit-filter-bar {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
  }
  .audit-filter-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr auto auto;
    gap: 0.75rem;
    align-items: flex-end;
  }
  @media (max-width: 1100px) {
    .audit-filter-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  @media (max-width: 650px) {
    .audit-filter-grid {
      grid-template-columns: 1fr;
    }
  }

  .form-control-sm {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--text-main);
  }
  .form-control-sm:focus {
    outline: none;
    border-color: var(--accent);
  }

  /* Modal Styling */
  .diff-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.75);
    backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
  }
  .diff-modal-backdrop.active {
    display: flex;
  }
  .diff-modal-container {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 860px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
  }
  .diff-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border-light);
    background: var(--bg-surface);
  }
  .diff-modal-body {
    padding: 1.5rem;
  }
  .diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
  }
  .diff-table th {
    background: var(--bg-surface);
    padding: 0.65rem 0.85rem;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-light);
  }
  .diff-table td {
    padding: 0.75rem 0.85rem;
    border-bottom: 1px solid var(--border-light);
    font-family: var(--font-mono, monospace);
    vertical-align: top;
    word-break: break-word;
  }
  .diff-changed {
    background: rgba(245, 158, 11, 0.08);
  }
  .diff-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    background: var(--bg-surface);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.5rem;
    font-size: 0.85rem;
  }
</style>
@endpush

@section('content')
<!-- Page Header with Export Action -->
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.75rem;">
  <div>
    <h1 style="font-size: 1.6rem; font-family: var(--font-heading); margin: 0 0 0.35rem; color: var(--text-heading);">
      <i class="fas fa-shield-halved" style="color: var(--accent); margin-right: 0.5rem;"></i> System Audit & Activity Logs
    </h1>
    <p style="margin: 0; font-size: 0.9rem; color: var(--text-light);">
      Strictly append-only statutory audit trail tracking logins, profile changes, sensitive candidate dossier views, and data exports.
    </p>
  </div>

  <div style="display: flex; gap: 0.75rem;">
    <a href="{{ route('admin.activity-logs.export', request()->query()) }}" class="btn btn-sm" style="background: #7c3aed; color: #fff; font-weight: 600;">
      <i class="fas fa-file-csv"></i> Export Filtered CSV
    </a>
  </div>
</div>

<!-- 4 Summary Metric Cards -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.25rem; margin-bottom: 1.75rem;">
  
  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(0, 102, 255, 0.12); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0;">
      <i class="fas fa-list-check"></i>
    </div>
    <div>
      <span style="font-size: 0.78rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Total Audit Logs</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); color: var(--text-heading); display: block; line-height: 1.2;">
        {{ number_format($stats['total']) }}
      </strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(16, 185, 129, 0.12); color: #10B981; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0;">
      <i class="fas fa-clock"></i>
    </div>
    <div>
      <span style="font-size: 0.78rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Today's Operations</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); color: var(--text-heading); display: block; line-height: 1.2;">
        {{ number_format($stats['today']) }}
      </strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(245, 158, 11, 0.12); color: #d97706; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0;">
      <i class="fas fa-user-shield"></i>
    </div>
    <div>
      <span style="font-size: 0.78rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Auth / Security (7d)</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); color: var(--text-heading); display: block; line-height: 1.2;">
        {{ number_format($stats['security']) }}
      </strong>
    </div>
  </div>

  <div class="admin-card" style="display: flex; align-items: center; gap: 1rem;">
    <div style="width: 48px; height: 48px; border-radius: var(--radius-md); background: rgba(168, 85, 247, 0.12); color: #7c3aed; display: flex; align-items: center; justify-content: center; font-size: 1.35rem; flex-shrink: 0;">
      <i class="fas fa-database"></i>
    </div>
    <div>
      <span style="font-size: 0.78rem; color: var(--text-light); text-transform: uppercase; font-weight: 600; display: block;">Data Mutations (7d)</span>
      <strong style="font-size: 1.6rem; font-family: var(--font-heading); color: var(--text-heading); display: block; line-height: 1.2;">
        {{ number_format($stats['mutations']) }}
      </strong>
    </div>
  </div>

</div>

<!-- Filter Toolbar -->
<div class="audit-filter-bar">
  <form action="{{ route('admin.activity-logs.index') }}" method="GET" class="audit-filter-grid">
    <div>
      <label style="font-size: 0.75rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.25rem; display: block;">Search</label>
      <input type="text" name="search" value="{{ $filters['search'] ?? '' }}" placeholder="Keywords, name, email, IP..." class="form-control-sm">
    </div>

    <div>
      <label style="font-size: 0.75rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.25rem; display: block;">Account Role</label>
      <select name="role" class="form-control-sm">
        <option value="all">All Roles</option>
        @foreach($availableRoles as $role)
          <option value="{{ $role }}" {{ ($filters['role'] ?? '') === $role ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $role)) }}</option>
        @endforeach
      </select>
    </div>

    <div>
      <label style="font-size: 0.75rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.25rem; display: block;">Action</label>
      <select name="action" class="form-control-sm">
        <option value="all">All Actions</option>
        @foreach($availableActions as $action)
          <option value="{{ $action }}" {{ ($filters['action'] ?? '') === $action ? 'selected' : '' }}>{{ ucfirst(str_replace('_', ' ', $action)) }}</option>
        @endforeach
      </select>
    </div>

    <div>
      <label style="font-size: 0.75rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.25rem; display: block;">Date From</label>
      <input type="date" name="date_from" value="{{ $filters['date_from'] ?? '' }}" class="form-control-sm">
    </div>

    <div>
      <label style="font-size: 0.75rem; font-weight: 600; color: var(--text-light); margin-bottom: 0.25rem; display: block;">Date To</label>
      <input type="date" name="date_to" value="{{ $filters['date_to'] ?? '' }}" class="form-control-sm">
    </div>

    <div>
      <button type="submit" class="btn btn-sm btn-primary" style="height: 38px; width: 100%; font-weight: 600;">
        <i class="fas fa-filter"></i> Apply
      </button>
    </div>

    @if(!empty(array_filter($filters)))
      <div>
        <a href="{{ route('admin.activity-logs.index') }}" class="btn btn-sm btn-outline" style="height: 38px; display: flex; align-items: center; justify-content: center; font-weight: 600; white-space: nowrap;">
          <i class="fas fa-times"></i> Reset
        </a>
      </div>
    @endif
  </form>
</div>

<!-- Activity Log Table -->
<div class="admin-card" style="padding: 0; overflow: hidden;">
  <div class="table-responsive">
    <table class="admin-table">
      <thead>
        <tr>
          <th>Timestamp</th>
          <th>Performer & Role</th>
          <th>Action</th>
          <th>Audit Description</th>
          <th>Source IP / Method</th>
          <th style="text-align: right;">Inspect</th>
        </tr>
      </thead>
      <tbody>
        @forelse($logs as $log)
          <tr>
            <td style="white-space: nowrap; font-size: 0.85rem;">
              <span style="font-weight: 600; color: var(--text-heading); display: block;">
                {{ $log->created_at->format('d M Y') }}
              </span>
              <span style="color: var(--text-light); font-size: 0.78rem;">
                {{ $log->created_at->format('h:i:s A') }}
              </span>
            </td>

            <td>
              @if($log->user)
                <span style="font-weight: 600; color: var(--text-heading); display: block;">
                  {{ $log->user->name }}
                </span>
                <span style="color: var(--text-light); font-size: 0.78rem; display: block;">
                  {{ $log->user->email }}
                </span>
              @else
                <span style="color: var(--text-muted); font-style: italic;">System / Guest</span>
              @endif
              <span class="badge" style="font-size: 0.7rem; text-transform: uppercase; padding: 2px 6px; margin-top: 3px; display: inline-block;">
                {{ str_replace('_', ' ', $log->role ?? 'N/A') }}
              </span>
            </td>

            <td>
              <span class="badge {{ $log->getActionBadgeClass() }}" style="font-size: 0.75rem; text-transform: uppercase; font-weight: 700; padding: 4px 8px; border-radius: var(--radius-sm);">
                {{ str_replace('_', ' ', $log->action) }}
              </span>
            </td>

            <td style="max-width: 380px;">
              <span style="color: var(--text-main); font-size: 0.88rem; line-height: 1.4; display: block;">
                {{ $log->description }}
              </span>
              @if($log->subject_type)
                <span style="color: var(--text-light); font-size: 0.75rem; font-family: monospace;">
                  {{ class_basename($log->subject_type) }} #{{ $log->subject_id }}
                </span>
              @endif
            </td>

            <td style="white-space: nowrap; font-size: 0.82rem; font-family: monospace; color: var(--text-muted);">
              <div><i class="fas fa-network-wired" style="margin-right: 4px;"></i> {{ $log->ip_address ?? '127.0.0.1' }}</div>
              @if($log->method)
                <span style="color: var(--accent); font-weight: 700;">{{ $log->method }}</span>
              @endif
            </td>

            <td style="text-align: right; white-space: nowrap;">
              <button type="button" 
                      class="btn btn-sm btn-outline btn-inspect" 
                      data-id="{{ $log->id }}"
                      style="font-size: 0.8rem; padding: 0.35rem 0.7rem;">
                <i class="fas fa-eye"></i> Details
              </button>
            </td>
          </tr>
        @empty
          <tr>
            <td colspan="6" style="text-align: center; padding: 3rem 1.5rem; color: var(--text-light);">
              <i class="fas fa-clipboard-list" style="font-size: 2.5rem; color: var(--border-light); margin-bottom: 0.75rem; display: block;"></i>
              <strong style="font-size: 1rem; color: var(--text-heading); display: block;">No activity logs found</strong>
              <span>No audit events match your current filter parameters.</span>
            </td>
          </tr>
        @endforelse
      </tbody>
    </table>
  </div>

  @if($logs->hasPages())
    <div style="padding: 1.25rem 1.5rem; border-top: 1px solid var(--border-light); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
      <div style="font-size: 0.85rem; color: var(--text-light);">
        Showing {{ $logs->firstItem() ?? 0 }} to {{ $logs->lastItem() ?? 0 }} of {{ $logs->total() }} recorded events
      </div>
      <div>
        {{ $logs->links() }}
      </div>
    </div>
  @endif
</div>

<!-- Interactive Diff & Inspection Modal -->
<div id="diffModalBackdrop" class="diff-modal-backdrop">
  <div class="diff-modal-container">
    <div class="diff-modal-header">
      <div>
        <h3 id="modalTitle" style="margin: 0; font-size: 1.15rem; font-family: var(--font-heading); color: var(--text-heading);">
          Audit Event Details
        </h3>
        <span id="modalTimestamp" style="font-size: 0.8rem; color: var(--text-light);"></span>
      </div>
      <button type="button" id="modalCloseBtn" style="background: none; border: none; font-size: 1.25rem; color: var(--text-light); cursor: pointer; padding: 0.25rem 0.5rem;">
        <i class="fas fa-times"></i>
      </button>
    </div>

    <div class="diff-modal-body">
      <!-- Metadata Grid -->
      <div class="diff-meta-grid">
        <div>
          <strong style="display: block; color: var(--text-light); font-size: 0.75rem; text-transform: uppercase;">Performer</strong>
          <span id="modalUser" style="font-weight: 600; color: var(--text-heading);"></span>
        </div>
        <div>
          <strong style="display: block; color: var(--text-light); font-size: 0.75rem; text-transform: uppercase;">Role</strong>
          <span id="modalRole"></span>
        </div>
        <div>
          <strong style="display: block; color: var(--text-light); font-size: 0.75rem; text-transform: uppercase;">IP Address & Method</strong>
          <span id="modalNetwork" style="font-family: monospace;"></span>
        </div>
        <div>
          <strong style="display: block; color: var(--text-light); font-size: 0.75rem; text-transform: uppercase;">Action Badge</strong>
          <span id="modalActionBadge"></span>
        </div>
      </div>

      <div style="margin-bottom: 1.25rem;">
        <strong style="display: block; font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.25rem; text-transform: uppercase;">Description</strong>
        <p id="modalDescription" style="margin: 0; font-size: 0.95rem; color: var(--text-main); background: var(--bg-surface); padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-light);"></p>
      </div>

      <div style="margin-bottom: 1.25rem;">
        <strong style="display: block; font-size: 0.85rem; color: var(--text-light); margin-bottom: 0.25rem; text-transform: uppercase;">Target URL & User Agent</strong>
        <div style="background: var(--bg-surface); padding: 0.75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border-light); font-size: 0.8rem; font-family: monospace; word-break: break-all;">
          <div style="margin-bottom: 0.25rem;"><strong style="color: var(--accent);">URL:</strong> <span id="modalUrl"></span></div>
          <div><strong style="color: var(--text-muted);">Agent:</strong> <span id="modalAgent"></span></div>
        </div>
      </div>

      <!-- Attributes Diff Comparison Table -->
      <div>
        <h4 style="font-size: 0.95rem; font-family: var(--font-heading); margin: 0 0 0.5rem; color: var(--text-heading);">
          <i class="fas fa-code-compare" style="color: var(--accent); margin-right: 0.35rem;"></i> Attribute Changes & Snapshots
        </h4>
        <div class="table-responsive" style="border: 1px solid var(--border-light); border-radius: var(--radius-sm); max-height: 300px; overflow-y: auto;">
          <table class="diff-table">
            <thead>
              <tr>
                <th style="width: 25%;">Field</th>
                <th style="width: 37.5%;">Previous Value (Old)</th>
                <th style="width: 37.5%;">Updated Value (New)</th>
              </tr>
            </thead>
            <tbody id="modalDiffTbody">
              <!-- Injected via JavaScript -->
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

@push('scripts')
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const backdrop = document.getElementById('diffModalBackdrop');
    const closeBtn = document.getElementById('modalCloseBtn');

    function closeModal() {
      backdrop.classList.remove('active');
    }

    if (closeBtn) {
      closeBtn.addEventListener('click', closeModal);
    }

    backdrop.addEventListener('click', function (e) {
      if (e.target === backdrop) {
        closeModal();
      }
    });

    document.addEventListener('keydown', function (e) {
      if (e.key === 'Escape' && backdrop.classList.contains('active')) {
        closeModal();
      }
    });

    // Handle Details Button Clicks
    document.querySelectorAll('.btn-inspect').forEach(function (btn) {
      btn.addEventListener('click', function () {
        const logId = this.getAttribute('data-id');
        const showUrl = "{{ url('admin/activity-logs') }}/" + logId;

        // Show loading state
        btn.disabled = true;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';

        fetch(showUrl, {
          headers: {
            'X-Requested-With': 'XMLHttpRequest',
            'Accept': 'application/json'
          }
        })
        .then(response => response.json())
        .then(data => {
          btn.disabled = false;
          btn.innerHTML = '<i class="fas fa-eye"></i> Details';

          // Populate modal fields
          document.getElementById('modalTitle').textContent = 'Audit Event #' + data.id;
          document.getElementById('modalTimestamp').textContent = data.created_at;
          document.getElementById('modalUser').textContent = data.user ? (data.user.name + ' (' + data.user.email + ')') : 'System / Guest';
          document.getElementById('modalRole').textContent = data.role ? data.role.toUpperCase() : 'N/A';
          document.getElementById('modalNetwork').textContent = (data.method || 'GET') + ' | ' + data.ip_address;
          document.getElementById('modalDescription').textContent = data.description;
          document.getElementById('modalUrl').textContent = data.url || 'N/A';
          document.getElementById('modalAgent').textContent = data.user_agent || 'N/A';

          const badgeEl = document.getElementById('modalActionBadge');
          badgeEl.className = 'badge ' + data.badge_class;
          badgeEl.textContent = data.action.toUpperCase();

          // Render diff table
          const tbody = document.getElementById('modalDiffTbody');
          tbody.innerHTML = '';

          if (data.diff && data.diff.length > 0) {
            data.diff.forEach(item => {
              const tr = document.createElement('tr');
              if (item.changed) {
                tr.className = 'diff-changed';
              }

              const tdField = document.createElement('td');
              tdField.innerHTML = '<strong>' + escapeHtml(item.field) + '</strong>';
              if (item.changed) {
                tdField.innerHTML += ' <span style="color: #d97706; font-size: 0.7rem; font-weight: 700;">(MODIFIED)</span>';
              }

              const tdOld = document.createElement('td');
              tdOld.style.color = item.changed ? '#dc2626' : 'inherit';
              tdOld.textContent = item.old || '-';

              const tdNew = document.createElement('td');
              tdNew.style.color = item.changed ? '#059669' : 'inherit';
              tdNew.textContent = item.new || '-';

              tr.appendChild(tdField);
              tr.appendChild(tdOld);
              tr.appendChild(tdNew);
              tbody.appendChild(tr);
            });
          } else {
            const tr = document.createElement('tr');
            tr.innerHTML = '<td colspan="3" style="text-align: center; color: var(--text-light); padding: 1.5rem;">No attribute differences recorded for this event.</td>';
            tbody.appendChild(tr);
          }

          backdrop.classList.add('active');
        })
        .catch(err => {
          btn.disabled = false;
          btn.innerHTML = '<i class="fas fa-eye"></i> Details';
          alert('Failed to retrieve log details. Please try again.');
        });
      });
    });

    function escapeHtml(text) {
      const map = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;' };
      return text.replace(/[&<>"']/g, function (m) { return map[m]; });
    }
  });
</script>
@endpush