import React, { useState } from 'react';
import { GuardianCommandType } from '../types';

interface GuardianConsoleProps {
  onAction: (command: GuardianCommandType, targetNode: string) => void;
  disabled: boolean;
}

const GuardianConsole: React.FC<GuardianConsoleProps> = ({ onAction, disabled }) => {
  const [command, setCommand] = useState<GuardianCommandType>(GuardianCommandType.DEPLOY_SWARM);
  const [targetNode, setTargetNode] = useState('');

  const handleSend = () => {
    if (!disabled && targetNode.trim()) {
      onAction(command, targetNode.trim());
      setTargetNode('');
    }
  };

  return (
    <div className="bg-black bg-opacity-30 p-4 border border-cyan-700/50 rounded-lg text-sm mt-4 h-full">
      <h2 className="text-lg font-bold mb-4 text-cyan-400 tracking-widest">GUARDIAN CONSOLE</h2>
      <div className="space-y-3">
        <div>
          <label htmlFor="guardian-command" className="block text-xs text-gray-400 mb-1">Directive:</label>
          <select
            id="guardian-command"
            value={command}
            onChange={(e) => setCommand(e.target.value as GuardianCommandType)}
            disabled={disabled}
            className="w-full bg-gray-900 border border-cyan-700/50 rounded-md px-3 py-2 text-white focus:outline-none focus:ring-2 focus:ring-cyan-500"
          >
            {Object.values(GuardianCommandType).map((cmd) => (
              <option key={cmd} value={cmd}>{cmd}</option>
            ))}
          </select>
        </div>
        <div>
          <label htmlFor="target-node" className="block text-xs text-gray-400 mb-1">Target Node ID:</label>
          <input
            id="target-node"
            type="text"
            value={targetNode}
            onChange={(e) => setTargetNode(e.target.value)}
            placeholder="e.g., Node-77B"
            disabled={disabled}
            className="w-full bg-gray-900 border border-cyan-700/50 rounded-md px-3 py-2 text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500"
          />
        </div>
        <button
          onClick={handleSend}
          disabled={disabled || !targetNode.trim()}
          className="w-full px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-cyan-600 hover:bg-cyan-700 disabled:bg-gray-700 disabled:cursor-not-allowed focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 ring-offset-gray-900 transition"
        >
          Execute Directive
        </button>
      </div>
    </div>
  );
};

export default GuardianConsole;