import { useRef, useEffect } from 'react';
import { WorkspaceMode } from '../lib/types';

interface LogEntry {
  id: string;
  timestamp: Date;
  level: string;
  message: string;
}

interface LogPanelProps {
  logs: LogEntry[];
  expanded: boolean;
  workspaceMode: WorkspaceMode;
  onToggleExpand: () => void;
}

export default function LogPanel({ logs, expanded, workspaceMode, onToggleExpand }: LogPanelProps) {
  const scrollRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (scrollRef.current) {
      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
    }
  }, [logs]);

  return (
    <div
      className={`border-t border-border-subtle bg-bg-secondary flex flex-col ${
        expanded ? 'flex-1' : 'h-48'
      }`}
    >
      <div className="flex items-center justify-between px-4 py-2 bg-bg-tertiary shrink-0">
        <h3 className="text-sm font-semibold text-text-secondary uppercase tracking-wider">
          Log
        </h3>
        <button
          onClick={onToggleExpand}
          className="w-6 h-6 flex items-center justify-center text-text-muted hover:text-text-secondary transition-colors"
          title={expanded ? 'Collapse' : 'Expand'}
        >
          {expanded ? '▾' : '▴'}
        </button>
      </div>
      <div
        ref={scrollRef}
        className="flex-1 overflow-y-auto p-2 font-mono text-xs"
      >
        {logs.length === 0 ? (
          <div className="text-text-muted">No log entries</div>
        ) : (
          logs.map((entry) => (
            <div key={entry.id} className="flex gap-2 py-0.5">
              <span className="text-text-muted shrink-0">
                {entry.timestamp.toLocaleTimeString()}
              </span>
              <span
                className={`shrink-0 ${
                  entry.level === 'error'
                    ? 'text-red-500'
                    : entry.level === 'warn'
                      ? 'text-yellow-500'
                      : entry.level === 'info'
                        ? 'text-blue-400'
                        : 'text-text-secondary'
                }`}
              >
                [{entry.level.toUpperCase()}]
              </span>
              <span className="text-text-primary">{entry.message}</span>
            </div>
          ))
        )}
      </div>
    </div>
  );
}