// Bots tab — UI для торговых ботов OKX (Grid / Recurring / Signal).
// Только просмотр: активные + история + детали. Создание ботов через UI пока не делаем.

const BOT_TYPE_LABELS = {
  grid: "Spot Grid",
  contract_grid: "Futures Grid",
  moon_grid: "Moon Grid",
  recurring: "DCA / Recurring",
  signal: "Signal",
};

const BOT_TYPE_COLORS = {
  grid:          "var(--accent)",
  contract_grid: "var(--long)",
  moon_grid:     "var(--warn)",
  recurring:     "var(--text-2)",
  signal:        "var(--short)",
};

const BotTypePill = ({ subType }) => {
  const label = BOT_TYPE_LABELS[subType] || subType;
  const color = BOT_TYPE_COLORS[subType] || "var(--text-3)";
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "2px 8px", fontSize: 10.5, fontWeight: 600,
      letterSpacing: "0.04em", borderRadius: "var(--r-1)",
      border: "1px solid " + color, color,
      fontFamily: "var(--font-mono)",
      whiteSpace: "nowrap",
    }}>{label}</span>
  );
};

const StatePill = ({ state }) => {
  const s = String(state || "").toLowerCase();
  const isRunning = s === "running" || s === "live";
  const isPaused = s === "paused" || s === "pause";
  const cls = isRunning ? "long" : isPaused ? "warn" : "short";
  const text = isRunning ? "RUNNING" : isPaused ? "PAUSED" : s.toUpperCase() || "?";
  return <span className={"pill " + cls}>{text}</span>;
};

const fmtRuntime = (ms) => {
  if (!ms || ms <= 0) return "—";
  const sec = ms / 1000;
  if (sec < 3600) return Math.round(sec / 60) + "m";
  if (sec < 86400) return Math.round(sec / 3600) + "h";
  return Math.round(sec / 86400) + "d";
};

