yaak-mountain-loop/src-web/components/core/EventViewer.tsx

import type { Virtualizer } from '@tanstack/react-virtual';
import { format } from 'date-fns';
import type { ReactNode } from 'react';
import { useCallback, useMemo, useRef, useState } from 'react';
import { useEventViewerKeyboard } from '../../hooks/useEventViewerKeyboard';
import { CopyIconButton } from '../CopyIconButton';
import { AutoScroller } from './AutoScroller';
import { Banner } from './Banner';
import { Button } from './Button';
import { Separator } from './Separator';
import { SplitLayout } from './SplitLayout';
import { HStack } from './Stacks';
import { IconButton } from './IconButton';
import classNames from 'classnames';

interface EventViewerProps<T> {
  /** Array of events to display */
  events: T[];

  /** Get unique key for each event */
  getEventKey: (event: T, index: number) => string;

  /** Render the event row - receives event, index, isActive, and onClick */
  renderRow: (props: {
    event: T;
    index: number;
    isActive: boolean;
    onClick: () => void;
  }) => ReactNode;

  /** Render the detail pane for the selected event */
  renderDetail?: (props: { event: T; index: number; onClose: () => void }) => ReactNode;

  /** Optional header above the event list (e.g., connection status) */
  header?: ReactNode;

  /** Error message to display as a banner */
  error?: string | null;

  /** Name for SplitLayout state persistence */
  splitLayoutName: string;

  /** Default ratio for the split (0.0 - 1.0) */
  defaultRatio?: number;

  /** Enable keyboard navigation (arrow keys) */
  enableKeyboardNav?: boolean;

  /** Loading state */
  isLoading?: boolean;

  /** Message to show while loading */
  loadingMessage?: string;

  /** Message to show when no events */
  emptyMessage?: string;

  /** Callback when active index changes (for controlled state in parent) */
  onActiveIndexChange?: (index: number | null) => void;
}

