// Top sections: Hero, Positions, Orders, EmptyCard

const HeroStrip = ({ account }) => {
  const { t } = useLang();
  const sparkBase = useMemo(() => {
    // Псевдо-спарклайны на основе текущих значений
    const make = (drift) => {
      const a = []; let v = 50;
      for (let i = 0; i < 40; i++) { v += (Math.random() - 0.5 + drift) * 6; a.push(v); }
      return a;
    };
    return { equity: make(0.04), available: make(0.01), locked: make(-0.02), unrealized: make(0.06) };
  }, []);
  const eqTick = useTick(account.equity);
  const unTick = useTick(account.unrealized);

  const ratio = (account.equity || 0) > 0 ? (account.margin_ratio || 0) * 100 : 0;
  const availPct = (account.equity || 0) > 0 ? (account.available / account.equity) * 100 : 0;
  const unrealPct = (account.equity || 0) > 0 ? (account.unrealized / account.equity) * 100 : 0;

  const tiles = [
    {
      label: t("equity"), icon: "wallet", value: account.equity, isMoney: true,
      sub: <><span className="muted">USDT</span></>,
      spark: sparkBase.equity, sparkColor: "var(--accent)", tickCls: eqTick,
    },
    {
      label: t("available"), icon: "coins", value: account.available, isMoney: true,
      sub: <><span className="muted">{t("free_margin")} · </span><span>{availPct.toFixed(1)}%</span></>,
      spark: sparkBase.available, sparkColor: "var(--text-3)",
    },
    {
      label: t("locked"), icon: "lock", value: account.locked, isMoney: true,
      sub: <><span className="muted">{t("margin_ratio")} · </span><span className={ratio > 80 ? "neg" : ""}>{ratio.toFixed(1)}%</span></>,
      spark: sparkBase.locked, sparkColor: "var(--warn)",
    },
    {
      label: t("unrealized"), icon: "trending", value: account.unrealized, colored: true,
      sub: <><span className={account.unrealized >= 0 ? "pos" : "neg"}>{fmtPct(unrealPct)}</span> <span style={{ color: "var(--text-4)" }}>· {t("of_equity")}</span></>,
      spark: sparkBase.unrealized,
      sparkColor: account.unrealized >= 0 ? "var(--long)" : "var(--short)",
      tickCls: unTick,
    },
  ];

  return (
    <div className="hero-grid">
      {tiles.map(tile => (
        <div key={tile.label} className={"hero-tile " + (tile.tickCls || "")}>
          <div className="tile-label">
            <Icon name={tile.icon} size={12} /> {tile.label}
          </div>
          <div className="tile-value">
            <span className={tile.colored ? (tile.value >= 0 ? "pos" : "neg") : ""}>
              {tile.colored ? fmtSigned(tile.value) : fmtMoney(tile.value)}
            </span>
            <span className="ccy">USDT</span>
          </div>
          <div className="tile-sub">{tile.sub}</div>
          <div className="tile-spark">
            <Sparkline data={tile.spark} color={tile.sparkColor} />
          </div>
        </div>
      ))}
    </div>
  );
};

// ---------- Positions ----------
const PositionsTable = ({ positions, onClosePosition }) => {
  const { t } = useLang();
  if (!positions.length) {
    return <EmptyCard title={t("no_positions_title")} msg={t("no_positions_msg")} />;
  }
  return (
    <div className="card" style={{ overflow: "auto" }}>
      <table className="tbl">
        <thead>
          <tr>
            <th>{t("symbol")}</th>
            <th>{t("side")}</th>
            <th className="num">{t("size")}</th>
            <th className="num">{t("entry")}</th>
            <th className="num">{t("mark")}</th>
            <th className="num">{t("liq")}</th>
            <th className="num">{t("lev")}</th>
            <th className="num">{t("margin")}</th>
            <th className="num">{t("funding")}</th>
            <th className="num">{t("pnl_pct")}</th>
            <th style={{ width: 80 }}></th>
          </tr>
        </thead>
        <tbody>
          {positions.map(p => (
            <PositionRow key={p.id} p={p} t={t} onClosePosition={onClosePosition} />
          ))}
        </tbody>
      </table>
    </div>
  );
};