const BotsTab = ({ activeEx, period, periodParams, rangeStr, setPeriod, applyCustom }) => {
  const { t } = useLang();
  const [active, setActive] = useState([]);
  const [history, setHistory] = useState([]);
  const [analytics, setAnalytics] = useState(null);
  const [loading, setLoading] = useState(false);
  const [loadingHeavy, setLoadingHeavy] = useState(false);
  const [error, setError] = useState("");
  const [openBot, setOpenBot] = useState(null);  // выбранный бот для модалки

  const meta = (window.EXCHANGE_META || {})[activeEx] || {};
  const supportsBots = meta.supports_bots === true;

  const loadLight = useCallback(async () => {
    if (!supportsBots || !window.creds.hasActive()) return;
    setLoading(true);
    try {
      const r = await fetch(`/api/ex/${activeEx}/bots/active`, { headers: window.creds.headers() });
      if (!r.ok) {
        const text = await r.text();
        throw new Error(`HTTP ${r.status}: ${text}`);
      }
      const data = await r.json();
      setActive(Array.isArray(data) ? data : []);
      setError("");
    } catch (e) {
      setError(e.message || String(e));
    } finally {
      setLoading(false);
    }
  }, [activeEx, supportsBots]);

  const loadHeavy = useCallback(async () => {
    if (!supportsBots || !window.creds.hasActive()) return;
    setHistory([]); setAnalytics(null);
    setLoadingHeavy(true);
    try {
      const base = "/api/ex/" + activeEx + "/bots";
      const [histResp, anResp] = await Promise.allSettled([
        fetch(base + "/history?" + periodParams.toString(), { headers: window.creds.headers() }).then(r => r.json()),
        fetch(base + "/analytics?" + periodParams.toString(), { headers: window.creds.headers() }).then(r => r.json()),
      ]);
      if (histResp.status === "fulfilled") setHistory(histResp.value?.bots || []);
      if (anResp.status === "fulfilled") setAnalytics(anResp.value);
    } finally {
      setLoadingHeavy(false);
    }
  }, [activeEx, periodParams, supportsBots]);

  useEffect(() => {
    let cancelled = false;
    (async () => {
      await loadLight();
      if (cancelled) return;
      await loadHeavy();
    })();
    return () => { cancelled = true; };
  }, [activeEx, periodParams, loadLight, loadHeavy]);

  if (!supportsBots) {
    return (
      <div style={{ padding: "60px 16px" }}>
        <div className="empty" style={{ padding: "40px 32px", maxWidth: 520, margin: "0 auto" }}>
          <div className="empty-icon"><Icon name="info" size={20} /></div>
          <div className="empty-title">{t("bot_unsupported_title")}</div>
          <div className="empty-msg">{t("bot_unsupported_msg")}</div>
        </div>
      </div>
    );
  }

  if (error) {
    return (
      <div style={{ padding: "60px 16px" }}>
        <div className="empty" style={{ padding: "30px 24px", maxWidth: 520, margin: "0 auto" }}>
          <div className="empty-icon"><Icon name="alert" size={20} /></div>
          <div className="empty-title">{t("bot_unsupported_title")}</div>
          <div className="empty-msg">{error.substring(0, 300)}</div>
          <button className="btn" onClick={loadLight} style={{ marginTop: 12 }}>
            <Icon name="refresh" size={12} /> {t("retry")}
          </button>
        </div>
      </div>
    );
  }

  const activeTotalPnl = active.reduce((s, b) => s + (b.totalPnl || 0), 0);
  const activeInvested = active.reduce((s, b) => s + (b.investment || 0), 0);
  const histAg = analytics?.history;
  const histWinRate = histAg && (histAg.wins + histAg.losses) > 0
    ? (histAg.wins / (histAg.wins + histAg.losses)) * 100 : null;

  return (
    <>
      {/* Hero */}
      <div className="section">
        <div className="hero-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))" }}>
          <div className="hero-tile">
            <div className="tile-label"><Icon name="activity" size={12} /> {t("bots_total")}</div>
            <div className="tile-value">
              {loading ? <span className="skel-bar" style={{ width: 60, height: 24 }} /> : active.length}
            </div>
            <div className="tile-sub">{loading ? "" : t("bots_active").toLowerCase()}</div>
          </div>
          <div className="hero-tile">
            <div className="tile-label"><Icon name="trending" size={12} /> {t("bots_total_pnl")}</div>
            <div className={"tile-value " + (activeTotalPnl >= 0 ? "pos" : "neg")}>
              {loading ? <span className="skel-bar" style={{ width: 100, height: 24 }} /> :
                <>{fmtSigned(activeTotalPnl)} <span className="ccy">USDT</span></>}
            </div>
            <div className="tile-sub">{t("bots_active").toLowerCase()}</div>
          </div>
          <div className="hero-tile">
            <div className="tile-label"><Icon name="wallet" size={12} /> {t("bots_invested")}</div>
            <div className="tile-value">
              {loading ? <span className="skel-bar" style={{ width: 100, height: 24 }} /> :
                <>{fmtMoney(activeInvested)} <span className="ccy">USDT</span></>}
            </div>
            <div className="tile-sub">{active.length} {active.length === 1 ? "bot" : "bots"}</div>
          </div>
          <div className="hero-tile">
            <div className="tile-label"><Icon name="trophy" size={12} /> {t("bots_win_rate")} · {period}</div>
            <div className="tile-value">
              {loadingHeavy ? <span className="skel-bar" style={{ width: 80, height: 24 }} /> :
                histWinRate !== null ? histWinRate.toFixed(0) + "%" : "—"}
            </div>
            <div className="tile-sub">
              {histAg ? <><span className="pos">{histAg.wins}W</span> / <span className="neg">{histAg.losses}L</span></> : "—"}
            </div>
          </div>
        </div>
      </div>

      {/* Активные боты */}
      <div className="section">
        <div className="section-head">
          <div className="section-title">
            <Icon name="activity" size={11} /> {t("bots_active")}
            <span className="count">{active.length}</span>
          </div>
        </div>
        <BotsTable bots={active} loading={loading} onOpen={setOpenBot} />
      </div>

      {/* Период */}
      <div className="section">
        <PeriodBar period={period} setPeriod={setPeriod} range={rangeStr} onApplyCustom={applyCustom} />
      </div>

      {/* Разбивка по типам */}
      {loadingHeavy ? <div className="section"><SkeletonCards count={2} /></div> : analytics?.history?.by_type?.length > 0 && (
        <div className="section">
          <div className="section-head">
            <div className="section-title"><Icon name="barchart" size={11} /> {t("bots_by_type")}</div>
          </div>
          <BotsByTypeRow byType={analytics.history.by_type} />
        </div>
      )}

      {/* История */}
      <div className="section">
        <div className="section-head">
          <div className="section-title">
            <Icon name="list" size={11} /> {t("bots_history")}
            <span className="count">{history.length}</span>
          </div>
        </div>
        {loadingHeavy ? <SkeletonRows rows={5} cols={8} /> : <BotsTable bots={history} historical onOpen={setOpenBot} />}
      </div>

      {openBot && (
        <BotDetailsModal bot={openBot} activeEx={activeEx} onClose={() => setOpenBot(null)} />
      )}
    </>
  );
};

