// frontend/src/pages/settings/LogViewerPage.jsx
// Audit log viewer — filterable, paginated, expandable rows.
// Route: /settings/audit-log (wired in router/index.jsx)

import { useState, useEffect, useCallback, useRef } from 'react'
import api from '@/lib/api'
import { useAuth } from '@/hooks/useAuth'
import PageHeader from '@/components/ui/PageHeader'
import StatusBadge from '@/components/ui/StatusBadge'
import Spinner from '@/components/ui/Spinner'
import Pagination from '@/components/ui/Pagination'
import SearchBar from '@/components/ui/SearchBar'
import Select from '@/components/ui/Select'
import Button from '@/components/ui/Button'
import { fmtDateTimeMedium } from '@/lib/formatters'

// ─── Constants ────────────────────────────────────────────────────────────────

const PAGE_SIZE = 50

const ACTION_META = {
  CREATE:           { label: 'Create',          variant: 'success' },
  UPDATE:           { label: 'Update',          variant: 'info'    },
  DELETE:           { label: 'Delete',          variant: 'danger'  },
  COMMAND:          { label: 'Command',         variant: 'warning' },
  PUBLISH:          { label: 'Publish',         variant: 'success' },
  UNPUBLISH:        { label: 'Unpublish',       variant: 'neutral' },
  LOGIN:            { label: 'Login',           variant: 'neutral' },
  LOGOUT:           { label: 'Logout',          variant: 'neutral' },
  PERMISSION_CHANGE:{ label: 'Permissions',     variant: 'warning' },
  STATUS_CHANGE:    { label: 'Status Change',   variant: 'info'    },
}

const ENTITY_LABELS = {
  customer:     'Customer',
  order:        'Order',
  device:       'Device',
  device_batch: 'Device Batch',
  melody:       'Melody',
  product:      'Product',
  staff:        'Staff',
  ticket:       'Ticket',
  note:         'Note',
  quotation:    'Quotation',
  firmware:     'Firmware',
  archetype:    'Archetype',
}

const ACTION_OPTIONS = [
  { value: '',                label: 'All Actions' },
  { value: 'CREATE',          label: 'Create' },
  { value: 'UPDATE',          label: 'Update' },
  { value: 'DELETE',          label: 'Delete' },
  { value: 'COMMAND',         label: 'Command' },
  { value: 'PUBLISH',         label: 'Publish' },
  { value: 'UNPUBLISH',       label: 'Unpublish' },
  { value: 'LOGIN',           label: 'Login' },
  { value: 'LOGOUT',          label: 'Logout' },
  { value: 'PERMISSION_CHANGE', label: 'Permissions' },
  { value: 'STATUS_CHANGE',   label: 'Status Change' },
]

const ENTITY_OPTIONS = [
  { value: '', label: 'All Entities' },
  ...Object.entries(ENTITY_LABELS).map(([k, v]) => ({ value: k, label: v })),
]

// ─── Helpers ─────────────────────────────────────────────────────────────────

function actionMeta(action) {
  return ACTION_META[action] ?? { label: action, variant: 'neutral' }
}

function buildParams({ actorId, action, entityType, fromDate, toDate, offset }) {
  const p = new URLSearchParams()
  if (actorId)    p.set('actor_id',    actorId)
  if (action)     p.set('action',      action)
  if (entityType) p.set('entity_type', entityType)
  if (fromDate)   p.set('from_date',   new Date(fromDate).toISOString())
  if (toDate)     p.set('to_date',     new Date(toDate + 'T23:59:59').toISOString())
  p.set('limit',  String(PAGE_SIZE))
  p.set('offset', String(offset))
  return p.toString()
}

// ─── Changes diff renderer ────────────────────────────────────────────────────

