import { useState, useRef, useEffect } from 'react';
import { Send } from 'lucide-react';

interface ChatInputProps {
  onSend: (message: string) => void;
  isFastTrack?: boolean;
  onToggleFastTrack?: () => void;
  disabled?: boolean;
}

export function ChatInput({ onSend, isFastTrack = false, onToggleFastTrack, disabled = false }: ChatInputProps) {
  const [input, setInput] = useState('');
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  // Auto-resize textarea based on content
  useEffect(() => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = 'auto';
      textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
    }
  }, [input]);

  const handleSend = () => {
    const trimmed = input.trim();
    if (trimmed && !disabled) {
      onSend(trimmed);
      setInput('');
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSend();
    }
  };

  return (
    <div className="flex flex-col gap-2 border-t pt-4">
      {onToggleFastTrack && (
        <div className="flex justify-end px-1">
          <button
            onClick={onToggleFastTrack}
            className={`text-xs flex items-center gap-1 px-2 py-1 rounded-full transition-colors ${isFastTrack
                ? 'bg-amber-100 text-amber-700 border border-amber-200'
                : 'text-slate-500 hover:bg-slate-100'
              }`}
            data-testid="fast-track-toggle"
          >
            <span className={isFastTrack ? "text-amber-500" : "text-slate-400"}>⚡</span>
            {isFastTrack ? 'Fast Track Active' : 'Fast Track Mode'}
          </button>
        </div>
      )}
      <div className={`flex gap-2 items-end ${isFastTrack ? 'p-1 rounded-lg bg-amber-50/50 -m-1' : ''}`}>
        <textarea
          ref={textareaRef}
          value={input}
          onChange={(e) => setInput(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder={isFastTrack ? "Enter your insight directly (skipping interview)..." : "Type a message..."}
          disabled={disabled}
          rows={1}
          className={`flex-1 p-3 border rounded-md resize-none focus:outline-none focus:ring-2 focus:ring-slate-500 min-h-[44px] ${isFastTrack ? 'border-amber-200 focus:ring-amber-400' : ''
            }`}
          data-testid="chat-input"
        />
        <button
          onClick={handleSend}
          disabled={disabled || !input.trim()}
          className={`p-3 text-white rounded-md disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center min-h-[44px] min-w-[44px] transition-colors ${isFastTrack
              ? 'bg-amber-600 hover:bg-amber-700'
              : 'bg-slate-700 hover:bg-slate-800'
            }`}
          aria-label="Send message"
          data-testid="send-button"
        >
          <Send className="w-5 h-5" />
        </button>
      </div>
    </div>
  );
}
