'use client';

import { useState, useEffect } from 'react';
import { Card } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { Badge } from '@/components/ui/badge';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { Separator } from '@/components/ui/separator';
import {
  Activity,
  Bot,
  MessageSquare,
  CheckCircle2,
  AlertCircle,
  GitPullRequest,
  CircleDot,
  XCircle,
  Zap,
  Settings,
  Filter,
  Bell,
  BellOff,
  RefreshCw,
  ChevronDown,
  ChevronUp,
  ExternalLink,
  Search,
} from 'lucide-react';

// Event type configurations
const eventTypeConfig = {
  agent_status: {
    label: 'Agent Status',
    icon: Bot,
    color: 'text-blue-500',
    bgColor: 'bg-blue-100 dark:bg-blue-900',
  },
  agent_message: {
    label: 'Agent Message',
    icon: MessageSquare,
    color: 'text-purple-500',
    bgColor: 'bg-purple-100 dark:bg-purple-900',
  },
  issue_update: {
    label: 'Issue Update',
    icon: CircleDot,
    color: 'text-green-500',
    bgColor: 'bg-green-100 dark:bg-green-900',
  },
  sprint_event: {
    label: 'Sprint Event',
    icon: Zap,
    color: 'text-yellow-500',
    bgColor: 'bg-yellow-100 dark:bg-yellow-900',
  },
  approval_request: {
    label: 'Approval Request',
    icon: AlertCircle,
    color: 'text-orange-500',
    bgColor: 'bg-orange-100 dark:bg-orange-900',
  },
  error: {
    label: 'Error',
    icon: XCircle,
    color: 'text-red-500',
    bgColor: 'bg-red-100 dark:bg-red-900',
  },
  milestone: {
    label: 'Milestone',
    icon: CheckCircle2,
    color: 'text-emerald-500',
    bgColor: 'bg-emerald-100 dark:bg-emerald-900',
  },
};

// Filter state type
type FilterState = {
  types: string[];
  agents: string[];
  projects: string[];
  showActionRequired: boolean;
};

