"use client";

import { useQuery } from "@tanstack/react-query";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import {
  Activity,
  AlertTriangle,
  Archive,
  Check,
  MapPinned,
  Plus,
  RefreshCw,
  TrendingUp,
} from "lucide-react";
import { Fragment, useEffect, useMemo, useState } from "react";
import {
  Bar,
  BarChart,
  CartesianGrid,
  Line,
  LineChart,
  PolarAngleAxis,
  PolarGrid,
  PolarRadiusAxis,
  Radar,
  RadarChart,
  ResponsiveContainer,
  Tooltip,
  XAxis,
  YAxis,
} from "recharts";

import {
  archiveWatchlistItem,
  createDataSource,
  createIngestionRun,
  createRawArtifact,
  createAreaScoreModelRun,
  createWatchlistEvent,
  createWatchlistItem,
  fetchDataSources,
  fetchAreaScores,
  fetchAreaComparison,
  fetchAreaDetail,
  fetchAreaScoreRunDiff,
  fetchIngestionRuns,
  fetchMarketOverview,
  fetchModelRuns,
  fetchNeighborhoodComparison,
  fetchNeighborhoodDetail,
  fetchNeighborhoodScores,
  fetchRawArtifacts,
  fetchWatchlistEvents,
  fetchWatchlistItems,
  finishIngestionRun,
  updateWatchlistItem,
} from "@/lib/api";
import type {
  AreaScore,
  AreaComparison,
  AreaDetail,
  AreaScoreRunDiff,
  ComparisonMetric,
  CreateAreaScoreModelRun,
  CreateDataSource,
  CreateIngestionRun,
  CreateRawArtifact,
  CreateWatchlistEvent,
  CreateWatchlistItem,
  DataSource,
  IngestionRun,
  ModelRun,
  NeighborhoodComparison,
  NeighborhoodComparisonItem,
  NeighborhoodDetail,
  NeighborhoodScore,
  RawArtifact,
  SimilarNeighborhood,
  UpdateWatchlistItem,
  WatchlistEvent,
  WatchlistItem,
} from "@/lib/api";
import { formatNumber, formatPrice } from "@/lib/utils";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

const MONTH = "2026-05";

export function MarketDashboard() {
  const queryClient = useQueryClient();
  const [selectedAreaId, setSelectedAreaId] = useState("");
  const [detailAreaId, setDetailAreaId] = useState("qiantan");
  const [detailNeighborhoodId, setDetailNeighborhoodId] = useState("");
  const [comparisonAreaIds, setComparisonAreaIds] = useState<string[]>([]);
  const [comparisonNeighborhoodIds, setComparisonNeighborhoodIds] = useState<string[]>([]);
  const [watchlistStatus, setWatchlistStatus] = useState("active");
  const [watchlistAreaId, setWatchlistAreaId] = useState("");
  const [watchlistLabel, setWatchlistLabel] = useState("");
  const [expandedWatchlistItemId, setExpandedWatchlistItemId] = useState<number | null>(null);
  const [baseModelRunId, setBaseModelRunId] = useState<number | null>(null);
  const [candidateModelRunId, setCandidateModelRunId] = useState<number | null>(null);
  const overview = useQuery({
    queryKey: ["market-overview", MONTH],
    queryFn: () => fetchMarketOverview(MONTH),
  });
  const scores = useQuery({
    queryKey: ["area-scores", MONTH],
    queryFn: () => fetchAreaScores(MONTH),
  });
  const areaDetail = useQuery({
    queryKey: ["area-detail", detailAreaId, MONTH],
    queryFn: () => fetchAreaDetail(detailAreaId, MONTH),
    enabled: Boolean(detailAreaId),
  });
  const neighborhoodScores = useQuery({
    queryKey: ["neighborhood-scores", MONTH],
    queryFn: () => fetchNeighborhoodScores(MONTH),
  });
  const neighborhoodDetail = useQuery({
    queryKey: ["neighborhood-detail", detailNeighborhoodId, MONTH],
    queryFn: () => fetchNeighborhoodDetail(detailNeighborhoodId, MONTH),
    enabled: Boolean(detailNeighborhoodId),
  });
  const areaComparison = useQuery({
    queryKey: ["area-comparison", comparisonAreaIds, MONTH],
    queryFn: () => fetchAreaComparison(comparisonAreaIds, MONTH),
    enabled: comparisonAreaIds.length >= 2,
  });
  const neighborhoodComparison = useQuery({
    queryKey: ["neighborhood-comparison", comparisonNeighborhoodIds, MONTH],
    queryFn: () => fetchNeighborhoodComparison(comparisonNeighborhoodIds, MONTH),
    enabled: comparisonNeighborhoodIds.length >= 2,
  });
  const watchlist = useQuery({
    queryKey: ["watchlist", watchlistStatus, watchlistAreaId, watchlistLabel],
    queryFn: () =>
      fetchWatchlistItems({
        status: watchlistStatus,
        area_id: watchlistAreaId,
        label: watchlistLabel,
      }),
  });
  const watchlistEvents = useQuery({
    queryKey: ["watchlist-events", expandedWatchlistItemId],
    queryFn: () => fetchWatchlistEvents(expandedWatchlistItemId ?? 0),
    enabled: expandedWatchlistItemId !== null,
  });
  const modelRuns = useQuery({
    queryKey: ["model-runs", "area_scores"],
    queryFn: () => fetchModelRuns({ model_name: "area_scores" }),
  });
  const areaScoreRunDiff = useQuery({
    queryKey: ["area-score-run-diff", baseModelRunId, candidateModelRunId],
    queryFn: () => fetchAreaScoreRunDiff(baseModelRunId ?? 0, candidateModelRunId ?? 0),
    enabled:
      baseModelRunId !== null &&
      candidateModelRunId !== null &&
      baseModelRunId !== candidateModelRunId,
  });
  const dataSources = useQuery({
    queryKey: ["data-sources"],
    queryFn: fetchDataSources,
  });
  const ingestionRuns = useQuery({
    queryKey: ["ingestion-runs"],
    queryFn: fetchIngestionRuns,
  });
  const rawArtifacts = useQuery({
    queryKey: ["raw-artifacts"],
    queryFn: fetchRawArtifacts,
  });
  const createMutation = useMutation({
    mutationFn: createWatchlistItem,
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["watchlist"] }),
        queryClient.invalidateQueries({ queryKey: ["neighborhood-detail"] }),
      ]);
    },
  });
  const archiveMutation = useMutation({
    mutationFn: archiveWatchlistItem,
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["watchlist"] });
    },
  });
  const updateWatchlistMutation = useMutation({
    mutationFn: ({ id, payload }: { id: number; payload: UpdateWatchlistItem }) =>
      updateWatchlistItem(id, payload),
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["watchlist"] }),
        queryClient.invalidateQueries({ queryKey: ["watchlist-events"] }),
        queryClient.invalidateQueries({ queryKey: ["neighborhood-detail"] }),
      ]);
    },
  });
  const createWatchlistEventMutation = useMutation({
    mutationFn: ({ id, payload }: { id: number; payload: CreateWatchlistEvent }) =>
      createWatchlistEvent(id, payload),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["watchlist-events"] });
    },
  });
  const createAreaScoreModelRunMutation = useMutation({
    mutationFn: createAreaScoreModelRun,
    onSuccess: async (response) => {
      setCandidateModelRunId(response.model_run.model_run_id);
      if (baseModelRunId === null && modelRuns.data?.[0]) {
        setBaseModelRunId(modelRuns.data[0].model_run_id);
      }
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["model-runs"] }),
        queryClient.invalidateQueries({ queryKey: ["area-scores"] }),
        queryClient.invalidateQueries({ queryKey: ["market-overview"] }),
        queryClient.invalidateQueries({ queryKey: ["area-detail"] }),
        queryClient.invalidateQueries({ queryKey: ["area-score-run-diff"] }),
      ]);
    },
  });
  const createDataSourceMutation = useMutation({
    mutationFn: createDataSource,
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["data-sources"] });
    },
  });
  const createRunMutation = useMutation({
    mutationFn: createIngestionRun,
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["ingestion-runs"] });
    },
  });
  const createRawArtifactMutation = useMutation({
    mutationFn: createRawArtifact,
    onSuccess: async () => {
      await Promise.all([
        queryClient.invalidateQueries({ queryKey: ["raw-artifacts"] }),
        queryClient.invalidateQueries({ queryKey: ["ingestion-runs"] }),
      ]);
    },
  });
  const finishRunMutation = useMutation({
    mutationFn: ({ id, rowCount }: { id: number; rowCount?: number }) =>
      finishIngestionRun(id, { status: "succeeded", row_count: rowCount }),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ["ingestion-runs"] });
    },
  });

  useEffect(() => {
    if (!detailNeighborhoodId && neighborhoodScores.data?.[0]) {
      setDetailNeighborhoodId(neighborhoodScores.data[0].neighborhood_id);
    }
  }, [detailNeighborhoodId, neighborhoodScores.data]);

  useEffect(() => {
    if (comparisonAreaIds.length === 0 && scores.data && scores.data.length >= 2) {
      setComparisonAreaIds(scores.data.slice(0, 3).map((score) => score.area_id));
    }
  }, [comparisonAreaIds.length, scores.data]);

  useEffect(() => {
    if (
      comparisonNeighborhoodIds.length === 0 &&
      neighborhoodScores.data &&
      neighborhoodScores.data.length >= 2
    ) {
      setComparisonNeighborhoodIds(
        neighborhoodScores.data.slice(0, 3).map((score) => score.neighborhood_id),
      );
    }
  }, [comparisonNeighborhoodIds.length, neighborhoodScores.data]);

  useEffect(() => {
    if (modelRuns.data && modelRuns.data.length >= 2) {
      if (candidateModelRunId === null) {
        setCandidateModelRunId(modelRuns.data[0].model_run_id);
      }
      if (baseModelRunId === null) {
        setBaseModelRunId(modelRuns.data[1].model_run_id);
      }
    }
  }, [baseModelRunId, candidateModelRunId, modelRuns.data]);

  const isLoading =
    overview.isLoading ||
    scores.isLoading ||
    areaDetail.isLoading ||
    neighborhoodDetail.isLoading ||
    areaComparison.isLoading ||
    neighborhoodComparison.isLoading ||
    neighborhoodScores.isLoading ||
    watchlist.isLoading ||
    watchlistEvents.isLoading ||
    modelRuns.isLoading ||
    areaScoreRunDiff.isLoading ||
    dataSources.isLoading ||
    ingestionRuns.isLoading;
  const importLoading = ingestionRuns.isLoading || rawArtifacts.isLoading;
  const hasError =
    overview.isError ||
    scores.isError ||
    areaDetail.isError ||
    neighborhoodDetail.isError ||
    areaComparison.isError ||
    neighborhoodComparison.isError ||
    neighborhoodScores.isError ||
    watchlist.isError ||
    watchlistEvents.isError ||
    modelRuns.isError ||
    areaScoreRunDiff.isError ||
    dataSources.isError ||
    ingestionRuns.isError ||
    rawArtifacts.isError;

  return (
    <main className="min-h-screen px-4 py-5 sm:px-6 lg:px-8">
      <div className="mx-auto flex max-w-7xl flex-col gap-5">
        <header className="flex flex-col gap-3 border-b border-[var(--border)] pb-4 lg:flex-row lg:items-end lg:justify-between">
          <div>
            <p className="text-sm font-medium text-[var(--muted-foreground)]">上海房市投资研究系统</p>
            <h1 className="mt-1 text-2xl font-semibold tracking-normal text-slate-950">
              市场总览
            </h1>
          </div>
          <div className="flex items-center gap-2">
            <Badge variant="muted">{MONTH}</Badge>
            <Button
              variant="outline"
              onClick={() => {
                void overview.refetch();
                void scores.refetch();
                void areaDetail.refetch();
                void neighborhoodDetail.refetch();
                void areaComparison.refetch();
                void neighborhoodComparison.refetch();
                void neighborhoodScores.refetch();
                void watchlist.refetch();
                void dataSources.refetch();
                void ingestionRuns.refetch();
                void rawArtifacts.refetch();
                void modelRuns.refetch();
                void areaScoreRunDiff.refetch();
              }}
              disabled={isLoading}
              aria-label="刷新"
              title="刷新"
            >
              <RefreshCw className="h-4 w-4" />
            </Button>
          </div>
        </header>

        {hasError ? <ErrorState /> : null}

        <section className="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-4">
          <MetricCard
            title="样本板块"
            value={overview.data?.area_count ?? 0}
            suffix="个"
            icon={<MapPinned className="h-4 w-4" />}
            loading={isLoading}
          />
          <MetricCard
            title="平均综合分"
            value={overview.data?.average_investment_score ?? 0}
            icon={<Activity className="h-4 w-4" />}
            loading={isLoading}
          />
          <MetricCard
            title="平均租金收益率"
            value={overview.data?.average_rent_yield_pct ?? 0}
            suffix="%"
            icon={<TrendingUp className="h-4 w-4" />}
            loading={isLoading}
          />
          <MetricCard
            title="供应压力最高"
            textValue={overview.data?.highest_supply_risk_area?.name ?? "-"}
            icon={<AlertTriangle className="h-4 w-4" />}
            loading={isLoading}
            tone="warning"
          />
        </section>

        <section className="grid grid-cols-1 gap-4 xl:grid-cols-[minmax(0,1fr)_420px]">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between gap-3">
              <CardTitle>板块投资观察评分</CardTitle>
              {overview.data?.top_area ? (
                <Badge variant="success">首位：{overview.data.top_area.name}</Badge>
              ) : null}
            </CardHeader>
            <CardContent className="h-[340px]">
              <ScoreChart scores={scores.data ?? []} loading={isLoading} />
            </CardContent>
          </Card>

          <Card>
            <CardHeader>
              <CardTitle>核心结论</CardTitle>
            </CardHeader>
            <CardContent className="space-y-4">
              <InsightRow
                label="最高评分"
                value={overview.data?.top_area?.name ?? "-"}
                detail={
                  overview.data?.top_area
                    ? `${formatNumber(overview.data.top_area.investment_score)} 分`
                    : "-"
                }
              />
              <InsightRow
                label="最低评分"
                value={overview.data?.weakest_area?.name ?? "-"}
                detail={
                  overview.data?.weakest_area
                    ? `${formatNumber(overview.data.weakest_area.investment_score)} 分`
                    : "-"
                }
              />
              <InsightRow
                label="供应压力"
                value={overview.data?.highest_supply_risk_area?.name ?? "-"}
                detail={overview.data?.highest_supply_risk_area?.recommendation ?? "-"}
              />
            </CardContent>
          </Card>
        </section>

        <Card>
          <CardHeader>
            <CardTitle>板块明细</CardTitle>
          </CardHeader>
          <CardContent className="overflow-x-auto p-0">
            <AreaScoreTable
              scores={scores.data ?? []}
              loading={isLoading}
              selectedAreaId={detailAreaId}
              onSelectArea={setDetailAreaId}
            />
          </CardContent>
        </Card>

        <AreaDetailPanel
          detail={areaDetail.data ?? null}
          loading={areaDetail.isLoading}
          onCreateWatchlist={(payload) => createMutation.mutate(payload)}
          creating={createMutation.isPending}
          onSelectNeighborhood={setDetailNeighborhoodId}
        />

        <NeighborhoodRankingPanel
          scores={scores.data ?? []}
          neighborhoodScores={neighborhoodScores.data ?? []}
          selectedAreaId={selectedAreaId}
          selectedNeighborhoodId={detailNeighborhoodId}
          loading={isLoading}
          creating={createMutation.isPending}
          onSelectArea={setSelectedAreaId}
          onSelectNeighborhood={setDetailNeighborhoodId}
          onCreate={(payload) => createMutation.mutate(payload)}
        />

        <NeighborhoodDetailPanel
          detail={neighborhoodDetail.data ?? null}
          loading={neighborhoodDetail.isLoading}
          creating={createMutation.isPending}
          onCreateWatchlist={(payload) => createMutation.mutate(payload)}
          onSelectNeighborhood={setDetailNeighborhoodId}
        />

        <ComparisonWorkspace
          areaScores={scores.data ?? []}
          neighborhoodScores={neighborhoodScores.data ?? []}
          areaComparison={areaComparison.data ?? null}
          neighborhoodComparison={neighborhoodComparison.data ?? null}
          selectedAreaIds={comparisonAreaIds}
          selectedNeighborhoodIds={comparisonNeighborhoodIds}
          loading={areaComparison.isLoading || neighborhoodComparison.isLoading}
          onAreaIdsChange={setComparisonAreaIds}
          onNeighborhoodIdsChange={setComparisonNeighborhoodIds}
        />

        <WatchlistPanel
          scores={scores.data ?? []}
          neighborhoodScores={neighborhoodScores.data ?? []}
          items={watchlist.data ?? []}
          events={watchlistEvents.data ?? []}
          loading={isLoading}
          creating={createMutation.isPending}
          archivingId={archiveMutation.variables ?? null}
          updatingId={updateWatchlistMutation.variables?.id ?? null}
          creatingEvent={createWatchlistEventMutation.isPending}
          statusFilter={watchlistStatus}
          areaFilter={watchlistAreaId}
          labelFilter={watchlistLabel}
          expandedItemId={expandedWatchlistItemId}
          onStatusFilterChange={setWatchlistStatus}
          onAreaFilterChange={setWatchlistAreaId}
          onLabelFilterChange={setWatchlistLabel}
          onToggleEvents={(id) =>
            setExpandedWatchlistItemId((current) => (current === id ? null : id))
          }
          onCreate={(payload) => createMutation.mutate(payload)}
          onUpdate={(id, payload) => updateWatchlistMutation.mutate({ id, payload })}
          onCreateEvent={(id, payload) => createWatchlistEventMutation.mutate({ id, payload })}
          onArchive={(id) => archiveMutation.mutate(id)}
        />

        <ModelRunPanel
          runs={modelRuns.data ?? []}
          diff={areaScoreRunDiff.data ?? null}
          baseRunId={baseModelRunId}
          candidateRunId={candidateModelRunId}
          loading={modelRuns.isLoading || areaScoreRunDiff.isLoading}
          creating={createAreaScoreModelRunMutation.isPending}
          onBaseRunChange={setBaseModelRunId}
          onCandidateRunChange={setCandidateModelRunId}
          onCreateRun={(payload) => createAreaScoreModelRunMutation.mutate(payload)}
        />

        <ImportCenterPanel
          sources={dataSources.data ?? []}
          runs={ingestionRuns.data ?? []}
          artifacts={rawArtifacts.data ?? []}
          loading={isLoading}
          importLoading={importLoading}
          creatingSource={createDataSourceMutation.isPending}
          creatingRun={createRunMutation.isPending}
          creatingArtifact={createRawArtifactMutation.isPending}
          finishingRunId={finishRunMutation.variables?.id ?? null}
          onCreateSource={(payload) => createDataSourceMutation.mutate(payload)}
          onCreateRun={(payload) => createRunMutation.mutate(payload)}
          onCreateArtifact={(payload) => createRawArtifactMutation.mutate(payload)}
          onFinishRun={(id, rowCount) => finishRunMutation.mutate({ id, rowCount })}
        />
      </div>
    </main>
  );
}

