import { useDeferredValue, useEffect, useMemo, useState } from "react";
import { useParams, Link, useNavigate } from "react-router-dom";
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
import { AlertTriangle, ArrowLeft, ChevronDown, ChevronRight, Plus } from "lucide-react";
import { aiPmoApi } from "@/api/aiPmo";
import { sstcApi, type AIRoutingConfig, type SSTCSignal, type StageKey } from "@/api/sstc";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { ModelCapabilityMatrix } from "@/components/model-capability/ModelCapabilityMatrix";
import { BudgetControlPanel } from "@/components/budget/BudgetControlPanel";
import { SSTCGlobalHeader } from "@/components/sstc/SSTCGlobalHeader";
import { SSTCStageNav } from "@/components/sstc/SSTCStageNav";
import { SSTCWorkspace } from "@/components/sstc/SSTCWorkspace";
import { useToast } from "@/components/ui/toast";
import { formatProjectNameWithId } from "@/lib/display";
import { getApiErrorMessage } from "@/lib/apiError";
import { compactTitle } from "@/lib/title";
import { cn } from "@/lib/utils";
import CreateCharterDialog from "./components/CreateCharterDialog";
import ProjectSettingsDialog from "./components/ProjectSettingsDialog";
import {
  DEFAULT_SIGNAL_FILTERS,
  type SignalFilterState,
  LIVE_REFRESH_MS,
  dedupeWorkItemsBySemanticKey,
  toReadableWorkItemSummary,
  toReadableWorkItemTitle,
} from "./helpers";

