// Event feed component displaying a list of events

import React, { useEffect } from 'react';
import EventCard from './EventCard';
import FilterButtons from './FilterButtons';
import type { Event, FilterType, EventType } from '../types';
import { EVENT_FILTER_MAP } from '../types';

interface EventFeedProps {
  events: Event[];
  loading: boolean;
  activeFilter: FilterType;
  onFilterChange: (filter: FilterType) => void;
  onLoadMore?: () => void;
  hasMore?: boolean;
}

export const EventFeed: React.FC<EventFeedProps> = ({
  events,
  loading,
  activeFilter,
  onFilterChange,
  onLoadMore,
  hasMore,
}) => {
  // Filter events by active filter
  const filteredEvents = events.filter((event) => {
    const allowedTypes: EventType[] = EVENT_FILTER_MAP[activeFilter];
    return allowedTypes.includes(event.event_type);
  });

  // Scroll handler for infinite scroll
  useEffect(() => {
    const handleScroll = () => {
      if (!onLoadMore || !hasMore || loading) return;

      const feedElement = document.querySelector('.event-feed');
      if (!feedElement) return;

      const scrollPosition = feedElement.scrollTop + feedElement.clientHeight;
      const scrollThreshold = feedElement.scrollHeight - 100;

      if (scrollPosition >= scrollThreshold) {
        onLoadMore();
      }
    };

    const feedElement = document.querySelector('.event-feed');
    if (feedElement) {
      feedElement.addEventListener('scroll', handleScroll);
      return () => feedElement.removeEventListener('scroll', handleScroll);
    }
  }, [onLoadMore, hasMore, loading]);

  return (
    <div className="event-feed-container">
      <div className="tabs">
        <button className="tab active">📋 EVENT FEED</button>
        <button className="tab">🌐 AGENTS GRAPH</button>
      </div>

      <FilterButtons activeFilter={activeFilter} onFilterChange={onFilterChange} />

      <div className="event-feed">
        {loading && events.length === 0 ? (
          <div className="loading">Loading events...</div>
        ) : filteredEvents.length === 0 ? (
          <div className="empty-state">
            <p>No events yet</p>
            <p className="empty-hint">Start using Claude Code to see events appear here in real-time</p>
          </div>
        ) : (
          <>
            {filteredEvents.map((event) => (
              <EventCard key={event.id} event={event} />
            ))}
            {loading && <div className="loading-more">Loading more...</div>}
          </>
        )}
      </div>
    </div>
  );
};

export default EventFeed;