function ImportCenterPanel({
  sources,
  runs,
  artifacts,
  loading,
  importLoading,
  creatingSource,
  creatingRun,
  creatingArtifact,
  finishingRunId,
  onCreateSource,
  onCreateRun,
  onCreateArtifact,
  onFinishRun,
}: {
  sources: DataSource[];
  runs: IngestionRun[];
  artifacts: RawArtifact[];
  loading: boolean;
  importLoading: boolean;
  creatingSource: boolean;
  creatingRun: boolean;
  creatingArtifact: boolean;
  finishingRunId: number | null;
  onCreateSource: (payload: CreateDataSource) => void;
  onCreateRun: (payload: CreateIngestionRun) => void;
  onCreateArtifact: (payload: CreateRawArtifact) => void;
  onFinishRun: (id: number, rowCount?: number) => void;
}) {
  const [sourceName, setSourceName] = useState("");
  const [sourceType, setSourceType] = useState("manual");
  const [sourceUrl, setSourceUrl] = useState("");
  const [sourceId, setSourceId] = useState("");
  const [rawUri, setRawUri] = useState("");
  const [rowCount, setRowCount] = useState("");
  const [artifactRunId, setArtifactRunId] = useState("");
  const [artifactSourceId, setArtifactSourceId] = useState("");
  const [artifactFilename, setArtifactFilename] = useState("");
  const [artifactRawUri, setArtifactRawUri] = useState("");
  const [artifactSha256, setArtifactSha256] = useState("");
  const [artifactSizeBytes, setArtifactSizeBytes] = useState("");

  function submitSource(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (!sourceName.trim()) {
      return;
    }
    onCreateSource({
      name: sourceName.trim(),
      source_type: sourceType,
      url: sourceUrl.trim() || undefined,
      cadence: "ad hoc",
      reliability: sourceType === "official" ? "high" : "medium",
      notes: "front-end registered source",
    });
    setSourceName("");
    setSourceUrl("");
  }

  function submitRun(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const parsedSourceId = Number(sourceId);
    if (!Number.isFinite(parsedSourceId) || parsedSourceId <= 0) {
      return;
    }
    onCreateRun({
      source_id: parsedSourceId,
      raw_uri: rawUri.trim() || undefined,
      status: "running",
    });
    setRawUri("");
  }

  function submitArtifact(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    const parsedRunId = Number(artifactRunId);
    const parsedSourceId = Number(artifactSourceId);
    const parsedSizeBytes = Number(artifactSizeBytes);
    if (
      !artifactFilename.trim() ||
      !artifactRawUri.trim() ||
      artifactSha256.trim().length !== 64 ||
      !Number.isFinite(parsedSizeBytes) ||
      parsedSizeBytes < 0
    ) {
      return;
    }
    onCreateArtifact({
      run_id: Number.isFinite(parsedRunId) && parsedRunId > 0 ? parsedRunId : undefined,
      source_id:
        Number.isFinite(parsedSourceId) && parsedSourceId > 0 ? parsedSourceId : undefined,
      original_filename: artifactFilename.trim(),
      raw_uri: artifactRawUri.trim(),
      sha256: artifactSha256.trim(),
      size_bytes: parsedSizeBytes,
      uploaded_by: "dashboard",
    });
    setArtifactFilename("");
    setArtifactRawUri("");
    setArtifactSha256("");
    setArtifactSizeBytes("");
  }

  return (
    <Card>
      <CardHeader className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
        <div>
          <CardTitle>导入中心</CardTitle>
          <p className="mt-1 text-sm text-[var(--muted-foreground)]">
            数据源登记与导入批次审计
          </p>
        </div>
        <div className="grid w-full gap-3 xl:w-auto xl:grid-cols-2">
          <form className="flex flex-col gap-2 sm:flex-row" onSubmit={submitSource}>
            <input
              className="h-9 w-full rounded-md border border-[var(--border)] bg-white px-3 text-sm sm:w-40"
              placeholder="数据源名称"
              value={sourceName}
              onChange={(event) => setSourceName(event.target.value)}
            />
            <select
              className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              value={sourceType}
              onChange={(event) => setSourceType(event.target.value)}
              aria-label="数据源类型"
            >
              <option value="manual">manual</option>
              <option value="official">official</option>
              <option value="market">market</option>
            </select>
            <input
              className="h-9 w-full rounded-md border border-[var(--border)] bg-white px-3 text-sm sm:w-52"
              placeholder="URL"
              value={sourceUrl}
              onChange={(event) => setSourceUrl(event.target.value)}
            />
            <Button disabled={!sourceName.trim() || creatingSource} aria-label="新增数据源" title="新增数据源">
              <Plus className="h-4 w-4" />
            </Button>
          </form>
          <form className="flex flex-col gap-2 sm:flex-row" onSubmit={submitRun}>
            <select
              className="h-9 min-w-40 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              value={sourceId}
              onChange={(event) => setSourceId(event.target.value)}
              aria-label="导入数据源"
            >
              <option value="">数据源</option>
              {sources.map((source) => (
                <option key={source.source_id} value={source.source_id}>
                  {source.name}
                </option>
              ))}
            </select>
            <input
              className="h-9 w-full rounded-md border border-[var(--border)] bg-white px-3 text-sm sm:w-56"
              placeholder="raw 路径"
              value={rawUri}
              onChange={(event) => setRawUri(event.target.value)}
            />
            <Button disabled={!sourceId || creatingRun} aria-label="创建导入批次" title="创建导入批次">
              <Plus className="h-4 w-4" />
            </Button>
          </form>
        </div>
      </CardHeader>
      <CardContent className="grid gap-4 xl:grid-cols-[420px_minmax(0,1fr)]">
        <DataSourceTable sources={sources} loading={loading} />
        <IngestionRunTable
          runs={runs}
          loading={importLoading}
          rowCount={rowCount}
          onRowCountChange={setRowCount}
          finishingRunId={finishingRunId}
          onFinishRun={(id) => {
            const parsedRowCount = Number(rowCount);
            onFinishRun(id, Number.isFinite(parsedRowCount) && parsedRowCount >= 0 ? parsedRowCount : undefined);
            setRowCount("");
          }}
        />
        <div className="xl:col-span-2">
          <form className="mb-3 grid gap-2 lg:grid-cols-[120px_120px_1fr_1fr_1.5fr_120px_44px]" onSubmit={submitArtifact}>
            <select
              className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              value={artifactRunId}
              onChange={(event) => setArtifactRunId(event.target.value)}
              aria-label="原始文件批次"
            >
              <option value="">批次</option>
              {runs.map((run) => (
                <option key={run.run_id} value={run.run_id}>
                  #{run.run_id}
                </option>
              ))}
            </select>
            <select
              className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              value={artifactSourceId}
              onChange={(event) => setArtifactSourceId(event.target.value)}
              aria-label="原始文件数据源"
            >
              <option value="">数据源</option>
              {sources.map((source) => (
                <option key={source.source_id} value={source.source_id}>
                  {source.name}
                </option>
              ))}
            </select>
            <input
              className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              placeholder="文件名"
              value={artifactFilename}
              onChange={(event) => setArtifactFilename(event.target.value)}
            />
            <input
              className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              placeholder="raw uri"
              value={artifactRawUri}
              onChange={(event) => setArtifactRawUri(event.target.value)}
            />
            <input
              className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              placeholder="sha256"
              value={artifactSha256}
              onChange={(event) => setArtifactSha256(event.target.value)}
            />
            <input
              className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              inputMode="numeric"
              placeholder="字节"
              value={artifactSizeBytes}
              onChange={(event) => setArtifactSizeBytes(event.target.value)}
            />
            <Button
              disabled={
                creatingArtifact ||
                !artifactFilename.trim() ||
                artifactSha256.trim().length !== 64
              }
              aria-label="登记原始文件"
              title="登记原始文件"
            >
              <Plus className="h-4 w-4" />
            </Button>
          </form>
          <RawArtifactTable artifacts={artifacts} loading={importLoading} />
        </div>
      </CardContent>
    </Card>
  );
}