export default function ProjectBoardPage() {
  const SIGNAL_PAGE_SIZE = 10;
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const { toast } = useToast();
  const [isMobileViewport, setIsMobileViewport] = useState(() =>
    typeof window !== "undefined" ? window.innerWidth < 768 : false
  );

  const [activeStage, setActiveStage] = useState<StageKey>("signal");
  const [selectedCharterId, setSelectedCharterId] = useState<string | null>(null);
  const [createCharterOpen, setCreateCharterOpen] = useState(false);
  const [newCharterTitle, setNewCharterTitle] = useState("");
  const [newCharterRawText, setNewCharterRawText] = useState("");
  const [selectedSignalIds, setSelectedSignalIds] = useState<string[]>([]);
  const [charterSeedSignalId, setCharterSeedSignalId] = useState<string | null>(null);
  const [signalSearch, setSignalSearch] = useState("");
  const [showAllSignalOptions, setShowAllSignalOptions] = useState(false);
  const [signalPage, setSignalPage] = useState(1);
  const [signalFilters, setSignalFilters] = useState<SignalFilterState>(DEFAULT_SIGNAL_FILTERS);
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [routingDraft, setRoutingDraft] = useState<AIRoutingConfig | null>(null);
  const [overviewExpanded, setOverviewExpanded] = useState(true);
  const deferredSignalSearch = useDeferredValue(signalSearch.trim());

  const { data: boardData, isLoading, error } = useQuery({
    queryKey: ["sstc-board-overview", id],
    queryFn: () => sstcApi.getBoardOverview(id!),
    enabled: !!id,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });

  const { data: chain } = useQuery({
    queryKey: ["sstc-chain", id],
    queryFn: () => sstcApi.getChain(id!),
    enabled: !!id,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });

  const { data: signalsPayload } = useQuery({
    queryKey: ["sstc-signals", id, signalPage, signalFilters],
    queryFn: () =>
      sstcApi.listSignals(id!, {
        status: signalFilters.status || undefined,
        keyword: signalFilters.keyword.trim() || undefined,
        source: signalFilters.source || undefined,
        priority: signalFilters.priority || undefined,
        created_from: signalFilters.created_from || undefined,
        created_to: signalFilters.created_to || undefined,
        limit: SIGNAL_PAGE_SIZE,
        offset: (signalPage - 1) * SIGNAL_PAGE_SIZE,
      }),
    enabled: !!id,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });
  const signals = signalsPayload?.items || [];
  const signalTotal = Number(signalsPayload?.total || 0);
  const signalTotalPages = Math.max(1, Math.ceil(signalTotal / SIGNAL_PAGE_SIZE));

  const { data: signalPickerPayload } = useQuery({
    queryKey: ["sstc-signals-picker", id],
    queryFn: () =>
      sstcApi.listSignals(id!, {
        limit: 200,
        offset: 0,
      }),
    enabled: !!id && createCharterOpen && showAllSignalOptions,
    staleTime: 60_000,
  });

  const { data: charters = [] } = useQuery({
    queryKey: ["sstc-charters", id],
    queryFn: () => sstcApi.listCharters(id!),
    enabled: !!id,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });

  const { data: tasks = [] } = useQuery({
    queryKey: ["sstc-task-board", id],
    queryFn: () => sstcApi.getTaskBoard(id!),
    enabled: !!id,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });

  const { data: releases = [] } = useQuery({
    queryKey: ["sstc-releases", id],
    queryFn: () => sstcApi.listReleases(id!),
    enabled: !!id,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });

  const { data: reviews = [] } = useQuery({
    queryKey: ["sstc-reviews", id],
    queryFn: () => sstcApi.listReviews(id!),
    enabled: !!id,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });

  const { data: routingConfig, isLoading: routingConfigLoading } = useQuery({
    queryKey: ["sstc-ai-routing-config", id],
    queryFn: () => sstcApi.getAIRoutingConfig(id!),
    enabled: !!id,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });

  const numericProjectId = Number(id || 0);
  const { data: pmoWorkItemsPayload } = useQuery({
    queryKey: ["ai-pmo-work-items", id],
    queryFn: () => aiPmoApi.listWorkItems({ projectId: numericProjectId, limit: 6 }),
    enabled: !!id && Number.isFinite(numericProjectId) && numericProjectId > 0,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });

  const { data: pmoRiskSnapshot } = useQuery({
    queryKey: ["ai-pmo-cadence", "risk_review", id],
    queryFn: () => aiPmoApi.getLatestCadence({ cadenceType: "risk_review", projectId: numericProjectId }),
    enabled: !!id && Number.isFinite(numericProjectId) && numericProjectId > 0,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });

  const { data: pmoDailySnapshot } = useQuery({
    queryKey: ["ai-pmo-cadence", "daily_standup", id],
    queryFn: () => aiPmoApi.getLatestCadence({ cadenceType: "daily_standup", projectId: numericProjectId }),
    enabled: !!id && Number.isFinite(numericProjectId) && numericProjectId > 0,
    refetchInterval: LIVE_REFRESH_MS,
    refetchOnWindowFocus: true,
  });

  useEffect(() => {
    if (routingConfig) {
      setRoutingDraft(routingConfig);
    }
  }, [routingConfig]);

  const updateRoutingConfigMutation = useMutation({
    mutationFn: (payload: {
      cold_start_enabled: boolean;
      signal_auto_enter_threshold: number;
      project_auto_create_threshold: number;
      project_uncertain_threshold: number;
    }) => sstcApi.updateAIRoutingConfig(id!, payload),
    onSuccess: (data) => {
      setRoutingDraft(data);
      setSettingsOpen(false);
      queryClient.invalidateQueries({ queryKey: ["sstc-ai-routing-config", id] });
      refreshAll();
    },
  });

  useEffect(() => {
    if (!selectedCharterId && charters.length > 0) {
      setSelectedCharterId(charters[0].id);
    }
  }, [charters, selectedCharterId]);

  useEffect(() => {
    if (typeof window === "undefined") return;
    const syncViewport = () => setIsMobileViewport(window.innerWidth < 768);
    syncViewport();
    window.addEventListener("resize", syncViewport);
    return () => window.removeEventListener("resize", syncViewport);
  }, []);

  useEffect(() => {
    setSignalPage(1);
    setSignalFilters(DEFAULT_SIGNAL_FILTERS);
  }, [id]);

  const refreshAll = async () => {
    await Promise.all([
      queryClient.invalidateQueries({ queryKey: ["sstc-board-overview", id] }),
      queryClient.invalidateQueries({ queryKey: ["sstc-chain", id] }),
      queryClient.invalidateQueries({ queryKey: ["sstc-signals", id] }),
      queryClient.invalidateQueries({ queryKey: ["sstc-signals-picker", id] }),
      queryClient.invalidateQueries({ queryKey: ["sstc-charters", id] }),
      queryClient.invalidateQueries({ queryKey: ["sstc-task-board", id] }),
      queryClient.invalidateQueries({ queryKey: ["sstc-releases", id] }),
      queryClient.invalidateQueries({ queryKey: ["sstc-reviews", id] }),
      queryClient.invalidateQueries({ queryKey: ["sstc-governance", id] }),
      queryClient.invalidateQueries({ queryKey: ["workloads"] }),
    ]);
  };

  const resetCreateCharterDraft = () => {
    setNewCharterTitle("");
    setNewCharterRawText("");
    setSelectedSignalIds([]);
    setCharterSeedSignalId(null);
    setSignalSearch("");
    setShowAllSignalOptions(false);
  };

  const handleCreateCharterDialogChange = (open: boolean) => {
    setCreateCharterOpen(open);
    if (!open && !createCharterMutation.isPending) {
      resetCreateCharterDraft();
    }
  };

  async function runCharterPrefillInBackground(charterId: string, rawText: string) {
    try {
      await sstcApi.aiPrefillCharter(
        id!,
        charterId,
        rawText ? { raw_text: rawText } : {}
      );
      await refreshAll();
      toast({ title: "宪章草稿已自动补全 6 模块", variant: "success" });
    } catch (error) {
      toast({
        title: getApiErrorMessage(error, "AI 补全失败，请在宪章页手动重试"),
        variant: "error",
      });
    }
  }

  const createCharterMutation = useMutation({
    mutationFn: async () => {
      const rawText = newCharterRawText.trim();
      const charter = await sstcApi.createCharter(id!, {
        title: compactTitle(newCharterTitle, 24),
        content: rawText ? { raw_source_text: rawText } : undefined,
        signal_ids: selectedSignalIds.map((v) => Number(v)),
        skip_ai_prefill: true,
      });
      return { charter, rawText };
    },
    onSuccess: ({ charter, rawText }) => {
      setActiveStage("charter");
      setSelectedCharterId(charter.id);
      setCreateCharterOpen(false);
      resetCreateCharterDraft();
      void refreshAll();
      toast({
        title: "宪章已创建，AI 正在后台补全 6 模块",
        variant: "success",
      });
      void runCharterPrefillInBackground(charter.id, rawText);
    },
    onError: (error) => {
      toast({
        title: getApiErrorMessage(error, "创建宪章失败"),
        variant: "error",
      });
    },
  });

  const stageNodes = boardData?.stages || [];
  const overview = boardData?.overview;
  const risks = boardData?.risks;

  const selectedStageLocked = useMemo(
    () => stageNodes.find((s) => s.key === activeStage)?.locked ?? false,
    [stageNodes, activeStage]
  );
  const compactNewCharterTitle = compactTitle(newCharterTitle, 24);
  const boardTitle = compactTitle(
    formatProjectNameWithId({
      id: overview?.project?.id || chain?.project?.id || id,
      title: overview?.project?.title || chain?.project?.title || "项目看板",
    }),
    24
  );
  const pmoWorkItems = useMemo(
    () => dedupeWorkItemsBySemanticKey(pmoWorkItemsPayload?.items || []),
    [pmoWorkItemsPayload?.items]
  );
  const pendingManualWorkItemCount = useMemo(
    () => pmoWorkItems.filter((item) => item.state === "waiting_manual").length,
    [pmoWorkItems]
  );
  const riskSummary = (pmoRiskSnapshot?.summary || {}) as Record<string, number>;
  const dailyPayload = (pmoDailySnapshot?.payload || {}) as Record<string, unknown>;
  const riskActions = Array.isArray(dailyPayload.focus_actions)
    ? (dailyPayload.focus_actions as string[]).slice(0, 2)
    : [];
  const currentSignalIds = useMemo(() => new Set(signals.map((signal) => signal.id)), [signals]);
  const signalOptionPool = useMemo(() => {
    const merged = new Map<string, SSTCSignal>();
    signals.forEach((signal) => merged.set(signal.id, signal));
    (signalPickerPayload?.items || []).forEach((signal) => merged.set(signal.id, signal));
    return Array.from(merged.values());
  }, [signals, signalPickerPayload?.items]);
  const signalOptions = useMemo(() => {
    const keyword = deferredSignalSearch.toLowerCase();
    const scoped = signalOptionPool.filter((signal) => {
      if (showAllSignalOptions) return true;
      return (
        currentSignalIds.has(signal.id) ||
        signal.id === charterSeedSignalId ||
        selectedSignalIds.includes(signal.id)
      );
    });
    const filtered = keyword
      ? scoped.filter((signal) => {
          const haystack = [
            signal.title,
            signal.content,
            signal.proposer_name,
          ]
            .filter(Boolean)
            .join(" ")
            .toLowerCase();
          return haystack.includes(keyword);
        })
      : scoped;
    return filtered.sort((a, b) => {
      const aPinned = Number(a.id === charterSeedSignalId || selectedSignalIds.includes(a.id));
      const bPinned = Number(b.id === charterSeedSignalId || selectedSignalIds.includes(b.id));
      return bPinned - aPinned;
    });
  }, [
    charterSeedSignalId,
    currentSignalIds,
    deferredSignalSearch,
    selectedSignalIds,
    showAllSignalOptions,
    signalOptionPool,
  ]);

  useEffect(() => {
    if (!createCharterOpen) return;
    setSelectedSignalIds((prev) =>
      prev.filter((sid) => {
        const signal = signalOptionPool.find((item) => item.id === sid);
        if (!signal) return false;
        return signal.can_create_charter !== false;
      })
    );
  }, [createCharterOpen, signalOptionPool]);

  const toggleSignal = (sid: string) => {
    const signal = signalOptionPool.find((item) => item.id === sid);
    if (signal && signal.can_create_charter === false) return;
    setSelectedSignalIds((prev) =>
      prev.includes(sid) ? prev.filter((x) => x !== sid) : [...prev, sid]
    );
  };

  const handleSignalFiltersChange = (patch: Partial<SignalFilterState>) => {
    setSignalPage(1);
    setSignalFilters((prev) => ({ ...prev, ...patch }));
  };

  const resetSignalFilters = () => {
    setSignalPage(1);
    setSignalFilters(DEFAULT_SIGNAL_FILTERS);
  };

  const openCreateCharterDialog = () => {
    resetCreateCharterDraft();
    setCreateCharterOpen(true);
  };

  const openCreateCharterFromSignal = (signal: SSTCSignal) => {
    if (signal.can_create_charter === false) {
      toast({
        title: signal.charter_lock_reason || "该信号已关联宪章，禁止重复新建",
        variant: "error",
      });
      return;
    }
    const titleSource = signal.title || signal.content || "新需求";
    setNewCharterTitle(compactTitle(titleSource, 24));
    setNewCharterRawText("");
    setSelectedSignalIds([signal.id]);
    setCharterSeedSignalId(signal.id);
    setSignalSearch("");
    setShowAllSignalOptions(false);
    setCreateCharterOpen(true);
  };

  return (
    <div className="space-y-4 pb-24">
      <div className="flex items-center gap-4">
        <Button variant="ghost" size="icon" asChild>
          <Link to="/projects">
            <ArrowLeft className="h-4 w-4" />
          </Link>
        </Button>
        <div>
          <h1 className="text-2xl font-bold tracking-tight">
            {boardTitle}
          </h1>
          <p className="text-muted-foreground">SSTC 唯一事实链路 · 可视化操作中枢</p>
        </div>
        <Button className="ml-auto" onClick={openCreateCharterDialog}>
          <Plus className="mr-2 h-4 w-4" />
          新建宪章
        </Button>
      </div>

      <Tabs defaultValue="sstc" className="w-full">
        <TabsList className="grid w-full grid-cols-3">
          <TabsTrigger value="sstc">SSTC 看板</TabsTrigger>
          <TabsTrigger value="capability">模型能力矩阵</TabsTrigger>
          <TabsTrigger value="budget">预算管控</TabsTrigger>
        </TabsList>

        <TabsContent value="sstc" className="space-y-4">
          {isLoading ? (
            <p className="text-muted-foreground">加载中…</p>
          ) : error || !overview ? (
            <Card>
              <CardContent className="py-12 text-center text-destructive">
                加载失败：{String(error)}
              </CardContent>
            </Card>
          ) : (
            <>
              <div className="overflow-hidden rounded-2xl border border-slate-200/80 bg-white/70 shadow-sm">
                <button
                  type="button"
                  className="flex w-full items-center justify-between gap-4 px-5 py-4 text-left transition hover:bg-slate-50/80"
                  onClick={() => setOverviewExpanded((prev) => !prev)}
                  aria-expanded={overviewExpanded}
                >
                  <div>
                    <div className="text-sm font-semibold text-slate-900">项目概览</div>
                    <p className="mt-1 text-sm text-muted-foreground">
                      汇总项目状态、团队负载、PMO 风险节奏与待处理工作项。
                    </p>
                  </div>
                  <span className="inline-flex items-center gap-1 text-sm font-medium text-slate-600">
                    {overviewExpanded ? "收起" : "展开"}
                    {overviewExpanded ? (
                      <ChevronDown className="h-4 w-4" />
                    ) : (
                      <ChevronRight className="h-4 w-4" />
                    )}
                  </span>
                </button>

                <div
                  className={cn(
                    "grid transition-all duration-300 ease-out",
                    overviewExpanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
                  )}
                >
                  <div className="overflow-hidden">
                    <div className="space-y-4 border-t border-slate-200/80 px-5 py-5">
                      <SSTCGlobalHeader
                        overview={overview}
                        onOpenAi={() => navigate("/ai-steward")}
                        onOpenSettings={() => setSettingsOpen(true)}
                        onOpenWorkloads={() => navigate("/workloads")}
                        onExport={() => {
                          const payload = JSON.stringify({ overview, chain, stageNodes, risks }, null, 2);
                          const blob = new Blob([payload], { type: "application/json" });
                          const url = URL.createObjectURL(blob);
                          const a = document.createElement("a");
                          a.href = url;
                          a.download = `链路导出-${id}.json`;
                          a.click();
                          URL.revokeObjectURL(url);
                        }}
                      />

                      <div className="grid gap-4 xl:grid-cols-3">
                        <Card className="xl:col-span-2">
                          <CardContent className="space-y-4 p-5">
                            <div className="flex items-start justify-between gap-3">
                              <div>
                                <div className="text-sm font-semibold text-slate-900">AI PMO 风险节奏</div>
                                <p className="mt-1 text-sm text-muted-foreground">
                                  最新 cadence 快照已接入项目看板，风险、阻塞和待人工确认不再只存在旧队列里。
                                </p>
                              </div>
                              <Button variant="outline" size="sm" onClick={() => navigate(`/inbox?project_id=${id}&section=action_required`)}>
                                查看收件箱
                              </Button>
                            </div>
                            <div className="grid gap-3 md:grid-cols-4">
                                {[
                                  { label: "Blocked Tasks", value: Number(riskSummary.blocked_task_count || 0) },
                                  { label: "待确认信号源", value: Number(riskSummary.pending_signal_source_count || 0) },
                                  { label: "风险通知", value: Number(riskSummary.unread_risk_notification_count || 0) },
                                  { label: "待确认工作项", value: pendingManualWorkItemCount },
                                ].map((metric) => (
                                  <div key={metric.label} className="rounded-xl bg-slate-50 px-4 py-3">
                                    <div className="text-xs font-semibold tracking-[0.12em] text-slate-500">{metric.label}</div>
                                  <div className="mt-2 text-2xl font-bold text-slate-900">{metric.value}</div>
                                </div>
                              ))}
                            </div>
                            <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-3">
                              <div className="text-xs font-semibold tracking-[0.18em] text-slate-500">当前焦点动作</div>
                              <div className="mt-2 space-y-2">
                                {riskActions.length > 0 ? (
                                  riskActions.map((action) => (
                                    <div key={action} className="text-sm text-slate-700">
                                      {action}
                                    </div>
                                  ))
                                ) : (
                                  <div className="text-sm text-slate-500">当前暂无新增高风险节奏动作。</div>
                                )}
                              </div>
                            </div>
                          </CardContent>
                        </Card>

                        <Card>
                          <CardContent className="space-y-3 p-5">
                            <div className="flex items-center justify-between gap-3">
                              <div className="text-sm font-semibold text-slate-900">AI PMO 工作项</div>
                              <Button variant="ghost" size="sm" onClick={() => navigate(`/inbox?project_id=${id}`)}>
                                全部查看
                              </Button>
                            </div>
                            {pmoWorkItems.length === 0 ? (
                              <div className="rounded-xl border border-dashed border-slate-200 bg-slate-50 px-4 py-6">
                                <div className="text-sm text-slate-600">当前项目暂无 PMO 工作项。</div>
                                <div className="mt-2 text-xs text-slate-500">
                                  建议下一步：先在任务阶段创建首批任务，或前往消息台确认待处理信号。
                                </div>
                                <div className="mt-3 flex gap-2">
                                  <Button size="sm" variant="outline" onClick={() => setActiveStage("task")}>
                                    去任务阶段
                                  </Button>
                                  <Button size="sm" variant="ghost" onClick={() => navigate(`/inbox?project_id=${id}`)}>
                                    打开消息台
                                  </Button>
                                </div>
                              </div>
                            ) : (
                              pmoWorkItems.map((item) => (
                                <button
                                  key={item.id}
                                  type="button"
                                  className="w-full rounded-xl border border-slate-200 bg-slate-50 px-4 py-3 text-left transition hover:bg-white"
                                  onClick={() => navigate(`/inbox?project_id=${id}&q=${encodeURIComponent(item.title)}`)}
                                >
                                  <div className="flex items-start justify-between gap-3">
                                    <div className="line-clamp-2 text-sm font-medium text-slate-900">{toReadableWorkItemTitle(item)}</div>
                                    {item.state === "waiting_manual" && <AlertTriangle className="h-4 w-4 shrink-0 text-amber-500" />}
                                  </div>
                                  <div className="mt-2 text-xs text-slate-500">{item.stage_text || item.state}</div>
                                  <div className="mt-2 line-clamp-2 text-xs text-slate-600">{toReadableWorkItemSummary(item)}</div>
                                </button>
                              ))
                            )}
                          </CardContent>
                        </Card>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <SSTCStageNav
                stages={stageNodes}
                activeStage={activeStage}
                signalPreview={chain?.signals?.slice(0, 6) || signals.slice(0, 6)}
                onChange={setActiveStage}
              />

              <SSTCWorkspace
                projectId={id!}
                activeStage={activeStage}
                isMobileViewport={isMobileViewport}
                charterReadOnly={isMobileViewport}
                stages={stageNodes}
                signals={signals}
                signalFilters={signalFilters}
                charters={charters}
                tasks={tasks}
                releases={releases}
                reviews={reviews}
                selectedCharterId={selectedCharterId}
                signalPage={signalPage}
                signalTotal={signalTotal}
                signalPageSize={SIGNAL_PAGE_SIZE}
                onSignalPageChange={(nextPage) =>
                  setSignalPage(Math.min(Math.max(1, nextPage), signalTotalPages))
                }
                onSelectCharter={setSelectedCharterId}
                onCreateCharterFromSignal={openCreateCharterFromSignal}
                onSignalFiltersChange={handleSignalFiltersChange}
                onResetSignalFilters={resetSignalFilters}
                onRefresh={refreshAll}
              />

              {selectedStageLocked && (
                <p className="text-xs text-amber-700">
                  当前阶段处于锁定态，仅可查看；请先完成上游阶段。
                </p>
              )}
            </>
          )}
        </TabsContent>

        <TabsContent value="capability">
          <ModelCapabilityMatrix projectId={id!} />
        </TabsContent>

        <TabsContent value="budget">
          <BudgetControlPanel projectId={id!} />
        </TabsContent>
      </Tabs>

      <CreateCharterDialog
        open={createCharterOpen}
        onOpenChange={handleCreateCharterDialogChange}
        newCharterTitle={newCharterTitle}
        setNewCharterTitle={setNewCharterTitle}
        compactNewCharterTitle={compactNewCharterTitle}
        newCharterRawText={newCharterRawText}
        setNewCharterRawText={setNewCharterRawText}
        selectedSignalIds={selectedSignalIds}
        charterSeedSignalId={charterSeedSignalId}
        showAllSignalOptions={showAllSignalOptions}
        setShowAllSignalOptions={setShowAllSignalOptions}
        signalSearch={signalSearch}
        setSignalSearch={setSignalSearch}
        signalPickerLoaded={Boolean(signalPickerPayload)}
        signalOptions={signalOptions}
        onToggleSignal={toggleSignal}
        onCancel={() => setCreateCharterOpen(false)}
        onCreate={() => createCharterMutation.mutate()}
        isCreating={createCharterMutation.isPending}
        canCreate={Boolean(compactNewCharterTitle) && selectedSignalIds.length > 0}
      />

      <ProjectSettingsDialog
        open={settingsOpen}
        onOpenChange={setSettingsOpen}
        routingDraft={routingDraft}
        setRoutingDraft={setRoutingDraft}
        routingConfigLoading={routingConfigLoading}
        isSaving={updateRoutingConfigMutation.isPending}
        onCancel={() => {
          setSettingsOpen(false);
          setRoutingDraft(routingConfig || null);
        }}
        onSave={(payload) => {
          updateRoutingConfigMutation.mutate(payload);
        }}
      />
    </div>
  );
}