// Local trades tab — наши сделки бота из /api/trades

const LocalTradesTab = () => {
  const { t } = useLang();
  const [trades, setTrades] = useState([]);
  const [summary, setSummary] = useState(null);
  const [filter, setFilter] = useState("all");

  useEffect(() => {
    Promise.all([
      fetch("/api/trades").then(r => r.json()).catch(() => []),
      fetch("/api/summary").then(r => r.json()).catch(() => null),
    ]).then(([tr, sum]) => {
      setTrades(Array.isArray(tr) ? tr : []);
      setSummary(sum);
    });
  }, []);

  const filtered = useMemo(() => {
    if (filter === "wins") return trades.filter(t => (t.pnl_usdt || 0) > 0);
    if (filter === "losses") return trades.filter(t => (t.pnl_usdt || 0) < 0);
    return trades;
  }, [filter, trades]);

  const wins = trades.filter(t => (t.pnl_usdt || 0) > 0).length;
  const losses = trades.filter(t => (t.pnl_usdt || 0) < 0).length;

  return (
    <>
      <div className="section">
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, flexWrap: "wrap" }}>
          <div className="segmented">
            <button className={filter === "all" ? "active" : ""} onClick={() => setFilter("all")}>{t("all")} <span style={{ color: "var(--text-4)", marginLeft: 4 }}>{trades.length}</span></button>
            <button className={filter === "wins" ? "active" : ""} onClick={() => setFilter("wins")}>Wins <span style={{ color: "var(--text-4)", marginLeft: 4 }}>{wins}</span></button>
            <button className={filter === "losses" ? "active" : ""} onClick={() => setFilter("losses")}>Losses <span style={{ color: "var(--text-4)", marginLeft: 4 }}>{losses}</span></button>
          </div>
        </div>
      </div>

      {summary && (
        <div className="section">
          <div className="stats-grid">
            <div className="stat-card">
              <div className="stat-label">{t("logged_trades")}</div>
              <div className="stat-big">{summary.total_closed || 0}</div>
              <div className="stat-sub">
                <span className="pos">{summary.wins || 0} W</span>
                <span style={{ color: "var(--text-4)" }}>·</span>
                <span className="neg">{summary.losses || 0} L</span>
              </div>
            </div>
            <div className="stat-card">
              <div className="stat-label">{t("net_pnl")}</div>
              <div className={"stat-big " + ((summary.total_pnl_usdt || 0) >= 0 ? "pos" : "neg")}>{fmtSigned(summary.total_pnl_usdt || 0)}</div>
              <div className="stat-sub">{t("after_fees")}</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">{t("win_rate")}</div>
              <div className="stat-big">{(summary.win_rate || 0).toFixed(2)}%</div>
            </div>
            <div className="stat-card">
              <div className="stat-label">avg RR</div>
              <div className="stat-big">{summary.avg_rr || "—"}</div>
              <div className="stat-sub">Best/Worst: <span className="pos">{fmtSigned(summary.best?.pnl_usdt)}</span> / <span className="neg">{fmtSigned(summary.worst?.pnl_usdt)}</span></div>
            </div>
          </div>
        </div>
      )}

      <div className="section">
        <div className="section-head">
          <div className="section-title"><Icon name="list" size={11} /> {t("trade_log")} <span className="count">{filtered.length}</span></div>
        </div>
        {filtered.length === 0 ? (
          <EmptyCard title={t("no_local")} msg={t("no_local_msg")} />
        ) : (
          <div className="card" style={{ overflow: "auto" }}>
            <table className="tbl">
              <thead>
                <tr>
                  <th>{t("opened")}</th>
                  <th>{t("symbol")}</th>
                  <th>{t("side")}</th>
                  <th className="num">{t("entry")}</th>
                  <th className="num">Закрытие</th>
                  <th className="num">SL</th>
                  <th className="num">TP</th>
                  <th>{t("status")}</th>
                  <th className="num">PnL</th>
                </tr>
              </thead>
              <tbody>
                {filtered.map(t => {
                  const pnlU = (t.pnl_usdt === null || t.pnl_usdt === undefined) ? null : Number(t.pnl_usdt);
                  const pnlP = (t.pnl_percent === null || t.pnl_percent === undefined) ? null : Number(t.pnl_percent);
                  const pnlCls = pnlU === null ? "muted" : (pnlU >= 0 ? "pos" : "neg");
                  return (
                  <tr key={t.id}>
                    <td className="mono muted" style={{ fontSize: 11.5 }}>{fmtTime(t.opened_at)}</td>
                    <td><span className="sym"><CoinIcon sym={(t.symbol || "").replace(/USDT$/, "")} /> {t.symbol}</span></td>
                    <td><SidePill side={t.direction} /></td>
                    <td className="num mono">{fmtPrice(t.entry_price)}</td>
                    <td className="num mono">{fmtPrice(t.exit_price)}</td>
                    <td className="num mono muted">{fmtPrice(t.sl)}</td>
                    <td className="num mono muted">{(t.tp_levels || []).map(x => fmtPrice(x)).join(", ") || "—"}</td>
                    <td><span className="pill neutral">{t.status}</span></td>
                    <td className="num">
                      <div className={"mono " + pnlCls} style={{ fontSize: 13 }}>{fmtSigned(pnlU)}</div>
                      <div className={"mono " + pnlCls} style={{ fontSize: 11, opacity: 0.85 }}>{fmtPct(pnlP)}</div>
                    </td>
                  </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        )}
      </div>
    </>
  );
};

Object.assign(window, { LocalTradesTab });