// Mock activity events
const mockEvents = [
  {
    id: 'evt-001',
    type: 'approval_request',
    title: 'Approval Required: Architecture Decision',
    description: 'Architect is requesting approval for the API design document for the checkout flow.',
    timestamp: new Date(Date.now() - 1000 * 60 * 2).toISOString(), // 2 min ago
    agent: { name: 'Architect', avatar: 'AR' },
    project: 'E-Commerce Platform',
    metadata: {
      documentUrl: '/docs/adr-015-checkout-api.md',
      importance: 'high',
    },
    requiresAction: true,
    isNew: true,
  },
  {
    id: 'evt-002',
    type: 'agent_message',
    title: 'Implementation Update',
    description: 'Completed JWT token generation and validation. Moving on to session management.',
    timestamp: new Date(Date.now() - 1000 * 60 * 8).toISOString(), // 8 min ago
    agent: { name: 'Backend Engineer', avatar: 'BE' },
    project: 'E-Commerce Platform',
    metadata: {
      issueNumber: 42,
      progress: 65,
    },
    requiresAction: false,
    isNew: true,
  },
  {
    id: 'evt-003',
    type: 'agent_status',
    title: 'Agent Started Work',
    description: 'Frontend Engineer has started working on the product catalog component.',
    timestamp: new Date(Date.now() - 1000 * 60 * 15).toISOString(), // 15 min ago
    agent: { name: 'Frontend Engineer', avatar: 'FE' },
    project: 'E-Commerce Platform',
    metadata: {
      previousStatus: 'idle',
      newStatus: 'active',
      issueNumber: 45,
    },
    requiresAction: false,
    isNew: true,
  },
  {
    id: 'evt-004',
    type: 'issue_update',
    title: 'Issue Status Changed',
    description: 'Issue #38 "Implement user registration" moved from "In Progress" to "In Review".',
    timestamp: new Date(Date.now() - 1000 * 60 * 25).toISOString(), // 25 min ago
    agent: { name: 'Backend Engineer', avatar: 'BE' },
    project: 'E-Commerce Platform',
    metadata: {
      issueNumber: 38,
      oldStatus: 'in_progress',
      newStatus: 'in_review',
    },
    requiresAction: false,
    isNew: false,
  },
  {
    id: 'evt-005',
    type: 'sprint_event',
    title: 'Daily Standup Completed',
    description: 'Sprint 3 daily standup: 4 agents reported, 8 issues in progress, 1 blocked.',
    timestamp: new Date(Date.now() - 1000 * 60 * 60).toISOString(), // 1 hour ago
    agent: { name: 'System', avatar: 'SY' },
    project: 'E-Commerce Platform',
    metadata: {
      sprintName: 'Sprint 3',
      summary: {
        agents: 4,
        inProgress: 8,
        blocked: 1,
      },
    },
    requiresAction: false,
    isNew: false,
  },
  {
    id: 'evt-006',
    type: 'error',
    title: 'Agent Error',
    description: 'QA Engineer encountered an error while setting up the test framework. Retry attempted.',
    timestamp: new Date(Date.now() - 1000 * 60 * 90).toISOString(), // 1.5 hours ago
    agent: { name: 'QA Engineer', avatar: 'QA' },
    project: 'E-Commerce Platform',
    metadata: {
      errorType: 'configuration',
      retryCount: 1,
      resolved: false,
    },
    requiresAction: true,
    isNew: false,
  },
  {
    id: 'evt-007',
    type: 'milestone',
    title: 'Sprint Goal Achieved',
    description: 'Authentication module completed! All acceptance criteria met.',
    timestamp: new Date(Date.now() - 1000 * 60 * 120).toISOString(), // 2 hours ago
    agent: { name: 'Product Owner', avatar: 'PO' },
    project: 'E-Commerce Platform',
    metadata: {
      milestone: 'Auth Module',
      issuesCompleted: 5,
    },
    requiresAction: false,
    isNew: false,
  },
  {
    id: 'evt-008',
    type: 'agent_status',
    title: 'Agent Paused',
    description: 'DevOps Engineer paused pending infrastructure approval.',
    timestamp: new Date(Date.now() - 1000 * 60 * 180).toISOString(), // 3 hours ago
    agent: { name: 'DevOps Engineer', avatar: 'DO' },
    project: 'E-Commerce Platform',
    metadata: {
      previousStatus: 'active',
      newStatus: 'paused',
      reason: 'Awaiting approval',
    },
    requiresAction: false,
    isNew: false,
  },
  {
    id: 'evt-009',
    type: 'agent_message',
    title: 'Code Review Comment',
    description: 'Found potential security issue in password hashing. Recommending bcrypt with higher rounds.',
    timestamp: new Date(Date.now() - 1000 * 60 * 240).toISOString(), // 4 hours ago
    agent: { name: 'Architect', avatar: 'AR' },
    project: 'E-Commerce Platform',
    metadata: {
      issueNumber: 42,
      pullRequest: 15,
    },
    requiresAction: false,
    isNew: false,
  },
  {
    id: 'evt-010',
    type: 'issue_update',
    title: 'Issue Created',
    description: 'New issue created: "Add rate limiting to API endpoints" - assigned to Backend Engineer.',
    timestamp: new Date(Date.now() - 1000 * 60 * 300).toISOString(), // 5 hours ago
    agent: { name: 'Product Owner', avatar: 'PO' },
    project: 'E-Commerce Platform',
    metadata: {
      issueNumber: 50,
      priority: 'medium',
    },
    requiresAction: false,
    isNew: false,
  },
];

// Format relative time
function formatRelativeTime(timestamp: string): string {
  const now = new Date();
  const then = new Date(timestamp);
  const diffMs = now.getTime() - then.getTime();
  const diffMins = Math.floor(diffMs / (1000 * 60));
  const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));

  if (diffMins < 1) return 'Just now';
  if (diffMins < 60) return `${diffMins} min ago`;
  if (diffHours < 24) return `${diffHours} hour${diffHours > 1 ? 's' : ''} ago`;
  return `${diffDays} day${diffDays > 1 ? 's' : ''} ago`;
}

