supervisor-ui/components/logs/LogViewer.tsx

'use client';

import { useEffect, useRef, useState } from 'react';
import { Card, CardContent } from '@/components/ui/card';
import { cn } from '@/lib/utils/cn';

interface LogViewerProps {
  logs: string;
  isLoading?: boolean;
  autoScroll?: boolean;
  searchTerm?: string;
}

export function LogViewer({ logs, isLoading, autoScroll = true, searchTerm = '' }: LogViewerProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const [userHasScrolled, setUserHasScrolled] = useState(false);

  // Auto-scroll to bottom when logs update (if enabled and user hasn't manually scrolled)
  useEffect(() => {
    if (autoScroll && !userHasScrolled && scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [logs, autoScroll, userHasScrolled]);

  // Detect user scroll
  const handleScroll = () => {
    if (!scrollRef.current) return;

    const { scrollTop, scrollHeight, clientHeight } = scrollRef.current;
    const isAtBottom = Math.abs(scrollHeight - clientHeight - scrollTop) < 10;

    setUserHasScrolled(!isAtBottom);
  };

  // Highlight search term
  const highlightSearchTerm = (text: string) => {
    if (!searchTerm) return text;

    const regex = new RegExp(`(${searchTerm})`, 'gi');
    const parts = text.split(regex);

    return parts.map((part, i) =>
      regex.test(part) ? (
        <mark key={i} className="bg-warning/30 text-warning-foreground">
          {part}
        </mark>
      ) : (
        part
      )
    );
  };

  // Syntax highlighting for log levels
  const formatLogLine = (line: string, index: number) => {
    const errorRegex = /(ERROR|FATAL|CRITICAL)/i;
    const warnRegex = /(WARN|WARNING)/i;
    const infoRegex = /(INFO|DEBUG)/i;

    let className = '';
    if (errorRegex.test(line)) {
      className = 'text-destructive';
    } else if (warnRegex.test(line)) {
      className = 'text-warning';
    } else if (infoRegex.test(line)) {
      className = 'text-accent';
    }

    return (
      <div key={index} className={cn('font-mono text-xs leading-relaxed', className)}>
        {highlightSearchTerm(line)}
      </div>
    );
  };

  const logLines = logs.split('\n').filter((line) => {
    if (!searchTerm) return true;
    return line.toLowerCase().includes(searchTerm.toLowerCase());
  });

  return (
    <Card className="h-full">
      <CardContent className="p-0 h-full">
        <div
          ref={scrollRef}
          onScroll={handleScroll}
          className="h-full overflow-auto p-4 bg-muted/30 rounded-lg"
        >
          {isLoading ? (
            <div className="flex items-center justify-center h-full">
              <div className="animate-spin h-8 w-8 border-4 border-primary border-t-transparent rounded-full" />
            </div>
          ) : logLines.length === 0 ? (
            <div className="flex items-center justify-center h-full text-muted-foreground">
              {searchTerm ? 'No logs matching search term' : 'No logs available'}
            </div>
          ) : (
            <div className="space-y-0.5">
              {logLines.map((line, index) => formatLogLine(line, index))}
            </div>
          )}

          {!autoScroll && userHasScrolled && (
            <button
              onClick={() => {
                setUserHasScrolled(false);
                if (scrollRef.current) {
                  scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
                }
              }}
              className="fixed bottom-20 right-8 px-4 py-2 bg-primary text-primary-foreground rounded-lg shadow-lg hover:bg-primary/90 transition-colors text-sm font-medium"
            >
              Scroll to bottom
            </button>
          )}
        </div>
      </CardContent>
    </Card>
  );
}