/**
 * 中控行情区：K 线 + 底部成交量；十字线时显示 OHLCV；可视区间高低点。
 */
(function () {
  const chartHost = document.getElementById("market-chart");
  if (!chartHost) return;

  const elExchange = document.getElementById("market-exchange");
  const elSymbol = document.getElementById("market-symbol");
  const elTf = document.getElementById("market-timeframe");
  const elRefresh = document.getElementById("market-refresh");
  const elStatus = document.getElementById("market-status");
  const elUpdated = document.getElementById("market-updated");
  const elOverlay = document.querySelector(".market-ohlcv-overlay");
  const elO = document.getElementById("mkt-o");
  const elH = document.getElementById("mkt-h");
  const elL = document.getElementById("mkt-l");
  const elC = document.getElementById("mkt-c");
  const elV = document.getElementById("mkt-v");
  const elSymLabel = document.getElementById("mkt-symbol-label");
  const elTfLabel = document.getElementById("mkt-tf-label");

  let chart = null;
  let candleSeries = null;
  let volumeSeries = null;
  let priceTick = null;
  let rangeMarkers = [];
  let lastCandles = [];
  let candleByTime = {};
  let chartMeta = null;
  let loadToken = 0;
  let marketInited = false;

  function fmtVol(v) {
    if (v == null || Number.isNaN(Number(v))) return "-";
    const n = Number(v);
    if (n >= 1e9) return (n / 1e9).toFixed(2) + "B";
    if (n >= 1e6) return (n / 1e6).toFixed(2) + "M";
    if (n >= 1e3) return (n / 1e3).toFixed(2) + "K";
    return n.toFixed(2);
  }

  function fmtPrice(v) {
    if (v == null || Number.isNaN(Number(v))) return "-";
    const n = Number(v);
    if (n === 0) return "0";
    const tick = priceTick;
    if (tick && tick > 0) {
      let decimals = tick >= 1 ? 0 : Math.max(0, Math.min(12, Math.round(-Math.log10(tick))));
      let text = n.toFixed(decimals);
      if (text.indexOf(".") >= 0) text = text.replace(/\.?0+$/, "");
      return text;
    }
    const av = Math.abs(n);
    let d = 8;
    if (av >= 10000) d = 2;
    else if (av >= 100) d = 3;
    else if (av >= 1) d = 4;
    else if (av >= 0.01) d = 6;
    let text = n.toFixed(d);
    if (text.indexOf(".") >= 0) text = text.replace(/\.?0+$/, "");
    return text;
  }

  function setOverlayVisible(on) {
    if (!elOverlay) return;
    elOverlay.classList.toggle("is-active", !!on);
  }

  function paintOhlcv(bar) {
    if (!bar) {
      ["o", "h", "l", "c", "v"].forEach(function (k) {
        const el = { o: elO, h: elH, l: elL, c: elC, v: elV }[k];
        if (el) el.textContent = "-";
      });
      return;
    }
    if (elO) elO.textContent = fmtPrice(bar.open);
    if (elH) elH.textContent = fmtPrice(bar.high);
    if (elL) elL.textContent = fmtPrice(bar.low);
    if (elC) elC.textContent = fmtPrice(bar.close);
    if (elV) elV.textContent = fmtVol(bar.volume);
  }

  function hideOhlcvOverlay() {
    setOverlayVisible(false);
    paintOhlcv(null);
  }

  function indexCandles(candles) {
    candleByTime = {};
    (candles || []).forEach(function (c) {
      if (c && c.time != null) candleByTime[c.time] = c;
    });
  }

  function candleAtTime(t) {
    if (t == null) return null;
    return candleByTime[t] || null;
  }

  function buildVolumeData(candles) {
    return (candles || []).map(function (c) {
      const up = Number(c.close) >= Number(c.open);
      return {
        time: c.time,
        value: Number(c.volume) || 0,
        color: up ? "rgba(0, 255, 157, 0.5)" : "rgba(255, 77, 109, 0.5)",
      };
    });
  }

  function ensureChart() {
    if (chart && candleSeries && volumeSeries) return true;
    if (!window.LightweightCharts) {
      if (elStatus) {
        elStatus.className = "market-status err";
        elStatus.textContent = "图表库加载失败";
      }
      return false;
    }
    chart = LightweightCharts.createChart(chartHost, {
      layout: { background: { color: "#0a1018" }, textColor: "#b8d4e8" },
      grid: {
        vertLines: { visible: false },
        horzLines: { visible: false },
      },
      rightPriceScale: { borderColor: "#2a4058" },
      timeScale: { borderColor: "#2a4058", timeVisible: true, secondsVisible: false },
      crosshair: {
        mode: LightweightCharts.CrosshairMode
          ? LightweightCharts.CrosshairMode.Normal
          : 0,
      },
    });

    const candleOpts = {
      upColor: "#00ff9d",
      downColor: "#ff4d6d",
      borderVisible: false,
      wickUpColor: "#00ff9d",
      wickDownColor: "#ff4d6d",
    };

    if (typeof chart.addCandlestickSeries === "function") {
      candleSeries = chart.addCandlestickSeries(candleOpts);
    } else if (
      typeof chart.addSeries === "function" &&
      window.LightweightCharts &&
      window.LightweightCharts.CandlestickSeries
    ) {
      candleSeries = chart.addSeries(window.LightweightCharts.CandlestickSeries, candleOpts);
    }
    if (!candleSeries) return false;

    const volOpts = {
      priceFormat: { type: "volume" },
      priceScaleId: "volume",
      lastValueVisible: false,
    };
    if (typeof chart.addHistogramSeries === "function") {
      volumeSeries = chart.addHistogramSeries(volOpts);
    } else if (
      typeof chart.addSeries === "function" &&
      window.LightweightCharts &&
      window.LightweightCharts.HistogramSeries
    ) {
      volumeSeries = chart.addSeries(window.LightweightCharts.HistogramSeries, volOpts);
    }
    if (!volumeSeries) return false;

    chart.priceScale("right").applyOptions({
      scaleMargins: { top: 0.06, bottom: 0.28 },
    });
    chart.priceScale("volume").applyOptions({
      scaleMargins: { top: 0.78, bottom: 0 },
    });

    chart.subscribeCrosshairMove(function (param) {
      if (!param || param.time == null) {
        hideOhlcvOverlay();
        return;
      }
      const bar = candleAtTime(param.time);
      if (!bar) {
        hideOhlcvOverlay();
        return;
      }
      setOverlayVisible(true);
      paintOhlcv(bar);
    });

    chart.timeScale().subscribeVisibleLogicalRangeChange(function () {
      updateVisibleRangeMarkers();
    });

    window.addEventListener("resize", function () {
      if (!chart) return;
      chart.applyOptions({ width: chartHost.clientWidth, height: chartHost.clientHeight });
    });
    chart.applyOptions({ width: chartHost.clientWidth, height: chartHost.clientHeight });
    hideOhlcvOverlay();
    return true;
  }

  function clearMarkers() {
    rangeMarkers.forEach(function (m) {
      try {
        candleSeries.removePriceLine(m);
      } catch (e) {}
    });
    rangeMarkers = [];
  }

  function updateVisibleRangeMarkers() {
    clearMarkers();
    if (!candleSeries || !chart || !lastCandles.length) return;

    const range = chart.timeScale().getVisibleLogicalRange();
    if (!range) return;

    const from = Math.max(0, Math.floor(range.from));
    const to = Math.min(lastCandles.length - 1, Math.ceil(range.to));
    if (to < from) return;

    let hi = null;
    let lo = null;
    for (let i = from; i <= to; i++) {
      const c = lastCandles[i];
      if (!c) continue;
      if (!hi || c.high > hi.high) hi = c;
      if (!lo || c.low < lo.low) lo = c;
    }
    if (!hi || !lo) return;

    rangeMarkers.push(
      candleSeries.createPriceLine({
        price: Number(hi.high),
        color: "#ffb84d",
        lineWidth: 1,
        lineStyle: 2,
        axisLabelVisible: true,
        title: "可视高",
      })
    );
    rangeMarkers.push(
      candleSeries.createPriceLine({
        price: Number(lo.low),
        color: "#4cd97f",
        lineWidth: 1,
        lineStyle: 2,
        axisLabelVisible: true,
        title: "可视低",
      })
    );
  }

  function readQuery() {
    const qs = new URLSearchParams(window.location.search);
    const ex = qs.get("exchange_key") || qs.get("exchange") || "";
    const sym = qs.get("symbol") || "";
    const tf = qs.get("timeframe") || "";
    if (ex && elExchange) elExchange.value = ex;
    if (sym && elSymbol) elSymbol.value = sym;
    if (tf && elTf) elTf.value = tf;
  }

  function applyDefaults() {
    if (elSymbol && !elSymbol.value.trim()) elSymbol.value = "BTC/USDT";
    if (elTf && !elTf.value) elTf.value = "1d";
  }

  async function loadMeta() {
    const r = await fetch("/api/chart/meta", { credentials: "same-origin" });
    chartMeta = await r.json();
    if (!elExchange || !chartMeta.exchanges) return;
    elExchange.innerHTML = "";
    chartMeta.exchanges.forEach(function (ex) {
      const opt = document.createElement("option");
      opt.value = ex.key || ex.id;
      opt.textContent = ex.name || ex.key;
      elExchange.appendChild(opt);
    });
    readQuery();
    applyDefaults();
  }

  async function loadChart(force) {
    if (!ensureChart()) return;
    const exKey = (elExchange && elExchange.value) || "";
    const sym = (elSymbol && elSymbol.value.trim().toUpperCase()) || "";
    const tf = (elTf && elTf.value) || "1d";
    if (!exKey || !sym) {
      if (elStatus) {
        elStatus.className = "market-status err";
        elStatus.textContent = "请选择交易所并输入币种";
      }
      return;
    }
    const myToken = ++loadToken;
    if (elStatus) {
      elStatus.className = "market-status";
      elStatus.textContent = "加载中…";
    }
    hideOhlcvOverlay();
    if (elSymLabel) elSymLabel.textContent = sym;
    if (elTfLabel) elTfLabel.textContent = tf;

    const qs = new URLSearchParams({
      exchange_key: exKey,
      symbol: sym,
      timeframe: tf,
    });
    if (force) qs.set("refresh", "1");

    try {
      const r = await fetch("/api/chart/ohlcv?" + qs.toString(), { credentials: "same-origin" });
      const data = await r.json();
      if (myToken !== loadToken) return;
      if (!r.ok) {
        throw new Error(data.detail || data.msg || "请求失败");
      }
      if (!data.ok || !data.candles || !data.candles.length) {
        throw new Error(data.msg || "无 K 线");
      }

      priceTick = data.price_tick;
      lastCandles = data.candles;
      indexCandles(lastCandles);
      candleSeries.setData(lastCandles);
      volumeSeries.setData(buildVolumeData(lastCandles));
      chart.timeScale().fitContent();
      updateVisibleRangeMarkers();

      const limit = data.limit || lastCandles.length;
      let hint =
        "已加载 " +
        data.candles.length +
        " 根（目标 " +
        limit +
        "）· 库 " +
        (data.from_cache || 0) +
        " / 新拉 " +
        (data.fetched || 0) +
        "）· 保留 " +
        (data.retention_days || 15) +
        " 天";
      if (data.stale && data.stale_message) {
        hint += " · 缓存：" + data.stale_message;
      }
      if (elStatus) {
        elStatus.className = data.stale ? "market-status warn" : "market-status";
        elStatus.textContent = hint;
      }
      if (elUpdated) elUpdated.textContent = data.updated_at || "--";
    } catch (e) {
      if (myToken !== loadToken) return;
      if (elStatus) {
        elStatus.className = "market-status err";
        elStatus.textContent = String(e.message || e);
      }
    }
  }

  function bind() {
    if (elRefresh) {
      elRefresh.addEventListener("click", function () {
        loadChart(true);
      });
    }
    if (elTf) {
      elTf.addEventListener("change", function () {
        loadChart(false);
      });
    }
    if (elExchange) {
      elExchange.addEventListener("change", function () {
        loadChart(false);
      });
    }
    if (elSymbol) {
      elSymbol.addEventListener("keydown", function (e) {
        if (e.key === "Enter") loadChart(false);
      });
    }
    const btnLoad = document.getElementById("market-load");
    if (btnLoad) {
      btnLoad.addEventListener("click", function () {
        loadChart(false);
      });
    }
  }

  window.hubMarketChart = {
    init: async function () {
      if (!marketInited) {
        marketInited = true;
        await loadMeta();
        bind();
      }
      await loadChart(false);
    },
    reload: function (force) {
      loadChart(!!force);
    },
  };

  if (
    document.getElementById("page-market") &&
    !document.getElementById("page-market").classList.contains("hidden")
  ) {
    window.hubMarketChart.init();
  }
})();