zhixing-system/zhixing-web/src/features/selection/components/signal-detail-panel.tsx

import { lazy, Suspense } from "react"
import { Search } from "lucide-react"
import { useSelectionChart } from "../api/selection.query"

import { Card } from "@/shared/ui/card"

import type { SelectionStockResult } from "../api/selection.types"
import { PatternScoreDetails } from "./pattern-score"
import { PatternCaseImage } from "./pattern-case-image"
import {
  getSelectionStrategyLabel,
  getStockBasicMetrics,
} from "./selection-presentation"

const SelectionChart = lazy(() =>
  import("./selection-chart").then((module) => ({
    default: module.SelectionChart,
  })),
)

interface SignalDetailPanelProps {
  stock: SelectionStockResult | undefined
}

export function SignalDetailPanel({ stock }: SignalDetailPanelProps) {
  const chartQuery = useSelectionChart(
    stock?.ts_code,
    stock?.target_trade_date,
    stock?.strategy,
  )

  if (!stock) {
    return (
      <Card
        aria-label="当前股票详情"
        className="hidden min-h-0 overflow-auto rounded-md border-border/80 bg-card p-3 md:flex md:flex-col md:justify-center"
      >
        <div className="space-y-2 text-center">
          <Search
            className="mx-auto size-5 text-muted-foreground"
            aria-hidden="true"
          />
          <p className="font-medium">暂无选中股票</p>
          <p className="text-xs leading-5 text-muted-foreground">
            从左侧列表选择一只股票查看详情。
          </p>
        </div>
      </Card>
    )
  }

  const metricRows = [
    ...getStockBasicMetrics(stock),
    {
      key: "target_trade_date",
      label: "目标交易日",
      value: stock.target_trade_date,
    },
    {
      key: "strategy",
      label: "策略",
      value: getSelectionStrategyLabel(stock.strategy),
    },
  ]

  return (
    <aside
      aria-label="当前股票详情"
      className="hidden min-h-0 overflow-hidden rounded-md border border-border/80 bg-card md:flex"
    >
      <section
        aria-labelledby="technical-chart"
        className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden p-3"
      >
        <h3
          className="mb-2 shrink-0 text-xs font-medium text-muted-foreground"
          id="technical-chart"
        >
          技术图表
        </h3>
        <div className="min-h-0 flex-1">
          {chartQuery.isPending ? (
            <p className="text-xs text-muted-foreground">正在加载行情图表…</p>
          ) : chartQuery.isError ? (
            <p className="text-xs text-destructive">行情图表暂时不可用。</p>
          ) : chartQuery.data?.points.length ? (
            <Suspense
              fallback={
                <p className="text-xs text-muted-foreground">
                  正在加载图表组件…
                </p>
              }
            >
              <SelectionChart chart={chartQuery.data} />
            </Suspense>
          ) : (
            <p className="text-xs text-muted-foreground">暂无可用行情数据。</p>
          )}
        </div>
      </section>

      <section
        aria-labelledby="selected-stock-heading"
        className="flex w-65 shrink-0 flex-col overflow-hidden border-l border-border/60 p-3"
      >
        <div className="min-h-0 flex-1 overflow-auto">
          <h2
            className="truncate text-base font-semibold tracking-tight"
            id="selected-stock-heading"
          >
            {stock.name}
          </h2>
          <p className="font-mono text-xs text-muted-foreground">
            {stock.ts_code}
          </p>
          <p className="mt-3 text-2xl font-semibold tabular-nums tracking-tight">
            ¥ {stock.close.toFixed(2)}
          </p>

          <dl className="mt-3 divide-y divide-border/60 border-y border-border/60 text-xs">
            {metricRows.map((row) => (
              <div
                key={row.key}
                className="flex items-center justify-between gap-2 py-2"
              >
                <dt className="shrink-0 text-muted-foreground">{row.label}</dt>
                <dd className="min-w-0 truncate text-right font-medium tabular-nums">
                  {row.value}
                </dd>
              </div>
            ))}
          </dl>

          <section className="mt-3" aria-labelledby="pattern-score-details">
            <h3
              className="mb-2 text-xs font-medium text-muted-foreground"
              id="pattern-score-details"
            >
              图形相似度评分
            </h3>
            <PatternScoreDetails score={stock.score} />
          </section>
        </div>

        <PatternCaseImage key={stock.ts_code} score={stock.score} />
      </section>
    </aside>
  )
}