function DataSourceTable({ sources, loading }: { sources: DataSource[]; loading: boolean }) {
  if (loading) {
    return <div className="h-48 rounded-md bg-[var(--muted)]" />;
  }

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>数据源</TableHead>
            <TableHead>类型</TableHead>
            <TableHead>可靠性</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {sources.map((source) => (
            <TableRow key={source.source_id}>
              <TableCell className="font-medium">{source.name}</TableCell>
              <TableCell>{source.source_type}</TableCell>
              <TableCell>
                <Badge variant={source.reliability === "high" ? "success" : "muted"}>
                  {source.reliability}
                </Badge>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function IngestionRunTable({
  runs,
  loading,
  rowCount,
  onRowCountChange,
  finishingRunId,
  onFinishRun,
}: {
  runs: IngestionRun[];
  loading: boolean;
  rowCount: string;
  onRowCountChange: (value: string) => void;
  finishingRunId: number | null;
  onFinishRun: (id: number) => void;
}) {
  if (loading) {
    return <div className="h-48 rounded-md bg-[var(--muted)]" />;
  }

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>批次</TableHead>
            <TableHead>数据源</TableHead>
            <TableHead>状态</TableHead>
            <TableHead>raw 路径</TableHead>
            <TableHead className="text-right">行数</TableHead>
            <TableHead className="w-44" />
          </TableRow>
        </TableHeader>
        <TableBody>
          {runs.map((run) => (
            <TableRow key={run.run_id}>
              <TableCell className="font-medium">#{run.run_id}</TableCell>
              <TableCell>{run.source_name ?? "-"}</TableCell>
              <TableCell>
                <Badge variant={run.status === "succeeded" ? "success" : "warning"}>
                  {run.status}
                </Badge>
              </TableCell>
              <TableCell className="max-w-64 truncate text-[var(--muted-foreground)]">
                {run.raw_uri ?? "-"}
              </TableCell>
              <TableCell className="text-right">{run.row_count ?? "-"}</TableCell>
              <TableCell>
                {run.status === "running" ? (
                  <div className="flex items-center justify-end gap-2">
                    <input
                      className="h-9 w-20 rounded-md border border-[var(--border)] bg-white px-2 text-sm"
                      inputMode="numeric"
                      placeholder="行数"
                      value={rowCount}
                      onChange={(event) => onRowCountChange(event.target.value)}
                    />
                    <Button
                      variant="outline"
                      disabled={finishingRunId === run.run_id}
                      onClick={() => onFinishRun(run.run_id)}
                      aria-label="完成导入"
                      title="完成导入"
                    >
                      <Check className="h-4 w-4" />
                    </Button>
                  </div>
                ) : null}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function RawArtifactTable({
  artifacts,
  loading,
}: {
  artifacts: RawArtifact[];
  loading: boolean;
}) {
  if (loading) {
    return <div className="h-48 rounded-md bg-[var(--muted)]" />;
  }

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>原始文件</TableHead>
            <TableHead>数据源</TableHead>
            <TableHead>批次</TableHead>
            <TableHead>SHA-256</TableHead>
            <TableHead className="text-right">大小</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {artifacts.map((artifact) => (
            <TableRow key={artifact.artifact_id}>
              <TableCell className="font-medium">{artifact.original_filename}</TableCell>
              <TableCell>{artifact.source_name ?? "-"}</TableCell>
              <TableCell>{artifact.run_id ? `#${artifact.run_id}` : "-"}</TableCell>
              <TableCell className="max-w-80 truncate font-mono text-xs text-[var(--muted-foreground)]">
                {artifact.sha256}
              </TableCell>
              <TableCell className="text-right">{formatNumber(artifact.size_bytes)}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function AreaDetailPanel({
  detail,
  loading,
  creating,
  onCreateWatchlist,
  onSelectNeighborhood,
}: {
  detail: AreaDetail | null;
  loading: boolean;
  creating: boolean;
  onCreateWatchlist: (payload: CreateWatchlistItem) => void;
  onSelectNeighborhood: (neighborhoodId: string) => void;
}) {
  if (loading) {
    return <div className="h-80 rounded-md bg-[var(--muted)]" />;
  }

  if (!detail) {
    return null;
  }

  const score = detail.current_score;
  const lineage = detail.score_lineage;
  const latestMetric = detail.monthly_metrics[0];

  return (
    <Card>
      <CardHeader className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
        <div>
          <CardTitle>{detail.profile.name}板块详情</CardTitle>
          <p className="mt-1 text-sm text-[var(--muted-foreground)]">
            {detail.profile.district} · {detail.profile.segment}
          </p>
        </div>
        <div className="flex items-center gap-2">
          {score ? <Badge variant="success">{score.recommendation}</Badge> : null}
          <Button
            variant="outline"
            disabled={creating}
            onClick={() =>
              onCreateWatchlist({
                area_id: detail.profile.area_id,
                target_price_psm: score
                  ? Math.round(score.transaction_price_psm * 0.96)
                  : undefined,
                notes: `${MONTH} 板块详情：${score?.recommendation ?? "待评分"}`,
              })
            }
            aria-label="加入观察池"
            title="加入观察池"
          >
            <Plus className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent className="grid gap-4 xl:grid-cols-[360px_minmax(0,1fr)]">
        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
          <InsightRow
            label="综合分"
            value={score ? formatNumber(score.investment_score) : "-"}
            detail={lineage?.model_version ?? "gold"}
          />
          <InsightRow
            label="成交均价/㎡"
            value={latestMetric ? formatPrice(latestMetric.transaction_price_psm) : "-"}
            detail={latestMetric?.month ?? MONTH}
          />
          <InsightRow
            label="挂牌压力"
            value={score ? formatNumber(score.listing_pressure_ratio, 2) : "-"}
            detail={latestMetric ? `${latestMetric.listing_count} 套` : "-"}
          />
          <InsightRow
            label="数据追溯"
            value={lineage?.source_name ?? "-"}
            detail={lineage?.raw_artifact_id ? `#${lineage.raw_artifact_id}` : "-"}
          />
        </div>
        <div className="grid gap-4">
          <div className="h-72 rounded-md border border-[var(--border)] p-3">
            <AreaMetricTrendChart metrics={detail.monthly_metrics} />
          </div>
          <AreaDiagnosticsPanel diagnostics={detail.diagnostics} />
          <div className="grid gap-4 lg:grid-cols-2">
            <AreaMetricHistoryTable metrics={detail.monthly_metrics} />
            <AreaNeighborhoodTable
              scores={detail.neighborhood_scores}
              creating={creating}
              onCreate={onCreateWatchlist}
              onSelectNeighborhood={onSelectNeighborhood}
            />
          </div>
          {lineage ? (
            <div className="rounded-md border border-[var(--border)] px-3 py-2 text-xs text-[var(--muted-foreground)]">
              SHA-256：<span className="font-mono">{lineage.sha256 ?? "-"}</span>
            </div>
          ) : null}
        </div>
      </CardContent>
    </Card>
  );
}

function AreaDiagnosticsPanel({ diagnostics }: { diagnostics: AreaDetail["diagnostics"] }) {
  if (!diagnostics) {
    return (
      <div className="rounded-md border border-[var(--border)] px-4 py-8 text-sm text-[var(--muted-foreground)]">
        暂无历史分位
      </div>
    );
  }

  return (
    <div className="rounded-md border border-[var(--border)] p-3">
      <div className="mb-3 flex items-center justify-between gap-3">
        <p className="text-sm font-semibold text-slate-950">历史分位与异常</p>
        <Badge variant={diagnostics.anomaly_count > 0 ? "warning" : "success"}>
          {diagnostics.anomaly_count} 项异常
        </Badge>
      </div>
      <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-4">
        {diagnostics.metrics.map((metric) => (
          <div key={metric.key} className="rounded-md border border-[var(--border)] bg-white p-3">
            <div className="flex items-center justify-between gap-2">
              <span className="text-sm font-medium text-slate-950">{metric.label}</span>
              <Badge variant={metric.anomaly ? "warning" : "muted"}>{metric.severity}</Badge>
            </div>
            <p className="mt-2 text-lg font-semibold text-slate-950">
              {formatMetricValue(metric.current_value, metric.unit)}
            </p>
            <div className="mt-3 h-2 rounded-full bg-[var(--muted)]">
              <div
                className={
                  metric.anomaly
                    ? "h-2 rounded-full bg-[var(--warning)]"
                    : "h-2 rounded-full bg-[var(--primary)]"
                }
                style={{ width: `${Math.max(0, Math.min(100, metric.percentile))}%` }}
              />
            </div>
            <div className="mt-2 flex items-center justify-between text-xs text-[var(--muted-foreground)]">
              <span>P{formatNumber(metric.percentile, 1)}</span>
              <span>
                {formatMetricValue(metric.historical_min, metric.unit)}-
                {formatMetricValue(metric.historical_max, metric.unit)}
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function AreaMetricTrendChart({ metrics }: { metrics: AreaDetail["monthly_metrics"] }) {
  const data = [...metrics].reverse();
  if (data.length === 0) {
    return (
      <div className="flex h-full items-center text-sm text-[var(--muted-foreground)]">
        暂无月度指标
      </div>
    );
  }

  return (
    <ResponsiveContainer width="100%" height="100%">
      <LineChart data={data} margin={{ top: 8, right: 12, left: 0, bottom: 4 }}>
        <CartesianGrid stroke="#e2e8f0" vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fontSize: 12 }} />
        <YAxis yAxisId="price" tickLine={false} axisLine={false} tick={{ fontSize: 12 }} />
        <YAxis
          yAxisId="volume"
          orientation="right"
          tickLine={false}
          axisLine={false}
          tick={{ fontSize: 12 }}
        />
        <Tooltip
          formatter={(value, name) => {
            if (name === "transaction_price_psm") {
              return [formatPrice(Number(value)), "成交均价/㎡"];
            }
            return [formatNumber(Number(value)), "成交套数"];
          }}
        />
        <Line
          yAxisId="price"
          type="monotone"
          dataKey="transaction_price_psm"
          stroke="#0f766e"
          strokeWidth={2}
          dot={false}
        />
        <Line
          yAxisId="volume"
          type="monotone"
          dataKey="transaction_count"
          stroke="#b45309"
          strokeWidth={2}
          dot={false}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

function AreaMetricHistoryTable({ metrics }: { metrics: AreaDetail["monthly_metrics"] }) {
  if (metrics.length === 0) {
    return (
      <div className="rounded-md border border-[var(--border)] px-4 py-8 text-sm text-[var(--muted-foreground)]">
        暂无月度指标
      </div>
    );
  }

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>月份</TableHead>
            <TableHead className="text-right">成交</TableHead>
            <TableHead className="text-right">均价/㎡</TableHead>
            <TableHead className="text-right">挂牌</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {metrics.slice(0, 6).map((metric) => (
            <TableRow key={`${metric.area_id}-${metric.month}`}>
              <TableCell className="font-medium">{metric.month}</TableCell>
              <TableCell className="text-right">{metric.transaction_count}</TableCell>
              <TableCell className="text-right">{formatPrice(metric.transaction_price_psm)}</TableCell>
              <TableCell className="text-right">{metric.listing_count}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function AreaNeighborhoodTable({
  scores,
  creating,
  onCreate,
  onSelectNeighborhood,
}: {
  scores: NeighborhoodScore[];
  creating: boolean;
  onCreate: (payload: CreateWatchlistItem) => void;
  onSelectNeighborhood: (neighborhoodId: string) => void;
}) {
  if (scores.length === 0) {
    return (
      <div className="rounded-md border border-[var(--border)] px-4 py-8 text-sm text-[var(--muted-foreground)]">
        暂无小区评分
      </div>
    );
  }

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>小区</TableHead>
            <TableHead className="text-right">分数</TableHead>
            <TableHead className="text-right">均价/㎡</TableHead>
            <TableHead className="w-14" />
          </TableRow>
        </TableHeader>
        <TableBody>
          {scores.slice(0, 6).map((score) => (
            <TableRow
              key={score.neighborhood_id}
              className="cursor-pointer hover:bg-slate-50"
              onClick={() => onSelectNeighborhood(score.neighborhood_id)}
            >
              <TableCell className="font-medium">{score.name}</TableCell>
              <TableCell className="text-right">{formatNumber(score.investment_score)}</TableCell>
              <TableCell className="text-right">{formatPrice(score.transaction_price_psm)}</TableCell>
              <TableCell className="text-right">
                <Button
                  variant="outline"
                  disabled={creating}
                  onClick={(event) => {
                    event.stopPropagation();
                    onCreate({
                      neighborhood_id: score.neighborhood_id,
                      target_price_psm: Math.round(score.transaction_price_psm * 0.96),
                      notes: `${score.month} 板块详情：${score.recommendation}`,
                    });
                  }}
                  aria-label="加入观察池"
                  title="加入观察池"
                >
                  <Plus className="h-4 w-4" />
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function NeighborhoodRankingPanel({
  scores,
  neighborhoodScores,
  selectedAreaId,
  selectedNeighborhoodId,
  loading,
  creating,
  onSelectArea,
  onSelectNeighborhood,
  onCreate,
}: {
  scores: AreaScore[];
  neighborhoodScores: NeighborhoodScore[];
  selectedAreaId: string;
  selectedNeighborhoodId: string;
  loading: boolean;
  creating: boolean;
  onSelectArea: (areaId: string) => void;
  onSelectNeighborhood: (neighborhoodId: string) => void;
  onCreate: (payload: CreateWatchlistItem) => void;
}) {
  const filteredScores = selectedAreaId
    ? neighborhoodScores.filter((score) => score.area_id === selectedAreaId)
    : neighborhoodScores;
  const topNeighborhood = filteredScores[0];

  return (
    <Card>
      <CardHeader className="flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div className="flex items-center gap-2">
          <CardTitle>小区排行</CardTitle>
          {topNeighborhood ? <Badge variant="success">首位：{topNeighborhood.name}</Badge> : null}
        </div>
        <select
          className="h-9 w-full rounded-md border border-[var(--border)] bg-white px-3 text-sm lg:w-44"
          value={selectedAreaId}
          onChange={(event) => onSelectArea(event.target.value)}
          aria-label="小区板块筛选"
        >
          <option value="">全部板块</option>
          {scores.map((score) => (
            <option key={score.area_id} value={score.area_id}>
              {score.name}
            </option>
          ))}
        </select>
      </CardHeader>
      <CardContent className="overflow-x-auto p-0">
        <NeighborhoodScoreTable
          scores={filteredScores}
          loading={loading}
          creating={creating}
          selectedNeighborhoodId={selectedNeighborhoodId}
          onSelectNeighborhood={onSelectNeighborhood}
          onCreate={onCreate}
        />
      </CardContent>
    </Card>
  );
}

function NeighborhoodScoreTable({
  scores,
  loading,
  creating,
  selectedNeighborhoodId,
  onSelectNeighborhood,
  onCreate,
}: {
  scores: NeighborhoodScore[];
  loading: boolean;
  creating: boolean;
  selectedNeighborhoodId: string;
  onSelectNeighborhood: (neighborhoodId: string) => void;
  onCreate: (payload: CreateWatchlistItem) => void;
}) {
  if (loading) {
    return <div className="h-56 bg-[var(--muted)]" />;
  }

  if (scores.length === 0) {
    return <div className="px-4 py-8 text-sm text-[var(--muted-foreground)]">暂无小区评分</div>;
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>小区</TableHead>
          <TableHead>板块</TableHead>
          <TableHead className="text-right">综合分</TableHead>
          <TableHead>建议</TableHead>
          <TableHead className="text-right">成交均价/㎡</TableHead>
          <TableHead className="text-right">租金收益率</TableHead>
          <TableHead className="text-right">流动性</TableHead>
          <TableHead className="text-right">位置</TableHead>
          <TableHead className="w-14" />
        </TableRow>
      </TableHeader>
      <TableBody>
        {scores.map((score) => (
          <TableRow
            key={score.neighborhood_id}
            className={
              selectedNeighborhoodId === score.neighborhood_id
                ? "cursor-pointer bg-teal-50/60"
                : "cursor-pointer hover:bg-slate-50"
            }
            onClick={() => onSelectNeighborhood(score.neighborhood_id)}
          >
            <TableCell className="font-medium">{score.name}</TableCell>
            <TableCell>{score.area_name}</TableCell>
            <TableCell className="text-right font-semibold">
              {formatNumber(score.investment_score)}
            </TableCell>
            <TableCell>
              <Badge variant={score.recommendation === "重点研究" ? "success" : "muted"}>
                {score.recommendation}
              </Badge>
            </TableCell>
            <TableCell className="text-right">{formatPrice(score.transaction_price_psm)}</TableCell>
            <TableCell className="text-right">
              {formatNumber(score.annual_rent_yield_pct, 2)}%
            </TableCell>
            <TableCell className="text-right">{formatNumber(score.liquidity_score)}</TableCell>
            <TableCell className="text-right">{formatNumber(score.location_score)}</TableCell>
            <TableCell className="text-right">
              <Button
                variant="outline"
                disabled={creating}
                onClick={(event) => {
                  event.stopPropagation();
                  onCreate({
                    neighborhood_id: score.neighborhood_id,
                    target_price_psm: Math.round(score.transaction_price_psm * 0.96),
                    notes: `${score.month} 小区排行：${score.recommendation}`,
                  });
                }}
                aria-label="加入观察池"
                title="加入观察池"
              >
                <Plus className="h-4 w-4" />
              </Button>
            </TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

function NeighborhoodDetailPanel({
  detail,
  loading,
  creating,
  onCreateWatchlist,
  onSelectNeighborhood,
}: {
  detail: NeighborhoodDetail | null;
  loading: boolean;
  creating: boolean;
  onCreateWatchlist: (payload: CreateWatchlistItem) => void;
  onSelectNeighborhood: (neighborhoodId: string) => void;
}) {
  if (loading) {
    return <div className="h-80 rounded-md bg-[var(--muted)]" />;
  }

  if (!detail) {
    return null;
  }

  const score = detail.current_score;
  const latestMetric = detail.monthly_metrics[0];
  const referencePrice = score?.transaction_price_psm ?? latestMetric?.transaction_price_psm ?? 0;
  const lowerWatchPrice = referencePrice > 0 ? Math.round(referencePrice * 0.92) : null;
  const upperWatchPrice = referencePrice > 0 ? Math.round(referencePrice * 0.96) : null;
  const activeWatchlistItem = detail.watchlist_items[0];

  return (
    <Card>
      <CardHeader className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
        <div>
          <CardTitle>{detail.profile.name}小区详情</CardTitle>
          <p className="mt-1 text-sm text-[var(--muted-foreground)]">
            {detail.profile.district} · {detail.profile.area_name} · {detail.profile.property_type}
          </p>
        </div>
        <div className="flex items-center gap-2">
          {score ? <Badge variant="success">{score.recommendation}</Badge> : null}
          {activeWatchlistItem ? <Badge variant="muted">{activeWatchlistItem.status}</Badge> : null}
          <Button
            variant="outline"
            disabled={creating}
            onClick={() =>
              onCreateWatchlist({
                neighborhood_id: detail.profile.neighborhood_id,
                target_price_psm: upperWatchPrice ?? undefined,
                notes: `${MONTH} 小区详情：${score?.recommendation ?? "待评分"}`,
              })
            }
            aria-label="加入观察池"
            title="加入观察池"
          >
            <Plus className="h-4 w-4" />
          </Button>
        </div>
      </CardHeader>
      <CardContent className="grid gap-4 xl:grid-cols-[360px_minmax(0,1fr)]">
        <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1">
          <InsightRow
            label="综合分"
            value={score ? formatNumber(score.investment_score) : "-"}
            detail={score?.month ?? MONTH}
          />
          <InsightRow
            label="观察价区间/㎡"
            value={
              lowerWatchPrice && upperWatchPrice
                ? `${formatPrice(lowerWatchPrice)} - ${formatPrice(upperWatchPrice)}`
                : "-"
            }
            detail="当前价 92%-96%"
          />
          <InsightRow
            label="建成年份"
            value={detail.profile.built_year ? `${detail.profile.built_year}` : "-"}
            detail={score ? `${formatNumber(score.building_age_score)} 分` : "-"}
          />
          <InsightRow
            label="地铁距离"
            value={
              detail.profile.metro_distance_m ? `${detail.profile.metro_distance_m} 米` : "-"
            }
            detail={detail.profile.school_quality ?? "-"}
          />
        </div>
        <div className="grid gap-4">
          <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_320px]">
            <div className="h-72 rounded-md border border-[var(--border)] p-3">
              <NeighborhoodMetricTrendChart metrics={detail.monthly_metrics} />
            </div>
            <NeighborhoodScoreBreakdown score={score} />
          </div>
          <div className="grid gap-4 lg:grid-cols-2">
            <NeighborhoodMetricHistoryTable metrics={detail.monthly_metrics} />
            <NeighborhoodProfileTable detail={detail} />
          </div>
          <SimilarNeighborhoodTable
            items={detail.similar_neighborhoods}
            onSelectNeighborhood={onSelectNeighborhood}
          />
        </div>
      </CardContent>
    </Card>
  );
}

function NeighborhoodMetricTrendChart({
  metrics,
}: {
  metrics: NeighborhoodDetail["monthly_metrics"];
}) {
  const data = [...metrics].reverse();
  if (data.length === 0) {
    return (
      <div className="flex h-full items-center text-sm text-[var(--muted-foreground)]">
        暂无月度指标
      </div>
    );
  }

  return (
    <ResponsiveContainer width="100%" height="100%">
      <LineChart data={data} margin={{ top: 8, right: 12, left: 0, bottom: 4 }}>
        <CartesianGrid stroke="#e2e8f0" vertical={false} />
        <XAxis dataKey="month" tickLine={false} axisLine={false} tick={{ fontSize: 12 }} />
        <YAxis yAxisId="price" tickLine={false} axisLine={false} tick={{ fontSize: 12 }} />
        <YAxis
          yAxisId="volume"
          orientation="right"
          tickLine={false}
          axisLine={false}
          tick={{ fontSize: 12 }}
        />
        <Tooltip
          formatter={(value, name) => {
            if (name === "transaction_price_psm") {
              return [formatPrice(Number(value)), "成交均价/㎡"];
            }
            if (name === "listing_price_psm") {
              return [formatPrice(Number(value)), "挂牌均价/㎡"];
            }
            return [formatNumber(Number(value)), "成交套数"];
          }}
        />
        <Line
          yAxisId="price"
          type="monotone"
          dataKey="transaction_price_psm"
          stroke="#0f766e"
          strokeWidth={2}
          dot={false}
        />
        <Line
          yAxisId="price"
          type="monotone"
          dataKey="listing_price_psm"
          stroke="#2563eb"
          strokeWidth={2}
          dot={false}
        />
        <Line
          yAxisId="volume"
          type="monotone"
          dataKey="transaction_count"
          stroke="#b45309"
          strokeWidth={2}
          dot={false}
        />
      </LineChart>
    </ResponsiveContainer>
  );
}

function NeighborhoodScoreBreakdown({ score }: { score: NeighborhoodScore | null }) {
  const items = score
    ? [
        ["流动性", score.liquidity_score],
        ["租金支撑", score.rent_support_score],
        ["价格安全", score.price_safety_score],
        ["位置", score.location_score],
        ["楼龄", score.building_age_score],
      ]
    : [];

  if (!score) {
    return (
      <div className="rounded-md border border-[var(--border)] px-4 py-8 text-sm text-[var(--muted-foreground)]">
        暂无评分拆解
      </div>
    );
  }

  return (
    <div className="rounded-md border border-[var(--border)] p-4">
      <p className="text-sm font-semibold text-slate-950">评分拆解</p>
      <div className="mt-4 grid gap-3">
        {items.map(([label, value]) => (
          <div key={label} className="grid gap-1">
            <div className="flex items-center justify-between text-sm">
              <span className="text-[var(--muted-foreground)]">{label}</span>
              <span className="font-medium text-slate-950">{formatNumber(Number(value))}</span>
            </div>
            <div className="h-2 rounded-full bg-[var(--muted)]">
              <div
                className="h-2 rounded-full bg-[var(--primary)]"
                style={{ width: `${Math.max(0, Math.min(100, Number(value)))}%` }}
              />
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function NeighborhoodMetricHistoryTable({
  metrics,
}: {
  metrics: NeighborhoodDetail["monthly_metrics"];
}) {
  if (metrics.length === 0) {
    return (
      <div className="rounded-md border border-[var(--border)] px-4 py-8 text-sm text-[var(--muted-foreground)]">
        暂无月度指标
      </div>
    );
  }

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>月份</TableHead>
            <TableHead className="text-right">成交</TableHead>
            <TableHead className="text-right">成交均价/㎡</TableHead>
            <TableHead className="text-right">可售</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {metrics.slice(0, 6).map((metric) => (
            <TableRow key={`${metric.neighborhood_id}-${metric.month}`}>
              <TableCell className="font-medium">{metric.month}</TableCell>
              <TableCell className="text-right">{metric.transaction_count}</TableCell>
              <TableCell className="text-right">{formatPrice(metric.transaction_price_psm)}</TableCell>
              <TableCell className="text-right">{metric.available_units}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function NeighborhoodProfileTable({ detail }: { detail: NeighborhoodDetail }) {
  const latestMetric = detail.monthly_metrics[0];
  const activeWatchlistItem = detail.watchlist_items[0];
  const rows = [
    ["挂牌均价/㎡", latestMetric ? formatPrice(latestMetric.listing_price_psm) : "-"],
    ["租金/㎡", latestMetric ? formatPrice(latestMetric.rent_price_psm) : "-"],
    ["去化天数", latestMetric ? formatNumber(latestMetric.median_days_on_market) : "-"],
    ["数据批次", latestMetric?.ingestion_run_id ? `#${latestMetric.ingestion_run_id}` : "-"],
    ["原始文件", latestMetric?.raw_artifact_id ? `#${latestMetric.raw_artifact_id}` : "-"],
    [
      "观察池目标/㎡",
      activeWatchlistItem?.target_price_psm ? formatPrice(activeWatchlistItem.target_price_psm) : "-",
    ],
  ];

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableBody>
          {rows.map(([label, value]) => (
            <TableRow key={label}>
              <TableCell className="text-[var(--muted-foreground)]">{label}</TableCell>
              <TableCell className="text-right font-medium">{value}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function SimilarNeighborhoodTable({
  items,
  onSelectNeighborhood,
}: {
  items: SimilarNeighborhood[];
  onSelectNeighborhood: (neighborhoodId: string) => void;
}) {
  if (items.length === 0) {
    return (
      <div className="rounded-md border border-[var(--border)] px-4 py-8 text-sm text-[var(--muted-foreground)]">
        暂无相似资产
      </div>
    );
  }

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>相似资产</TableHead>
            <TableHead>板块</TableHead>
            <TableHead className="text-right">相似度</TableHead>
            <TableHead className="text-right">相对价格</TableHead>
            <TableHead className="text-right">成交均价/㎡</TableHead>
            <TableHead className="text-right">综合分</TableHead>
            <TableHead>匹配原因</TableHead>
            <TableHead className="w-12 text-right">查看</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {items.map((item) => (
            <TableRow key={item.neighborhood_id}>
              <TableCell className="min-w-40">
                <span className="block font-medium text-slate-950">{item.name}</span>
                <span className="block text-xs text-[var(--muted-foreground)]">
                  {item.property_type} · {item.built_year ?? "-"}
                </span>
              </TableCell>
              <TableCell className="min-w-32">
                <span className="block">{item.area_name}</span>
                <span className="block text-xs text-[var(--muted-foreground)]">
                  {item.district}
                </span>
              </TableCell>
              <TableCell className="text-right font-medium">
                {formatNumber(item.similarity_score)}
              </TableCell>
              <TableCell className="text-right">
                <Badge variant={relativePriceVariant(item.relative_price_pct)}>
                  {formatRelativePrice(item.relative_price_pct)}
                </Badge>
              </TableCell>
              <TableCell className="text-right">{formatPrice(item.transaction_price_psm)}</TableCell>
              <TableCell className="text-right">
                <span className="block font-medium">{formatNumber(item.investment_score)}</span>
                <span className="block text-xs text-[var(--muted-foreground)]">
                  {item.recommendation}
                </span>
              </TableCell>
              <TableCell className="min-w-64">
                <div className="flex flex-wrap gap-1">
                  {item.reasons.slice(0, 5).map((reason) => (
                    <Badge key={reason} variant="muted" className="h-5">
                      {formatSimilarityReason(reason)}
                    </Badge>
                  ))}
                </div>
              </TableCell>
              <TableCell className="text-right">
                <Button
                  variant="outline"
                  className="h-8 w-8 p-0"
                  onClick={() => onSelectNeighborhood(item.neighborhood_id)}
                  aria-label={`查看${item.name}`}
                  title="查看小区详情"
                >
                  <MapPinned className="h-4 w-4" />
                </Button>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function ComparisonWorkspace({
  areaScores,
  neighborhoodScores,
  areaComparison,
  neighborhoodComparison,
  selectedAreaIds,
  selectedNeighborhoodIds,
  loading,
  onAreaIdsChange,
  onNeighborhoodIdsChange,
}: {
  areaScores: AreaScore[];
  neighborhoodScores: NeighborhoodScore[];
  areaComparison: AreaComparison | null;
  neighborhoodComparison: NeighborhoodComparison | null;
  selectedAreaIds: string[];
  selectedNeighborhoodIds: string[];
  loading: boolean;
  onAreaIdsChange: (ids: string[]) => void;
  onNeighborhoodIdsChange: (ids: string[]) => void;
}) {
  return (
    <Card>
      <CardHeader className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
        <div>
          <CardTitle>对比工作台</CardTitle>
          <p className="mt-1 text-sm text-[var(--muted-foreground)]">
            板块与小区并排比较
          </p>
        </div>
        <div className="grid w-full gap-3 xl:w-[640px] xl:grid-cols-2">
          <ComparisonSelector
            label="板块"
            options={areaScores.map((score) => ({
              id: score.area_id,
              label: score.name,
              detail: score.district,
            }))}
            selectedIds={selectedAreaIds}
            onChange={onAreaIdsChange}
          />
          <ComparisonSelector
            label="小区"
            options={neighborhoodScores.map((score) => ({
              id: score.neighborhood_id,
              label: score.name,
              detail: score.area_name,
            }))}
            selectedIds={selectedNeighborhoodIds}
            onChange={onNeighborhoodIdsChange}
          />
        </div>
      </CardHeader>
      <CardContent className="grid gap-4">
        {loading ? <div className="h-72 rounded-md bg-[var(--muted)]" /> : null}
        {!loading ? (
          <div className="grid gap-4 xl:grid-cols-[minmax(0,1fr)_360px]">
            <ComparisonMatrix
              title="板块矩阵"
              comparison={areaComparison}
              getId={(item) => item.area_id}
              getName={(item) => item.name}
              getMeta={(item) => `${item.district} · ${item.segment}`}
            />
            <ComparisonRadar
              title="板块雷达"
              metrics={areaComparison?.metrics ?? []}
              items={areaComparison?.items ?? []}
              getId={(item) => item.area_id}
              getName={(item) => item.name}
            />
            <ComparisonMatrix
              title="小区矩阵"
              comparison={neighborhoodComparison}
              getId={(item) => item.neighborhood_id}
              getName={(item) => item.name}
              getMeta={(item) =>
                `${item.area_name} · ${item.built_year ?? "-"} · ${item.property_type}`
              }
            />
            <ComparisonRadar
              title="小区雷达"
              metrics={neighborhoodComparison?.metrics ?? []}
              items={neighborhoodComparison?.items ?? []}
              getId={(item) => item.neighborhood_id}
              getName={(item) => item.name}
            />
          </div>
        ) : null}
      </CardContent>
    </Card>
  );
}

function ComparisonSelector({
  label,
  options,
  selectedIds,
  onChange,
}: {
  label: string;
  options: Array<{ id: string; label: string; detail: string }>;
  selectedIds: string[];
  onChange: (ids: string[]) => void;
}) {
  function toggle(id: string) {
    if (selectedIds.includes(id)) {
      if (selectedIds.length > 2) {
        onChange(selectedIds.filter((selectedId) => selectedId !== id));
      }
      return;
    }
    if (selectedIds.length < 4) {
      onChange([...selectedIds, id]);
    }
  }

  return (
    <div className="rounded-md border border-[var(--border)] p-3">
      <div className="mb-2 flex items-center justify-between">
        <p className="text-sm font-semibold text-slate-950">{label}</p>
        <Badge variant="muted">{selectedIds.length}/4</Badge>
      </div>
      <div className="grid max-h-44 gap-2 overflow-y-auto pr-1">
        {options.map((option) => {
          const selected = selectedIds.includes(option.id);
          const locked = selected && selectedIds.length <= 2;
          return (
            <label
              key={option.id}
              className={
                selected
                  ? "flex cursor-pointer items-center gap-2 rounded-md border border-teal-200 bg-teal-50 px-2 py-2"
                  : "flex cursor-pointer items-center gap-2 rounded-md border border-[var(--border)] px-2 py-2 hover:bg-slate-50"
              }
            >
              <input
                type="checkbox"
                checked={selected}
                disabled={locked}
                onChange={() => toggle(option.id)}
              />
              <span className="min-w-0">
                <span className="block truncate text-sm font-medium text-slate-950">
                  {option.label}
                </span>
                <span className="block truncate text-xs text-[var(--muted-foreground)]">
                  {option.detail}
                </span>
              </span>
            </label>
          );
        })}
      </div>
    </div>
  );
}

function ComparisonMatrix<T>({
  title,
  comparison,
  getId,
  getName,
  getMeta,
}: {
  title: string;
  comparison: { items: T[]; metrics: ComparisonMetric[]; missing_ids: string[] } | null;
  getId: (item: T) => string;
  getName: (item: T) => string;
  getMeta: (item: T) => string;
}) {
  if (!comparison || comparison.items.length === 0) {
    return (
      <div className="rounded-md border border-[var(--border)] px-4 py-8 text-sm text-[var(--muted-foreground)]">
        暂无对比数据
      </div>
    );
  }

  const nameById = new Map(comparison.items.map((item) => [getId(item), getName(item)]));
  const metaById = new Map(comparison.items.map((item) => [getId(item), getMeta(item)]));

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>{title}</TableHead>
            {comparison.items.map((item) => (
              <TableHead key={getId(item)} className="min-w-36 text-right">
                <span className="block text-slate-950">{getName(item)}</span>
                <span className="block font-normal text-[var(--muted-foreground)]">
                  {metaById.get(getId(item))}
                </span>
              </TableHead>
            ))}
          </TableRow>
        </TableHeader>
        <TableBody>
          {comparison.metrics.map((metric) => (
            <TableRow key={metric.key}>
              <TableCell className="font-medium">
                {metric.label}
                <span className="ml-1 text-xs font-normal text-[var(--muted-foreground)]">
                  {metric.unit}
                </span>
              </TableCell>
              {comparison.items.map((item) => {
                const id = getId(item);
                const value = metric.values.find((metricValue) => metricValue.id === id)?.value;
                return (
                  <TableCell key={`${metric.key}-${id}`} className="text-right">
                    {formatMetricValue(value, metric.unit)}
                  </TableCell>
                );
              })}
            </TableRow>
          ))}
          {comparison.missing_ids.length > 0 ? (
            <TableRow>
              <TableCell className="text-[var(--muted-foreground)]">缺失</TableCell>
              <TableCell
                colSpan={comparison.items.length}
                className="text-right text-[var(--muted-foreground)]"
              >
                {comparison.missing_ids.map((id) => nameById.get(id) ?? id).join(", ")}
              </TableCell>
            </TableRow>
          ) : null}
        </TableBody>
      </Table>
    </div>
  );
}

function ComparisonRadar<T>({
  title,
  metrics,
  items,
  getId,
  getName,
}: {
  title: string;
  metrics: ComparisonMetric[];
  items: T[];
  getId: (item: T) => string;
  getName: (item: T) => string;
}) {
  const radarMetrics = metrics.filter(
    (metric) =>
      metric.unit === "分" ||
      metric.key === "annual_rent_yield_pct" ||
      metric.key === "transaction_count",
  );
  const data = radarMetrics.map((metric) => {
    const row: Record<string, string | number> = { metric: metric.label };
    for (const item of items) {
      const id = getId(item);
      const value = metric.values.find((metricValue) => metricValue.id === id)?.value ?? 0;
      row[id] = metric.direction === "lower" ? 100 - value : value;
    }
    return row;
  });
  const colors = ["#0f766e", "#2563eb", "#b45309", "#be123c"];

  if (data.length === 0 || items.length === 0) {
    return (
      <div className="rounded-md border border-[var(--border)] px-4 py-8 text-sm text-[var(--muted-foreground)]">
        暂无雷达图
      </div>
    );
  }

  return (
    <div className="h-80 rounded-md border border-[var(--border)] p-3">
      <p className="mb-2 text-sm font-semibold text-slate-950">{title}</p>
      <ResponsiveContainer width="100%" height="90%">
        <RadarChart data={data}>
          <PolarGrid stroke="#dbe1ea" />
          <PolarAngleAxis dataKey="metric" tick={{ fontSize: 12 }} />
          <PolarRadiusAxis angle={90} domain={[0, 100]} tick={false} axisLine={false} />
          <Tooltip formatter={(value) => [formatNumber(Number(value)), "标准化"]} />
          {items.map((item, index) => (
            <Radar
              key={getId(item)}
              name={getName(item)}
              dataKey={getId(item)}
              stroke={colors[index % colors.length]}
              fill={colors[index % colors.length]}
              fillOpacity={0.14}
            />
          ))}
        </RadarChart>
      </ResponsiveContainer>
    </div>
  );
}

function formatMetricValue(value: number | null | undefined, unit: string) {
  if (value === null || value === undefined) {
    return "-";
  }
  if (unit === "元/㎡" || unit === "米") {
    return formatPrice(value);
  }
  if (unit === "%") {
    return `${formatNumber(value, 2)}%`;
  }
  if (unit === "套") {
    return formatNumber(value, 0);
  }
  return formatNumber(value);
}

function formatSignedNumber(value: number) {
  const sign = value > 0 ? "+" : "";
  return `${sign}${formatNumber(value)}`;
}

function formatRelativePrice(value: number) {
  if (value === 0) {
    return "持平";
  }
  const label = value > 0 ? "溢价" : "折价";
  return `${label} ${formatSignedNumber(value)}%`;
}

function relativePriceVariant(value: number): "success" | "warning" | "muted" {
  if (value <= -3) {
    return "success";
  }
  if (value >= 3) {
    return "warning";
  }
  return "muted";
}

function formatSimilarityReason(reason: string) {
  if (reason === "property_type_match") {
    return "物业类型一致";
  }
  if (reason === "same_area") {
    return "同板块";
  }
  if (reason === "same_district") {
    return "同行政区";
  }
  const [key, rawValue] = reason.split(":");
  if (key === "price_gap_pct" && rawValue) {
    return `价差 ${rawValue}%`;
  }
  if (key === "building_age_gap_years" && rawValue) {
    return `楼龄差 ${rawValue}年`;
  }
  if (key === "metro_gap_m" && rawValue) {
    return `地铁差 ${rawValue}米`;
  }
  return reason;
}

function WatchlistPanel({
  scores,
  neighborhoodScores,
  items,
  events,
  loading,
  creating,
  archivingId,
  updatingId,
  creatingEvent,
  statusFilter,
  areaFilter,
  labelFilter,
  expandedItemId,
  onStatusFilterChange,
  onAreaFilterChange,
  onLabelFilterChange,
  onToggleEvents,
  onCreate,
  onUpdate,
  onCreateEvent,
  onArchive,
}: {
  scores: AreaScore[];
  neighborhoodScores: NeighborhoodScore[];
  items: WatchlistItem[];
  events: WatchlistEvent[];
  loading: boolean;
  creating: boolean;
  archivingId: number | null;
  updatingId: number | null;
  creatingEvent: boolean;
  statusFilter: string;
  areaFilter: string;
  labelFilter: string;
  expandedItemId: number | null;
  onStatusFilterChange: (value: string) => void;
  onAreaFilterChange: (value: string) => void;
  onLabelFilterChange: (value: string) => void;
  onToggleEvents: (id: number) => void;
  onCreate: (payload: CreateWatchlistItem) => void;
  onUpdate: (id: number, payload: UpdateWatchlistItem) => void;
  onCreateEvent: (id: number, payload: CreateWatchlistEvent) => void;
  onArchive: (id: number) => void;
}) {
  const [targetType, setTargetType] = useState<"area" | "neighborhood">("area");
  const [areaId, setAreaId] = useState("");
  const [neighborhoodId, setNeighborhoodId] = useState("");
  const [targetPrice, setTargetPrice] = useState("");
  const [triggerPrice, setTriggerPrice] = useState("");
  const [triggerOperator, setTriggerOperator] = useState<"lte" | "gte">("lte");
  const [label, setLabel] = useState("核心");
  const [priority, setPriority] = useState<"low" | "medium" | "high">("medium");
  const [notes, setNotes] = useState("");

  const areaNameById = useMemo(() => {
    return new Map(scores.map((score) => [score.area_id, score.name]));
  }, [scores]);
  const neighborhoodNameById = useMemo(() => {
    return new Map(
      neighborhoodScores.map((score) => [
        score.neighborhood_id,
        `${score.name}（${score.area_name}）`,
      ]),
    );
  }, [neighborhoodScores]);

  function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    if (targetType === "area" && !areaId) {
      return;
    }
    if (targetType === "neighborhood" && !neighborhoodId) {
      return;
    }
    const parsedTarget = Number(targetPrice);
    const parsedTrigger = Number(triggerPrice);
    onCreate({
      area_id: targetType === "area" ? areaId : undefined,
      neighborhood_id: targetType === "neighborhood" ? neighborhoodId : undefined,
      target_price_psm: Number.isFinite(parsedTarget) && parsedTarget > 0 ? parsedTarget : undefined,
      trigger_price_psm:
        Number.isFinite(parsedTrigger) && parsedTrigger > 0 ? parsedTrigger : undefined,
      trigger_operator: triggerOperator,
      label: label.trim() || undefined,
      priority,
      notes: notes.trim() || undefined,
    });
    setAreaId("");
    setNeighborhoodId("");
    setTargetPrice("");
    setTriggerPrice("");
    setNotes("");
  }

  return (
    <Card>
      <CardHeader className="flex flex-col gap-3">
        <div className="flex flex-col gap-3 xl:flex-row xl:items-center xl:justify-between">
          <CardTitle>观察池</CardTitle>
          <div className="grid gap-2 sm:grid-cols-3 xl:w-[620px]">
            <select
              className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              value={statusFilter}
              onChange={(event) => onStatusFilterChange(event.target.value)}
              aria-label="观察池状态筛选"
            >
              <option value="active">active</option>
              <option value="paused">paused</option>
              <option value="archived">archived</option>
            </select>
            <select
              className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              value={areaFilter}
              onChange={(event) => onAreaFilterChange(event.target.value)}
              aria-label="观察池板块筛选"
            >
              <option value="">全部板块</option>
              {scores.map((score) => (
                <option key={score.area_id} value={score.area_id}>
                  {score.name}
                </option>
              ))}
            </select>
            <input
              className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
              placeholder="标签"
              value={labelFilter}
              onChange={(event) => onLabelFilterChange(event.target.value)}
            />
          </div>
        </div>
        <form className="grid gap-2 lg:grid-cols-[100px_1fr_1fr_120px_120px_90px_90px_100px_1fr_44px]" onSubmit={submit}>
          <select
            className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
            value={targetType}
            onChange={(event) => setTargetType(event.target.value as "area" | "neighborhood")}
            aria-label="观察标的类型"
          >
            <option value="area">板块</option>
            <option value="neighborhood">小区</option>
          </select>
          <select
            className="h-9 min-w-36 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
            value={areaId}
            onChange={(event) => setAreaId(event.target.value)}
            aria-label="板块"
            disabled={targetType !== "area"}
          >
            <option value="">板块</option>
            {scores.map((score) => (
              <option key={score.area_id} value={score.area_id}>
                {score.name}
              </option>
            ))}
          </select>
          <select
            className="h-9 min-w-36 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
            value={neighborhoodId}
            onChange={(event) => setNeighborhoodId(event.target.value)}
            aria-label="小区"
            disabled={targetType !== "neighborhood"}
          >
            <option value="">小区</option>
            {neighborhoodScores.map((score) => (
              <option key={score.neighborhood_id} value={score.neighborhood_id}>
                {score.name}
              </option>
            ))}
          </select>
          <input
            className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
            inputMode="numeric"
            placeholder="目标价/㎡"
            value={targetPrice}
            onChange={(event) => setTargetPrice(event.target.value)}
          />
          <input
            className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
            inputMode="numeric"
            placeholder="触发价/㎡"
            value={triggerPrice}
            onChange={(event) => setTriggerPrice(event.target.value)}
          />
          <select
            className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
            value={triggerOperator}
            onChange={(event) => setTriggerOperator(event.target.value as "lte" | "gte")}
            aria-label="触发条件"
          >
            <option value="lte">低于</option>
            <option value="gte">高于</option>
          </select>
          <select
            className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
            value={priority}
            onChange={(event) => setPriority(event.target.value as "low" | "medium" | "high")}
            aria-label="优先级"
          >
            <option value="high">high</option>
            <option value="medium">medium</option>
            <option value="low">low</option>
          </select>
          <input
            className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
            placeholder="标签"
            value={label}
            onChange={(event) => setLabel(event.target.value)}
          />
          <input
            className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
            placeholder="备注"
            value={notes}
            onChange={(event) => setNotes(event.target.value)}
          />
          <Button
            disabled={
              creating ||
              (targetType === "area" && !areaId) ||
              (targetType === "neighborhood" && !neighborhoodId)
            }
            aria-label="加入观察池"
            title="加入观察池"
          >
            <Plus className="h-4 w-4" />
          </Button>
        </form>
      </CardHeader>
      <CardContent className="overflow-x-auto p-0">
        <WatchlistTable
          items={items}
          areaNameById={areaNameById}
          neighborhoodNameById={neighborhoodNameById}
          loading={loading}
          archivingId={archivingId}
          updatingId={updatingId}
          expandedItemId={expandedItemId}
          events={events}
          creatingEvent={creatingEvent}
          onUpdate={onUpdate}
          onCreateEvent={onCreateEvent}
          onArchive={onArchive}
          onToggleEvents={onToggleEvents}
        />
      </CardContent>
    </Card>
  );
}

function WatchlistTable({
  items,
  areaNameById,
  neighborhoodNameById,
  loading,
  archivingId,
  updatingId,
  expandedItemId,
  events,
  creatingEvent,
  onUpdate,
  onCreateEvent,
  onArchive,
  onToggleEvents,
}: {
  items: WatchlistItem[];
  areaNameById: Map<string, string>;
  neighborhoodNameById: Map<string, string>;
  loading: boolean;
  archivingId: number | null;
  updatingId: number | null;
  expandedItemId: number | null;
  events: WatchlistEvent[];
  creatingEvent: boolean;
  onUpdate: (id: number, payload: UpdateWatchlistItem) => void;
  onCreateEvent: (id: number, payload: CreateWatchlistEvent) => void;
  onArchive: (id: number) => void;
  onToggleEvents: (id: number) => void;
}) {
  const [eventSummary, setEventSummary] = useState("");

  if (loading) {
    return <div className="h-32 bg-[var(--muted)]" />;
  }

  if (items.length === 0) {
    return <div className="px-4 py-8 text-sm text-[var(--muted-foreground)]">暂无观察标的</div>;
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>标的</TableHead>
          <TableHead className="text-right">目标价/㎡</TableHead>
          <TableHead className="text-right">触发价/㎡</TableHead>
          <TableHead>标签</TableHead>
          <TableHead>优先级</TableHead>
          <TableHead>状态</TableHead>
          <TableHead>复核</TableHead>
          <TableHead>备注</TableHead>
          <TableHead className="w-44" />
        </TableRow>
      </TableHeader>
      <TableBody>
        {items.map((item) => {
          const targetName = item.neighborhood_id
            ? neighborhoodNameById.get(item.neighborhood_id) ?? item.neighborhood_id
            : item.area_id
              ? areaNameById.get(item.area_id) ?? item.area_id
              : "-";
          const expanded = expandedItemId === item.watchlist_item_id;
          return (
            <Fragment key={item.watchlist_item_id}>
              <TableRow>
                <TableCell className="font-medium">{targetName}</TableCell>
                <TableCell className="text-right">
                  {item.target_price_psm ? formatPrice(item.target_price_psm) : "-"}
                </TableCell>
                <TableCell className="text-right">
                  {item.trigger_price_psm
                    ? `${item.trigger_operator === "lte" ? "≤" : "≥"} ${formatPrice(item.trigger_price_psm)}`
                    : "-"}
                </TableCell>
                <TableCell>
                  <Badge variant="muted">{item.label}</Badge>
                </TableCell>
                <TableCell>
                  <Badge variant={item.priority === "high" ? "warning" : "muted"}>
                    {item.priority}
                  </Badge>
                </TableCell>
                <TableCell>
                  <select
                    className="h-8 rounded-md border border-[var(--border)] bg-white px-2 text-sm"
                    value={item.status}
                    disabled={updatingId === item.watchlist_item_id}
                    onChange={(event) =>
                      onUpdate(item.watchlist_item_id, {
                        status: event.target.value as "active" | "paused" | "archived",
                      })
                    }
                    aria-label="观察池状态"
                  >
                    <option value="active">active</option>
                    <option value="paused">paused</option>
                    <option value="archived">archived</option>
                  </select>
                </TableCell>
                <TableCell className="text-[var(--muted-foreground)]">
                  {item.last_reviewed_at ? item.last_reviewed_at.slice(0, 10) : "-"}
                </TableCell>
                <TableCell className="max-w-80 truncate text-[var(--muted-foreground)]">
                  {item.notes || "-"}
                </TableCell>
                <TableCell className="text-right">
                  <div className="flex justify-end gap-2">
                    <Button
                      variant="outline"
                      disabled={updatingId === item.watchlist_item_id}
                      onClick={() =>
                        onUpdate(item.watchlist_item_id, {
                          mark_reviewed: true,
                        })
                      }
                      aria-label="复核"
                      title="复核"
                    >
                      <Check className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="outline"
                      onClick={() => onToggleEvents(item.watchlist_item_id)}
                      aria-label="历史"
                      title="历史"
                    >
                      <Activity className="h-4 w-4" />
                    </Button>
                    <Button
                      variant="outline"
                      disabled={archivingId === item.watchlist_item_id}
                      onClick={() => onArchive(item.watchlist_item_id)}
                      aria-label="归档"
                      title="归档"
                    >
                      <Archive className="h-4 w-4" />
                    </Button>
                  </div>
                </TableCell>
              </TableRow>
              {expanded ? (
                <TableRow>
                  <TableCell colSpan={9} className="bg-slate-50">
                    <div className="grid gap-3 lg:grid-cols-[minmax(0,1fr)_360px]">
                      <div className="grid gap-2">
                        {events.length === 0 ? (
                          <p className="text-sm text-[var(--muted-foreground)]">暂无历史</p>
                        ) : (
                          events.map((event) => (
                            <div
                              key={event.event_id}
                              className="rounded-md border border-[var(--border)] bg-white px-3 py-2"
                            >
                              <div className="flex items-center justify-between gap-3">
                                <Badge variant="muted">{event.event_type}</Badge>
                                <span className="text-xs text-[var(--muted-foreground)]">
                                  {event.created_at.slice(0, 16)}
                                </span>
                              </div>
                              <p className="mt-2 text-sm text-slate-950">{event.summary}</p>
                            </div>
                          ))
                        )}
                      </div>
                      <form
                        className="flex gap-2"
                        onSubmit={(event) => {
                          event.preventDefault();
                          if (!eventSummary.trim()) {
                            return;
                          }
                          onCreateEvent(item.watchlist_item_id, {
                            event_type: "note",
                            summary: eventSummary.trim(),
                          });
                          setEventSummary("");
                        }}
                      >
                        <input
                          className="h-9 min-w-0 flex-1 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
                          placeholder="新增历史备注"
                          value={eventSummary}
                          onChange={(event) => setEventSummary(event.target.value)}
                        />
                        <Button
                          disabled={creatingEvent || !eventSummary.trim()}
                          aria-label="新增历史"
                          title="新增历史"
                        >
                          <Plus className="h-4 w-4" />
                        </Button>
                      </form>
                    </div>
                  </TableCell>
                </TableRow>
              ) : null}
            </Fragment>
          );
        })}
      </TableBody>
    </Table>
  );
}

function ModelRunPanel({
  runs,
  diff,
  baseRunId,
  candidateRunId,
  loading,
  creating,
  onBaseRunChange,
  onCandidateRunChange,
  onCreateRun,
}: {
  runs: ModelRun[];
  diff: AreaScoreRunDiff | null;
  baseRunId: number | null;
  candidateRunId: number | null;
  loading: boolean;
  creating: boolean;
  onBaseRunChange: (id: number | null) => void;
  onCandidateRunChange: (id: number | null) => void;
  onCreateRun: (payload: CreateAreaScoreModelRun) => void;
}) {
  const [modelVersion, setModelVersion] = useState("area-score-rust-v1");

  function submit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    onCreateRun({
      month: MONTH,
      model_version: modelVersion.trim() || undefined,
    });
  }

  return (
    <Card>
      <CardHeader className="flex flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
        <div>
          <CardTitle>模型运行中心</CardTitle>
          <p className="mt-1 text-sm text-[var(--muted-foreground)]">
            板块评分批次与版本差异
          </p>
        </div>
        <form className="flex flex-col gap-2 sm:flex-row" onSubmit={submit}>
          <input
            className="h-9 w-full rounded-md border border-[var(--border)] bg-white px-3 text-sm sm:w-56"
            placeholder="模型版本"
            value={modelVersion}
            onChange={(event) => setModelVersion(event.target.value)}
          />
          <Button disabled={creating} aria-label="重算板块评分" title="重算板块评分">
            <RefreshCw className="h-4 w-4" />
          </Button>
        </form>
      </CardHeader>
      <CardContent className="grid gap-4 xl:grid-cols-[420px_minmax(0,1fr)]">
        <ModelRunTable runs={runs} loading={loading} />
        <div className="grid gap-3">
          <div className="grid gap-2 sm:grid-cols-2">
            <ModelRunSelect
              label="基准批次"
              runs={runs}
              value={baseRunId}
              onChange={onBaseRunChange}
            />
            <ModelRunSelect
              label="候选批次"
              runs={runs}
              value={candidateRunId}
              onChange={onCandidateRunChange}
            />
          </div>
          <AreaScoreRunDiffTable diff={diff} loading={loading} />
        </div>
      </CardContent>
    </Card>
  );
}

function ModelRunTable({ runs, loading }: { runs: ModelRun[]; loading: boolean }) {
  if (loading) {
    return <div className="h-56 rounded-md bg-[var(--muted)]" />;
  }

  if (runs.length === 0) {
    return (
      <div className="rounded-md border border-[var(--border)] px-4 py-8 text-sm text-[var(--muted-foreground)]">
        暂无模型运行
      </div>
    );
  }

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>批次</TableHead>
            <TableHead>版本</TableHead>
            <TableHead>月份</TableHead>
            <TableHead>状态</TableHead>
            <TableHead className="text-right">行数</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {runs.slice(0, 8).map((run) => (
            <TableRow key={run.model_run_id}>
              <TableCell className="font-medium">#{run.model_run_id}</TableCell>
              <TableCell className="max-w-40 truncate">{run.model_version}</TableCell>
              <TableCell>{run.target_month}</TableCell>
              <TableCell>
                <Badge variant={run.status === "succeeded" ? "success" : "warning"}>
                  {run.status}
                </Badge>
              </TableCell>
              <TableCell className="text-right">{run.row_count ?? "-"}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function ModelRunSelect({
  label,
  runs,
  value,
  onChange,
}: {
  label: string;
  runs: ModelRun[];
  value: number | null;
  onChange: (id: number | null) => void;
}) {
  return (
    <label className="grid gap-1">
      <span className="text-sm font-medium text-slate-950">{label}</span>
      <select
        className="h-9 rounded-md border border-[var(--border)] bg-white px-3 text-sm"
        value={value ?? ""}
        onChange={(event) => onChange(event.target.value ? Number(event.target.value) : null)}
      >
        <option value="">选择批次</option>
        {runs.map((run) => (
          <option key={run.model_run_id} value={run.model_run_id}>
            #{run.model_run_id} · {run.model_version} · {run.target_month}
          </option>
        ))}
      </select>
    </label>
  );
}

function AreaScoreRunDiffTable({
  diff,
  loading,
}: {
  diff: AreaScoreRunDiff | null;
  loading: boolean;
}) {
  if (loading) {
    return <div className="h-56 rounded-md bg-[var(--muted)]" />;
  }

  if (!diff || diff.items.length === 0) {
    return (
      <div className="rounded-md border border-[var(--border)] px-4 py-8 text-sm text-[var(--muted-foreground)]">
        暂无评分差异
      </div>
    );
  }

  return (
    <div className="overflow-x-auto rounded-md border border-[var(--border)]">
      <Table>
        <TableHeader>
          <TableRow>
            <TableHead>板块</TableHead>
            <TableHead>行政区</TableHead>
            <TableHead className="text-right">基准</TableHead>
            <TableHead className="text-right">候选</TableHead>
            <TableHead className="text-right">差异</TableHead>
            <TableHead>建议变化</TableHead>
          </TableRow>
        </TableHeader>
        <TableBody>
          {diff.items.map((item) => (
            <TableRow key={item.area_id}>
              <TableCell className="font-medium">{item.name}</TableCell>
              <TableCell>{item.district}</TableCell>
              <TableCell className="text-right">
                {item.base_score === null ? "-" : formatNumber(item.base_score)}
              </TableCell>
              <TableCell className="text-right">
                {item.candidate_score === null ? "-" : formatNumber(item.candidate_score)}
              </TableCell>
              <TableCell className="text-right font-semibold">
                {item.score_delta === null ? "-" : formatSignedNumber(item.score_delta)}
              </TableCell>
              <TableCell>
                {item.base_recommendation === item.candidate_recommendation ? (
                  <Badge variant="muted">{item.candidate_recommendation ?? "-"}</Badge>
                ) : (
                  <Badge variant="warning">
                    {item.base_recommendation ?? "-"} → {item.candidate_recommendation ?? "-"}
                  </Badge>
                )}
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </div>
  );
}

function MetricCard({
  title,
  value,
  textValue,
  suffix,
  icon,
  loading,
  tone = "default",
}: {
  title: string;
  value?: number;
  textValue?: string;
  suffix?: string;
  icon: React.ReactNode;
  loading: boolean;
  tone?: "default" | "warning";
}) {
  return (
    <Card>
      <CardContent className="flex min-h-28 items-center justify-between gap-3">
        <div className="min-w-0">
          <p className="text-sm text-[var(--muted-foreground)]">{title}</p>
          <p className="mt-2 truncate text-2xl font-semibold text-slate-950">
            {loading ? "-" : textValue ?? `${formatNumber(value ?? 0)}${suffix ?? ""}`}
          </p>
        </div>
        <div
          className={
            tone === "warning"
              ? "flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-amber-50 text-[var(--warning)]"
              : "flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-teal-50 text-[var(--primary)]"
          }
        >
          {icon}
        </div>
      </CardContent>
    </Card>
  );
}

function ScoreChart({ scores, loading }: { scores: AreaScore[]; loading: boolean }) {
  if (loading) {
    return <div className="h-full rounded-md bg-[var(--muted)]" />;
  }

  return (
    <ResponsiveContainer width="100%" height="100%">
      <BarChart data={scores} margin={{ top: 8, right: 12, left: 0, bottom: 4 }}>
        <CartesianGrid stroke="#e2e8f0" vertical={false} />
        <XAxis dataKey="name" tickLine={false} axisLine={false} tick={{ fontSize: 12 }} />
        <YAxis domain={[0, 100]} tickLine={false} axisLine={false} tick={{ fontSize: 12 }} />
        <Tooltip
          cursor={{ fill: "#eef2f7" }}
          formatter={(value) => [`${formatNumber(Number(value))} 分`, "综合分"]}
          labelStyle={{ color: "#172033" }}
        />
        <Bar dataKey="investment_score" fill="#0f766e" radius={[4, 4, 0, 0]} />
      </BarChart>
    </ResponsiveContainer>
  );
}

function InsightRow({ label, value, detail }: { label: string; value: string; detail: string }) {
  return (
    <div className="flex items-center justify-between gap-3 border-b border-[var(--border)] pb-3 last:border-0 last:pb-0">
      <div className="min-w-0">
        <p className="text-sm text-[var(--muted-foreground)]">{label}</p>
        <p className="mt-1 truncate text-base font-semibold text-slate-950">{value}</p>
      </div>
      <Badge variant="muted">{detail}</Badge>
    </div>
  );
}

function AreaScoreTable({
  scores,
  loading,
  selectedAreaId,
  onSelectArea,
}: {
  scores: AreaScore[];
  loading: boolean;
  selectedAreaId: string;
  onSelectArea: (areaId: string) => void;
}) {
  if (loading) {
    return <div className="h-48 bg-[var(--muted)]" />;
  }

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHead>板块</TableHead>
          <TableHead>行政区</TableHead>
          <TableHead className="text-right">综合分</TableHead>
          <TableHead>建议</TableHead>
          <TableHead className="text-right">成交均价/㎡</TableHead>
          <TableHead className="text-right">成交套数</TableHead>
          <TableHead className="text-right">租金收益率</TableHead>
          <TableHead className="text-right">供应风险</TableHead>
        </TableRow>
      </TableHeader>
      <TableBody>
        {scores.map((score) => (
          <TableRow
            key={score.area_id}
            className={
              selectedAreaId === score.area_id
                ? "cursor-pointer bg-teal-50/60"
                : "cursor-pointer hover:bg-slate-50"
            }
            onClick={() => onSelectArea(score.area_id)}
          >
            <TableCell className="font-medium">{score.name}</TableCell>
            <TableCell>{score.district}</TableCell>
            <TableCell className="text-right font-semibold">
              {formatNumber(score.investment_score)}
            </TableCell>
            <TableCell>
              <Badge variant={score.recommendation === "观察池" ? "success" : "muted"}>
                {score.recommendation}
              </Badge>
            </TableCell>
            <TableCell className="text-right">{formatPrice(score.transaction_price_psm)}</TableCell>
            <TableCell className="text-right">{score.transaction_count}</TableCell>
            <TableCell className="text-right">
              {formatNumber(score.annual_rent_yield_pct, 2)}%
            </TableCell>
            <TableCell className="text-right">{formatNumber(score.supply_risk_score)}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

function ErrorState() {
  return (
    <div className="rounded-lg border border-rose-200 bg-rose-50 px-4 py-3 text-sm text-rose-800">
      API 暂时不可用
    </div>
  );
}