function ChangesDiff({ changes }) {
  if (!changes || Object.keys(changes).length === 0) return null
  return (
    <div style={{
      display: 'flex',
      flexDirection: 'column',
      gap: 'var(--space-1)',
      marginTop: 'var(--space-3)',
    }}>
      <span style={{
        fontSize: 'var(--font-size-xs)',
        fontWeight: 'var(--font-weight-semibold)',
        color: 'var(--color-text-muted)',
        textTransform: 'uppercase',
        letterSpacing: 'var(--tracking-wide)',
        marginBottom: 'var(--space-1)',
      }}>
        Changes
      </span>
      {Object.entries(changes).map(([field, { old: oldVal, new: newVal }]) => (
        <div key={field} style={{
          display: 'grid',
          gridTemplateColumns: '140px 1fr 1fr',
          gap: 'var(--space-2)',
          alignItems: 'start',
          fontSize: 'var(--font-size-sm)',
          padding: 'var(--space-2) var(--space-3)',
          backgroundColor: 'var(--color-bg-abyss)',
          borderRadius: 'var(--radius-sm)',
        }}>
          <span style={{
            fontFamily: 'var(--font-family-mono)',
            fontSize: 'var(--font-size-xs)',
            color: 'var(--color-text-muted)',
            wordBreak: 'break-all',
          }}>
            {field}
          </span>
          <span style={{
            color: 'var(--color-danger)',
            wordBreak: 'break-all',
            fontFamily: oldVal !== null && typeof oldVal === 'string' ? undefined : 'var(--font-family-mono)',
            fontSize: 'var(--font-size-xs)',
          }}>
            {oldVal === null || oldVal === undefined ? <em style={{ color: 'var(--color-text-muted)' }}>null</em> : String(oldVal)}
          </span>
          <span style={{
            color: 'var(--color-success)',
            wordBreak: 'break-all',
            fontFamily: newVal !== null && typeof newVal === 'string' ? undefined : 'var(--font-family-mono)',
            fontSize: 'var(--font-size-xs)',
          }}>
            {newVal === null || newVal === undefined ? <em style={{ color: 'var(--color-text-muted)' }}>null</em> : String(newVal)}
          </span>
        </div>
      ))}
    </div>
  )
}

// ─── Meta renderer ────────────────────────────────────────────────────────────

function MetaBlock({ meta }) {
  if (!meta || Object.keys(meta).length === 0) return null
  return (
    <div style={{ marginTop: 'var(--space-3)' }}>
      <span style={{
        fontSize: 'var(--font-size-xs)',
        fontWeight: 'var(--font-weight-semibold)',
        color: 'var(--color-text-muted)',
        textTransform: 'uppercase',
        letterSpacing: 'var(--tracking-wide)',
        display: 'block',
        marginBottom: 'var(--space-1)',
      }}>
        Context
      </span>
      <div style={{
        display: 'flex',
        flexWrap: 'wrap',
        gap: 'var(--space-2)',
      }}>
        {Object.entries(meta).map(([k, v]) => (
          <span key={k} style={{
            display: 'inline-flex',
            alignItems: 'center',
            gap: 'var(--space-1)',
            fontSize: 'var(--font-size-xs)',
            padding: '2px var(--space-2)',
            backgroundColor: 'var(--color-bg-abyss)',
            borderRadius: 'var(--radius-sm)',
            color: 'var(--color-text-secondary)',
          }}>
            <span style={{ color: 'var(--color-text-muted)', fontFamily: 'var(--font-family-mono)' }}>{k}</span>
            <span style={{ color: 'var(--color-text-muted)' }}>·</span>
            <span style={{ fontFamily: 'var(--font-family-mono)' }}>{String(v)}</span>
          </span>
        ))}
      </div>
    </div>
  )
}

// ─── Row ──────────────────────────────────────────────────────────────────────

