import { useState, useCallback, useEffect, useMemo } from 'react';
import { useAuth } from '@/_core/hooks/useAuth';
import { getLoginUrl } from '@/const';
import PointCloudViewer from '@/components/PointCloudViewer';
import VehicleTree, { TreeSelection } from '@/components/VehicleTree';
import TaskManager from '@/components/TaskManager';
import AnalysisPanel from '@/components/AnalysisPanel';
import AlgorithmRunPanel from '@/components/AlgorithmRunPanel';
import type { Overlay3D } from '@/components/GenericResultView';
import { trpc } from '@/lib/trpc';
import {
  LogIn,
  Box,
  Cloud,
  Eye,
  EyeOff,
  Settings,
  Maximize2,
  Train,
  Loader2,
} from 'lucide-react';
import { toast } from 'sonner';

export default function Home() {
  const { loading, isAuthenticated } = useAuth();
  const utils = trpc.useUtils();

  // ── 树导航选中状态 ─────────────────────────────────────────────────────────
  const [selection, setSelection] = useState<TreeSelection>({
    seriesId: null,
    modelId: null,
    taskId: null,
  });

  // ── 3D 视图数据 ────────────────────────────────────────────────────────────
  const [cadModelUrl, setCadModelUrl] = useState<string | undefined>();
  const [cadModelFormat, setCadModelFormat] = useState<string | undefined>();
  const [activeCadName, setActiveCadName] = useState<string | undefined>();
  const [cadLoading, setCadLoading] = useState(false);
  const [cadLoadProgress, setCadLoadProgress] = useState(0);

  const [pointCloudTaskId, setPointCloudTaskId] = useState<number | null>(null);
  const [pointCloudUrls, setPointCloudUrls] = useState<string[]>([]);
  const [pcLoading, setPcLoading] = useState(false);
  const [pcProgress, setPcProgress] = useState(0);
  /** 每次用户主动点「加载」时递增，强制 PointCloudViewer 重新采样 */
  const [pcLoadKey, setPcLoadKey] = useState(0);
  /** 当前任务下用户勾选的点云文件 ID（空 = 加载全部） */
  const [selectedPcFileIds, setSelectedPcFileIds] = useState<number[]>([]);
  /** 当前任务下所有点云文件列表（用于判断是否含已配准点云） */
  const { data: taskPcFiles = [] } = trpc.pointcloudFile.list.useQuery(
    { taskId: selection.taskId! },
    { enabled: selection.taskId != null },
  );
  /** 已选中的点云文件中，是否包含配准算法产出的点云 */
  const hasRegisteredCloud =
    selectedPcFileIds.length === 0
      ? taskPcFiles.some((f) => (f as { source?: string }).source === 'registered')
      : taskPcFiles
          .filter((f) => selectedPcFileIds.includes(f.id))
          .some((f) => (f as { source?: string }).source === 'registered');
  /** 当前任务下用户勾选的 CAD 文件 ID（空 = 不传 CAD） */
  const [selectedTaskCadFileIds, setSelectedTaskCadFileIds] = useState<number[]>([]);
  /** ROI 坐标拾取状态（train-measurement 专用） */
  const [roiPickMode, setRoiPickMode] = useState(false);
  const [roiPickedPoint, setRoiPickedPoint] = useState<{ x: number; y: number; z: number } | null>(null);
  const [activeRoiPickTarget, setActiveRoiPickTarget] = useState<{ taskIdx: number; roiKey: 'source_roi' | 'target_roi'; corner: 'min' | 'max' } | null>(null);

  // ── 视图控制 ───────────────────────────────────────────────────────────────
  const [showHeatmap, setShowHeatmap] = useState(true);
  const [showPointCloud, setShowPointCloud] = useState(true);
  const [showCADModel] = useState(true);
  const [showWireframe, setShowWireframe] = useState(false);
  const [pointSize, setPointSize] = useState(0.03);
  /** 点云预览采样预算（非全量）；调低可明显减轻卡顿 */
  const [renderPointBudget, setRenderPointBudget] = useState(400_000);
  /** 点云：逐点；平滑热力：仅在分析结果就绪后由右侧「在 3D 中查看」切换 */
  const [pointCloudRenderMode, setPointCloudRenderMode] = useState<'points' | 'smoothHeatmap'>('points');
  /** 后台「平滑热力」分析结果 ID，用于拉取顶点色 */
  const [heatmapViewResultId, setHeatmapViewResultId] = useState<number | null>(null);
  /**
   * 算法插件叠加层（Route B）：用户在 AnalysisPanel 点「在 3D 中查看叠加层」时
   * 把当前结果挂到 PointCloudViewer。PointCloudViewer 据此优先于 legacy
   * heatmapAnalysisResultId 走插件叠加链路。
   */
  const [pluginOverlay, setPluginOverlay] = useState<{
    taskId: number;
    resultId: number;
    overlay: Overlay3D;
  } | null>(null);
  const [errorPickEnabled] = useState(false);
  const [showLeftPanel, setShowLeftPanel] = useState(true);
  const [showRightPanel, setShowRightPanel] = useState(true);

  const [selectedPoint, setSelectedPoint] = useState<{
    position: { x: number; y: number; z: number };
    error: number;
    index: number;
  } | null>(null);


  // ── 当前车型信息（用于面板标题） ───────────────────────────────────────────
  const { data: activeModel } = trpc.vehicleModel.get.useQuery(
    { id: selection.modelId! },
    { enabled: selection.modelId != null }
  );

  /** 平滑热力与装配检测共用同一 mutation，避免重复订阅；勿在 batchTaskId 为空时 disabled，否则点击无任何反馈 */
  const runAnalysisJob = trpc.analysisResult.runAnalysis.useMutation({
    onSuccess: (_data, variables) => {
      if (variables.type === 'smooth_heatmap') {
        toast.success('已提交平滑热力后台分析，请稍后在右侧「分析结果」中查看；完成后点击「在 3D 中查看」');
      } else if (variables.type === 'assembly_inspection') {
        toast.success('已提交装配检测（STEP + 最近零件），请稍后在右侧「分析结果」查看各零件统计');
      } else if (variables.type === 'obj_deviation') {
        toast.success('已提交偏差热力分析（STL/OBJ + 点云距离），完成后点击「在 3D 中查看」');
      }
      void utils.analysisResult.list.invalidate({ taskId: variables.taskId });
    },
    onError: (e) => toast.error(e.message || '提交失败'),
  });

  // 切换车型时清空 CAD，避免沿用上一车型的 URL
  useEffect(() => {
    setCadModelUrl(undefined);
    setCadModelFormat(undefined);
    setActiveCadName(undefined);
    setCadLoading(false);
    setCadLoadProgress(0);
  }, [selection.modelId]);

  useEffect(() => {
    setHeatmapViewResultId(null);
    setPluginOverlay(null);
    setPointCloudRenderMode('points');
    setSelectedPcFileIds([]);
    setSelectedTaskCadFileIds([]);
    setRoiPickMode(false);
    setRoiPickedPoint(null);
    setActiveRoiPickTarget(null);
  }, [selection.taskId]);

  // ── 回调 ───────────────────────────────────────────────────────────────────
  /** STEP 无浏览器解析：若服务端已有 assembly manifest，则用首件 STL 作为 3D 预览 */
  const resolveCadPreview = useCallback(
    async (modelId: number, file: { id: number; name: string; format: string }) => {
      const lower = file.name.toLowerCase();
      if (!lower.endsWith('.stp') && !lower.endsWith('.step')) {
        return {
          url: `/api/files/read/cad/${modelId}/${encodeURIComponent(file.name)}`,
          format: file.format,
          label: file.name,
        };
      }
      try {
        const res = await utils.cadFile.assemblyManifest.fetch({ modelId, cadFileId: file.id });
        const manifest = res.manifest as { parts?: { stlRelative: string; name: string }[] } | null;
        if (res.ready && manifest?.parts && manifest.parts.length > 0) {
          const p0 = manifest.parts[0]!;
          return {
            url: `/api/files/read/cad/${modelId}/${encodeURIComponent(
              `.step_parse/${file.id}/${p0.stlRelative}`,
            )}`,
            format: 'stl',
            label: `${file.name} → ${p0.name}`,
          };
        }
      } catch (e) {
        console.warn('[Home] assemblyManifest', e);
      }
      return null;
    },
    [utils.cadFile.assemblyManifest],
  );

  const handleCadProgress = useCallback((p: number) => setCadLoadProgress(p), []);
  const handleCadLoaded = useCallback(() => {
    setCadLoading(false);
    setCadLoadProgress(100);
  }, []);
  const handleCadLoadError = useCallback((message: string) => {
    setCadLoading(false);
    setCadLoadProgress(0);
    toast.error(message);
  }, []);

  const handleSelectCad = useCallback(
    async (url: string, format: string, name: string, cadFileId?: number) => {
      setCadLoading(true);
      setCadLoadProgress(3);
      if (selection.modelId != null && cadFileId != null) {
        const resolved = await resolveCadPreview(selection.modelId, { id: cadFileId, name, format });
        if (resolved) {
          setCadModelUrl(resolved.url);
          setCadModelFormat(resolved.format);
          setActiveCadName(resolved.label);
          return;
        }
        const isStep = name.toLowerCase().match(/\.(stp|step)$/);
        if (isStep) {
          toast.error(
            'STEP 尚未生成三角网格预览。请先点击底部「装配检测」跑完一次（需 Python cadquery），或改用 STL/OBJ 做 3D 预览。',
          );
          setCadLoading(false);
          setCadLoadProgress(0);
          setCadModelUrl(undefined);
          setCadModelFormat(undefined);
          setActiveCadName(undefined);
          return;
        }
      }
      setCadModelUrl(url);
      setCadModelFormat(format);
      setActiveCadName(name);
    },
    [resolveCadPreview, selection.modelId],
  );

  const handleLoadPointClouds = useCallback(async (taskId: number, _fileIds: number[]) => {
    setPointCloudTaskId(taskId);
    setPointCloudUrls([`__task:${taskId}`]);
    setPcLoading(true);
    setPcProgress(0);
    // 每次主动加载都递增 key，确保 PointCloudViewer 重新采样
    // （即使 taskId / selectedPcFileIds 没变也会触发）
    setPcLoadKey(k => k + 1);
  }, []);

  const handlePcProgress = useCallback((p: number) => setPcProgress(p), []);
  const handlePcLoaded = useCallback(() => {
    setPcLoading(false);
    setPcProgress(100);
  }, []);

  const handlePointSelect = useCallback((pt: any) => {
    if (pt) setSelectedPoint({ position: pt.position, error: pt.error, index: pt.index });
  }, []);

  // ── 把 __task:N 格式的 URL 转成 batch 请求参数 ──────────────────────────────
  const batchTaskId = pointCloudTaskId;

  // 必须稳定数组引用：若每次 render 都 new []，PointCloudViewer 会以为点云源变了而反复全量请求
  const pointCloudUrlsStable = useMemo(
    () => (pointCloudTaskId != null ? [`__task:${pointCloudTaskId}`] : undefined),
    [pointCloudTaskId]
  );

  // ── 左侧面板渲染 ───────────────────────────────────────────────────────────
  const renderLeftPanel = () => {
    if (selection.modelId == null) {
      return (
        <VehicleTree selection={selection} onSelect={setSelection} />
      );
    }
    return (
      <>
        <VehicleTree selection={selection} onSelect={setSelection} />
        <div className="h-px bg-border my-1" />
        <TaskManager
          modelId={selection.modelId}
          activeTaskId={selection.taskId}
          onSelectTask={taskId => setSelection(s => ({ ...s, taskId }))}
          onLoadPointClouds={handleLoadPointClouds}
          onPcFilesSelectionChange={setSelectedPcFileIds}
          onCadFilesSelectionChange={setSelectedTaskCadFileIds}
          onSelectTaskCad={handleSelectCad}
        />
      </>
    );
  };

  const renderRightPanel = () => {
    if (selection.taskId == null) {
      return (
        <div className="flex flex-col items-center justify-center h-full text-center py-16 text-xs text-muted-foreground space-y-2">
          <Train className="w-8 h-8 opacity-20" />
          <p>请从左侧选择检测任务</p>
          <p className="text-[10px]">选中任务后可查看分析结果</p>
        </div>
      );
    }
    return (
      <div className="space-y-4">
        <AlgorithmRunPanel
          taskId={selection.taskId}
          modelId={selection.modelId}
          pointCloudLoaded={pointCloudTaskId === selection.taskId && pointCloudUrls.length > 0}
          taskPcFileCount={taskPcFiles.length}
          taskPointcloudFiles={taskPcFiles}
          selectedPcFileIds={selectedPcFileIds}
          hasRegisteredCloud={hasRegisteredCloud}
          selectedCadFileIds={selectedTaskCadFileIds}
          roiPickedPoint={roiPickedPoint}
          onStartRoiPick={(taskIdx, roiKey, corner) => {
            setActiveRoiPickTarget({ taskIdx, roiKey, corner });
            setRoiPickMode(true);
            setRoiPickedPoint(null);
          }}
          activeRoiPickTarget={activeRoiPickTarget}
        />
        <div className="h-px bg-border" />
        <AnalysisPanel
          taskId={selection.taskId}
          onReplay={resultId => console.log('[Replay] resultId', resultId)}
          onViewSmoothHeatmap={(resultId) => {
            setPluginOverlay(null);
            setHeatmapViewResultId(resultId);
            setPointCloudRenderMode('smoothHeatmap');
          }}
          onViewPluginOverlay={({ taskId, resultId, overlay, inputPointCloudFileIds }) => {
            const expectedIds = inputPointCloudFileIds ?? [];
            const expectedFiles = expectedIds
              .map((id) => taskPcFiles.find((f) => f.id === id))
              .filter((f): f is NonNullable<typeof f> => f != null);
            const expectedNames = expectedIds
              .map((id) => taskPcFiles.find((f) => f.id === id)?.name ?? `#${id}`)
              .join('、');
            const expectedLabel = expectedFiles.length > 0 && expectedFiles.every((f) => (f as { source?: string }).source === 'registered')
              ? '配准后的点云'
              : '本算法结果对应的点云文件';
            const expectedHint = expectedNames ? `${expectedLabel}：${expectedNames}` : expectedLabel;

            if (pointCloudTaskId == null || pointCloudUrls.length === 0) {
              toast.error(`请先在左侧选择并加载${expectedHint}`);
              return;
            }
            if (pcLoading) {
              toast.warning('点云仍在加载中，请等待加载完成后再查看叠加层');
              return;
            }
            if (pointCloudTaskId !== taskId) {
              toast.error(`当前 3D 视口加载的点云不属于该算法结果，请先在左侧选择并加载${expectedHint}`);
              return;
            }
            if (expectedIds.length === 0) {
              toast.warning('无法确认匹配关系，请加载该结果运行时使用的点云');
            } else {
              const loadedIds = selectedPcFileIds.length > 0
                ? selectedPcFileIds
                : taskPcFiles.map((f) => f.id);
              const missingIds = expectedIds.filter((id) => !loadedIds.includes(id));
              if (missingIds.length > 0) {
                toast.error(`当前加载的点云与该结果不匹配，请在左侧选择并加载${expectedHint}`);
                return;
              }
            }

            setHeatmapViewResultId(null);
            setPluginOverlay({ taskId, resultId, overlay });
            setPointCloudRenderMode(overlay.kind === 'vertexColors' ? 'smoothHeatmap' : 'points');
          }}
          externalPending={runAnalysisJob.isPending}
          onRunAssembly={() => {
            if (batchTaskId == null) { toast.error('请先在左侧选择检测任务并加载点云'); return; }
            runAnalysisJob.mutate({ taskId: batchTaskId, type: 'assembly_inspection', samplePoints: Math.min(200_000, Math.max(20_000, renderPointBudget)), toleranceMm: 0.3, includeVertexHeatmap: false });
          }}
          onRunDeviation={() => {
            if (batchTaskId == null) { toast.error('请先在左侧选择检测任务并加载点云'); return; }
            runAnalysisJob.mutate({ taskId: batchTaskId, type: 'obj_deviation', totalPoints: renderPointBudget });
          }}
        />
      </div>
    );
  };

  return (
    <div className="h-screen flex flex-col bg-background">
      {/* 顶部工具栏 */}
      <header className="h-12 border-b border-border bg-card flex items-center justify-between px-4 flex-shrink-0">
        <div className="flex items-center gap-4">
          <div className="flex items-center gap-2">
            <div className="w-7 h-7 rounded bg-primary/20 flex items-center justify-center">
              <Box className="w-4 h-4 text-primary" />
            </div>
            <h1 className="text-sm font-semibold">宏量点云处理系统</h1>
          </div>

          {activeModel && (
            <>
              <div className="h-6 w-px bg-border" />
              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
                <Train className="w-3.5 h-3.5" />
                <span>{activeModel.name}</span>
                {selection.taskId && (
                  <span className="text-[10px] bg-primary/20 text-primary px-1.5 py-0.5 rounded">
                    任务 #{selection.taskId}
                  </span>
                )}
              </div>
            </>
          )}
        </div>

        <div className="flex items-center gap-3">
          <div className="flex items-center gap-1">
            <button
              className={`industrial-btn py-1.5 ${showLeftPanel ? 'industrial-btn-primary' : ''}`}
              onClick={() => setShowLeftPanel(v => !v)}
              title="左侧面板"
            >
              <Settings className="w-3.5 h-3.5" />
            </button>
            <button
              className={`industrial-btn py-1.5 ${showRightPanel ? 'industrial-btn-primary' : ''}`}
              onClick={() => setShowRightPanel(v => !v)}
              title="右侧面板"
            >
              <Eye className="w-3.5 h-3.5" />
            </button>
          </div>

          {(pcLoading || cadLoading) && (
            <div className="flex items-center gap-2 px-3 py-1 industrial-card">
              <span className="status-led status-led-processing" />
              <span className="text-xs text-muted-foreground">
                {pcLoading ? `加载点云 ${pcProgress}%` : `加载 CAD ${cadLoadProgress}%`}
              </span>
            </div>
          )}

          {loading ? (
            <div className="w-7 h-7 rounded bg-secondary animate-pulse" />
          ) : !isAuthenticated ? (
            <a href={getLoginUrl()} className="industrial-btn industrial-btn-primary py-1.5">
              <LogIn className="w-3.5 h-3.5" />
            </a>
          ) : null}
        </div>
      </header>

      {/* 主内容区 */}
      <div className="flex-1 flex overflow-hidden">
        {/* 左侧面板 */}
        {showLeftPanel && (
          <aside className="w-72 border-r border-border bg-card/30 flex-shrink-0 overflow-y-auto p-3 space-y-2">
            {renderLeftPanel()}
          </aside>
        )}

        {/* 中央 3D 视图 */}
        <main className="flex-1 flex flex-col min-w-0">
          <div className="flex-1 relative">
            <div className="absolute inset-2">
              <div className="viewer-container w-full h-full relative">
                {/* 视图标题栏 */}
                <div className="absolute top-0 left-0 right-0 h-6 bg-[oklch(0.16_0.012_240)] border-b border-border z-10 flex items-center px-3">
                  <span className="text-[10px] text-muted-foreground uppercase tracking-wider">3D Viewport</span>
                  <div className="flex-1" />
                  <div className="flex items-center gap-3 text-[10px]">
                    <span className="text-muted-foreground">FPS: <span className="text-[oklch(0.62_0.16_145)] font-mono">60</span></span>
                  </div>
                </div>

                {/* 3D 渲染区域 */}
                <div className="absolute inset-0 pt-6">
                  <PointCloudViewer
                    showHeatmap={showHeatmap}
                    showCADModel={showCADModel}
                    showWireframe={showWireframe}
                    pointSize={pointSize}
                    cadModelUrl={cadModelUrl}
                    cadModelFormat={cadModelFormat}
                    pointCloudUrls={pointCloudUrlsStable}
                    batchTaskId={batchTaskId ?? undefined}
                    loadKey={pcLoadKey}
                    showPointCloud={showPointCloud}
                    selectedPcFileIds={selectedPcFileIds.length > 0 ? selectedPcFileIds : undefined}
                    onCadProgress={handleCadProgress}
                    onCadLoaded={handleCadLoaded}
                    onCadLoadError={handleCadLoadError}
                    onPointCloudProgress={handlePcProgress}
                    onPointCloudLoaded={handlePcLoaded}
                    onPointSelect={handlePointSelect}
                    enableErrorPicking={errorPickEnabled}
                    renderPointBudget={renderPointBudget}
                    pointCloudRenderMode={pointCloudRenderMode}
                    heatmapAnalysisResultId={heatmapViewResultId}
                    pluginOverlay={pluginOverlay}
                    roiPickMode={roiPickMode}
                    onRoiPointPicked={(pt) => {
                      setRoiPickedPoint(pt);
                      setRoiPickMode(false);
                    }}
                    className="w-full h-full"
                  />

                  {pcLoading && (
                    <div className="absolute inset-0 flex items-center justify-center bg-background/70 backdrop-blur-sm pointer-events-none">
                      <div className="industrial-panel p-6 text-center max-w-xs">
                        <div className="text-sm font-medium mb-3">正在加载点云数据</div>
                        <div className="industrial-progress mb-2">
                          <div className="industrial-progress-bar" style={{ width: `${pcProgress}%` }} />
                        </div>
                        <div className="text-xs text-muted-foreground">{pcProgress}%</div>
                      </div>
                    </div>
                  )}
                </div>

                {/* 操作提示 */}
                <div className="absolute bottom-3 left-3 info-overlay flex items-center gap-4 text-[10px] flex-wrap">
                  <span>左键旋转</span>
                  <span>右键平移</span>
                  <span>滚轮缩放</span>
                </div>

                {/* 选中点信息 */}
                {selectedPoint && (
                  <div className="absolute top-10 right-2 industrial-panel p-2 text-xs space-y-1 min-w-[140px]">
                    <div className="industrial-label text-[10px] mb-1">选中点</div>
                    <div className="grid grid-cols-3 gap-1 font-mono text-[10px]">
                      <div className="text-center"><div className="text-muted-foreground">X</div>{selectedPoint.position.x.toFixed(2)}</div>
                      <div className="text-center"><div className="text-muted-foreground">Y</div>{selectedPoint.position.y.toFixed(2)}</div>
                      <div className="text-center"><div className="text-muted-foreground">Z</div>{selectedPoint.position.z.toFixed(2)}</div>
                    </div>
                    <div className="flex justify-between items-center border-t border-border/40 pt-1">
                      <span className="text-muted-foreground">误差</span>
                      <span className={`font-mono ${
                        selectedPoint.error > 1.5 ? 'text-red-400' :
                        selectedPoint.error > 0.8 ? 'text-amber-400' : 'text-green-400'
                      }`}>{selectedPoint.error.toFixed(4)} mm</span>
                    </div>
                  </div>
                )}

                {/* 坐标轴 */}
                <div className="axis-indicator">
                  <svg viewBox="0 0 50 50" className="w-full h-full">
                    <line x1="25" y1="25" x2="45" y2="25" stroke="#ef4444" strokeWidth="2" />
                    <line x1="25" y1="25" x2="25" y2="5" stroke="#22c55e" strokeWidth="2" />
                    <line x1="25" y1="25" x2="10" y2="40" stroke="#3b82f6" strokeWidth="2" />
                    <text x="46" y="28" fill="#ef4444" fontSize="8">X</text>
                    <text x="22" y="4" fill="#22c55e" fontSize="8">Y</text>
                    <text x="4" y="44" fill="#3b82f6" fontSize="8">Z</text>
                  </svg>
                </div>
              </div>
            </div>
          </div>

          {/* 底部视图控制 */}
          <div className="h-10 border-t border-border bg-card/50 flex items-center px-4 gap-4">
            <div className="flex items-center gap-2">
              <button
                type="button"
                className={`industrial-btn h-7 px-2 py-0 inline-flex items-center gap-1 text-[10px] ${showPointCloud ? 'industrial-btn-primary' : ''}`}
                onClick={() => {
                  if (pointCloudRenderMode !== 'points') {
                    setPointCloudRenderMode('points');
                    setHeatmapViewResultId(null);
                    setPluginOverlay(null);
                    setShowPointCloud(true);
                    return;
                  }
                  setShowPointCloud(v => !v);
                }}
                title={showPointCloud ? '隐藏点云' : '显示点云'}
              >
                <Cloud className="w-3.5 h-3.5" />
                <span>点云</span>
              </button>
              {heatmapViewResultId != null && pointCloudRenderMode === 'smoothHeatmap' && (
                <span className="text-[9px] text-primary/90 px-1.5 py-0.5 rounded bg-primary/10 border border-primary/20">
                  正在显示分析结果 #{heatmapViewResultId}
                </span>
              )}
              <button
                type="button"
                className={`industrial-btn h-7 px-2 py-0 inline-flex items-center gap-1 text-[10px] ${showHeatmap ? 'industrial-btn-primary' : ''}`}
                onClick={() => setShowHeatmap(v => !v)}
              >
                {showHeatmap ? <Eye className="w-3.5 h-3.5" /> : <EyeOff className="w-3.5 h-3.5" />}
                <span>热力图</span>
              </button>
            </div>

            <div className="h-5 w-px bg-border" />

            <div className="flex items-center gap-2">
              <span className="text-xs text-muted-foreground">点大小</span>
              <input
                type="range"
                min="0.01"
                max="0.1"
                step="0.005"
                value={pointSize}
                onChange={e => setPointSize(parseFloat(e.target.value))}
                className="w-24 h-1 bg-secondary rounded appearance-none cursor-pointer"
              />
              <span className="text-xs font-mono w-10">{pointSize.toFixed(3)}</span>
            </div>

            <div className="h-5 w-px bg-border" />

            <div className="flex items-center gap-2" title="服务端随机采样点数，非磁盘全量。调低更流畅；偏差热力 GPU 可设更高。">
              <span className="text-xs text-muted-foreground whitespace-nowrap">预览点数</span>
              <input
                type="range"
                min={100_000}
                max={2_000_000}
                step={100_000}
                value={renderPointBudget}
                onChange={e => setRenderPointBudget(Number(e.target.value))}
                className="w-28 h-1 bg-secondary rounded appearance-none cursor-pointer"
              />
              <span className="text-xs font-mono w-14">{renderPointBudget >= 1_000_000 ? (renderPointBudget / 1_000_000).toFixed(1) + 'M' : (renderPointBudget / 1000).toFixed(0) + 'k'}</span>
            </div>
          </div>
        </main>

        {/* 右侧面板 - 分析结果 */}
        {showRightPanel && (
          <aside className="w-80 border-l border-border bg-card/30 flex-shrink-0 overflow-y-auto p-3">
            {renderRightPanel()}
          </aside>
        )}
      </div>
    </div>
  );
}