import React, { useRef, useEffect, useMemo } from 'react';
import { LogEntry } from '../types';
import { Terminal, Trash2, Info } from 'lucide-react';

interface SystemLogPanelProps {
  logs: LogEntry[];
  onClear: () => void;
}

const SystemLogPanel: React.FC<SystemLogPanelProps> = ({ logs, onClear }) => {
  const logContainerRef = useRef<HTMLDivElement>(null);

  const reversedLogs = useMemo(() => [...logs].reverse(), [logs]);

  // Force scroll to top
  useEffect(() => {
    if (logContainerRef.current) {
      logContainerRef.current.scrollTop = 0;
    }
  }, [reversedLogs]);

  return (
    <div className="flex flex-col h-full bg-gray-900 border-t border-gray-700 overflow-hidden relative">
      {/* Header */}
      <div className="flex items-center justify-between px-3 py-1.5 bg-gray-800 border-b border-gray-700 shrink-0">
        <div className="flex items-center gap-2">
          <div className="font-bold text-xs text-gray-300 flex items-center gap-1.5">
            <Info size={12} className="text-gray-400" /> SYSTEM LOG
          </div>
        </div>

        <button
          onClick={onClear}
          title="Clear Logs"
          className="p-1 text-gray-500 hover:text-gray-200 hover:bg-gray-700 rounded transition-colors"
        >
          <Trash2 size={12} />
        </button>
      </div>

      {/* Log Body */}
      <div
        ref={logContainerRef}
        className="flex-1 overflow-auto p-2 font-mono text-[10px] space-y-0.5 leading-tight bg-gray-900"
      >
        {reversedLogs.length === 0 && (
          <div className="h-full flex flex-col items-center justify-center text-gray-700 space-y-1">
            <span className="text-[9px]">No System Activity</span>
          </div>
        )}

        {reversedLogs.map((log, index) => (
          <div key={log.id} className="flex gap-2 whitespace-nowrap opacity-90 hover:opacity-100 hover:bg-gray-800/50 py-[1px] border-b border-gray-800/30 last:border-0 items-center">
            <span className="text-gray-600 select-none min-w-[20px] text-right text-[9px]">{index + 1}</span>
            <span className="text-gray-500 select-none min-w-[45px] text-[9px]">{log.timestamp}</span>
            <span className={`flex-1
                ${log.type === 'ERROR' ? 'text-red-400 font-bold' : 'text-gray-300'}
                ${log.type === 'INFO' ? 'text-gray-400' : ''}
              `}>
              {log.message}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default SystemLogPanel;