zhixing-system/zhixing-web/src/features/selection/components/selection-results-workbench.tsx

import { useEffect, useMemo, useState, type RefObject } from "react"
import { useNavigate, useSearch } from "@tanstack/react-router"

import { Input } from "@/shared/ui/input"
import { Pagination } from "@/shared/ui/pagination"
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/shared/ui/select"

import type { SelectionResults, SelectionSignal } from "../api/selection.types"
import { ExecutionStatusTrigger } from "./execution-status-trigger"
import { SignalDetailPanel } from "./signal-detail-panel"
import { SignalRecordList } from "./signal-record-list"
import {
  getSignalKey,
  matchesCategory,
  signalCategoryOptions,
  type SignalCategoryFilter,
} from "./selection-presentation"
import { SignalTable } from "./signal-table"

const PAGE_SIZE_OPTIONS = [5, 10, 15] as const

interface SelectionResultsWorkbenchProps {
  drawerOpen: boolean
  onOpenExecutionStatus: () => void
  result: SelectionResults
  triggerRef: RefObject<HTMLButtonElement | null>
}

export function SelectionResultsWorkbench({
  drawerOpen,
  onOpenExecutionStatus,
  result,
  triggerRef,
}: SelectionResultsWorkbenchProps) {
  const search = useSearch({ from: "/_workspace/selection" })
  const navigate = useNavigate({ from: "/selection" })
  const query = search.search ?? ""
  const category = search.category ?? "all"
  const [selectedKey, setSelectedKey] = useState<string | null>(null)
  const [expandedKeys, setExpandedKeys] = useState<ReadonlySet<string>>(
    new Set(),
  )

  const visibleSignals = useMemo(() => {
    const normalized = query.trim().toLowerCase()
    return result.signals.filter((signal) => {
      const matchesQuery =
        normalized.length === 0 ||
        signal.name.toLowerCase().includes(normalized) ||
        signal.ts_code.toLowerCase().includes(normalized)
      return matchesQuery && matchesCategory(signal, category)
    })
  }, [category, query, result.signals])

  const page = search.page
  const pageSize = search.pageSize
  const signalsTotal = result.signals_total ?? result.signal_count
  const pageCount = Math.max(1, Math.ceil(signalsTotal / pageSize))
  const currentPage = Math.min(page, pageCount)
  const currentSignals = visibleSignals
  const selectedSignal =
    currentSignals.find((signal) => getSignalKey(signal) === selectedKey) ??
    currentSignals[0]
  useEffect(() => {
    if (page > pageCount) {
      void navigate({
        search: (previous) => ({ ...previous, page: pageCount }),
      })
    }
  }, [navigate, page, pageCount])

  function updateSearch(next: {
    page?: number
    pageSize?: number
    search?: string
    category?: SignalCategoryFilter
  }) {
    void navigate({ search: (previous) => ({ ...previous, ...next }) })
  }

  function handleQueryChange(value: string) {
    updateSearch({ page: 1, search: value })
  }

  function handleCategoryChange(value: SignalCategoryFilter) {
    updateSearch({ category: value, page: 1 })
  }

  function handleToggleExpanded(signal: SelectionSignal) {
    const key = getSignalKey(signal)
    setExpandedKeys((previous) => {
      const next = new Set(previous)
      if (next.has(key)) next.delete(key)
      else next.add(key)
      return next
    })
  }

  return (
    <div className="flex min-h-0 min-w-0 flex-1 flex-col gap-2 overflow-visible md:grid md:grid-cols-[minmax(0,1fr)_260px] md:overflow-hidden lg:grid-cols-[minmax(0,1.55fr)_minmax(280px,0.72fr)]">
      <section className="flex min-h-0 min-w-0 flex-1 flex-col overflow-visible rounded-lg border border-border/80 bg-card md:overflow-hidden">
        <div className="flex shrink-0 flex-wrap items-center gap-1.5 border-b border-border/60 p-2.5">
          <Input
            aria-label="搜索命中信号"
            className="h-11 min-w-0 flex-1 bg-background text-sm sm:max-w-[260px] md:h-8"
            onChange={(event) => handleQueryChange(event.target.value)}
            placeholder="搜索股票名称或代码"
            type="search"
            value={query}
          />
          <Select
            items={signalCategoryOptions}
            onValueChange={(value) => {
              if (typeof value === "string") {
                handleCategoryChange(value as SignalCategoryFilter)
              }
            }}
            value={category}
          >
            <SelectTrigger
              aria-label="筛选信号分类"
              className="h-11 w-full bg-background text-sm sm:w-auto sm:min-w-36 md:h-8"
            >
              <SelectValue placeholder="筛选信号分类" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                {signalCategoryOptions.map((option) => (
                  <SelectItem key={option.value} value={option.value}>
                    {option.label}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
          <span className="text-xs tabular-nums text-muted-foreground sm:ml-auto">
            筛选结果 {signalsTotal} 条
          </span>
          <ExecutionStatusTrigger
            drawerOpen={drawerOpen}
            onOpen={onOpenExecutionStatus}
            result={result}
            triggerRef={triggerRef}
          />
        </div>

        <div className="flex min-h-0 min-w-0 flex-col md:flex-1 md:overflow-hidden">
          <SignalTable
            onSelect={(signal) => setSelectedKey(getSignalKey(signal))}
            selectedKey={selectedSignal ? getSignalKey(selectedSignal) : null}
            signals={currentSignals}
          />
          <SignalRecordList
            expandedKeys={expandedKeys}
            onSelect={(signal) => setSelectedKey(getSignalKey(signal))}
            onToggleExpanded={handleToggleExpanded}
            signals={currentSignals}
          />
        </div>

        <Pagination
          onPageChange={(nextPage) => updateSearch({ page: nextPage })}
          onPageSizeChange={(nextPageSize) =>
            updateSearch({ page: 1, pageSize: nextPageSize })
          }
          page={currentPage}
          pageSize={pageSize}
          pageSizeOptions={PAGE_SIZE_OPTIONS}
          total={signalsTotal}
        />
      </section>

      <SignalDetailPanel signal={selectedSignal} />
    </div>
  )
}