function LogRow({ entry, isExpanded, onToggle }) {
  const { label, variant } = actionMeta(entry.action)
  const entityLabel = ENTITY_LABELS[entry.entity_type] ?? entry.entity_type
  const hasDetail = (entry.changes && Object.keys(entry.changes).length > 0)
    || (entry.meta && Object.keys(entry.meta).length > 0)

  return (
    <>
      <tr
        className={`log-row${isExpanded ? ' log-row--expanded' : ''}${hasDetail ? ' log-row--clickable' : ''}`}
        onClick={hasDetail ? onToggle : undefined}
        style={{ cursor: hasDetail ? 'pointer' : 'default' }}
      >
        {/* Timestamp */}
        <td className="log-cell log-cell--ts">
          <span style={{
            fontFamily: 'var(--font-family-mono)',
            fontSize: 'var(--font-size-xs)',
            color: 'var(--color-text-muted)',
            whiteSpace: 'nowrap',
          }}>
            {fmtDateTimeMedium(entry.occurred_at)}
          </span>
        </td>

        {/* Actor */}
        <td className="log-cell">
          <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
            <div style={{
              width: 24,
              height: 24,
              borderRadius: 'var(--radius-full)',
              background: 'var(--color-primary-subtle)',
              border: '1px solid rgba(192,193,255,0.12)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              flexShrink: 0,
              fontFamily: 'var(--font-family-display)',
              fontWeight: 'var(--font-weight-semibold)',
              fontSize: '10px',
              color: 'var(--color-primary)',
              letterSpacing: '0.02em',
            }}>
              {entry.actor_name?.charAt(0)?.toUpperCase() ?? '?'}
            </div>
            <span style={{
              fontSize: 'var(--font-size-sm)',
              color: 'var(--color-text-primary)',
              fontWeight: 'var(--font-weight-medium)',
            }}>
              {entry.actor_name}
            </span>
          </div>
        </td>

        {/* Action badge */}
        <td className="log-cell" style={{ whiteSpace: 'nowrap' }}>
          <StatusBadge variant={variant}>{label}</StatusBadge>
        </td>

        {/* Entity */}
        <td className="log-cell">
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            <span style={{
              fontSize: 'var(--font-size-xs)',
              color: 'var(--color-text-muted)',
              textTransform: 'uppercase',
              letterSpacing: 'var(--tracking-wide)',
              fontWeight: 'var(--font-weight-semibold)',
            }}>
              {entityLabel}
            </span>
            {entry.entity_label && (
              <span style={{
                fontSize: 'var(--font-size-sm)',
                color: 'var(--color-text-primary)',
                fontWeight: 'var(--font-weight-medium)',
              }}>
                {entry.entity_label}
              </span>
            )}
          </div>
        </td>

        {/* Entity ID */}
        <td className="log-cell log-cell--id">
          <span style={{
            fontFamily: 'var(--font-family-mono)',
            fontSize: 'var(--font-size-xs)',
            color: 'var(--color-text-muted)',
          }}>
            {entry.entity_id?.length > 16
              ? entry.entity_id.slice(0, 8) + '…' + entry.entity_id.slice(-4)
              : entry.entity_id}
          </span>
        </td>

        {/* Expand chevron */}
        <td className="log-cell log-cell--expand" style={{ textAlign: 'right', width: 32 }}>
          {hasDetail && (
            <svg
              width="12" height="12" viewBox="0 0 12 12" fill="none"
              stroke="currentColor" strokeWidth="1.8"
              strokeLinecap="round" strokeLinejoin="round"
              aria-hidden="true"
              style={{
                display: 'block',
                marginLeft: 'auto',
                color: 'var(--color-text-muted)',
                transform: isExpanded ? 'rotate(180deg)' : 'none',
                transition: 'transform 150ms ease',
              }}
            >
              <path d="M2 4l4 4 4-4" />
            </svg>
          )}
        </td>
      </tr>

      {/* Expanded detail row */}
      {isExpanded && hasDetail && (
        <tr className="log-row-detail">
          <td colSpan={6} style={{ padding: 0 }}>
            <div style={{
              padding: 'var(--space-4) var(--space-6)',
              backgroundColor: 'var(--color-bg-void)',
              borderBottom: '1px solid var(--color-border)',
            }}>
              <ChangesDiff changes={entry.changes} />
              <MetaBlock meta={entry.meta} />
            </div>
          </td>
        </tr>
      )}
    </>
  )
}

// ─── Skeleton ─────────────────────────────────────────────────────────────────

function SkeletonRows() {
  return Array.from({ length: 10 }).map((_, i) => (
    <tr key={i} className="log-row">
      {[140, 120, 80, 140, 100, 24].map((w, j) => (
        <td key={j} className="log-cell">
          <div style={{
            height: 14,
            width: w,
            maxWidth: '100%',
            borderRadius: 'var(--radius-sm)',
            backgroundColor: 'var(--color-bg-elevated)',
            opacity: 0.6,
          }} />
        </td>
      ))}
    </tr>
  ))
}

// ─── Filters bar ──────────────────────────────────────────────────────────────

