/**
 * K 线图组件（基于 TradingView Lightweight Charts v5）
 * 主图：蜡烛/折线 + MA(5/10/20/30)；
 * 副图：成交量(pane1)、MACD(pane2)、RSI(pane3)，可开关。
 */
import { useEffect, useRef } from "react";
import {
  createChart,
  CandlestickSeries,
  LineSeries,
  HistogramSeries,
  ColorType,
  CrosshairMode,
  LineStyle,
  TickMarkType,
  createSeriesMarkers,
  type IChartApi,
  type ISeriesApi,
  type ISeriesApi as ISeriesAny,
  type Time,
} from "lightweight-charts";
import { sma, macd as calcMacd, rsi as calcRsi, type KBar } from "@/lib/indicators";

export interface KLineItem {
  time: string | number; // ISO 日期 yyyy-mm-dd 或 Unix seconds UTC（lightweight-charts 两者均支持）
  open: number;
  close: number;
  high: number;
  low: number;
  volume: number;
  isAddedDate?: boolean;
}

export interface IndicatorToggles {
  ma: boolean;
  macd: boolean;
  rsi: boolean;
}

interface Props {
  data: KLineItem[];
  mode: "line" | "candle";
  hasAddedDate?: boolean;
  indicators: IndicatorToggles;
  /** 默认只展示最近 N 个自然日（日线用），其余数据靠拖动查看；不传则铺满全部数据 */
  defaultVisibleDays?: number;
}

// lightweight-charts 无法解析 CSS 变量或 oklch() 颜色，直接用具体 hex 色。
const UP = "#ef4444";
const DOWN = "#22c55e";
// 成交量柱：浅色调，避免与 K 线柱体视觉争夺
const VOL_UP = "#fca5a5";
const VOL_DOWN = "#86efac";
const PRIMARY = "#ef4444";
const TEXT = "#71717a";
const GRID = "#e4e4e7";
const MARKER = "#f59e0b";

// MA / 指标线配色
const MA_COLORS = ["#f59e0b", "#3b82f6", "#a855f7"];
const MA_PERIODS = [5, 10, 20];
const MACD_DIF = "#3b82f6";
const MACD_DEA = "#f59e0b";
const RSI_COLOR = "#a855f7";

// 时间统一按 UTC 取值格式化（kline-card 把北京时间墙钟视作 UTC 存储），
// 用本地时区方法会导致日期错位一天
function timeToDate(t: Time): Date {
  if (typeof t === "number") return new Date(t * 1000);
  if (typeof t === "string") return new Date(t.length === 10 ? `${t}T00:00:00Z` : t);
  return new Date(Date.UTC(t.year, t.month - 1, t.day));
}

const pad2 = (n: number) => String(n).padStart(2, "0");

/** 十字光标处的完整日期：2026-09-01 */
function formatCrosshairTime(t: Time): string {
  const d = timeToDate(t);
  return `${d.getUTCFullYear()}-${pad2(d.getUTCMonth() + 1)}-${pad2(d.getUTCDate())}`;
}

/** 底部时间轴刻度：年→2026、月→2026-09、日→09-01（替代默认的 "01 9月 '26"） */
function formatTickMark(t: Time, tickMarkType: TickMarkType): string {
  const d = timeToDate(t);
  if (tickMarkType === TickMarkType.Year) return `${d.getUTCFullYear()}`;
  if (tickMarkType === TickMarkType.Month) return `${d.getUTCFullYear()}-${pad2(d.getUTCMonth() + 1)}`;
  return `${pad2(d.getUTCMonth() + 1)}-${pad2(d.getUTCDate())}`;
}

// 各 pane 固定高度：主图加高、成交量压低，指标副图居中
const MAIN_PANE_H = 320;
const VOL_PANE_H = 70;
const IND_PANE_H = 95;