// ---------- Таблица ботов ----------
const BotsTable = ({ bots, loading, historical, onOpen }) => {
  const { t } = useLang();
  if (loading) return <SkeletonRows rows={4} cols={8} />;
  if (!bots.length) {
    return <EmptyCard
      title={t(historical ? "bots_no_history" : "bots_no_active")}
      msg={t(historical ? "bots_no_history_msg" : "bots_no_active_msg")}
      icon="activity"
    />;
  }
  return (
    <div className="card" style={{ overflow: "auto" }}>
      <table className="tbl">
        <thead>
          <tr>
            <th>{t("symbol")}</th>
            <th>{t("bot_type")}</th>
            <th>{t("bot_state")}</th>
            <th className="num">{t("bot_invest")}</th>
            <th className="num">{t("bot_pnl")}</th>
            <th className="num">{t("bot_pnl_pct")}</th>
            <th className="num">{t("bot_runtime")}</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          {bots.map((b, i) => {
            const pnl = b.totalPnl || 0;
            const pnlPct = (b.totalPnlRatio || 0) * 100;
            const sym = b.symbol || b.instId || "?";
            const base = String(sym).replace(/USDT$/, "").replace(/USDC$/, "").replace(/-.*$/, "");
            const rt = historical
              ? Math.max(0, (b.updateTime || 0) - (b.createTime || 0))
              : Math.max(0, Date.now() - (b.createTime || 0));
            return (
              <tr key={b.algoId + ":" + i} onClick={() => onOpen(b)} style={{ cursor: "pointer" }}>
                <td><span className="sym"><CoinIcon sym={base} /> {sym}</span></td>
                <td><BotTypePill subType={b.botSubType || b.botType} /></td>
                <td><StatePill state={b.state} /></td>
                <td className="num mono">{fmtMoney(b.investment)} <span className="muted">{b.currency || "USDT"}</span></td>
                <td className={"num mono " + (pnl >= 0 ? "pos" : "neg")}>{fmtSigned(pnl)}</td>
                <td className={"num mono " + (pnl >= 0 ? "pos" : "neg")}>
                  {b.totalPnlRatio !== undefined ? fmtPct(pnlPct) : "—"}
                </td>
                <td className="num mono muted">{fmtRuntime(rt)}</td>
                <td style={{ width: 28, textAlign: "right" }}>
                  <Icon name="arrowRight" size={11} style={{ color: "var(--text-4)" }} />
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>
    </div>
  );
};

// ---------- Разбивка по типам ----------
const BotsByTypeRow = ({ byType }) => {
  const { t } = useLang();
  return (
    <div className="stats-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))" }}>
      {byType.map(d => {
        const winRate = (d.wins + d.losses) > 0 ? (d.wins / (d.wins + d.losses)) * 100 : null;
        return (
          <div className="stat-card" key={d.type}>
            <div className="stat-label" style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
              <BotTypePill subType={d.type} />
              <span className="muted mono" style={{ fontSize: 11 }}>{d.count}</span>
            </div>
            <div className={"stat-big " + (d.pnl >= 0 ? "pos" : "neg")} style={{ marginTop: 8 }}>
              {fmtSigned(d.pnl)} <span className="ccy">USDT</span>
            </div>
            <div className="muted mono" style={{ fontSize: 11, marginTop: 4 }}>
              {winRate !== null && (<>{winRate.toFixed(0)}% wins · </>)}
              {fmtMoney(d.investment)} {t("bots_invested").toLowerCase()}
            </div>
          </div>
        );
      })}
    </div>
  );
};

// ---------- Модалка деталей бота ----------
const BotDetailsModal = ({ bot, activeEx, onClose }) => {
  const { t } = useLang();
  const [details, setDetails] = useState(null);
  const [subOrders, setSubOrders] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState("");

  useEffect(() => {
    (async () => {
      setLoading(true); setError("");
      try {
        const subType = bot.botSubType || "contract_grid";
        const r = await fetch(
          `/api/ex/${activeEx}/bots/${bot.algoId}?type=${encodeURIComponent(subType)}`,
          { headers: window.creds.headers() }
        );
        if (!r.ok) throw new Error("HTTP " + r.status);
        const data = await r.json();
        setDetails(data.details || {});
        setSubOrders(data.subOrders || []);
      } catch (e) {
        setError(e.message || String(e));
      } finally {
        setLoading(false);
      }
    })();
  }, [bot.algoId, activeEx]);

  const pnl = bot.totalPnl || 0;
  const sym = bot.symbol || bot.instId || "?";
  const base = String(sym).replace(/USDT$/, "").replace(/USDC$/, "").replace(/-.*$/, "");
  const created = bot.createTime ? fmtTime(bot.createTime) : "—";
  const updated = bot.updateTime ? fmtTime(bot.updateTime) : "—";

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" style={{ width: "min(720px, 92vw)", maxHeight: "85vh", display: "flex", flexDirection: "column" }}
        onClick={e => e.stopPropagation()}>
        <div className="modal-head">
          <h2>
            <CoinIcon sym={base} size={16} />
            <span style={{ marginLeft: 6 }}>{sym}</span>
            <BotTypePill subType={bot.botSubType || bot.botType} />
            <StatePill state={bot.state} />
          </h2>
          <button className="icon-btn" onClick={onClose}><Icon name="x" size={14} /></button>
        </div>
        <div className="modal-body" style={{ overflowY: "auto" }}>
          <div className="stats-grid" style={{ gridTemplateColumns: "1fr 1fr 1fr", gap: 10 }}>
            <div className="stat-card">
              <div className="stat-label">{t("bot_invest")}</div>
              <div className="stat-big mono">{fmtMoney(bot.investment)} <span className="ccy">{bot.currency || "USDT"}</span></div>
            </div>
            <div className="stat-card">
              <div className="stat-label">{t("bot_pnl")}</div>
              <div className={"stat-big mono " + (pnl >= 0 ? "pos" : "neg")}>
                {fmtSigned(pnl)} <span className="ccy">USDT</span>
              </div>
              {bot.totalPnlRatio !== undefined && (
                <div className={"muted mono " + (pnl >= 0 ? "pos" : "neg")} style={{ fontSize: 11 }}>
                  {fmtPct((bot.totalPnlRatio || 0) * 100)}
                </div>
              )}
            </div>
            <div className="stat-card">
              <div className="stat-label">{t("bot_runtime")}</div>
              <div className="stat-big mono">{fmtRuntime(Math.max(0, Date.now() - (bot.createTime || 0)))}</div>
              <div className="muted mono" style={{ fontSize: 11 }}>{t("bot_created")}: {created}</div>
            </div>
          </div>

          {(bot.minPx > 0 || bot.maxPx > 0) && (
            <div className="stat-card" style={{ marginTop: 10 }}>
              <div className="stat-label">{t("bot_range")}</div>
              <div className="stat-big mono">
                {fmtPrice(bot.minPx)} <span className="muted">→</span> {fmtPrice(bot.maxPx)}
              </div>
              {bot.gridNum > 0 && (
                <div className="muted mono" style={{ fontSize: 11 }}>
                  {bot.gridNum} {t("bot_grids").toLowerCase()} · {bot.leverage}× {t("lev").toLowerCase()}
                </div>
              )}
            </div>
          )}

          {/* Sub-orders */}
          <div style={{ marginTop: 16 }}>
            <div className="section-title" style={{ marginBottom: 8 }}>
              <Icon name="list" size={11} /> {t("bot_sub_orders")}
              <span className="count">{subOrders.length}</span>
            </div>
            {loading ? <SkeletonRows rows={4} cols={5} /> :
             error ? <div className="empty-msg" style={{ color: "var(--short)" }}>⚠ {error}</div> :
             subOrders.length === 0 ? (
               <div className="empty-msg muted">{t("bot_no_sub_orders")}</div>
             ) : (
              <div className="card" style={{ overflow: "auto", maxHeight: 280 }}>
                <table className="tbl">
                  <thead>
                    <tr>
                      <th>Time</th>
                      <th>{t("side")}</th>
                      <th className="num">{t("price")}</th>
                      <th className="num">{t("qty")}</th>
                      <th>{t("bot_state")}</th>
                    </tr>
                  </thead>
                  <tbody>
                    {subOrders.slice(0, 50).map((o, i) => {
                      const side = String(o.side || "").toUpperCase();
                      return (
                        <tr key={(o.ordId || i) + ":" + i}>
                          <td className="mono muted" style={{ fontSize: 11.5 }}>{fmtTime(Number(o.cTime || o.uTime || 0))}</td>
                          <td><span className={"pill " + (side === "BUY" ? "long" : "short")}>{side}</span></td>
                          <td className="num mono">{fmtPrice(Number(o.px || o.fillPx || 0))}</td>
                          <td className="num mono">{Number(o.sz || o.fillSz || 0)}</td>
                          <td className="mono muted" style={{ fontSize: 11 }}>{String(o.state || "").toLowerCase()}</td>
                        </tr>
                      );
                    })}
                  </tbody>
                </table>
              </div>
             )
            }
          </div>
        </div>
        <div className="modal-foot">
          <button className="btn ghost" onClick={onClose}>Закрыть</button>
        </div>
      </div>
    </div>
  );
};

Object.assign(window, { BotsTab });