function FiltersBar({ filters, setFilters, staffList, onReset }) {
  const hasFilters = filters.actorId || filters.action || filters.entityType
    || filters.fromDate || filters.toDate

  return (
    <div style={{
      display: 'flex',
      flexWrap: 'wrap',
      alignItems: 'center',
      gap: 'var(--space-3)',
    }}>
      {/* Actor / staff member */}
      <div style={{ minWidth: 160 }}>
        <Select
          value={filters.actorId}
          onChange={(e) => setFilters(f => ({ ...f, actorId: e.target.value, offset: 0 }))}
          placeholder="All Staff"
        >
          <option value="">All Staff</option>
          {staffList.map(s => (
            <option key={s.id} value={s.id}>{s.name}</option>
          ))}
        </Select>
      </div>

      {/* Action */}
      <div style={{ minWidth: 140 }}>
        <Select
          value={filters.action}
          onChange={(e) => setFilters(f => ({ ...f, action: e.target.value, offset: 0 }))}
          placeholder="All Actions"
        >
          {ACTION_OPTIONS.map(o => (
            <option key={o.value} value={o.value}>{o.label}</option>
          ))}
        </Select>
      </div>

      {/* Entity type */}
      <div style={{ minWidth: 140 }}>
        <Select
          value={filters.entityType}
          onChange={(e) => setFilters(f => ({ ...f, entityType: e.target.value, offset: 0 }))}
          placeholder="All Entities"
        >
          {ENTITY_OPTIONS.map(o => (
            <option key={o.value} value={o.value}>{o.label}</option>
          ))}
        </Select>
      </div>

      {/* Date range */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 'var(--space-2)' }}>
        <input
          type="date"
          value={filters.fromDate}
          onChange={(e) => setFilters(f => ({ ...f, fromDate: e.target.value, offset: 0 }))}
          aria-label="From date"
          className="log-date-input"
        />
        <span style={{ fontSize: 'var(--font-size-xs)', color: 'var(--color-text-muted)' }}>–</span>
        <input
          type="date"
          value={filters.toDate}
          onChange={(e) => setFilters(f => ({ ...f, toDate: e.target.value, offset: 0 }))}
          aria-label="To date"
          className="log-date-input"
        />
      </div>

      {/* Reset */}
      {hasFilters && (
        <Button variant="ghost" size="sm" onClick={onReset}>
          Clear filters
        </Button>
      )}
    </div>
  )
}

// ─── Summary stats ────────────────────────────────────────────────────────────

function StatPill({ label, value, variant }) {
  const colors = {
    success: 'var(--color-success)',
    danger:  'var(--color-danger)',
    warning: 'var(--color-warning)',
    info:    'var(--color-info)',
    neutral: 'var(--color-text-muted)',
  }
  return (
    <div style={{
      display: 'flex',
      alignItems: 'center',
      gap: 'var(--space-2)',
      padding: 'var(--space-2) var(--space-3)',
      backgroundColor: 'var(--color-bg-surface)',
      border: '1px solid var(--color-border)',
      borderRadius: 'var(--radius-md)',
      minWidth: 80,
    }}>
      <span style={{
        width: 6,
        height: 6,
        borderRadius: 'var(--radius-full)',
        backgroundColor: colors[variant] ?? colors.neutral,
        flexShrink: 0,
      }} />
      <span style={{
        fontSize: 'var(--font-size-xs)',
        color: 'var(--color-text-muted)',
        textTransform: 'uppercase',
        letterSpacing: 'var(--tracking-wide)',
        fontWeight: 'var(--font-weight-semibold)',
      }}>
        {label}
      </span>
      <span style={{
        fontSize: 'var(--font-size-sm)',
        fontWeight: 'var(--font-weight-semibold)',
        color: 'var(--color-text-primary)',
        fontFamily: 'var(--font-family-mono)',
        marginLeft: 'auto',
      }}>
        {value}
      </span>
    </div>
  )
}

// ─── Main page ────────────────────────────────────────────────────────────────

const INITIAL_FILTERS = {
  actorId:    '',
  action:     '',
  entityType: '',
  fromDate:   '',
  toDate:     '',
  offset:     0,
}

