import React from 'react';
import { useClaudeTerminal } from '../context/ClaudeTerminalContext';
import { ClaudeTerminal } from './ClaudeTerminal';
import { Terminal } from 'lucide-react';

/**
 * GlobalClaudeTerminal - A floating terminal that persists across page navigation
 *
 * This component renders at the App level and maintains the Claude Code session
 * even when the user navigates between pages. It can be minimized to a floating
 * button or expanded to a side panel.
 */
export const GlobalClaudeTerminal: React.FC = () => {
  const { isOpen, setIsOpen, isExpanded, setIsExpanded, isConnected } = useClaudeTerminal();

  // Floating button when terminal is closed
  if (!isOpen) {
    return (
      <button
        onClick={() => setIsOpen(true)}
        className={`fixed bottom-6 right-6 p-4 rounded-full shadow-lg transition-all z-50 ${
          isConnected
            ? 'bg-green-600 hover:bg-green-500'
            : 'bg-primary-600 hover:bg-primary-500'
        }`}
        title={isConnected ? 'Claude Terminal (Connected)' : 'Open Claude Terminal'}
      >
        <Terminal className="w-6 h-6 text-white" />
        {isConnected && (
          <span className="absolute -top-1 -right-1 w-3 h-3 bg-green-400 rounded-full border-2 border-dark-900 animate-pulse" />
        )}
      </button>
    );
  }

  // Terminal panel - responsive sizing
  // On mobile portrait: full width with small margins
  // On tablet/desktop: fixed size panel
  return (
    <div className={`fixed z-50 transition-all duration-200 ${
      isExpanded
        ? 'inset-2 sm:inset-4'
        : 'bottom-2 right-2 left-2 h-[400px] sm:bottom-6 sm:right-6 sm:left-auto sm:w-[650px] sm:h-[500px]'
    }`}>
      <ClaudeTerminal
        isExpanded={isExpanded}
        onToggleExpand={() => setIsExpanded(!isExpanded)}
        onClose={() => setIsOpen(false)}
      />
    </div>
  );
};