const PositionRow = ({ p, t, onClosePosition }) => {
  const tickCls = useTick(p.mark);
  return (
    <tr>
      <td><span className="sym"><CoinIcon sym={p.sym} /> {p.sym}-PERP</span></td>
      <td><SidePill side={p.side} /></td>
      <td className="num mono">{p.size}</td>
      <td className="num mono">{fmtPrice(p.entry)}</td>
      <td className={"num mono " + tickCls}>{fmtPrice(p.mark)}</td>
      <td className="num mono muted">{fmtPrice(p.liq)}</td>
      <td className="num mono"><span style={{ padding: "1px 5px", borderRadius: 3, background: "var(--panel-2)", border: "1px solid var(--border)", fontSize: 11 }}>{p.leverage}×</span></td>
      <td className="num mono">{fmtMoney(p.margin)}</td>
      <td className="num mono" style={{ color: p.funding < 0 ? "var(--long)" : p.funding > 0 ? "var(--short)" : "var(--text-3)" }}>
        {p.funding ? fmtSigned(p.funding, 4) : "—"}
      </td>
      <td className="num">
        <div style={{ display: "inline-flex", alignItems: "center", gap: 10, justifyContent: "flex-end" }}>
          <PnLBar pct={p.pnlPct} />
          <span style={{ textAlign: "right", minWidth: 96 }}>
            <div className={"mono " + (p.pnl >= 0 ? "pos" : "neg")} style={{ fontSize: 13, fontWeight: 500 }}>{fmtSigned(p.pnl)}</div>
            <div className={"mono " + (p.pnlPct >= 0 ? "pos" : "neg")} style={{ fontSize: 10.5, opacity: 0.75 }}>{fmtPct(p.pnlPct)}</div>
          </span>
        </div>
      </td>
      <td>
        {onClosePosition && (
          <button className="row-action" onClick={() => onClosePosition(p)}>
            <Icon name="x" size={11}/> {t("close_pos")}
          </button>
        )}
      </td>
    </tr>
  );
};

// ---------- Active orders ----------
const OrdersGrid = ({ orders }) => {
  const { t } = useLang();
  if (!orders.length) {
    return <EmptyCard title={t("no_orders_title")} msg={t("no_orders_msg")} />;
  }
  return (
    <div className="orders-grid">
      {orders.map(o => {
        const fillPct = o.qty > 0 ? (o.filled / o.qty) * 100 : 0;
        return (
          <div key={o.id} className="order-card">
            <div className="order-card-head">
              <span className="sym" style={{ fontSize: 12.5 }}>
                <CoinIcon sym={o.sym} size={16} /> {o.sym}-PERP
              </span>
              <span style={{ display: "flex", gap: 6, alignItems: "center" }}>
                <span className="order-type">{o.type}</span>
                <SidePill side={o.side} />
              </span>
            </div>
            <div className="order-card-row">
              <span className="k">{o.trigger ? "Trigger" : t("price")}</span>
              <span className="v">{fmtPrice(o.trigger || o.price)}</span>
            </div>
            <div className="order-card-row">
              <span className="k">{t("size_filled")}</span>
              <span className="v">{o.qty} {o.filled > 0 && <span className="muted">({o.filled.toFixed(2)})</span>}</span>
            </div>
            {o.filled > 0 && (
              <div className="order-card-progress">
                <div style={{ width: fillPct + "%" }} />
              </div>
            )}
            <div className="order-card-row" style={{ marginTop: 2 }}>
              <span style={{ display: "flex", gap: 6, alignItems: "center" }}>
                {o.postOnly && <span className="order-type">POST</span>}
                {o.reduce && <span className="order-type" style={{ color: "var(--accent)", borderColor: "var(--accent-dim)" }}>REDUCE</span>}
                <span className="muted mono" style={{ fontSize: 11 }}>{o.status}</span>
              </span>
            </div>
          </div>
        );
      })}
    </div>
  );
};

const EmptyCard = ({ title, msg, hint, icon = "info" }) => (
  <div className="empty">
    <div className="empty-icon"><Icon name={icon} size={16} /></div>
    <div className="empty-title">{title}</div>
    <div className="empty-msg">{msg}</div>
    {hint && <div className="empty-hint">{hint}</div>}
  </div>
);

Object.assign(window, { HeroStrip, PositionsTable, OrdersGrid, EmptyCard });