// Group events by time period
function groupEventsByPeriod(events: typeof mockEvents) {
  const now = new Date();
  const groups: { label: string; events: typeof mockEvents }[] = [
    { label: 'New', events: [] },
    { label: 'Earlier Today', events: [] },
    { label: 'Yesterday', events: [] },
    { label: 'This Week', events: [] },
    { label: 'Older', events: [] },
  ];

  events.forEach((event) => {
    const eventDate = new Date(event.timestamp);
    const diffHours = (now.getTime() - eventDate.getTime()) / (1000 * 60 * 60);
    const diffDays = diffHours / 24;

    if (event.isNew) {
      groups[0].events.push(event);
    } else if (diffHours < 24 && eventDate.getDate() === now.getDate()) {
      groups[1].events.push(event);
    } else if (diffDays < 2) {
      groups[2].events.push(event);
    } else if (diffDays < 7) {
      groups[3].events.push(event);
    } else {
      groups[4].events.push(event);
    }
  });

  return groups.filter((g) => g.events.length > 0);
}

// Event card component
function EventCard({
  event,
  expanded,
  onToggle,
  onApprove,
  onDismiss,
}: {
  event: (typeof mockEvents)[0];
  expanded: boolean;
  onToggle: () => void;
  onApprove: () => void;
  onDismiss: () => void;
}) {
  const config = eventTypeConfig[event.type as keyof typeof eventTypeConfig];
  const Icon = config.icon;

  return (
    <Card
      className={`transition-all ${
        event.isNew ? 'border-primary/50 shadow-md' : ''
      } ${event.requiresAction ? 'border-l-4 border-l-orange-500' : ''}`}
    >
      <div className="p-4">
        <div className="flex gap-4">
          {/* Icon */}
          <div
            className={`flex h-10 w-10 shrink-0 items-center justify-center rounded-full ${config.bgColor}`}
          >
            <Icon className={`h-5 w-5 ${config.color}`} />
          </div>

          {/* Content */}
          <div className="min-w-0 flex-1">
            <div className="flex items-start justify-between gap-2">
              <div>
                <div className="flex flex-wrap items-center gap-2">
                  <h3 className="font-semibold">{event.title}</h3>
                  {event.isNew && (
                    <Badge variant="default" className="text-xs">
                      New
                    </Badge>
                  )}
                  {event.requiresAction && (
                    <Badge
                      variant="outline"
                      className="border-orange-500 text-orange-500 text-xs"
                    >
                      Action Required
                    </Badge>
                  )}
                </div>
                <p className="mt-1 text-sm text-muted-foreground">
                  {event.description}
                </p>
              </div>
              <div className="flex items-center gap-2 text-xs text-muted-foreground shrink-0">
                <span>{formatRelativeTime(event.timestamp)}</span>
                <Button
                  variant="ghost"
                  size="icon"
                  className="h-6 w-6"
                  onClick={onToggle}
                >
                  {expanded ? (
                    <ChevronUp className="h-4 w-4" />
                  ) : (
                    <ChevronDown className="h-4 w-4" />
                  )}
                </Button>
              </div>
            </div>

            {/* Metadata row */}
            <div className="mt-2 flex flex-wrap items-center gap-3 text-xs text-muted-foreground">
              <div className="flex items-center gap-1">
                <Bot className="h-3 w-3" />
                <span>{event.agent.name}</span>
              </div>
              <div className="flex items-center gap-1">
                <Activity className="h-3 w-3" />
                <span>{event.project}</span>
              </div>
              <Badge variant="secondary" className="text-xs">
                {config.label}
              </Badge>
            </div>

            {/* Expanded details */}
            {expanded && (
              <div className="mt-4 rounded-lg bg-muted/50 p-3 space-y-3">
                {event.metadata.issueNumber && (
                  <div className="flex items-center gap-2 text-sm">
                    <CircleDot className="h-4 w-4" />
                    <span>Issue #{event.metadata.issueNumber}</span>
                    <Button variant="link" size="sm" className="h-auto p-0">
                      View Issue
                    </Button>
                  </div>
                )}
                {event.metadata.pullRequest && (
                  <div className="flex items-center gap-2 text-sm">
                    <GitPullRequest className="h-4 w-4" />
                    <span>PR #{event.metadata.pullRequest}</span>
                    <Button variant="link" size="sm" className="h-auto p-0">
                      View PR
                    </Button>
                  </div>
                )}
                {event.metadata.documentUrl && (
                  <div className="flex items-center gap-2 text-sm">
                    <ExternalLink className="h-4 w-4" />
                    <a
                      href={event.metadata.documentUrl}
                      className="text-primary hover:underline"
                    >
                      {event.metadata.documentUrl}
                    </a>
                  </div>
                )}
                {event.metadata.summary && (
                  <div className="grid grid-cols-3 gap-4 text-sm">
                    <div className="text-center">
                      <p className="text-2xl font-bold text-primary">
                        {event.metadata.summary.agents}
                      </p>
                      <p className="text-muted-foreground">Agents</p>
                    </div>
                    <div className="text-center">
                      <p className="text-2xl font-bold text-blue-500">
                        {event.metadata.summary.inProgress}
                      </p>
                      <p className="text-muted-foreground">In Progress</p>
                    </div>
                    <div className="text-center">
                      <p className="text-2xl font-bold text-red-500">
                        {event.metadata.summary.blocked}
                      </p>
                      <p className="text-muted-foreground">Blocked</p>
                    </div>
                  </div>
                )}
                {event.metadata.progress !== undefined && (
                  <div className="space-y-1">
                    <div className="flex justify-between text-sm">
                      <span>Progress</span>
                      <span>{event.metadata.progress}%</span>
                    </div>
                    <div className="h-2 rounded-full bg-muted">
                      <div
                        className="h-full rounded-full bg-primary"
                        style={{ width: `${event.metadata.progress}%` }}
                      />
                    </div>
                  </div>
                )}
                <p className="text-xs text-muted-foreground">
                  {new Date(event.timestamp).toLocaleString()}
                </p>
              </div>
            )}

            {/* Action buttons for approval requests */}
            {event.requiresAction && (
              <div className="mt-3 flex gap-2">
                <Button size="sm" onClick={onApprove}>
                  <CheckCircle2 className="mr-2 h-4 w-4" />
                  Approve
                </Button>
                <Button variant="outline" size="sm" onClick={onDismiss}>
                  Request Changes
                </Button>
                <Button variant="ghost" size="sm">
                  View Details
                </Button>
              </div>
            )}
          </div>
        </div>
      </div>
    </Card>
  );
}

