'use client';

import React, { useState, useEffect, useCallback } from 'react';
import Link from 'next/link';
import { useAuth } from '@/contexts/AuthContext';
import { useRouter } from 'next/navigation';
import { createClient } from '@/lib/supabase/client';

// ─── Types ────────────────────────────────────────────────────────────────────

interface AuditLog {
  id: string;
  action: string;
  performed_by: string | null;
  performed_by_email: string | null;
  affected_item_id: string | null;
  affected_item_type: string | null;
  affected_item_title: string | null;
  old_value: Record<string, unknown> | null;
  new_value: Record<string, unknown> | null;
  metadata: Record<string, unknown> | null;
  created_at: string;
  user_profiles?: { full_name: string; email: string } | null;
}

type ActionFilter = 'all' | 'article' | 'user' | 'import';

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

const ACTION_LABELS: Record<string, string> = {
  article_created: 'Article Created',
  article_edited: 'Article Edited',
  article_published: 'Article Published',
  article_unpublished: 'Article Unpublished',
  article_deleted: 'Article Deleted',
  article_archived: 'Article Archived',
  article_status_changed: 'Status Changed',
  user_role_changed: 'Role Changed',
  user_activated: 'User Activated',
  user_deactivated: 'User Deactivated',
  user_invited: 'User Invited',
  user_invitation_revoked: 'Invitation Revoked',
  import_completed: 'Import Completed',
  import_failed: 'Import Failed',
};

const ACTION_COLORS: Record<string, string> = {
  article_created: 'text-green-400 bg-green-400/10',
  article_edited: 'text-blue-400 bg-blue-400/10',
  article_published: 'text-green-400 bg-green-400/10',
  article_unpublished: 'text-yellow-400 bg-yellow-400/10',
  article_deleted: 'text-red-400 bg-red-400/10',
  article_archived: 'text-[#888] bg-[#FFFFFF]',
  article_status_changed: 'text-purple-400 bg-purple-400/10',
  user_role_changed: 'text-orange-400 bg-orange-400/10',
  user_activated: 'text-green-400 bg-green-400/10',
  user_deactivated: 'text-red-400 bg-red-400/10',
  user_invited: 'text-blue-400 bg-blue-400/10',
  user_invitation_revoked: 'text-[#888] bg-[#FFFFFF]',
  import_completed: 'text-teal-400 bg-teal-400/10',
  import_failed: 'text-red-400 bg-red-400/10',
};

const ACTION_ICONS: Record<string, React.ReactNode> = {
  article_created: (
    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" d="M12 4v16m8-8H4" />
    </svg>
  ),
  article_edited: (
    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
    </svg>
  ),
  article_published: (
    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
    </svg>
  ),
  article_deleted: (
    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
    </svg>
  ),
  user_role_changed: (
    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
    </svg>
  ),
  user_invited: (
    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
    </svg>
  ),
  import_completed: (
    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
    </svg>
  ),
};

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

function timeAgo(dateStr: string): string {
  const diff = Date.now() - new Date(dateStr).getTime();
  const mins = Math.floor(diff / 60000);
  if (mins < 1) return 'just now';
  if (mins < 60) return `${mins}m ago`;
  const hrs = Math.floor(mins / 60);
  if (hrs < 24) return `${hrs}h ago`;
  const days = Math.floor(hrs / 24);
  if (days < 30) return `${days}d ago`;
  return new Date(dateStr).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
}

function formatDateTime(dateStr: string): string {
  return new Date(dateStr).toLocaleString('en-US', {
    month: 'short', day: 'numeric', year: 'numeric',
    hour: '2-digit', minute: '2-digit',
  });
}

function getActionCategory(action: string): ActionFilter {
  if (action.startsWith('article_')) return 'article';
  if (action.startsWith('user_')) return 'user';
  if (action.startsWith('import_')) return 'import';
  return 'all';
}

function getDefaultIcon(action: string): React.ReactNode {
  const category = getActionCategory(action);
  if (category === 'article') return ACTION_ICONS['article_edited'];
  if (category === 'user') return ACTION_ICONS['user_role_changed'];
  if (category === 'import') return ACTION_ICONS['import_completed'];
  return (
    <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
      <circle cx="12" cy="12" r="10" />
    </svg>
  );
}

// ─── Stat Card ────────────────────────────────────────────────────────────────

interface StatCardProps {
  label: string;
  value: number;
  accent: string;
  icon: React.ReactNode;
}

