/* ═══════════════════════════════════════════════════════════════
   CHARTS screen — lightweight-charts integration · REAL OKX data
   ═══════════════════════════════════════════════════════════════ */

const { useEffect: useEffectC, useRef: useRefC, useState: useStateC } = React;

const TF_BAR_MAP = { M1:"1m", M5:"5m", M15:"15m", H1:"1H", H4:"4H", D1:"1D", W1:"1W" };
const TF_LIMITS  = { M1:300,  M5:300,  M15:300,  H1:300, H4:300, D1:365, W1:200 };

function ChartsScreen() {
  const containerRef    = useRefC(null);
  const candleSeriesRef = useRefC(null);
  const [pair, setPair] = useStateC("BTC");
  const [tf, setTf] = useStateC("M15");
  const [indicators, setIndicators] = useStateC({ rsi: false, macd: false, ema20: true, ema50: true, bb: false, vol: true });
  const [analysis, setAnalysis] = useStateC(null);
  const [analysisLoading, setAnalysisLoading] = useStateC(false);
  const [candles, setCandles] = useStateC([]);
  const [info, setInfo] = useStateC({ price: 0, chg: 0, vol24h: 0, funding: null });
  const [loading, setLoading] = useStateC(true);

  // Subscribe au STORE pour les prix WS live (300ms)
  const store  = window.useStore ? window.useStore() : {};
  const livePx = store.PRICES && store.PRICES[pair];

  const fullPair = pair + "/USDT:USDT";
  const KEY = new URLSearchParams(location.search).get("key");

  // Fetch real candles
  useEffectC(() => {
    setLoading(true);
    const bar = TF_BAR_MAP[tf] || "15m";
    const limit = TF_LIMITS[tf] || 300;
    fetch(`/api/candles?pair=${encodeURIComponent(fullPair)}&bar=${bar}&limit=${limit}`, { credentials: "include" })
      .then(r => r.json())
      .then(j => {
        const arr = (j.candles || []).map(c => ({
          time: Math.floor(c.t / 1000),
          open: c.open, high: c.high, low: c.low, close: c.close,
          volume: c.vol || 0,
        }));
        setCandles(arr);
        if (arr.length > 0) {
          const last = arr[arr.length - 1];
          const secPerBar = bar==="1m"?60:bar==="5m"?300:bar==="15m"?900:bar==="1H"?3600:bar==="4H"?14400:86400;
          const idx24h = Math.max(0, arr.length - Math.floor(86400 / secPerBar));
          const ref24h = arr[idx24h] || arr[0];
          const chg    = ((last.close - ref24h.open) / ref24h.open) * 100;
          const vol24h = arr.slice(idx24h).reduce((s, c) => s + (c.volume || 0), 0);
          setInfo(prev => ({ ...prev, price: last.close, chg, vol24h }));
        }
        setLoading(false);
      })
      .catch(() => setLoading(false));
  }, [pair, tf]);

  // Fetch funding rate from current signal
  useEffectC(() => {
    fetch(`/api/signal`, { credentials: "include" }).then(r => r.json()).then(j => {
      const sig = (j.signals || []).find(s => (s.paire || "").startsWith(pair + "/"));
      if (sig) setInfo(prev => ({ ...prev, funding: sig.funding_raw }));
    }).catch(() => {});
  }, [pair]);

  // Render chart
  useEffectC(() => {
    if (!containerRef.current || !window.LightweightCharts || candles.length < 2) return;
    const { createChart } = window.LightweightCharts;

    const chart = createChart(containerRef.current, {
      width: containerRef.current.clientWidth,
      height: containerRef.current.clientHeight,
      layout: { background: { type: "solid", color: "transparent" }, textColor: "#6B678F",
                fontFamily: "Geist Mono, JetBrains Mono, monospace" },
      grid: { vertLines: { color: "#1F1F3A" }, horzLines: { color: "#1F1F3A" } },
      crosshair: { mode: 0 },
      rightPriceScale: { borderColor: "#2A2A4D", textColor: "#6B678F" },
      timeScale: { borderColor: "#2A2A4D", timeVisible: true, secondsVisible: false },
    });

    const candleSeries = chart.addCandlestickSeries({
      upColor: "#10B981", downColor: "#EF4444",
      wickUpColor: "#10B981", wickDownColor: "#EF4444",
      borderVisible: false,
    });
    candleSeries.setData(candles);
    candleSeriesRef.current = candleSeries;

    if (indicators.vol) {
      const vol = chart.addHistogramSeries({
        priceFormat: { type: "volume" },
        priceScaleId: "",
        color: "#A855F7",
      });
      vol.priceScale().applyOptions({ scaleMargins: { top: 0.85, bottom: 0 } });
      vol.setData(candles.map(c => ({
        time: c.time, value: c.volume,
        color: c.close >= c.open ? "rgba(16,185,129,0.4)" : "rgba(239,68,68,0.4)",
      })));
    }

    if (indicators.ema20) {
      const ema20 = chart.addLineSeries({ color: "#C084FC", lineWidth: 1.5, priceLineVisible: false, lastValueVisible: false });
      const out = []; let e = candles[0].close;
      candles.forEach(d => { e = e * 0.905 + d.close * 0.095; out.push({ time: d.time, value: e }); });
      ema20.setData(out);
    }
    if (indicators.ema50) {
      const ema50 = chart.addLineSeries({ color: "#EC4899", lineWidth: 1.5, priceLineVisible: false, lastValueVisible: false });
      const out = []; let e = candles[0].close;
      candles.forEach(d => { e = e * 0.961 + d.close * 0.039; out.push({ time: d.time, value: e }); });
      ema50.setData(out);
    }
    if (indicators.bb) {
      const period = 20, mult = 2;
      const upper = [], mid = [], lower = [];
      for (let i = period - 1; i < candles.length; i++) {
        const slice = candles.slice(i - period + 1, i + 1).map(c => c.close);
        const m  = slice.reduce((a,b) => a+b, 0) / period;
        const v  = slice.reduce((a,b) => a + (b-m)*(b-m), 0) / period;
        const sd = Math.sqrt(v);
        const t  = candles[i].time;
        mid.push({ time: t, value: m });
        upper.push({ time: t, value: m + mult*sd });
        lower.push({ time: t, value: m - mult*sd });
      }
      chart.addLineSeries({ color: "rgba(168,85,247,0.4)", lineWidth: 1, priceLineVisible: false, lastValueVisible: false }).setData(upper);
      chart.addLineSeries({ color: "rgba(168,85,247,0.7)", lineWidth: 1, priceLineVisible: false, lastValueVisible: false }).setData(mid);
      chart.addLineSeries({ color: "rgba(168,85,247,0.4)", lineWidth: 1, priceLineVisible: false, lastValueVisible: false }).setData(lower);
    }

    // Position markers if open
    const store = window.STORE && window.STORE.data;
    if (store && store.POSITIONS) {
      const pos = store.POSITIONS.find(p => p.pair === pair);
      if (pos) {
        if (pos.entry) candleSeries.createPriceLine({ price: pos.entry, color: "#A855F7", lineWidth: 1, lineStyle: 2, title: "ENTRY", axisLabelVisible: true });
        if (pos.sl)    candleSeries.createPriceLine({ price: pos.sl,    color: "#EF4444", lineWidth: 1, lineStyle: 2, title: "SL",    axisLabelVisible: true });
        if (pos.tp1)   candleSeries.createPriceLine({ price: pos.tp1,   color: "#10B981", lineWidth: 1, lineStyle: 2, title: "TP1",   axisLabelVisible: true });
        if (pos.tp2)   candleSeries.createPriceLine({ price: pos.tp2,   color: "#10B981", lineWidth: 1, lineStyle: 2, title: "TP2",   axisLabelVisible: true });
      }
    }

    chart.timeScale().fitContent();
    const ro = new ResizeObserver(() => {
      if (containerRef.current) {
        chart.applyOptions({ width: containerRef.current.clientWidth, height: containerRef.current.clientHeight });
      }
    });
    ro.observe(containerRef.current);
    return () => { ro.disconnect(); candleSeriesRef.current = null; chart.remove(); };
  }, [candles, indicators.ema20, indicators.ema50, indicators.vol, indicators.bb, pair]);

  // LIVE : à chaque tick WS, on update la dernière bougie du chart (close + high/low étirés)
  useEffectC(() => {
    if (!livePx || !candleSeriesRef.current || candles.length === 0) return;
    const last = candles[candles.length - 1];
    candleSeriesRef.current.update({
      time:  last.time,
      open:  last.open,
      high:  Math.max(last.high, livePx),
      low:   Math.min(last.low,  livePx),
      close: livePx,
    });
    // Met aussi à jour le prix + variation affichés en header
    setInfo(prev => {
      if (!candles.length) return prev;
      const ref24h = candles[0];
      return { ...prev, price: livePx, chg: ((livePx - ref24h.open) / ref24h.open) * 100 };
    });
  }, [livePx]);

  async function runAiAnalysis() {
    setAnalysisLoading(true);
    setAnalysis(null);
    try {
      const j = await fetch(`/api/signal`, { credentials: "include" }).then(r => r.json());
      const sig = (j.signals || []).find(s => (s.paire || "").startsWith(pair + "/"));
      if (!sig) {
        setAnalysis({ verdict: "Pas de signal disponible", conf: 0, points: [`${pair} n'est pas dans le scan en cours`], risk: "—" });
        setAnalysisLoading(false);
        return;
      }
      const dir = sig.action === "WAIT" ? sig.bias : sig.action;
      setAnalysis({
        verdict: `${dir} · ${sig.action === "WAIT" ? "biais en attente" : "setup validé"}`,
        conf: Math.round((sig.score || 0) * 10),
        points: [
          `Score ${sig.score}/10 (raw ${sig.score_raw12 || "?"}/12) · Mode ${sig.scan_mode}`,
          `Multi-TF ${sig.tf_alignment || "?"} · ${sig.trend_4h}/${sig.trend_1h}/${sig.trend_15m}`,
          `Wyckoff : ${sig.wyckoff_phase || "—"}`,
          `R/R net ${sig.rr_net} (frais OKX inclus) · ATR ${sig.atr_pct}%`,
          `Volume ${sig.volume_pct || sig.volume_pct_moyenne}% · Funding ${sig.funding_rate}`,
          `BTC corr : ${sig.btc_correlation} · BTC.D ${sig.btc_dominance}`,
        ],
        risk: sig.quality_ok
          ? `Signal éligible. Risque ${sig.risque_max_eur}€ pour gain min ${sig.gain_min_eur}€.`
          : `Filtres non passés : ${sig.quality_msg}`,
      });
    } catch (e) {
      setAnalysis({ verdict: "Erreur API", conf: 0, points: [String(e)], risk: "—" });
    }
    setAnalysisLoading(false);
  }

  const up = info.chg >= 0;
  const pairsList = ["BTC","ETH","SOL","XAU","DOGE","XRP","ADA","SUI","LTC"];
  const fundingPct = info.funding != null ? (info.funding * 100).toFixed(4) + "%" : "—";

  return (
    <div className="page chart-page">
      <div className="chart-toolbar">
        <div className="chart-toolbar-left">
          <div className="chips">
            {pairsList.map(p => (
              <div key={p} className={`chip ${pair===p?"active":""}`} onClick={()=>setPair(p)}>
                <PairLogo pair={p} size={18}/>
                <span>{p}</span>
              </div>
            ))}
          </div>
          <div className="tf-group">
            {Object.keys(TF_BAR_MAP).map(t => (
              <button key={t} className={`tf ${tf===t?"active":""}`} onClick={()=>setTf(t)}>{t}</button>
            ))}
          </div>
        </div>
        <div className="chart-toolbar-right">
          <button className="btn ghost sm ai-btn" onClick={runAiAnalysis} disabled={analysisLoading}>
            {analysisLoading ? <span className="spinner"></span> : <Icon.Sparkles size={13}/>}
            <span>Analyse FoxBot</span>
          </button>
        </div>
      </div>

      <div className="chart-wrap card">
        <div className="chart-price-bar">
          <div style={{ display:"flex", alignItems:"center", gap:12 }}>
            <PairLogo pair={pair} size={28}/>
            <div>
              <div style={{ fontSize:15, fontWeight:600, color:"var(--text-primary)", whiteSpace:"nowrap" }}>{pair}/USDT-PERP</div>
              <div className="muted" style={{ fontSize:11, fontFamily:"var(--font-mono)" }}>OKX · {TF_BAR_MAP[tf]}</div>
            </div>
          </div>
          <div className="price-stat">
            <span className="caption">PRIX</span>
            <span className="mono" style={{ fontSize:20, color:"var(--text-primary)", fontWeight:600 }}>
              {loading ? "—" : fmtNum(info.price)}
            </span>
            <span className={`mono ${up?"bull":"bear"}`} style={{ fontSize:12 }}>{fmtPct(info.chg)}</span>
          </div>
          <div className="price-stat">
            <span className="caption">VOLUME 24H</span>
            <span className="mono primary">{info.vol24h ? fmtNum(info.vol24h, { decimals: 0 }) : "—"}</span>
          </div>
          <div className="price-stat">
            <span className="caption">FUNDING</span>
            <span className={`mono ${info.funding > 0 ? "bull" : info.funding < 0 ? "bear" : "muted"}`}>{fundingPct}</span>
          </div>
        </div>
        <div className="chart-stage">
          <div ref={containerRef} className="chart-canvas"></div>
        </div>
        <div className="chart-indicators">
          {Object.entries(indicators).map(([k, v]) => (
            <button key={k} className={`ind ${v?"on":""}`} onClick={()=>setIndicators({...indicators, [k]: !v})}>
              <span className="ind-dot" style={{ background: v ? "var(--accent-400)" : "var(--text-dim)" }}></span>
              {k.toUpperCase()}
            </button>
          ))}
        </div>
      </div>

      {(analysis || analysisLoading) && (
        <div className="card pad ai-panel">
          <div className="ai-head">
            <Icon.Sparkles size={16} style={{ color:"var(--accent-400)" }}/>
            <span style={{ fontWeight:600, color:"var(--text-primary)" }}>FoxBot · Analyse {pair}/USDT</span>
            {analysis && (
              <span className="ai-conf">
                <span className="caption">SCORE</span>
                <span className={`mono ${analysis.conf >= 70 ? "bull" : analysis.conf >= 50 ? "warn" : "bear"}`} style={{ fontWeight:600 }}>{analysis.conf}/100</span>
              </span>
            )}
            <button className="icon-btn" style={{ marginLeft:"auto" }} onClick={()=>setAnalysis(null)}>
              <Icon.X size={14}/>
            </button>
          </div>
          {analysisLoading ? (
            <div className="ai-loading">
              <div className="skel" style={{ height:14, width:"60%" }}></div>
              <div className="skel" style={{ height:10, width:"90%" }}></div>
              <div className="skel" style={{ height:10, width:"80%" }}></div>
              <div className="skel" style={{ height:10, width:"86%" }}></div>
            </div>
          ) : analysis && (
            <>
              <div className="ai-verdict">
                <span style={{ fontWeight:500, color:"var(--text-primary)" }}>{analysis.verdict}</span>
              </div>
              <ul className="ai-points">
                {analysis.points.map((p, i) => (
                  <li key={i}><Icon.Check size={11} style={{ color:"var(--bull)", flexShrink:0 }}/> <span>{p}</span></li>
                ))}
              </ul>
              <div className="ai-risk">
                <Icon.AlertTriangle size={13} style={{ color:"var(--warn)" }}/>
                <span><strong style={{ color:"var(--warn)" }}>Risque · </strong>{analysis.risk}</span>
              </div>
            </>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ChartsScreen });
