MarkLite/src/renderer/components/SearchBar/SearchBar.tsx

import React, { useCallback, useRef, useEffect } from 'react'
import { useSearchStore } from '../../stores/searchStore'
import { useTabStore } from '../../stores/tabStore'
import { findMatches } from '../../lib/searchEngine'
import { ChevronUp, ChevronDown, X } from '../Icons'

export function SearchBar() {
  const searchInputRef = useRef<HTMLInputElement>(null)

  const isVisible = useSearchStore(s => s.isVisible)
  const showReplace = useSearchStore(s => s.showReplace)
  const searchText = useSearchStore(s => s.searchText)
  const replaceText = useSearchStore(s => s.replaceText)
  const matches = useSearchStore(s => s.matches)
  const currentIndex = useSearchStore(s => s.currentIndex)
  const options = useSearchStore(s => s.options)
  const setSearchText = useSearchStore(s => s.setSearchText)
  const setReplaceText = useSearchStore(s => s.setReplaceText)
  const setShowReplace = useSearchStore(s => s.setShowReplace)
  const setMatches = useSearchStore(s => s.setMatches)
  const findNext = useSearchStore(s => s.findNext)
  const findPrev = useSearchStore(s => s.findPrev)
  const toggleCaseSensitive = useSearchStore(s => s.toggleCaseSensitive)
  const toggleRegex = useSearchStore(s => s.toggleRegex)
  const close = useSearchStore(s => s.close)

  const getActiveTab = useTabStore(s => s.getActiveTab)

  const doSearch = useCallback((text: string) => {
    const tab = getActiveTab()
    if (!tab || !text) {
      setMatches([])
      return
    }
    const found = findMatches(tab.content, text, options)
    setMatches(found)
  }, [getActiveTab, options, setMatches])

  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    const text = e.target.value
    setSearchText(text)
    // Editor 会监听 searchText 变化并执行搜索和高亮
  }, [setSearchText])

  const handleReplaceCurrent = useCallback(() => {
    const tab = getActiveTab()
    if (!tab || matches.length === 0 || currentIndex < 0) return
    const m = matches[currentIndex]
    const newContent = tab.content.substring(0, m.start) + replaceText + tab.content.substring(m.end)
    useTabStore.getState().updateTabContent(tab.id, newContent)
    doSearch(searchText)
  }, [getActiveTab, matches, currentIndex, replaceText, searchText, doSearch])

  // B-02: 全部替换（从后向前逐个替换）
  const handleReplaceAll = useCallback(() => {
    const tab = getActiveTab()
    if (!tab || matches.length === 0) return
    let result = tab.content
    for (let i = matches.length - 1; i >= 0; i--) {
      const m = matches[i]
      result = result.substring(0, m.start) + replaceText + result.substring(m.end)
    }
    useTabStore.getState().updateTabContent(tab.id, result)
    doSearch(searchText)
  }, [getActiveTab, matches, replaceText, searchText, doSearch])

  useEffect(() => {
    if (isVisible && searchInputRef.current) {
      searchInputRef.current.focus()
    }
  }, [isVisible])

  if (!isVisible) return null

  return (
    <div id="search-bar">
      <div className="search-row">
        <button
          id="btn-toggle-replace"
          className={`search-opt-btn ${showReplace ? 'expanded' : ''}`}
          onClick={() => setShowReplace(!showReplace)}
          title="展开替换行"
        >
          ▾
        </button>
        <input
          ref={searchInputRef}
          type="text"
          id="search-input"
          placeholder="查找..."
          value={searchText}
          onChange={handleSearchChange}
          onKeyDown={(e) => {
            if (e.key === 'Enter') {
              e.preventDefault()
              e.shiftKey ? findPrev() : findNext()
            }
            if (e.key === 'Escape') {
              e.preventDefault()
              close()
            }
          }}
        />
        <span id="search-count">
          {matches.length > 0 ? `${currentIndex + 1}/${matches.length}` : searchText ? '无结果' : ''}
        </span>
        <button
          className={`search-opt-btn ${options.caseSensitive ? 'active' : ''}`}
          onClick={toggleCaseSensitive}
          title="区分大小写 (Alt+C)"
        >
          Aa
        </button>
        <button
          className={`search-opt-btn ${options.useRegex ? 'active' : ''}`}
          onClick={toggleRegex}
          title="正则表达式 (Alt+R)"
        >
          .*
        </button>
        <button className="search-nav-btn" onClick={findPrev} title="上一个 (Shift+Enter)">
          <ChevronUp size={12} />
        </button>
        <button className="search-nav-btn" onClick={findNext} title="下一个 (Enter)">
          <ChevronDown size={12} />
        </button>
        <button className="search-nav-btn" onClick={close} title="关闭 (Escape)">
          <X size={14} />
        </button>
      </div>

      {showReplace && (
        <div id="replace-row">
          <input
            type="text"
            id="replace-input"
            placeholder="替换..."
            value={replaceText}
            onChange={(e) => setReplaceText(e.target.value)}
          />
          <button className="replace-btn" onClick={handleReplaceCurrent} title="替换 (Ctrl+Shift+G)">替换</button>
          <button className="replace-btn" onClick={handleReplaceAll} title="全部替换 (Ctrl+Shift+H)">全部</button>
        </div>
      )}
    </div>
  )
}