leaudit-platform-frontend/app/components/contract-template/ContractSearchHero.tsx

import { useState, useRef } from 'react';

interface ContractSearchHeroProps {
  onSearch: (query: string) => void;
  initialQuery?: string;
  tipText?: string;
  tipIcon?: string;
}

export function ContractSearchHero({ 
  onSearch, 
  initialQuery = '',
  tipText = '支持自然语言描述，AI将为您匹配最相关的模板',
  tipIcon = 'ri-lightbulb-line'
}: ContractSearchHeroProps) {
  const [searchQuery, setSearchQuery] = useState(initialQuery);
  const textareaRef = useRef<HTMLTextAreaElement>(null);

  const handleSearchInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    const value = e.target.value;
    setSearchQuery(value);
    
    // 自动调整高度
    if (textareaRef.current) {
      textareaRef.current.style.height = 'auto';
      textareaRef.current.style.height = Math.max(80, textareaRef.current.scrollHeight) + 'px';
    }
  };

  const handleSearch = () => {
    onSearch(searchQuery);
  };

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if (e.key === 'Enter') {
      if (e.shiftKey) {
        // Shift+回车：允许换行，不做任何处理
        return;
      } else {
        // 单独回车：触发搜索
        e.preventDefault();
        handleSearch();
      }
    }
  };

  return (
    <div style={{
      textAlign: 'center',
      padding: '60px 0',
      background: 'linear-gradient(135deg, rgba(0, 104, 74, 0.05) 0%, rgba(0, 104, 74, 0.02) 100%)',
      borderRadius: '5px',
      // marginBottom: '32px'
    }}>
      <h1 style={{
        fontSize: '32px',
        fontWeight: '600',
        color: 'rgba(0, 0, 0, 0.85)',
        marginBottom: '12px',
        margin: '0 0 12px 0'
      }}>AI智能合同模板搜索</h1>
      
      <p style={{
        fontSize: '16px',
        color: 'rgba(0, 0, 0, 0.45)',
        marginBottom: '40px',
        margin: '0 0 40px 0'
      }}>输入合同名称、用途或关键内容，快速找到最适合的模板</p>
      
      <div style={{
        maxWidth: '600px',
        margin: '0 auto',
        position: 'relative'
      }}>
        <div style={{
          background: 'white',
          border: '2px solid #e5e7eb',
          borderRadius: '12px',
          padding: '16px 20px',
          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.08)',
          transition: 'all 0.3s ease'
        }}>
          <textarea 
            ref={textareaRef}
            placeholder="例如：销售合同、设备采购协议、包含违约责任条款的合同..."
            value={searchQuery}
            onChange={handleSearchInputChange}
            onKeyDown={handleKeyDown}
            aria-label="合同模板搜索输入框"
            style={{
              width: '100%',
              minHeight: '80px',
              border: 'none',
              outline: 'none',
              resize: 'vertical',
              fontSize: '16px',
              lineHeight: '1.5',
              background: 'transparent',
              margin: '0',
              padding: '0',
              fontFamily: 'inherit'
            }}
          />
          
          {/* 搜索操作区域 - 水平布局 */}
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            width: '100%',
            marginTop: '16px',
            paddingTop: '16px',
            borderTop: '1px solid #f0f0f0'
          }}>
            {/* 提示文字 - 左侧 */}
            <div style={{
              fontSize: '12px',
              color: 'rgba(0, 0, 0, 0.45)',
              display: 'flex',
              alignItems: 'center',
              flex: '1'
            }}>
              <i className={tipIcon} style={{ marginRight: '4px', fontSize: '12px' }}></i>
              {tipText}
            </div>
            
            {/* 搜索按钮 - 右侧 */}
            <button 
              onClick={handleSearch}
              disabled={!searchQuery.trim()}
              aria-label="开始搜索"
              style={{
                background: '#00684a',
                color: 'white',
                border: 'none',
                borderRadius: '8px',
                padding: '10px 24px',
                fontSize: '14px',
                fontWeight: '500',
                cursor: 'pointer',
                transition: 'all 0.3s ease',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                gap: '6px',
                margin: '0',
                flexShrink: '0'
              }}
              onMouseEnter={(e) => {
                if (!e.currentTarget.disabled) {
                  e.currentTarget.style.background = '#005a40';
                  e.currentTarget.style.transform = 'translateY(-1px)';
                }
              }}
              onMouseLeave={(e) => {
                if (!e.currentTarget.disabled) {
                  e.currentTarget.style.background = '#00684a';
                  e.currentTarget.style.transform = 'translateY(0)';
                }
              }}
            >
              <i className="ri-search-line" style={{ fontSize: '14px' }}></i>
              智能搜索
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}