// Filter panel component
function FilterPanel({
  filters,
  onFiltersChange,
  onClose,
}: {
  filters: FilterState;
  onFiltersChange: (filters: FilterState) => void;
  onClose: () => void;
}) {
  const eventTypes = Object.entries(eventTypeConfig);
  const agents = ['Backend Engineer', 'Frontend Engineer', 'Architect', 'Product Owner', 'QA Engineer', 'DevOps Engineer'];
  const _projects = ['E-Commerce Platform', 'Mobile App', 'API Gateway'];

  const toggleType = (type: string) => {
    const newTypes = filters.types.includes(type)
      ? filters.types.filter((t) => t !== type)
      : [...filters.types, type];
    onFiltersChange({ ...filters, types: newTypes });
  };

  const toggleAgent = (agent: string) => {
    const newAgents = filters.agents.includes(agent)
      ? filters.agents.filter((a) => a !== agent)
      : [...filters.agents, agent];
    onFiltersChange({ ...filters, agents: newAgents });
  };

  return (
    <Card className="p-4">
      <div className="space-y-6">
        {/* Event Types */}
        <div>
          <Label className="text-sm font-medium">Event Types</Label>
          <div className="mt-2 grid grid-cols-2 gap-2">
            {eventTypes.map(([key, config]) => {
              const Icon = config.icon;
              return (
                <div key={key} className="flex items-center gap-2">
                  <Checkbox
                    id={`type-${key}`}
                    checked={filters.types.length === 0 || filters.types.includes(key)}
                    onCheckedChange={() => toggleType(key)}
                  />
                  <Label
                    htmlFor={`type-${key}`}
                    className="flex items-center gap-1 text-sm font-normal cursor-pointer"
                  >
                    <Icon className={`h-3 w-3 ${config.color}`} />
                    {config.label}
                  </Label>
                </div>
              );
            })}
          </div>
        </div>

        {/* Agents */}
        <div>
          <Label className="text-sm font-medium">Agents</Label>
          <div className="mt-2 grid grid-cols-2 gap-2">
            {agents.map((agent) => (
              <div key={agent} className="flex items-center gap-2">
                <Checkbox
                  id={`agent-${agent}`}
                  checked={filters.agents.length === 0 || filters.agents.includes(agent)}
                  onCheckedChange={() => toggleAgent(agent)}
                />
                <Label
                  htmlFor={`agent-${agent}`}
                  className="text-sm font-normal cursor-pointer"
                >
                  {agent}
                </Label>
              </div>
            ))}
          </div>
        </div>

        {/* Show action required only */}
        <div className="flex items-center gap-2">
          <Checkbox
            id="action-required"
            checked={filters.showActionRequired}
            onCheckedChange={(checked) =>
              onFiltersChange({ ...filters, showActionRequired: checked as boolean })
            }
          />
          <Label htmlFor="action-required" className="text-sm font-normal cursor-pointer">
            Show only items requiring action
          </Label>
        </div>

        {/* Actions */}
        <div className="flex justify-between">
          <Button
            variant="ghost"
            size="sm"
            onClick={() =>
              onFiltersChange({
                types: [],
                agents: [],
                projects: [],
                showActionRequired: false,
              })
            }
          >
            Clear All
          </Button>
          <Button size="sm" onClick={onClose}>
            Apply Filters
          </Button>
        </div>
      </div>
    </Card>
  );
}

