/**
 * Chat Input Component
 *
 * 支持响应式：responsive=true 时适配移动端键盘和触摸操作
 * 支持斜杠命令：输入 / 时显示命令菜单
 */

import { useState, useRef, useEffect, useCallback } from 'react';
import { Send, Square } from 'lucide-react';
import clsx from 'clsx';
import { CommandMenu, type CommandMenuItem } from './CommandMenu.js';
import { useCommands } from '../hooks/useCommands.js';

interface ChatInputProps {
  onSend: (content: string) => void;
  onCancel: () => void;
  isLoading: boolean;
  disabled?: boolean;
  /** 是否启用响应式布局（移动端适配） */
  responsive?: boolean;
  /** 是否启用斜杠命令 */
  enableCommands?: boolean;
}

export function ChatInput({
  onSend,
  onCancel,
  isLoading,
  disabled,
  responsive = false,
  enableCommands = true,
}: ChatInputProps) {
  const [input, setInput] = useState('');
  const [showCommandMenu, setShowCommandMenu] = useState(false);
  const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  // 命令系统
  const {
    filteredCommands,
    isLoading: commandsLoading,
    filterCommands,
  } = useCommands({ autoLoad: enableCommands });

  // 自动调整高度
  useEffect(() => {
    const textarea = textareaRef.current;
    if (textarea) {
      textarea.style.height = 'auto';
      // 响应式模式下移动端最大高度稍小
      const maxHeight = responsive && window.innerWidth < 768 ? 120 : 200;
      textarea.style.height = `${Math.min(textarea.scrollHeight, maxHeight)}px`;
    }
  }, [input, responsive]);

  // 检测斜杠命令输入
  const checkCommandTrigger = useCallback(
    (value: string) => {
      if (!enableCommands) return;

      // 检测是否在输入斜杠命令
      // 条件：以 / 开头，且 / 后面没有空格（还在输入命令名）
      const slashMatch = value.match(/^\/(\S*)$/);

      if (slashMatch) {
        const query = slashMatch[1]; // / 后面的内容
        setShowCommandMenu(true);
        setSelectedCommandIndex(0);
        filterCommands(query);
      } else {
        setShowCommandMenu(false);
      }
    },
    [enableCommands, filterCommands]
  );

  // 处理输入变化
  const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const value = e.target.value;
    setInput(value);
    checkCommandTrigger(value);
  };

  // 选择命令
  const handleCommandSelect = useCallback(
    (command: CommandMenuItem) => {
      // 替换输入内容为 /command + 空格，准备输入参数
      setInput(`/${command.name} `);
      setShowCommandMenu(false);

      // 聚焦输入框
      textareaRef.current?.focus();
    },
    []
  );

  // 关闭命令菜单
  const handleCommandMenuClose = useCallback(() => {
    setShowCommandMenu(false);
  }, []);

  const handleSubmit = () => {
    const trimmed = input.trim();
    if (!trimmed || isLoading || disabled) return;

    // 关闭命令菜单
    setShowCommandMenu(false);

    onSend(trimmed);
    setInput('');

    // 重置高度
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
    }
  };

  const handleKeyDown = (e: React.KeyboardEvent) => {
    // 如果命令菜单打开，让菜单处理键盘事件
    if (showCommandMenu && filteredCommands.length > 0) {
      if (['ArrowUp', 'ArrowDown', 'Tab', 'Escape'].includes(e.key)) {
        // 这些键由 CommandMenu 处理，阻止默认行为
        return;
      }
      if (e.key === 'Enter' && !e.shiftKey) {
        // Enter 选择命令
        e.preventDefault();
        if (filteredCommands[selectedCommandIndex]) {
          handleCommandSelect(filteredCommands[selectedCommandIndex]);
        }
        return;
      }
    }

    // Enter 发送，Shift+Enter 换行
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault();
      handleSubmit();
    }
  };

  return (
    <div
      className={clsx(
        'border-t border-gray-700 bg-gray-900 relative',
        responsive ? 'p-3 md:p-4 safe-area-pb' : 'p-4'
      )}
    >
      {/* Command Menu */}
      {enableCommands && (
        <CommandMenu
          commands={filteredCommands}
          isOpen={showCommandMenu}
          selectedIndex={selectedCommandIndex}
          onSelect={handleCommandSelect}
          onClose={handleCommandMenuClose}
          onSelectedIndexChange={setSelectedCommandIndex}
          isLoading={commandsLoading}
        />
      )}

      <div className="max-w-4xl mx-auto flex gap-2">
        <div className="flex-1 relative">
          <textarea
            ref={textareaRef}
            value={input}
            onChange={handleInputChange}
            onKeyDown={handleKeyDown}
            placeholder={
              responsive
                ? 'Type a message or /command...'
                : 'Type a message or /command... (Shift+Enter for new line)'
            }
            disabled={disabled}
            rows={1}
            className={clsx(
              'w-full resize-none rounded-lg border border-gray-600 bg-gray-800',
              responsive ? 'px-3 py-2.5 md:px-4 md:py-3' : 'px-4 py-3',
              responsive ? 'text-base md:text-sm' : 'text-sm', // 移动端使用 16px 防止缩放
              'text-gray-100 placeholder-gray-500',
              'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent',
              'disabled:opacity-50 disabled:cursor-not-allowed'
            )}
          />
        </div>
        <button
          onClick={isLoading ? onCancel : handleSubmit}
          disabled={!isLoading && (!input.trim() || disabled)}
          className={clsx(
            'rounded-lg flex items-center justify-center transition-colors',
            responsive
              ? 'px-3 py-2.5 md:px-4 md:py-3 min-w-[44px] min-h-[44px]' // 最小触摸目标 44x44
              : 'px-4 py-3',
            isLoading
              ? 'bg-red-600 hover:bg-red-700 active:bg-red-800 text-white'
              : 'bg-primary-600 hover:bg-primary-700 active:bg-primary-800 text-white',
            'disabled:opacity-50 disabled:cursor-not-allowed'
          )}
        >
          {isLoading ? <Square size={20} /> : <Send size={20} />}
        </button>
      </div>
      {/* 响应式模式下桌面端显示提示文字 */}
      {responsive && (
        <p className="hidden md:block text-xs text-gray-500 text-center mt-2">
          Press Enter to send, Shift+Enter for new line, / for commands
        </p>
      )}
    </div>
  );
}