function LogViewerContent() {
  const [entries,    setEntries]    = useState([])
  const [loading,    setLoading]    = useState(true)
  const [error,      setError]      = useState(null)
  const [total,      setTotal]      = useState(null)
  const [staffList,  setStaffList]  = useState([])
  const [filters,    setFilters]    = useState(INITIAL_FILTERS)
  const [expandedId, setExpandedId] = useState(null)
  const [stats,      setStats]      = useState(null)

  // Derived pagination
  const page      = Math.floor(filters.offset / PAGE_SIZE) + 1
  const pageCount = total != null ? Math.ceil(total / PAGE_SIZE) : 0

  // Load staff list once for the actor dropdown
  useEffect(() => {
    api.get('/staff').then(data => {
      setStaffList((data.staff ?? data ?? []).map(s => ({ id: s.id, name: s.name })))
    }).catch(() => {})
  }, [])

  // Load entries whenever filters change
  const fetchEntries = useCallback(async () => {
    setLoading(true)
    setError(null)
    setExpandedId(null)
    try {
      const qs = buildParams(filters)
      const data = await api.get(`/audit-log?${qs}`)
      const rows = data.entries ?? []
      setEntries(rows)

      // The API doesn't return total — fetch count via a separate offset-trick:
      // if we got a full page, there may be more; signal unknown total for now.
      setTotal(null)

      // Build quick stats from current page
      const actionCounts = {}
      rows.forEach(r => { actionCounts[r.action] = (actionCounts[r.action] ?? 0) + 1 })
      setStats(actionCounts)
    } catch (err) {
      setError(err?.message ?? 'Failed to load audit log.')
    } finally {
      setLoading(false)
    }
  }, [filters])

  useEffect(() => { fetchEntries() }, [fetchEntries])

  function handleReset() {
    setFilters(INITIAL_FILTERS)
  }

  function toggleExpand(id) {
    setExpandedId(prev => prev === id ? null : id)
  }

  // ── Render states ────────────────────────────────────────────────────────

  const isEmpty = !loading && !error && entries.length === 0

  return (
    <>
      <style>{`
        .log-row {
          border-bottom: 1px solid var(--color-border);
          transition: background-color 80ms;
        }
        .log-row:hover {
          background-color: var(--color-bg-elevated);
        }
        .log-row--expanded {
          background-color: var(--color-bg-elevated);
        }
        .log-row--clickable:hover {
          background-color: var(--color-bg-island);
        }
        .log-row-detail {
          background-color: var(--color-bg-void);
        }
        .log-cell {
          padding: var(--space-3) var(--space-4);
          vertical-align: middle;
        }
        .log-cell--ts {
          width: 148px;
          white-space: nowrap;
        }
        .log-cell--id {
          width: 120px;
        }
        .log-cell--expand {
          width: 40px;
          padding-right: var(--space-4);
        }
        .log-table {
          width: 100%;
          border-collapse: collapse;
          table-layout: auto;
        }
        .log-table thead th {
          padding: var(--space-2) var(--space-4);
          text-align: left;
          font-size: var(--font-size-xs);
          font-weight: var(--font-weight-semibold);
          color: var(--color-text-muted);
          text-transform: uppercase;
          letter-spacing: var(--tracking-wide);
          border-bottom: 1px solid var(--color-border-strong);
          white-space: nowrap;
          background-color: var(--color-bg-void);
        }
        .log-date-input {
          height: 32px;
          padding: 0 var(--space-3);
          background-color: var(--color-bg-abyss);
          border: 1px solid var(--color-border);
          border-radius: var(--radius-md);
          color: var(--color-text-primary);
          font-size: var(--font-size-sm);
          font-family: var(--font-family-base);
          outline: none;
          transition: border-color 150ms;
          color-scheme: dark;
        }
        .log-date-input:focus {
          border-color: var(--color-border-focus);
          box-shadow: var(--shadow-focus);
        }
        .log-date-input::-webkit-calendar-picker-indicator {
          filter: invert(0.6);
          cursor: pointer;
        }
      `}</style>

      <div className="page-wrapper">
        <PageHeader
          title="Log Viewer"
          subtitle="Staff actions and system events across the console"
        />

        {/* ── Stats strip ─────────────────────────────────────────────── */}
        {stats && Object.keys(stats).length > 0 && (
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-2)' }}>
            {Object.entries(stats)
              .sort((a, b) => b[1] - a[1])
              .map(([action, count]) => {
                const { label, variant } = actionMeta(action)
                return <StatPill key={action} label={label} value={count} variant={variant} />
              })}
          </div>
        )}

        {/* ── Filters ──────────────────────────────────────────────────── */}
        <FiltersBar
          filters={filters}
          setFilters={setFilters}
          staffList={staffList}
          onReset={handleReset}
        />

        {/* ── Table ────────────────────────────────────────────────────── */}
        <div style={{
          backgroundColor: 'var(--color-bg-surface)',
          border: '1px solid var(--color-border)',
          borderRadius: 'var(--radius-lg)',
          overflow: 'hidden',
          boxShadow: 'var(--shadow-card)',
        }}>
          <table className="log-table" aria-label="Audit log">
            <thead>
              <tr>
                <th style={{ width: 148 }}>Timestamp</th>
                <th style={{ width: 160 }}>Staff</th>
                <th style={{ whiteSpace: 'nowrap' }}>Action</th>
                <th>Entity</th>
                <th style={{ width: 120 }}>ID</th>
                <th style={{ width: 40 }} />
              </tr>
            </thead>
            <tbody>
              {loading ? (
                <SkeletonRows />
              ) : error ? (
                <tr>
                  <td colSpan={6} style={{ padding: 'var(--space-12)', textAlign: 'center' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-3)' }}>
                      <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ color: 'var(--color-danger)', opacity: 0.7 }}>
                        <circle cx="12" cy="12" r="10" />
                        <path d="M12 8v4M12 16h.01" />
                      </svg>
                      <p style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-danger)' }}>{error}</p>
                      <Button variant="ghost" size="sm" onClick={fetchEntries}>Retry</Button>
                    </div>
                  </td>
                </tr>
              ) : isEmpty ? (
                <tr>
                  <td colSpan={6} style={{ padding: 'var(--space-12)', textAlign: 'center' }}>
                    <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 'var(--space-3)' }}>
                      <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ color: 'var(--color-text-muted)' }}>
                        <rect x="3" y="3" width="18" height="18" rx="2" />
                        <path d="M8 9h8M8 13h5" />
                      </svg>
                      <p style={{ fontSize: 'var(--font-size-base)', color: 'var(--color-text-muted)' }}>
                        No entries match these filters
                      </p>
                      <Button variant="ghost" size="sm" onClick={handleReset}>
                        Clear filters
                      </Button>
                    </div>
                  </td>
                </tr>
              ) : (
                entries.map(entry => (
                  <LogRow
                    key={entry.id}
                    entry={entry}
                    isExpanded={expandedId === entry.id}
                    onToggle={() => toggleExpand(entry.id)}
                  />
                ))
              )}
            </tbody>
          </table>
        </div>

        {/* ── Pagination ────────────────────────────────────────────────── */}
        {!loading && !error && entries.length > 0 && (
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 'var(--space-4)' }}>
            <span style={{ fontSize: 'var(--font-size-sm)', color: 'var(--color-text-muted)' }}>
              Showing {filters.offset + 1}–{filters.offset + entries.length}
              {entries.length === PAGE_SIZE && ' · more available'}
            </span>
            <div style={{ display: 'flex', gap: 'var(--space-2)' }}>
              <Button
                variant="secondary"
                size="sm"
                disabled={filters.offset === 0}
                onClick={() => setFilters(f => ({ ...f, offset: Math.max(0, f.offset - PAGE_SIZE) }))}
              >
                ← Previous
              </Button>
              <Button
                variant="secondary"
                size="sm"
                disabled={entries.length < PAGE_SIZE}
                onClick={() => setFilters(f => ({ ...f, offset: f.offset + PAGE_SIZE }))}
              >
                Next →
              </Button>
            </div>
          </div>
        )}
      </div>
    </>
  )
}

export default function LogViewerPage() {
  const { hasRole } = useAuth()

  if (!hasRole('sysadmin')) {
    return (
      <div className="page-wrapper">
        <PageHeader title="Log Viewer" subtitle="Staff actions and system events across the console" />
        <div style={{ padding: 'var(--space-12)', textAlign: 'center', color: 'var(--color-text-muted)', fontSize: 'var(--font-size-sm)' }}>
          Access restricted to system administrators.
        </div>
      </div>
    )
  }

  return <LogViewerContent />
}