export function EventViewer<T>({
  events,
  getEventKey,
  renderRow,
  renderDetail,
  header,
  error,
  splitLayoutName,
  defaultRatio = 0.4,
  enableKeyboardNav = true,
  isLoading = false,
  loadingMessage = 'Loading events...',
  emptyMessage = 'No events recorded',
  onActiveIndexChange,
}: EventViewerProps<T>) {
  const [activeIndex, setActiveIndexInternal] = useState<number | null>(null);
  const [isPanelOpen, setIsPanelOpen] = useState(false);

  // Wrap setActiveIndex to notify parent
  const setActiveIndex = useCallback(
    (indexOrUpdater: number | null | ((prev: number | null) => number | null)) => {
      setActiveIndexInternal((prev) => {
        const newIndex =
          typeof indexOrUpdater === 'function' ? indexOrUpdater(prev) : indexOrUpdater;
        onActiveIndexChange?.(newIndex);
        return newIndex;
      });
    },
    [onActiveIndexChange],
  );
  const containerRef = useRef<HTMLDivElement>(null);
  const virtualizerRef = useRef<Virtualizer<HTMLDivElement, Element> | null>(null);

  const activeEvent = useMemo(
    () => (activeIndex != null ? events[activeIndex] : null),
    [activeIndex, events],
  );

  // Check if the event list container is focused
  const isContainerFocused = useCallback(() => {
    return containerRef.current?.contains(document.activeElement) ?? false;
  }, []);

  // Keyboard navigation
  useEventViewerKeyboard({
    totalCount: events.length,
    activeIndex,
    setActiveIndex,
    virtualizer: virtualizerRef.current,
    isContainerFocused,
    enabled: enableKeyboardNav,
    closePanel: () => setIsPanelOpen(false),
    openPanel: () => setIsPanelOpen(true),
  });

  // Handle virtualizer ready callback
  const handleVirtualizerReady = useCallback(
    (virtualizer: Virtualizer<HTMLDivElement, Element>) => {
      virtualizerRef.current = virtualizer;
    },
    [],
  );

  // Handle row click - select and open panel, scroll into view
  const handleRowClick = useCallback(
    (index: number) => {
      setActiveIndex(index);
      setIsPanelOpen(true);
      // Scroll to ensure selected item is visible after panel opens
      requestAnimationFrame(() => {
        virtualizerRef.current?.scrollToIndex(index, { align: 'auto' });
      });
    },
    [setActiveIndex],
  );

  const handleClose = useCallback(() => {
    setIsPanelOpen(false);
  }, []);

  if (isLoading) {
    return <div className="p-3 text-text-subtlest italic">{loadingMessage}</div>;
  }

  if (events.length === 0 && !error) {
    return <div className="p-3 text-text-subtlest italic">{emptyMessage}</div>;
  }

  return (
    <div ref={containerRef} className="h-full">
      <SplitLayout
        layout="vertical"
        name={splitLayoutName}
        defaultRatio={defaultRatio}
        minHeightPx={10}
        firstSlot={({ style }) => (
          <div style={style} className="w-full h-full grid grid-rows-[auto_minmax(0,1fr)]">
            {header ?? <span aria-hidden />}
            <AutoScroller
              data={events}
              focusable={enableKeyboardNav}
              onVirtualizerReady={handleVirtualizerReady}
              header={
                error && (
                  <Banner color="danger" className="m-3">
                    {error}
                  </Banner>
                )
              }
              render={(event, index) => (
                <div key={getEventKey(event, index)}>
                  {renderRow({
                    event,
                    index,
                    isActive: index === activeIndex,
                    onClick: () => handleRowClick(index),
                  })}
                </div>
              )}
            />
          </div>
        )}
        secondSlot={
          activeEvent != null && renderDetail && isPanelOpen
            ? ({ style }) => (
                <div style={style} className="grid grid-rows-[auto_minmax(0,1fr)] bg-surface">
                  <div className="pb-3 px-2">
                    <Separator />
                  </div>
                  <div className="mx-2 overflow-y-auto">
                    {renderDetail({ event: activeEvent, index: activeIndex ?? 0, onClose: handleClose })}
                  </div>
                </div>
              )
            : null
        }
      />
    </div>
  );
}

export interface EventDetailAction {
  /** Unique key for React */
  key: string;
  /** Button label */
  label: string;
  /** Optional icon */
  icon?: ReactNode;
  /** Click handler */
  onClick: () => void;
}

interface EventDetailHeaderProps {
  title: string;
  prefix?: ReactNode;
  timestamp?: string;
  actions?: EventDetailAction[];
  copyText?: string;
  onClose?: () => void;
}

export function EventDetailHeader({
  title,
  prefix,
  timestamp,
  actions,
  copyText,
  onClose,
}: EventDetailHeaderProps) {
  const formattedTime = timestamp ? format(new Date(`${timestamp}Z`), 'HH:mm:ss.SSS') : null;

  return (
    <div className="flex items-center justify-between gap-2 mb-2 h-xs">
      <HStack space={2} className="items-center min-w-0">
        {prefix}
        <h3 className="font-semibold select-auto cursor-auto truncate">{title}</h3>
      </HStack>
      <HStack space={2} className="items-center">
        {actions?.map((action) => (
          <Button key={action.key} variant="border" size="xs" onClick={action.onClick}>
            {action.icon}
            {action.label}
          </Button>
        ))}
        {copyText != null && (
          <CopyIconButton text={copyText} size="xs" title="Copy" variant="border" iconSize="sm" />
        )}
        {formattedTime && (
          <span className="text-text-subtlest font-mono text-editor ml-2">{formattedTime}</span>
        )}
        <div className={classNames(copyText != null || formattedTime || (actions ?? []).length > 0 && "border-l border-l-surface-highlight ml-2 pl-3")}>
        <IconButton color="custom" className="text-text-subtle -mr-3" size="xs" icon="x" title="Close event panel" onClick={onClose} />
        </div>
      </HStack>
    </div>
  );
}