export function KLineChart({ data, mode, hasAddedDate, indicators, defaultVisibleDays }: Props) {
  const containerRef = useRef<HTMLDivElement>(null);
  const chartRef = useRef<IChartApi | null>(null);
  // 记录上次填充的数据集：仅数据集变化（首次加载/切换周期）时调整视口，
  // 指标开关/显示方式切换时保留用户拖动缩放后的位置
  const lastDataRef = useRef<KLineItem[] | null>(null);
  const priceSeriesRef = useRef<ISeriesApi<"Candlestick" | "Line"> | null>(null);
  const volSeriesRef = useRef<ISeriesApi<"Histogram"> | null>(null);
  // 指标 series（重建用）
  const maSeriesRef = useRef<ISeriesAny<"Line">[]>([]);
  const macdSeriesRef = useRef<ISeriesAny<"Line" | "Histogram">[]>([]);
  const rsiSeriesRef = useRef<ISeriesAny<"Line">[]>([]);

  // 容器高度随指标 pane 数量增长，避免主图被压缩
  const extraPanes = [indicators.macd, indicators.rsi].filter(Boolean).length;
  // 图表总高 = 各 pane 高度之和（主图 + 成交量 + 指标副图×N）
  const chartHeight = MAIN_PANE_H + VOL_PANE_H + extraPanes * IND_PANE_H;

  // pane 顺序固定：0=主图 1=成交量 2+=指标副图；指标开关增删 pane 后重新应用高度
  function applyPaneHeights(chart: IChartApi) {
    chart.panes().forEach((pane, i) => {
      pane.setHeight(i === 0 ? MAIN_PANE_H : i === 1 ? VOL_PANE_H : IND_PANE_H);
    });
  }

  // 创建图表（仅一次）：pane0 主图 + pane1 成交量
  useEffect(() => {
    if (!containerRef.current) return;
    const el = containerRef.current;
    const chart = createChart(el, {
      width: el.clientWidth || 800,
      height: chartHeight,
      layout: {
        background: { type: ColorType.Solid, color: "transparent" },
        textColor: TEXT,
        fontSize: 10,
        panes: { separatorColor: GRID, separatorHoverColor: "#94a3b8" },
      },
      grid: {
        vertLines: { color: GRID, style: LineStyle.Dashed, visible: true },
        horzLines: { color: GRID, style: LineStyle.Dashed, visible: true },
      },
      rightPriceScale: { borderColor: GRID },
      localization: { timeFormatter: formatCrosshairTime },
      timeScale: {
        borderColor: GRID,
        timeVisible: false,
        tickMarkFormatter: formatTickMark,
      },
      crosshair: { mode: CrosshairMode.Normal },
    });
    chartRef.current = chart;

    // 成交量放到独立 pane1，避免与主图K线重叠
    const vol = chart.addSeries(
      HistogramSeries,
      {
        priceFormat: { type: "volume" },
        priceScaleId: "vol",
      },
      1,
    );
    volSeriesRef.current = vol;
    applyPaneHeights(chart);

    return () => {
      chart.remove();
      chartRef.current = null;
      priceSeriesRef.current = null;
      volSeriesRef.current = null;
      maSeriesRef.current = [];
      macdSeriesRef.current = [];
      rsiSeriesRef.current = [];
      // 图表实例销毁后重置，重建时重新应用默认视口（StrictMode 重挂载同样生效）
      lastDataRef.current = null;
    };
  }, []);

  // 移除某组 series
  function removeGroup(list: ISeriesAny<"Line" | "Histogram">[], chart: IChartApi) {
    for (const s of list) {
      try {
        chart.removeSeries(s);
      } catch {
        // 已被移除
      }
    }
    list.length = 0;
  }

  // 填充/重建全部指标 series
  function rebuildIndicators() {
    const chart = chartRef.current;
    if (!chart) return;
  // 指标开关改变容器高度后，同步图表尺寸
    if (containerRef.current) {
      chart.applyOptions({
        width: containerRef.current.clientWidth || 800,
        height: chartHeight,
      });
    }
    const bars: KBar[] = data.map((d) => ({
      time: d.time,
      open: d.open,
      close: d.close,
      high: d.high,
      low: d.low,
      volume: d.volume,
    }));
    const closes = bars.map((b) => b.close);

    // --- MA（主图 pane0 叠加）---
    removeGroup(maSeriesRef.current, chart);
    if (indicators.ma && bars.length > 0) {
      MA_PERIODS.forEach((p, i) => {
        const vals = sma(closes, p);
        const s = chart.addSeries(
          LineSeries,
          { color: MA_COLORS[i % MA_COLORS.length], lineWidth: 1, priceLineVisible: false, lastValueVisible: false },
          0,
        );
        s.setData(
          bars
            .map((b, idx) => ({ time: b.time as Time, value: vals[idx] }))
            .filter((x) => x.value != null) as { time: Time; value: number }[],
        );
        maSeriesRef.current.push(s);
      });
    }

    // --- MACD（pane2）---
    removeGroup(macdSeriesRef.current, chart);
    if (indicators.macd && bars.length > 0) {
      const { dif, dea, hist } = calcMacd(closes);
      const line = (color: string) =>
        chart.addSeries(
          LineSeries,
          { color, lineWidth: 1, priceLineVisible: false, lastValueVisible: false },
          2,
        );
      const difS = line(MACD_DIF);
      const deaS = line(MACD_DEA);
      difS.setData(bars.map((b, i) => ({ time: b.time as Time, value: dif[i] })).filter((x) => x.value != null) as { time: Time; value: number }[]);
      deaS.setData(bars.map((b, i) => ({ time: b.time as Time, value: dea[i] })).filter((x) => x.value != null) as { time: Time; value: number }[]);
      const histS = chart.addSeries(
        HistogramSeries,
        {
          priceLineVisible: false,
          lastValueVisible: false,
        },
        2,
      );
      histS.setData(
        bars
          .map((b, i) => ({
            time: b.time as Time,
            value: hist[i],
            color: (hist[i] ?? 0) >= 0 ? UP : DOWN,
          }))
          .filter((x) => x.value != null) as { time: Time; value: number; color: string }[],
      );
      macdSeriesRef.current.push(difS, deaS, histS);
    }

    // --- RSI（pane3）---
    removeGroup(rsiSeriesRef.current, chart);
    if (indicators.rsi && bars.length > 0) {
      const vals = calcRsi(closes, 14);
      const s = chart.addSeries(
        LineSeries,
        { color: RSI_COLOR, lineWidth: 1, priceLineVisible: false, lastValueVisible: false },
        3,
      );
      s.setData(
        bars
          .map((b, i) => ({ time: b.time as Time, value: vals[i] }))
          .filter((x) => x.value != null) as { time: Time; value: number }[],
      );
      rsiSeriesRef.current.push(s);
    }

    applyPaneHeights(chart);
  }

  // 模式切换：重建价格 series + 指标
  useEffect(() => {
    const chart = chartRef.current;
    if (!chart) return;
    if (priceSeriesRef.current) {
      chart.removeSeries(priceSeriesRef.current);
      priceSeriesRef.current = null;
    }
    if (mode === "candle") {
      priceSeriesRef.current = chart.addSeries(CandlestickSeries, {
        upColor: UP,
        downColor: DOWN,
        borderUpColor: UP,
        borderDownColor: DOWN,
        wickUpColor: UP,
        wickDownColor: DOWN,
      });
    } else {
      priceSeriesRef.current = chart.addSeries(LineSeries, {
        color: PRIMARY,
        lineWidth: 2,
      });
    }
    fillData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [mode]);

  // 数据或指标开关变化：重填数据 + 重建指标
  useEffect(() => {
    fillData();
    rebuildIndicators();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data, hasAddedDate, indicators]);

  function fillData() {
    const chart = chartRef.current;
    const ps = priceSeriesRef.current;
    const vs = volSeriesRef.current;
    if (!chart || !ps || !vs) return;

    if (data.length === 0) {
      ps.setData([]);
      vs.setData([]);
      return;
    }

    if (mode === "candle") {
      (ps as ISeriesApi<"Candlestick">).setData(
        data.map((d) => ({
          time: d.time as Time,
          open: d.open,
          high: d.high,
          low: d.low,
          close: d.close,
        })),
      );
    } else {
      (ps as ISeriesApi<"Line">).setData(
        data.map((d) => ({ time: d.time as Time, value: d.close })),
      );
    }

    vs.setData(
      data.map((d) => ({
        time: d.time as Time,
        value: d.volume,
        color: d.close >= d.open ? VOL_UP : VOL_DOWN,
      })),
    );

    const markerItem = hasAddedDate ? data.find((d) => d.isAddedDate) : undefined;
    if (markerItem) {
      createSeriesMarkers(ps, [
        {
          time: markerItem.time as Time,
          position: "aboveBar",
          color: MARKER,
          shape: "circle",
          text: "自选",
        },
      ]);
    } else {
      createSeriesMarkers(ps, []);
    }

    if (lastDataRef.current === data) return;
    lastDataRef.current = data;
    if (defaultVisibleDays) {
      // 默认视口只展示最近 N 个自然日，更早的数据靠向左拖动查看
      const toMs = (t: string | number) =>
        typeof t === "number" ? t * 1000 : new Date(t).getTime();
      const lastMs = toMs(data[data.length - 1].time);
      let fromIdx = data.findIndex(
        (d) => toMs(d.time) >= lastMs - defaultVisibleDays * 86400_000,
      );
      if (fromIdx < 0) fromIdx = 0;
      chart
        .timeScale()
        .setVisibleLogicalRange({ from: fromIdx, to: data.length - 1 + 2 });
    } else {
      chart.timeScale().fitContent();
    }
  }

  // 颜色图例：根据启用的指标生成
  const legend: { color: string; label: string }[] = [];
  if (indicators.ma) {
    MA_PERIODS.forEach((p, i) => legend.push({ color: MA_COLORS[i % MA_COLORS.length], label: `MA${p}` }));
  }
  if (indicators.macd) {
    legend.push({ color: MACD_DIF, label: "DIF" }, { color: MACD_DEA, label: "DEA" });
  }
  if (indicators.rsi) legend.push({ color: RSI_COLOR, label: "RSI14" });

  return (
    <div className="w-full">
      <div
        ref={containerRef}
        style={{ height: `${chartHeight}px` }}
        className="w-full transition-[height] duration-200"
      />
      {legend.length > 0 && (
        <div className="flex flex-wrap items-center gap-x-3 gap-y-1 mt-1.5 text-[11px] text-muted-foreground">
          {legend.map((l) => (
            <span key={l.label} className="inline-flex items-center gap-1">
              <span className="h-0.5 w-3 rounded" style={{ backgroundColor: l.color }} />
              {l.label}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}

export default KLineChart;