import { createFileRoute } from "@tanstack/react-router";
import { useState, useEffect, useMemo, Fragment } from "react";
import { collectionsApi } from "@/lib/api-client";
import { fetchStockQuote, fetchStockHistory, fetchStockFundFlow, fetchCompanyProfile, fetchBusinessSegments, fetchFinancialData, getStockBoard, type StockQuote, type KLineData, type FundFlowData, type FundFlowSummary, type CompanyProfile, type BusinessSegmentsResponse, type FinancialDataResponse } from "@/lib/stock-api";
import StockProfileTabs from "@/components/stock-profile-tabs";
import { getUserId } from "@/lib/user-id";
import { formatMoney } from "@/lib/utils";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { ArrowLeft, TrendingUp, TrendingDown, Calendar, ExternalLink, Newspaper } from "lucide-react";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { Link } from "@tanstack/react-router";
import {
  ComposedChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
  Bar,
  Cell,
  Scatter,
  Brush,
  ReferenceLine,
  PieChart,
  Pie,
  Legend,
} from "recharts";

export const Route = createFileRoute("/stock/$code")({
  component: StockDetail,
  validateSearch: (search: Record<string, unknown>) => {
    return {
      from: typeof search.from === "string" ? search.from : undefined,
    };
  },
});

interface StockData {
  date: string;
  dateObj: Date;
  open: number;
  close: number;
  high: number;
  low: number;
  volume: number;
  isAddedDate: boolean;
}

interface StockInfo {
  code: string;
  name: string;
  currentPrice: number;
  changePercent: number;
  change: number;
  high: number;
  low: number;
  todayOpen: number;
  yesterdayClose: number;
  addedAt: string;
  addedPrice: number | null;
  outerDisk: number; // 外盘（手）
  innerDisk: number; // 内盘（手）
  amount: number; // 成交额（元）
  quoteDate: string; // 行情日期 YYYY-MM-DD
}