// Real-time indicator
function RealTimeIndicator({ connected }: { connected: boolean }) {
  return (
    <div className="flex items-center gap-2">
      <span
        className={`h-2 w-2 rounded-full ${
          connected ? 'bg-green-500 animate-pulse' : 'bg-gray-400'
        }`}
      />
      <span className="text-sm text-muted-foreground">
        {connected ? 'Live' : 'Disconnected'}
      </span>
    </div>
  );
}

export default function ActivityFeedPrototype() {
  const [events, setEvents] = useState(mockEvents);
  const [expandedEvents, setExpandedEvents] = useState<string[]>([]);
  const [showFilters, setShowFilters] = useState(false);
  const [filters, setFilters] = useState({
    types: [] as string[],
    agents: [] as string[],
    projects: [] as string[],
    showActionRequired: false,
  });
  const [searchQuery, setSearchQuery] = useState('');
  const [isConnected, setIsConnected] = useState(true);
  const [notificationsEnabled, setNotificationsEnabled] = useState(true);

  // Simulate real-time updates
  useEffect(() => {
    const interval = setInterval(() => {
      // Randomly toggle connection status for demo
      if (Math.random() > 0.95) {
        setIsConnected((prev) => !prev);
      }
    }, 5000);

    return () => clearInterval(interval);
  }, []);

  // Filter events
  const filteredEvents = events.filter((event) => {
    const matchesSearch =
      searchQuery === '' ||
      event.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
      event.description.toLowerCase().includes(searchQuery.toLowerCase());
    const matchesType =
      filters.types.length === 0 || filters.types.includes(event.type);
    const matchesAgent =
      filters.agents.length === 0 || filters.agents.includes(event.agent.name);
    const matchesActionRequired =
      !filters.showActionRequired || event.requiresAction;
    return matchesSearch && matchesType && matchesAgent && matchesActionRequired;
  });

  const groupedEvents = groupEventsByPeriod(filteredEvents);

  const toggleExpanded = (eventId: string) => {
    setExpandedEvents((prev) =>
      prev.includes(eventId)
        ? prev.filter((id) => id !== eventId)
        : [...prev, eventId]
    );
  };

  const handleApprove = (eventId: string) => {
    setEvents((prev) =>
      prev.map((e) =>
        e.id === eventId ? { ...e, requiresAction: false, isNew: false } : e
      )
    );
  };

  const handleDismiss = (eventId: string) => {
    // In real implementation, this would open a modal for feedback
    console.log('Dismiss:', eventId);
  };

  const markAllRead = () => {
    setEvents((prev) => prev.map((e) => ({ ...e, isNew: false })));
  };

  const actionRequiredCount = events.filter((e) => e.requiresAction).length;
  const newCount = events.filter((e) => e.isNew).length;

  return (
    <div className="min-h-screen bg-background">
      {/* Navigation Bar */}
      <nav className="border-b bg-card">
        <div className="container mx-auto flex h-14 items-center justify-between px-4">
          <div className="flex items-center gap-4">
            <span className="font-semibold text-primary">Syndarix</span>
            <Separator orientation="vertical" className="h-6" />
            <span className="text-sm font-medium">Activity Feed</span>
          </div>
          <div className="flex items-center gap-2">
            <RealTimeIndicator connected={isConnected} />
            <Button
              variant="ghost"
              size="icon"
              onClick={() => setNotificationsEnabled(!notificationsEnabled)}
            >
              {notificationsEnabled ? (
                <Bell className="h-4 w-4" />
              ) : (
                <BellOff className="h-4 w-4" />
              )}
            </Button>
            <Button variant="ghost" size="icon">
              <Settings className="h-4 w-4" />
            </Button>
          </div>
        </div>
      </nav>

      <div className="container mx-auto px-4 py-6">
        <div className="mx-auto max-w-3xl space-y-6">
          {/* Header */}
          <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
              <h1 className="text-3xl font-bold">Activity Feed</h1>
              <p className="text-muted-foreground">
                Real-time updates from your projects
              </p>
            </div>
            <div className="flex gap-2">
              {actionRequiredCount > 0 && (
                <Badge variant="destructive" className="gap-1">
                  <AlertCircle className="h-3 w-3" />
                  {actionRequiredCount} pending
                </Badge>
              )}
              {newCount > 0 && (
                <Button variant="outline" size="sm" onClick={markAllRead}>
                  Mark all read ({newCount})
                </Button>
              )}
            </div>
          </div>

          {/* Search and Filters */}
          <div className="flex flex-col gap-4 sm:flex-row">
            <div className="relative flex-1">
              <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
              <Input
                placeholder="Search activity..."
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                className="pl-9"
              />
            </div>
            <Button
              variant="outline"
              onClick={() => setShowFilters(!showFilters)}
              className={showFilters ? 'bg-muted' : ''}
            >
              <Filter className="mr-2 h-4 w-4" />
              Filters
              {(filters.types.length > 0 ||
                filters.agents.length > 0 ||
                filters.showActionRequired) && (
                <Badge variant="secondary" className="ml-2">
                  Active
                </Badge>
              )}
            </Button>
            <Button variant="ghost" size="icon" onClick={() => setIsConnected(true)}>
              <RefreshCw className={`h-4 w-4 ${!isConnected ? 'animate-spin' : ''}`} />
            </Button>
          </div>

          {/* Filter Panel */}
          {showFilters && (
            <FilterPanel
              filters={filters}
              onFiltersChange={setFilters}
              onClose={() => setShowFilters(false)}
            />
          )}

          {/* Event Groups */}
          <div className="space-y-6">
            {groupedEvents.map((group) => (
              <div key={group.label}>
                <div className="mb-3 flex items-center gap-2">
                  <h2 className="text-sm font-medium text-muted-foreground">
                    {group.label}
                  </h2>
                  <Badge variant="secondary" className="text-xs">
                    {group.events.length}
                  </Badge>
                  <Separator className="flex-1" />
                </div>
                <div className="space-y-3">
                  {group.events.map((event) => (
                    <EventCard
                      key={event.id}
                      event={event}
                      expanded={expandedEvents.includes(event.id)}
                      onToggle={() => toggleExpanded(event.id)}
                      onApprove={() => handleApprove(event.id)}
                      onDismiss={() => handleDismiss(event.id)}
                    />
                  ))}
                </div>
              </div>
            ))}
          </div>

          {filteredEvents.length === 0 && (
            <Card className="py-12 text-center">
              <Activity className="mx-auto h-12 w-12 text-muted-foreground" />
              <h3 className="mt-4 font-semibold">No activity found</h3>
              <p className="text-muted-foreground">
                {searchQuery || filters.types.length > 0
                  ? 'Try adjusting your search or filters'
                  : 'Activity will appear here as agents work on your projects'}
              </p>
            </Card>
          )}

          {/* Load More */}
          {filteredEvents.length > 0 && (
            <div className="text-center">
              <Button variant="outline">Load More Activity</Button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