function StatCard({ label, value, accent, icon }: StatCardProps) {
  return (
    <div className="bg-[#111] border border-[#DCE6F2] rounded-lg p-4 flex items-center gap-4">
      <div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${accent}`}>
        {icon}
      </div>
      <div>
        <p className="text-xl font-display font-bold text-white">{value.toLocaleString()}</p>
        <p className="text-xs text-[#888] font-body">{label}</p>
      </div>
    </div>
  );
}

// ─── Detail Modal ─────────────────────────────────────────────────────────────

interface DetailModalProps {
  log: AuditLog;
  onClose: () => void;
}

function DetailModal({ log, onClose }: DetailModalProps) {
  const actionColor = ACTION_COLORS[log.action] || 'text-[#888] bg-[#FFFFFF]';
  const actionLabel = ACTION_LABELS[log.action] || log.action;
  const performerName = log.user_profiles?.full_name || log.performed_by_email || 'System';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/70" onClick={onClose} />
      <div className="relative bg-[#111] border border-[#DCE6F2] rounded-xl w-full max-w-lg shadow-2xl">
        {/* Header */}
        <div className="flex items-center justify-between p-5 border-b border-[#DCE6F2]">
          <div className="flex items-center gap-3">
            <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${actionColor}`}>
              {ACTION_ICONS[log.action] || getDefaultIcon(log.action)}
            </div>
            <div>
              <h3 className="text-white font-display font-semibold text-sm">{actionLabel}</h3>
              <p className="text-[#555] text-xs font-body">{formatDateTime(log.created_at)}</p>
            </div>
          </div>
          <button onClick={onClose} className="text-[#555] hover:text-white transition-colors p-1">
            <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>

        {/* Body */}
        <div className="p-5 space-y-4">
          {/* Performer */}
          <div>
            <p className="text-[#555] text-xs font-body uppercase tracking-wider mb-1">Performed By</p>
            <p className="text-white text-sm font-body">{performerName}</p>
            {log.performed_by_email && log.user_profiles?.full_name && (
              <p className="text-[#555] text-xs font-body">{log.performed_by_email}</p>
            )}
          </div>

          {/* Affected Item */}
          {log.affected_item_title && (
            <div>
              <p className="text-[#555] text-xs font-body uppercase tracking-wider mb-1">Affected Item</p>
              <p className="text-white text-sm font-body">{log.affected_item_title}</p>
              {log.affected_item_type && (
                <p className="text-[#555] text-xs font-body capitalize">{log.affected_item_type}</p>
              )}
            </div>
          )}

          {/* Changes */}
          {(log.old_value || log.new_value) && (
            <div>
              <p className="text-[#555] text-xs font-body uppercase tracking-wider mb-2">Changes</p>
              <div className="grid grid-cols-2 gap-3">
                {log.old_value && (
                  <div className="bg-red-400/5 border border-red-400/20 rounded-lg p-3">
                    <p className="text-red-400 text-xs font-body font-semibold mb-1.5">Before</p>
                    <pre className="text-[#aaa] text-xs font-mono whitespace-pre-wrap break-all">
                      {JSON.stringify(log.old_value, null, 2)}
                    </pre>
                  </div>
                )}
                {log.new_value && (
                  <div className="bg-green-400/5 border border-green-400/20 rounded-lg p-3">
                    <p className="text-green-400 text-xs font-body font-semibold mb-1.5">After</p>
                    <pre className="text-[#aaa] text-xs font-mono whitespace-pre-wrap break-all">
                      {JSON.stringify(log.new_value, null, 2)}
                    </pre>
                  </div>
                )}
              </div>
            </div>
          )}

          {/* Metadata */}
          {log.metadata && Object.keys(log.metadata).length > 0 && (
            <div>
              <p className="text-[#555] text-xs font-body uppercase tracking-wider mb-1">Metadata</p>
              <div className="bg-[#F8FAFC] border border-[#1e1e1e] rounded-lg p-3">
                <pre className="text-[#aaa] text-xs font-mono whitespace-pre-wrap break-all">
                  {JSON.stringify(log.metadata, null, 2)}
                </pre>
              </div>
            </div>
          )}

          {/* Log ID */}
          <div>
            <p className="text-[#555] text-xs font-body uppercase tracking-wider mb-1">Log ID</p>
            <p className="text-[#444] text-xs font-mono">{log.id}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Main Page ────────────────────────────────────────────────────────────────

export default function AuditLogPage() {
  const { user, loading } = useAuth();
  const router = useRouter();

  const [logs, setLogs] = useState<AuditLog[]>([]);
  const [loadingData, setLoadingData] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [searchQuery, setSearchQuery] = useState('');
  const [actionFilter, setActionFilter] = useState<ActionFilter>('all');
  const [selectedLog, setSelectedLog] = useState<AuditLog | null>(null);
  const [page, setPage] = useState(0);
  const PAGE_SIZE = 25;

  useEffect(() => {
    if (!loading && !user) router.replace('/login?next=' + encodeURIComponent(window.location.pathname));
  }, [user, loading, router]);

  const fetchLogs = useCallback(async () => {
    if (!user) return;
    setLoadingData(true);
    setError(null);
    try {
      const supabase = createClient();
      let query = supabase
        .from('audit_logs')
        .select('*, user_profiles(full_name, email)')
        .order('created_at', { ascending: false })
        .range(page * PAGE_SIZE, (page + 1) * PAGE_SIZE - 1);

      if (actionFilter !== 'all') {
        query = query.like('action', `${actionFilter}_%`);
      }

      const { data, error: fetchError } = await query;
      if (fetchError) throw fetchError;
      setLogs(data || []);
    } catch (err: unknown) {
      const message = err instanceof Error ? err.message : 'Failed to load audit logs';
      setError(message);
    } finally {
      setLoadingData(false);
    }
  }, [user, actionFilter, page]);

  useEffect(() => {
    if (user) fetchLogs();
  }, [user, fetchLogs]);

  // Reset page when filter changes
  useEffect(() => {
    setPage(0);
  }, [actionFilter, searchQuery]);

  const filteredLogs = logs.filter((log) => {
    if (!searchQuery) return true;
    const q = searchQuery.toLowerCase();
    return (
      (log.affected_item_title || '').toLowerCase().includes(q) ||
      (log.performed_by_email || '').toLowerCase().includes(q) ||
      (log.user_profiles?.full_name || '').toLowerCase().includes(q) ||
      (ACTION_LABELS[log.action] || log.action).toLowerCase().includes(q)
    );
  });

  // Stats
  const articleCount = logs.filter((l) => l.action.startsWith('article_')).length;
  const userCount = logs.filter((l) => l.action.startsWith('user_')).length;
  const importCount = logs.filter((l) => l.action.startsWith('import_')).length;

  if (loading) {
    return (
      <div className="min-h-screen bg-[#0a0a0a] flex items-center justify-center">
        <div className="w-6 h-6 border-2 border-[#1D4ED8] border-t-transparent rounded-full animate-spin" />
      </div>
    );
  }

  if (!user) return null;

  return (
    <div className="min-h-screen bg-[#0a0a0a]">
      <div className="max-w-7xl mx-auto px-4 py-8">

        {/* Header */}
        <div className="flex items-center justify-between mb-6">
          <div>
            <div className="flex items-center gap-2 mb-1">
              <Link href="/admin" className="text-[#555] hover:text-[#888] text-sm font-body transition-colors">
                Dashboard
              </Link>
              <svg className="w-3.5 h-3.5 text-[#333]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" />
              </svg>
              <span className="text-[#888] text-sm font-body">Audit Log</span>
            </div>
            <h1 className="text-2xl font-display font-bold text-white">Audit Log</h1>
            <p className="text-[#555] text-sm font-body mt-0.5">Track all admin actions across the platform</p>
          </div>
          <button
            onClick={fetchLogs}
            className="flex items-center gap-2 px-3 py-2 bg-[#111] border border-[#DCE6F2] rounded-lg text-[#888] hover:text-white hover:border-[#333] transition-all text-sm font-body"
          >
            <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
            </svg>
            Refresh
          </button>
        </div>

        {/* Stat Cards */}
        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mb-6">
          <StatCard
            label="Total Events"
            value={logs.length}
            accent="bg-[#1D4ED8]/10 text-[#1D4ED8]"
            icon={
              <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
              </svg>
            }
          />
          <StatCard
            label="Article Actions"
            value={articleCount}
            accent="bg-green-400/10 text-green-400"
            icon={
              <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />
              </svg>
            }
          />
          <StatCard
            label="User Actions"
            value={userCount}
            accent="bg-orange-400/10 text-orange-400"
            icon={
              <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
              </svg>
            }
          />
          <StatCard
            label="Import Events"
            value={importCount}
            accent="bg-teal-400/10 text-teal-400"
            icon={
              <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" />
              </svg>
            }
          />
        </div>

        {/* Filters */}
        <div className="flex flex-col sm:flex-row gap-3 mb-5">
          {/* Search */}
          <div className="relative flex-1">
            <svg className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[#444]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
              <circle cx="11" cy="11" r="8" /><path strokeLinecap="round" strokeLinejoin="round" d="M21 21l-4.35-4.35" />
            </svg>
            <input
              type="text"
              placeholder="Search by user, item, or action…"
              value={searchQuery}
              onChange={(e) => setSearchQuery(e.target.value)}
              className="w-full bg-[#111] border border-[#DCE6F2] rounded-lg pl-9 pr-4 py-2.5 text-sm text-white placeholder-[#444] focus:outline-none focus:border-[#1D4ED8] font-body"
            />
          </div>

          {/* Action Type Filter */}
          <div className="flex items-center gap-1 bg-[#111] border border-[#DCE6F2] rounded-lg p-1">
            {(['all', 'article', 'user', 'import'] as ActionFilter[]).map((f) => (
              <button
                key={f}
                onClick={() => setActionFilter(f)}
                className={`px-3 py-1.5 rounded-md text-xs font-body font-semibold capitalize transition-all ${
                  actionFilter === f
                    ? 'bg-[#1D4ED8] text-white'
                    : 'text-[#555] hover:text-[#888]'
                }`}
              >
                {f === 'all' ? 'All Events' : `${f.charAt(0).toUpperCase() + f.slice(1)}s`}
              </button>
            ))}
          </div>
        </div>

        {/* Error */}
        {error && (
          <div className="bg-red-400/10 border border-red-400/20 rounded-lg p-4 mb-5 flex items-center gap-3">
            <svg className="w-4 h-4 text-red-400 flex-shrink-0" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
              <circle cx="12" cy="12" r="10" /><path strokeLinecap="round" strokeLinejoin="round" d="M12 8v4m0 4h.01" />
            </svg>
            <p className="text-red-400 text-sm font-body">{error}</p>
          </div>
        )}

        {/* Table */}
        <div className="bg-[#111] border border-[#DCE6F2] rounded-xl overflow-hidden">
          {/* Table Header */}
          <div className="hidden md:grid grid-cols-[2fr_1.5fr_1.5fr_1fr_auto] gap-4 px-5 py-3 border-b border-[#1e1e1e] bg-[#F8FAFC]">
            <p className="text-[#444] text-xs font-body font-semibold uppercase tracking-wider">Action</p>
            <p className="text-[#444] text-xs font-body font-semibold uppercase tracking-wider">Performed By</p>
            <p className="text-[#444] text-xs font-body font-semibold uppercase tracking-wider">Affected Item</p>
            <p className="text-[#444] text-xs font-body font-semibold uppercase tracking-wider">Timestamp</p>
            <p className="text-[#444] text-xs font-body font-semibold uppercase tracking-wider">Details</p>
          </div>

          {/* Loading */}
          {loadingData && (
            <div className="flex items-center justify-center py-16">
              <div className="flex flex-col items-center gap-3">
                <div className="w-6 h-6 border-2 border-[#1D4ED8] border-t-transparent rounded-full animate-spin" />
                <p className="text-[#555] text-sm font-body">Loading audit logs…</p>
              </div>
            </div>
          )}

          {/* Empty */}
          {!loadingData && filteredLogs.length === 0 && (
            <div className="flex flex-col items-center justify-center py-16 gap-3">
              <div className="w-12 h-12 rounded-full bg-[#FFFFFF] flex items-center justify-center">
                <svg className="w-6 h-6 text-[#333]" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                </svg>
              </div>
              <p className="text-[#555] text-sm font-body">No audit log entries found</p>
              {searchQuery && (
                <button onClick={() => setSearchQuery('')} className="text-[#1D4ED8] text-xs font-body hover:underline">
                  Clear search
                </button>
              )}
            </div>
          )}

          {/* Rows */}
          {!loadingData && filteredLogs.map((log, idx) => {
            const actionColor = ACTION_COLORS[log.action] || 'text-[#888] bg-[#FFFFFF]';
            const actionLabel = ACTION_LABELS[log.action] || log.action;
            const icon = ACTION_ICONS[log.action] || getDefaultIcon(log.action);
            const performerName = log.user_profiles?.full_name || log.performed_by_email || 'System';

            return (
              <div
                key={log.id}
                className={`grid grid-cols-1 md:grid-cols-[2fr_1.5fr_1.5fr_1fr_auto] gap-3 md:gap-4 px-5 py-4 hover:bg-[#F8FAFC] transition-colors cursor-pointer ${
                  idx !== filteredLogs.length - 1 ? 'border-b border-[#FFFFFF]' : ''
                }`}
                onClick={() => setSelectedLog(log)}
              >
                {/* Action */}
                <div className="flex items-center gap-3 min-w-0">
                  <div className={`w-7 h-7 rounded-lg flex items-center justify-center flex-shrink-0 ${actionColor}`}>
                    {icon}
                  </div>
                  <span className={`text-xs font-body font-semibold px-2 py-0.5 rounded-full ${actionColor}`}>
                    {actionLabel}
                  </span>
                </div>

                {/* Performed By */}
                <div className="flex items-center gap-2 min-w-0">
                  <div className="w-6 h-6 rounded-full bg-[#FFFFFF] border border-[#DCE6F2] flex items-center justify-center flex-shrink-0">
                    <span className="text-[#888] text-xs font-body font-bold">
                      {performerName.charAt(0).toUpperCase()}
                    </span>
                  </div>
                  <div className="min-w-0">
                    <p className="text-white text-sm font-body truncate">{performerName}</p>
                    {log.performed_by_email && log.user_profiles?.full_name && (
                      <p className="text-[#444] text-xs font-body truncate">{log.performed_by_email}</p>
                    )}
                  </div>
                </div>

                {/* Affected Item */}
                <div className="min-w-0">
                  {log.affected_item_title ? (
                    <>
                      <p className="text-white text-sm font-body truncate">{log.affected_item_title}</p>
                      {log.affected_item_type && (
                        <p className="text-[#444] text-xs font-body capitalize">{log.affected_item_type}</p>
                      )}
                    </>
                  ) : (
                    <p className="text-[#333] text-sm font-body">—</p>
                  )}
                </div>

                {/* Timestamp */}
                <div className="flex flex-col justify-center">
                  <p className="text-[#888] text-xs font-body">{timeAgo(log.created_at)}</p>
                  <p className="text-[#444] text-xs font-body hidden lg:block">
                    {new Date(log.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })}
                  </p>
                </div>

                {/* Details Button */}
                <div className="flex items-center">
                  <button
                    onClick={(e) => { e.stopPropagation(); setSelectedLog(log); }}
                    className="text-[#444] hover:text-[#1D4ED8] transition-colors p-1"
                    aria-label="View details"
                  >
                    <svg className="w-4 h-4" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                      <path strokeLinecap="round" strokeLinejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                    </svg>
                  </button>
                </div>
              </div>
            );
          })}
        </div>

        {/* Pagination */}
        {!loadingData && filteredLogs.length > 0 && (
          <div className="flex items-center justify-between mt-4">
            <p className="text-[#555] text-xs font-body">
              Showing {page * PAGE_SIZE + 1}–{page * PAGE_SIZE + filteredLogs.length} events
            </p>
            <div className="flex items-center gap-2">
              <button
                onClick={() => setPage((p) => Math.max(0, p - 1))}
                disabled={page === 0}
                className="px-3 py-1.5 bg-[#111] border border-[#DCE6F2] rounded-lg text-xs font-body text-[#888] hover:text-white hover:border-[#333] disabled:opacity-30 disabled:cursor-not-allowed transition-all"
              >
                Previous
              </button>
              <span className="text-[#555] text-xs font-body px-2">Page {page + 1}</span>
              <button
                onClick={() => setPage((p) => p + 1)}
                disabled={filteredLogs.length < PAGE_SIZE}
                className="px-3 py-1.5 bg-[#111] border border-[#DCE6F2] rounded-lg text-xs font-body text-[#888] hover:text-white hover:border-[#333] disabled:opacity-30 disabled:cursor-not-allowed transition-all"
              >
                Next
              </button>
            </div>
          </div>
        )}
      </div>

      {/* Detail Modal */}
      {selectedLog && (
        <DetailModal log={selectedLog} onClose={() => setSelectedLog(null)} />
      )}
    </div>
  );
}