function StockDetail() {
  const { code } = Route.useParams();
  const { from } = Route.useSearch();
  const userId = getUserId();
  const [stockInfo, setStockInfo] = useState<StockInfo | null>(null);
  const [chartData, setChartData] = useState<StockData[]>([]);
  const [chartLoading, setChartLoading] = useState(false);
  const [fundFlowData, setFundFlowData] = useState<FundFlowData[]>([]);
  const [fundFlowSummary, setFundFlowSummary] = useState<FundFlowSummary | null>(null);
  const [fundFlowLoading, setFundFlowLoading] = useState(false);
  const [fundFlowPeriod, setFundFlowPeriod] = useState(21);
  const [dailyTableDays, setDailyTableDays] = useState<number>(7);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [inCollection, setInCollection] = useState(false);

  // 公司介绍、经营分析、财务分析
  const [companyProfile, setCompanyProfile] = useState<CompanyProfile | null>(null);
  const [businessSegments, setBusinessSegments] = useState<BusinessSegmentsResponse | null>(null);
  const [financialData, setFinancialData] = useState<FinancialDataResponse | null>(null);
  const [profileTab, setProfileTab] = useState("profile");
  const [pieType, setPieType] = useState<"income" | "cost" | "profit">("income");

  useEffect(() => {
    loadStockData();
  }, [code]);

  // 加载公司概况、经营分析、财务分析（并行后置加载）
  useEffect(() => {
    if (!loading && stockInfo) {
      Promise.all([
        fetchCompanyProfile(code),
        fetchBusinessSegments(code, "product", 30),
        fetchFinancialData(code, 5),
      ]).then(([profile, segments, financial]) => {
        if (profile) setCompanyProfile(profile);
        if (segments) setBusinessSegments(segments);
        if (financial) setFinancialData(financial);
      });
    }
  }, [loading, stockInfo]);

  const loadStockData = async () => {
    setLoading(true);
    setError(null);
    setChartData([]);
    setChartLoading(false);
    setFundFlowData([]);
    setFundFlowSummary(null);
    setFundFlowLoading(false);
    try {
      // 阶段1：并行加载基础数据（数据库记录 + 实时行情）
      const [stockRecordResult, quoteResult] = await Promise.allSettled([
        collectionsApi.findStock(code),
        fetchStockQuote(code),
      ]);

      // 处理数据库查询结果
      const stockRecord = stockRecordResult.status === "fulfilled" ? stockRecordResult.value : null;
      setInCollection(stockRecord !== null);

      // 处理实时行情结果
      if (quoteResult.status !== "fulfilled" || !quoteResult.value) {
        setError("未找到股票数据");
        setLoading(false);
        return;
      }
      const quote = quoteResult.value;

      const addedAt = stockRecord?.added_at || new Date().toISOString();
      const addedPrice = stockRecord?.added_price || quote.currentPrice;

      setStockInfo({
        code: quote.code,
        name: quote.name,
        currentPrice: quote.currentPrice,
        changePercent: quote.changePercent,
        change: quote.change,
        high: quote.high,
        low: quote.low,
        todayOpen: quote.todayOpen,
        yesterdayClose: quote.yesterdayClose,
        addedAt,
        addedPrice,
        outerDisk: quote.outerDisk || 0,
        innerDisk: quote.innerDisk || 0,
        amount: (quote.amount || 0) * 10000,
        quoteDate: quote.date,
      });

      // 基础信息已就绪，结束主loading，先渲染页面框架
      setLoading(false);

      // 阶段2：并行加载历史K线 + 资金流向（后置加载，不阻塞首屏）
      const addedDate = new Date(addedAt);
      const now = new Date();
      const daysSinceAdded = Math.floor((now.getTime() - addedDate.getTime()) / (1000 * 60 * 60 * 24));
      const chartDays = Math.min(Math.max(90, daysSinceAdded), 120);

      setChartLoading(true);
      setFundFlowLoading(true);

      const [historyResult, fundFlowResult] = await Promise.allSettled([
        fetchStockHistory(code, chartDays),
        fetchStockFundFlow(code, quote.name, 21),
      ]);

      // 处理历史K线（必需）
      if (historyResult.status === "fulfilled" && historyResult.value && historyResult.value.length > 0) {
        const historyData = convertToStockData(historyResult.value, addedDate);
        // 如果添加日不是交易日（周末/节假日），标记最接近的K线日期
        if (stockRecord && !historyData.some(d => d.isAddedDate)) {
          const closestIdx = findClosestDateIndex(historyData, addedDate);
          if (historyData[closestIdx]) {
            historyData[closestIdx] = { ...historyData[closestIdx], isAddedDate: true };
          }
        }
        setChartData(historyData);
        if (historyResult.value.length < 2) {
          console.warn("历史K线数据过少（新股或上市首日），仅显示有限数据");
        }
      } else {
        console.error("无法获取历史K线数据");
        setError("获取历史K线数据失败，请稍后重试");
      }

      // 处理资金流向（非必需，失败不影响主流程）
      if (fundFlowResult.status === "fulfilled" && fundFlowResult.value) {
        console.log("[stock-detail] 资金流向数据:", fundFlowResult.value);
        setFundFlowData(fundFlowResult.value.data);
        setFundFlowSummary(fundFlowResult.value.summary || null);
      } else {
        console.error("获取资金流向数据失败:", fundFlowResult.status === "rejected" ? fundFlowResult.reason : "未知错误");
      }
    } catch (err) {
      console.error("加载失败:", err);
      const msg = err instanceof Error ? err.message : "加载股票数据失败";
      setError(msg);
    } finally {
      setLoading(false);
      setChartLoading(false);
      setFundFlowLoading(false);
    }
  };

  // 将K线数据转换为图表格式
  const convertToStockData = (klines: KLineData[], addedDate: Date): StockData[] => {
    return klines.map(kline => {
      const dateObj = new Date(kline.date);
      const isAddedDate = dateObj.toDateString() === addedDate.toDateString();

      return {
        date: dateObj.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" }),
        dateObj,
        open: kline.open,
        close: kline.close,
        high: kline.high,
        low: kline.low,
        volume: kline.volume,
        isAddedDate,
      };
    });
  };

  // 在K线数据中找到最接近目标日期的索引（当添加日非交易日时使用）
  const findClosestDateIndex = (data: StockData[], target: Date): number => {
    let closestIdx = 0;
    let closestDiff = Infinity;
    data.forEach((d, i) => {
      const diff = Math.abs(d.dateObj.getTime() - target.getTime());
      if (diff < closestDiff) {
        closestDiff = diff;
        closestIdx = i;
      }
    });
    return closestIdx;
  };

  // 资金流向按周期切片
  const fundFlowSlice = useMemo(
    () => fundFlowData.slice(-fundFlowPeriod),
    [fundFlowData, fundFlowPeriod]
  );
  const fundFlowLocalSummary = useMemo(() => {
    if (fundFlowSlice.length === 0) return null;
    const totalMain = fundFlowSlice.reduce((s, d) => s + d.mainForceNet, 0);
    const totalTurnover = fundFlowSlice.reduce((s, d) => s + d.turnover, 0);
    const totalLargeInflow = fundFlowSlice.reduce((s, d) => s + d.largeInflow, 0);
    const positive = fundFlowSlice.filter(d => d.mainForceNet > 0).length;
    const negative = fundFlowSlice.filter(d => d.mainForceNet < 0).length;
    return {
      totalMainNet: totalMain,
      totalTurnover,
      totalLargeInflow,
      avgDailyMainNet: totalMain / fundFlowSlice.length,
      positiveDays: positive,
      negativeDays: negative,
    };
  }, [fundFlowSlice]);
  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p className="text-muted-foreground">加载中...</p>
      </div>
    );
  }

  if (error) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <p className="text-xl font-semibold mb-2">加载失败</p>
          <p className="text-muted-foreground mb-4">{error}</p>
          <Link to="/">
            <Button variant="outline">
              <ArrowLeft className="mr-2 h-4 w-4" />
              返回首页
            </Button>
          </Link>
        </div>
      </div>
    );
  }

  if (!stockInfo) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <p className="text-muted-foreground">未找到股票信息</p>
      </div>
    );
  }

  const isPositive = stockInfo.changePercent >= 0;
  const trendColor = isPositive ? "text-red-500" : "text-green-500";

  // 计算自添加以来的累计涨跌幅
  const addedPrice = stockInfo.addedPrice;
  const cumulativeChange = addedPrice && addedPrice > 0
    ? ((stockInfo.currentPrice - addedPrice) / addedPrice) * 100
    : null;
  const cumulativeIsPositive = cumulativeChange !== null && cumulativeChange >= 0;

  // 找到添加日期在图表中的位置
  const addedDateObj = stockInfo ? new Date(stockInfo.addedAt) : null;
  const addedDateStr = addedDateObj ? addedDateObj.toLocaleDateString("zh-CN", { month: "2-digit", day: "2-digit" }) : "";
  const addedDataPoint = inCollection ? chartData.find(d => d.isAddedDate) : undefined;

  // 计算X轴刻度：保证添加日期始终有标签
  const tickDates = (() => {
    if (chartData.length === 0) return [];
    const first = chartData[0].date;
    const last = chartData[chartData.length - 1].date;
    const ticks = [first];
    const added = addedDataPoint?.date;
    const targetCount = Math.min(7, chartData.length);
    const step = Math.max(1, Math.floor((chartData.length - 1) / (targetCount - 2)));
    for (let i = step; i < chartData.length - 1; i += step) {
      ticks.push(chartData[i].date);
    }
    if (added && !ticks.includes(added)) {
      ticks.push(added);
    }
    ticks.push(last);
    return [...new Set(ticks)].sort((a, b) => {
      // 按日期排序（MM/DD格式需按MM和DD比较）
      const [am, ad] = a.split('/').map(Number);
      const [bm, bd] = b.split('/').map(Number);
      return am - bm || ad - bd;
    });
  })();

  // 东方财富市场标识：0=深圳(000/002/300), 1=上海(60), 6=科创板(688)
  const getEastMoneyMarket = (code: string): string => {
    if (code.startsWith('688')) return '6';
    if (code.startsWith('60')) return '1';
    return '0';
  };

  const eastMoneyUrl = `https://wap.eastmoney.com/quote/stock/${getEastMoneyMarket(stockInfo.code)}.${stockInfo.code}.html?appfenxiang=1`;
  const jin10Url = `https://search.jin10.com/?keyword=${encodeURIComponent(stockInfo.name)}`;

  return (
    <div className="min-h-screen bg-gradient-to-br from-background via-muted/30 to-background overscroll-none">
      <div className="container mx-auto px-4 py-4 md:py-8 max-w-6xl">
        {/* Top Action Bar: 返回 + 东方财富 */}
        <div className="flex items-center justify-between mb-4 md:mb-6 gap-2">
          {from ? (
            <Link to={`/${from}`}>
              <Button variant="ghost" size="sm">
                <ArrowLeft className="mr-2 h-4 w-4" />
                返回
              </Button>
            </Link>
          ) : (
            <Link to="/">
              <Button variant="ghost" size="sm">
                <ArrowLeft className="mr-2 h-4 w-4" />
                返回首页
              </Button>
            </Link>
          )}
          <a href={eastMoneyUrl} target="_blank" rel="noopener noreferrer">
            <Button variant="outline" size="sm">
              <ExternalLink className="mr-2 h-4 w-4" />
              东方财富
            </Button>
          </a>
          <a href={jin10Url} target="_blank" rel="noopener noreferrer">
            <Button variant="outline" size="sm">
              <Newspaper className="mr-2 h-4 w-4" />
              金十数据
            </Button>
          </a>
        </div>

        {/* Stock Info Header */}
        <Card className="mb-4 md:mb-6 shadow-lg">
          <CardContent className="p-4 md:p-6">
            <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
              <div>
                <div className="flex items-center gap-2 mb-2 flex-wrap">
                  <h1 className="text-xl md:text-3xl font-bold">{stockInfo.name}</h1>
                  {(() => {
                    const board = getStockBoard(stockInfo.code);
                    if (!board.label) return null;
                    return (
                      <span className={`inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border ${board.className}`}>
                        {board.label}
                      </span>
                    );
                  })()}
                </div>
                <p className="text-sm md:text-base text-muted-foreground">代码: {stockInfo.code}</p>
                <div className="flex items-center gap-2 mt-2 text-xs md:text-sm text-muted-foreground">
                  <Calendar className="h-3 w-3 md:h-4 md:w-4" />
                  <span>自选日期: {new Date(stockInfo.addedAt).toLocaleDateString("zh-CN")}</span>
                </div>
                {addedPrice && (
                  <p className="text-xs md:text-sm mt-1">
                    <span className="text-muted-foreground">自选价格：</span>
                    <span className="font-medium">¥{addedPrice.toFixed(2)}</span>
                  </p>
                )}
              </div>

              <div className="text-right space-y-2">
                <div>
                  <p className="text-2xl md:text-4xl font-bold">¥{stockInfo.currentPrice.toFixed(2)}</p>
                  <div className={`flex items-center justify-end gap-1 md:gap-2 mt-1 ${trendColor}`}>
                    {isPositive ? (
                      <TrendingUp className="h-4 w-4 md:h-5 md:w-5" />
                    ) : (
                      <TrendingDown className="h-4 w-4 md:h-5 md:w-5" />
                    )}
                    <span className="text-base md:text-xl font-semibold">
                      {isPositive ? "+" : ""}{stockInfo.change.toFixed(2)} ({isPositive ? "+" : ""}{stockInfo.changePercent.toFixed(2)}%)
                    </span>
                  </div>
                  <p className="text-xs md:text-sm text-muted-foreground mt-1">今日涨幅</p>
                </div>

                {/* 累计涨跌幅 */}
                {cumulativeChange !== null && (
                  <div className={`pt-2 border-t`}>
                    <p className="text-sm text-muted-foreground">自添加以来累计</p>
                    <div className={`flex items-center justify-end gap-2 mt-1 ${cumulativeIsPositive ? "text-red-500" : "text-green-500"}`}>
                      {cumulativeIsPositive ? (
                        <TrendingUp className="h-4 w-4" />
                      ) : (
                        <TrendingDown className="h-4 w-4" />
                      )}
                      <span className="text-lg font-semibold">
                        {cumulativeIsPositive ? "+" : ""}{cumulativeChange.toFixed(2)}%
                      </span>
                    </div>
                  </div>
                )}
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Chart */}
        <Card className="shadow-lg">
          <CardHeader className="pb-2 md:pb-4 px-3 md:px-6 pt-4 md:pt-6">
            <div className="flex items-center justify-between flex-wrap gap-2">
              <CardTitle className="text-base md:text-lg">
                K线图
                <span className="text-xs md:text-sm font-normal text-muted-foreground ml-2">
                  {chartLoading ? "（加载中...）" : `（${chartData.length}个交易日）`}
                </span>
              </CardTitle>
              <span className="text-xs text-muted-foreground hidden sm:inline">
                双指缩放 · 拖动选区查看
              </span>
            </div>
          </CardHeader>
          <CardContent className="px-2 md:px-6 pb-2 md:pb-6">
            {chartLoading ? (
              <div className="h-[320px] sm:h-[380px] md:h-[440px] w-full flex items-center justify-center">
                <div className="flex items-center text-muted-foreground text-sm">
                  <div className="animate-pulse mr-2 h-2 w-2 rounded-full bg-primary"></div>
                  K线数据加载中...
                </div>
              </div>
            ) : (
            <>
            <div
              className="h-[320px] sm:h-[380px] md:h-[440px] w-full touch-none select-none"
              style={{ touchAction: "none", overscrollBehavior: "none", WebkitOverflowScrolling: "auto" }}
            >
              <ResponsiveContainer width="100%" height="100%">
                <ComposedChart
                  data={chartData}
                  margin={{ top: 10, right: 8, left: 0, bottom: 0 }}
                >
                  <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" opacity={0.5} />
                  <XAxis
                    dataKey="date"
                    stroke="var(--muted-foreground)"
                    fontSize={10}
                    ticks={tickDates}
                    angle={-45}
                    textAnchor="end"
                    height={56}
                    tick={(props: any) => {
                      const { x, y, payload } = props;
                      const dataPoint = chartData.find(d => d.date === payload.value);
                      const isAddedDate = inCollection && dataPoint?.isAddedDate;

                      return (
                        <text
                          x={x}
                          y={y}
                          dy={16}
                          textAnchor="end"
                          fill={isAddedDate ? '#f59e0b' : 'var(--muted-foreground)'}
                          fontWeight={isAddedDate ? 'bold' : 'normal'}
                          fontSize={isAddedDate ? 11 : 10}
                        >
                          {payload.value}
                        </text>
                      );
                    }}
                  />
                  <YAxis
                    yAxisId="left"
                    stroke="var(--muted-foreground)"
                    fontSize={10}
                    domain={["auto", "auto"]}
                    tickCount={5}
                    width={42}
                  />
                  <YAxis
                    yAxisId="right"
                    orientation="right"
                    stroke="var(--muted-foreground)"
                    fontSize={10}
                    tickCount={5}
                    width={42}
                  />
                  <Tooltip
                    contentStyle={{
                      backgroundColor: "var(--card)",
                      border: "1px solid var(--border)",
                      borderRadius: "8px",
                      fontSize: "12px",
                      padding: "8px 12px",
                    }}
                    labelFormatter={(label) => `日期: ${label}`}
                    formatter={(value: any, name: string) => {
                      if (name === 'close') return [`¥${Number(value).toFixed(2)}`, '收盘价'];
                      if (name === 'volume') return [Number(value).toLocaleString(), '成交量'];
                      return [value, name];
                    }}
                  />
                  <Bar
                    yAxisId="right"
                    dataKey="volume"
                    fill="var(--primary)"
                    opacity={0.2}
                  />
                  <Line
                    yAxisId="left"
                    type="monotone"
                    dataKey="close"
                    stroke="var(--primary)"
                    strokeWidth={2}
                    dot={false}
                  />
                  {/* 高亮添加日期的K线点 */}
                  <Scatter
                    yAxisId="left"
                    dataKey="close"
                    fill="#fbbf24"
                    shape={(props: any) => {
                      const { cx, cy, payload } = props;
                      if (!payload.isAddedDate) {
                        return <circle cx={cx} cy={cy} r={0} fill="transparent" />;
                      }
                      return (
                        <circle
                          cx={cx}
                          cy={cy}
                          r={7}
                          fill="#fbbf24"
                          stroke="#f59e0b"
                          strokeWidth={2.5}
                        />
                      );
                    }}
                  />
                  {/* 添加日期参考线 */}
                  {addedDataPoint && (
                    <ReferenceLine
                      yAxisId="left"
                      x={addedDataPoint.date}
                      stroke="#f59e0b"
                      strokeDasharray="4 4"
                      opacity={0.7}
                    />
                  )}
                  {/* 缩放/滑动控件：移动端可双指缩放，拖动选区查看局部 */}
                  <Brush
                    dataKey="date"
                    height={24}
                    stroke="var(--primary)"
                    fill="var(--muted)"
                    travellerWidth={8}
                    gap={8}
                  />
                </ComposedChart>
              </ResponsiveContainer>
            </div>

            {/* Legend */}
            <div className="flex flex-wrap justify-center gap-3 md:gap-6 mt-2 md:mt-4 text-xs md:text-sm">
              <div className="flex items-center gap-1.5 md:gap-2">
                <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-primary"></div>
                <span>收盘价</span>
              </div>
              <div className="flex items-center gap-1.5 md:gap-2">
                <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full bg-primary opacity-20"></div>
                <span>成交量</span>
              </div>
              {inCollection && (
              <div className="flex items-center gap-1.5 md:gap-2">
                <div className="w-2.5 h-2.5 md:w-3 md:h-3 rounded-full" style={{ backgroundColor: '#fbbf24' }}></div>
                <span>自选日期</span>
              </div>
              )}
            </div>
            </>
            )}
          </CardContent>
        </Card>

        {/* Price Details */}
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4 mt-4 md:mt-6">
          <Card>
            <CardContent className="p-3 md:p-4 text-center">
              <p className="text-xs md:text-sm text-muted-foreground mb-1">今开</p>
              <p className="text-lg md:text-xl font-semibold">¥{stockInfo.todayOpen.toFixed(2)}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-3 md:p-4 text-center">
              <p className="text-xs md:text-sm text-muted-foreground mb-1">最高</p>
              <p className="text-lg md:text-xl font-semibold">¥{stockInfo.high.toFixed(2)}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-3 md:p-4 text-center">
              <p className="text-xs md:text-sm text-muted-foreground mb-1">最低</p>
              <p className="text-lg md:text-xl font-semibold">¥{stockInfo.low.toFixed(2)}</p>
            </CardContent>
          </Card>
          <Card>
            <CardContent className="p-3 md:p-4 text-center">
              <p className="text-xs md:text-sm text-muted-foreground mb-1">昨收</p>
              <p className="text-lg md:text-xl font-semibold">¥{stockInfo.yesterdayClose.toFixed(2)}</p>
            </CardContent>
          </Card>
        </div>

        {/* Daily Data Table - Independent from fund flow */}
        {chartData.length > 0 && (
          <Card className="mt-4 md:mt-6 shadow-lg">
            <CardHeader className="pb-2 md:pb-4 px-3 md:px-6 pt-4 md:pt-6">
              <div className="flex items-center justify-between flex-wrap gap-3">
                <CardTitle className="text-base md:text-lg">每日行情明细</CardTitle>
                <Tabs value={String(dailyTableDays)} onValueChange={(v) => setDailyTableDays(Number(v))}>
                  <TabsList>
                    <TabsTrigger value="7">近7日</TabsTrigger>
                    <TabsTrigger value="21">近21日</TabsTrigger>
                  </TabsList>
                </Tabs>
              </div>
              {fundFlowData.length === 0 && (
                <p className="text-xs text-muted-foreground mt-2">资金流向数据未加载（可能因外部服务限制）</p>
              )}
            </CardHeader>
            <CardContent className="px-3 md:px-6 pb-3 md:pb-6">
              <div className="overflow-x-auto">
                <table className="w-full text-xs md:text-sm">
                  <thead>
                    <tr className="border-b border-border">
                      <th className="text-left py-2 px-2 font-medium text-muted-foreground">日期</th>
                      <th className="text-right py-2 px-2 font-medium text-muted-foreground">涨幅</th>
                      <th className="text-right py-2 px-2 font-medium text-muted-foreground">主力净流入</th>
                      <th className="text-right py-2 px-2 font-medium text-muted-foreground">成交额</th>
                    </tr>
                  </thead>
                  <tbody>
                    {(() => {
                      // 根据选择的天数截取最近N个交易日的数据并倒序（最新日期在前）
                      const displayData = chartData.slice(-dailyTableDays).reverse();

                      return displayData.map((item, idx) => {
                        // 计算涨幅：与后一天收盘价比较（因为已倒序，后一天是更早的日期）
                        let changePercent = 0;
                        if (idx < displayData.length - 1) {
                          const nextClose = displayData[idx + 1].close;
                          if (nextClose > 0) {
                            changePercent = ((item.close - nextClose) / nextClose) * 100;
                          }
                        }
                        const isPositive = changePercent >= 0;

                        // 查找对应的资金流向数据
                        // 使用本地时区格式化日期，避免 toISOString() 的 UTC 时区偏移导致日期错位
                        const dateStr = `${item.dateObj.getFullYear()}-${String(item.dateObj.getMonth() + 1).padStart(2, '0')}-${String(item.dateObj.getDate()).padStart(2, '0')}`;
                        const fundFlowItem = fundFlowData.find(f => f.date === dateStr);
                        // 主力净流入：从 fundFlowData 获取，匹配不到则显示 "-"
                        let mainNetInflow: number | null = null;
                        if (fundFlowItem) {
                          mainNetInflow = fundFlowItem.mainForceNet || 0;
                        }
                        // 成交额：优先从 fundFlowData，其次最末行用行情成交额，最后 volume × close 近似
                        const turnover = fundFlowItem?.turnover
                          || (idx === 0 && stockInfo?.amount ? stockInfo.amount : 0)
                          || item.volume * item.close;

                        return (
                          <tr key={idx} className="border-b border-border/50 hover:bg-muted/20">
                            <td className="py-2 px-2">{item.date}</td>
                            <td className={`text-right py-2 px-2 font-medium ${isPositive ? 'text-red-500' : 'text-green-500'}`}>
                              {isPositive ? '+' : ''}{changePercent.toFixed(2)}%
                            </td>
                            <td className={`text-right py-2 px-2 font-medium ${mainNetInflow !== null ? (mainNetInflow >= 0 ? 'text-red-500' : 'text-green-500') : ''}`}>
                              {mainNetInflow !== null ? formatMoney(mainNetInflow) : '-'}
                            </td>
                            <td className="text-right py-2 px-2">
                              {formatMoney(turnover)}
                            </td>
                          </tr>
                        );
                      });
                    })()}
                  </tbody>
                </table>
              </div>
            </CardContent>
          </Card>
        )}

        {fundFlowLoading && fundFlowData.length === 0 && (
          <Card className="mt-4 md:mt-6 shadow-lg">
            <CardHeader className="pb-2 md:pb-4 px-3 md:px-6 pt-4 md:pt-6">
              <CardTitle className="text-base md:text-lg">资金流向分析</CardTitle>
            </CardHeader>
            <CardContent className="px-3 md:px-6 pb-3 md:pb-6">
              <div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
                <div className="animate-pulse mr-2 h-2 w-2 rounded-full bg-primary"></div>
                资金流向数据加载中...
              </div>
            </CardContent>
          </Card>
        )}

        {/* Fund Flow Section */}
        {fundFlowData.length > 0 && fundFlowSummary && (
          <>
            <div className="mt-4 md:mt-6 space-y-4 md:space-y-6">
              {/* Period Summary Cards */}
              <Card className="shadow-lg">
                <CardHeader className="pb-2 md:pb-4 px-3 md:px-6 pt-4 md:pt-6">
                  <div className="flex items-center justify-between flex-wrap gap-3">
                    <CardTitle className="text-base md:text-lg">资金流向概览</CardTitle>
                    <Tabs value={String(fundFlowPeriod)} onValueChange={(v) => setFundFlowPeriod(Number(v))}>
                      <TabsList>
                        <TabsTrigger value="5">近5日</TabsTrigger>
                        <TabsTrigger value="21">近21日</TabsTrigger>
                      </TabsList>
                    </Tabs>
                  </div>
                </CardHeader>
                <CardContent className="px-3 md:px-6 pb-3 md:pb-6">
                  {fundFlowLocalSummary && (
                  <div className="grid grid-cols-2 md:grid-cols-4 gap-3 md:gap-4">
                    <div className="text-center p-3 rounded-lg bg-muted/30">
                      <p className="text-xs text-muted-foreground mb-1">主力总净流入</p>
                      <p className={`text-lg font-bold ${fundFlowLocalSummary.totalMainNet >= 0 ? 'text-red-500' : 'text-green-500'}`}>
                        {formatMoney(fundFlowLocalSummary.totalMainNet)}
                      </p>
                    </div>
                    <div className="text-center p-3 rounded-lg bg-orange-500/5 border border-orange-500/20 relative">
                      <span className="absolute top-1 right-1 text-[10px] text-orange-500 bg-orange-500/10 px-1.5 py-0.5 rounded">≈主买</span>
                      <p className="text-xs text-muted-foreground mb-1">大单流入资金</p>
                      <p className="text-lg font-bold text-red-500">
                        {formatMoney(fundFlowLocalSummary.totalLargeInflow ?? 0)}
                      </p>
                    </div>
                    <div className="text-center p-3 rounded-lg bg-muted/30">
                      <p className="text-xs text-muted-foreground mb-1">日均主力流入</p>
                      <p className={`text-lg font-bold ${fundFlowLocalSummary.avgDailyMainNet >= 0 ? 'text-red-500' : 'text-green-500'}`}>
                        {formatMoney(fundFlowLocalSummary.avgDailyMainNet)}
                      </p>
                    </div>
                    <div className="text-center p-3 rounded-lg bg-muted/30">
                      <p className="text-xs text-muted-foreground mb-1">主力流入天数</p>
                      <p className="text-lg font-bold text-red-500">{fundFlowLocalSummary.positiveDays}天</p>
                      <p className="text-xs text-muted-foreground">流出{fundFlowLocalSummary.negativeDays}天</p>
                    </div>
                  </div>
                  )}
                </CardContent>
              </Card>

              {/* Main Force Net Inflow Chart */}
              <Card className="shadow-lg">
                <CardHeader className="pb-2 md:pb-4 px-3 md:px-6 pt-4 md:pt-6">
                  <CardTitle className="text-base md:text-lg">主力资金流向</CardTitle>
                </CardHeader>
                <CardContent className="px-3 md:px-6 pb-3 md:pb-6">
                  <div className="h-[280px] sm:h-[320px] md:h-[360px] w-full">
                    <ResponsiveContainer width="100%" height="100%">
                      <ComposedChart
                        data={fundFlowSlice.map(d => ({
                          ...d,
                          dateShort: d.date.slice(5),
                          mainForceNet: d.mainForceNet,
                        }))}
                        margin={{ top: 10, right: 8, left: 0, bottom: 0 }}
                      >
                        <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" opacity={0.5} />
                        <XAxis
                          dataKey="dateShort"
                          stroke="var(--muted-foreground)"
                          fontSize={10}
                          tickCount={6}
                          angle={-45}
                          textAnchor="end"
                          height={56}
                          interval="preserveStartEnd"
                        />
                        <YAxis
                          stroke="var(--muted-foreground)"
                          fontSize={10}
                          tickFormatter={(value) => {
                            return (value / 100000000).toFixed(2) + '亿';
                          }}
                          width={60}
                        />
                        <Tooltip
                          contentStyle={{
                            backgroundColor: "var(--card)",
                            border: "1px solid var(--border)",
                            borderRadius: "8px",
                            fontSize: "12px",
                            padding: "8px 12px",
                          }}
                          labelFormatter={(label) => `日期: ${label}`}
                          formatter={(value: any, name: string) => {
                            const numValue = Number(value);
                            if (name === 'mainForceNet' || name === '主力') return [formatMoney(numValue), '主力净额'];
                            return [value, name];
                          }}
                        />
                        <Bar dataKey="mainForceNet" opacity={0.6} name="主力">
                          {fundFlowSlice.map((entry, index) => (
                            <Cell key={`cell-${index}`} fill={entry.mainForceNet >= 0 ? '#ef4444' : '#22c55e'} />
                          ))}
                        </Bar>
                        <ReferenceLine y={0} stroke="var(--border)" strokeWidth={1} />
                      </ComposedChart>
                    </ResponsiveContainer>
                  </div>
                  <div className="flex justify-center gap-4 mt-3 text-xs">
                    <div className="flex items-center gap-1.5">
                      <div className="w-3 h-3 rounded-sm bg-red-500"></div>
                      <span>净流入</span>
                    </div>
                    <div className="flex items-center gap-1.5">
                      <div className="w-3 h-3 rounded-sm bg-green-500"></div>
                      <span>净流出</span>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Cumulative Main Force Trend */}
              <Card className="shadow-lg">
                <CardHeader className="pb-2 md:pb-4 px-3 md:px-6 pt-4 md:pt-6">
                  <CardTitle className="text-base md:text-lg">累计主力资金趋势</CardTitle>
                </CardHeader>
                <CardContent className="px-3 md:px-6 pb-3 md:pb-6">
                  <div className="h-[280px] sm:h-[320px] md:h-[360px] w-full">
                    <ResponsiveContainer width="100%" height="100%">
                      <ComposedChart
                        data={fundFlowSlice.map(d => ({
                          ...d,
                          dateShort: d.date.slice(5),
                          cumulativeMainNet: d.cumulativeMainNet,
                        }))}
                        margin={{ top: 10, right: 8, left: 0, bottom: 0 }}
                      >
                        <CartesianGrid strokeDasharray="3 3" stroke="var(--border)" opacity={0.5} />
                        <XAxis
                          dataKey="dateShort"
                          stroke="var(--muted-foreground)"
                          fontSize={10}
                          tickCount={6}
                          angle={-45}
                          textAnchor="end"
                          height={56}
                          interval="preserveStartEnd"
                        />
                        <YAxis
                          stroke="var(--muted-foreground)"
                          fontSize={10}
                          tickFormatter={(value) => {
                            return (value / 100000000).toFixed(2) + '亿';
                          }}
                          width={60}
                        />
                        <Tooltip
                          contentStyle={{
                            backgroundColor: "var(--card)",
                            border: "1px solid var(--border)",
                            borderRadius: "8px",
                            fontSize: "12px",
                            padding: "8px 12px",
                          }}
                          labelFormatter={(label) => `日期: ${label}`}
                          formatter={(value: any, name: string, props: any) => {
                            const numValue = Number(value);
                            if (props?.dataKey === 'cumulativeMainNet') {
                              return [(numValue / 100000000).toFixed(2) + '亿', '累计主力'];
                            }
                            return [value, name];
                          }}
                        />
                        {(() => {
                          const vals = fundFlowSlice.map(d => d.cumulativeMainNet);
                          const mx = Math.max(...vals, 0);
                          const mn = Math.min(...vals, 0);
                          const rng = mx - mn;
                          const zeroPct = rng > 0 ? (mx / rng * 100) : 50;
                          return (
                            <defs>
                              <linearGradient id="cumulativeLineGradient" x1="0" y1="0" x2="0" y2="1">
                                <stop offset="0%" stopColor="#ef4444" />
                                <stop offset={`${zeroPct}%`} stopColor="#ef4444" />
                                <stop offset={`${zeroPct}%`} stopColor="#22c55e" />
                                <stop offset="100%" stopColor="#22c55e" />
                              </linearGradient>
                            </defs>
                          );
                        })()}
                        <Line
                          type="monotone"
                          dataKey="cumulativeMainNet"
                          stroke="url(#cumulativeLineGradient)"
                          strokeWidth={2}
                          dot={false}
                          name="累计主力"
                        />
                        <ReferenceLine y={0} stroke="var(--border)" strokeWidth={1} />
                      </ComposedChart>
                    </ResponsiveContainer>
                  </div>
                  <div className="flex justify-center gap-4 mt-3 text-xs">
                    <div className="flex items-center gap-1.5">
                      <div className="w-3 h-0.5 bg-red-500"></div>
                      <span>累计主力</span>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>
          </>
        )}

        <StockProfileTabs
          code={code}
          profileTab={profileTab}
          setProfileTab={setProfileTab}
          companyProfile={companyProfile}
          businessSegments={businessSegments}
          financialData={financialData}
          setBusinessSegments={setBusinessSegments}
          pieType={pieType}
          setPieType={setPieType}
        />
      </div>
    </div>
  );
}