import React, { useContext, useEffect, useRef, useState } from 'react';
import { LogContext } from './LogContext';
import './LogPanel.css';

const LogPanel = () => {
  const { logs } = useContext(LogContext);
  const panelRef = useRef(null);
  const [isMinimized, setIsMinimized] = useState(false);

  // Auto-scroll to the bottom when new logs arrive
  useEffect(() => {
    if (panelRef.current && !isMinimized) {
      panelRef.current.scrollTop = panelRef.current.scrollHeight;
    }
  }, [logs, isMinimized]);

  const getLogLevelClass = (level) => {
    switch (level) {
      case 'ERROR':
        return 'log-error';
      case 'SUCCESS':
        return 'log-success';
      case 'WARN':
        return 'log-warn';
      default:
        return 'log-info';
    }
  };

  const toggleMinimize = () => {
    setIsMinimized(!isMinimized);
  };

  return (
    <div className={`log-panel ${isMinimized ? 'minimized' : ''}`} ref={panelRef}>
      <div className="log-header">
        <span>Application Logs</span>
        <button className="log-minimize-btn" onClick={toggleMinimize}>
          {isMinimized ? '▲' : '▼'}
        </button>
      </div>
      <div className="log-content">
        {logs.map((log, index) => (
          <div key={index} className={`log-entry ${getLogLevelClass(log.level)}`}>
            <span className="log-timestamp">{new Date(log.timestamp).toLocaleTimeString()}</span>
            <span className="log-level">{log.level}</span>
            <span className="log-message">{log.message}</span>
          </div>
        ))}
      </div>
    </div>
  );
};

export default LogPanel;