/**
 * @fileoverview React component for PlaygroundConsole.jsx
 * 
 * @module pages.Playground.components.PlaygroundConsole
 */

import React, { useEffect, useRef } from "react";
import { Trash2 } from "lucide-react";
import "./PlaygroundConsole.css";

const PlaygroundConsole = ({ output, onClear, theme = "light" }) => {
  const consoleRef = useRef(null);

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

  const formatTimestamp = (date) => {
    return date.toLocaleTimeString("pt-BR", {
      hour: "2-digit",
      minute: "2-digit",
      second: "2-digit",
      fractionalSecondDigits: 3,
    });
  };

  const getIcon = (type) => {
    switch (type) {
      case "error":
        return "❌";
      case "success":
        return "✅";
      case "alert":
        return "⚠️";
      default:
        return "";
    }
  };

  return (
    <div
      className={`playground-console-container playground-console-theme-${theme}`}
    >
      <div className="playground-console-header">
        <span className="playground-console-title">
          Console ({output.length})
        </span>
        <button
          className="playground-console-clear-btn"
          onClick={onClear}
          disabled={output.length === 0}
          title="Limpar console"
        >
          <Trash2 className="w-4 h-4" />
          <span>Limpar</span>
        </button>
      </div>
      <div className="playground-console-content" ref={consoleRef}>
        {output.length === 0 ? (
          <div className="playground-console-empty">
            Nenhuma saída ainda. Execute o código para ver os resultados.
          </div>
        ) : (
          output.map((entry) => (
            <div
              key={entry.id}
              className={`playground-console-entry playground-console-${entry.type}`}
            >
              <span className="playground-console-timestamp">
                {formatTimestamp(entry.timestamp)}
              </span>
              <span className="playground-console-icon">
                {getIcon(entry.type)}
              </span>
              <span className="playground-console-message">
                {entry.message}
              </span>
            </div>
          ))
        )}
      </div>
    </div>
  );
};

export default PlaygroundConsole;
