import { useCallback, useEffect, useState } from "react";
import { apiFetch } from "../api/client";

export type FundsSummary = {
  ok: boolean;
  exchange: string;
  trading_day: string;
  total_trades: number;
  win_rate: number;
  profit_loss_ratio: number | null;
  total_funds: number | null;
  funding_usdt: number | null;
  trading_usdt: number | null;
  funding_usdc?: number | null;
  trading_usdc?: number | null;
  funding_label?: string;
  trading_label?: string;
  realtime_pnl: number | null;
  usdc_usdt_rate?: number;
  perp_inst_id?: string;
  detail?: string;
};

function fmtU(n: number | null | undefined) {
  if (n == null || Number.isNaN(n)) return "—";
  return `${n.toFixed(2)}U`;
}

function pnlClass(n: number | null | undefined) {
  if (n == null || Number.isNaN(n) || n === 0) return "";
  return n > 0 ? "pos-pnl-profit" : "pos-pnl-loss";
}

export default function FundsBar() {
  const [s, setS] = useState<FundsSummary | null>(null);

  const load = useCallback(() => {
    apiFetch<FundsSummary>("/api/funds/summary")
      .then(setS)
      .catch(() => {
        /* 顶栏静默失败，避免刷屏 */
      });
  }, []);

  useEffect(() => {
    load();
    const t = window.setInterval(load, 5000);
    return () => window.clearInterval(t);
  }, [load]);

  if (!s?.ok) return null;

  return (
    <div className="funds-bar-shell">
      <div className="funds-bar-inner">
        <div className="funds-bar" aria-label="资金与统计">
          <div className="funds-item funds-item--primary">
            <div className="funds-label">交易所</div>
            <div className="funds-value">{s.exchange || "—"}</div>
          </div>
          <div className="funds-item">
            <div className="funds-label">交易日</div>
            <div className="funds-value mono">{s.trading_day}</div>
          </div>
          <div className="funds-item funds-item--primary">
            <div className="funds-label">总交易</div>
            <div className="funds-value mono">{s.total_trades}</div>
          </div>
          <div className="funds-item">
            <div className="funds-label">胜率</div>
            <div className="funds-value mono">
              {(s.win_rate * 100).toFixed(0)}%
            </div>
          </div>
          <div className="funds-item" title="平均盈利 ÷ 平均亏损">
            <div className="funds-label">盈亏比</div>
            <div className="funds-value mono">
              {s.profit_loss_ratio != null
                ? s.profit_loss_ratio.toFixed(2)
                : "—"}
            </div>
          </div>
          <div className="funds-item funds-item--money">
            <div className="funds-label">总资金</div>
            <div className="funds-value mono">{fmtU(s.total_funds)}</div>
          </div>
          <div className="funds-item funds-item--money">
            <div className="funds-label">资金账户</div>
            <div className="funds-value mono">
              {s.funding_label || fmtU(s.funding_usdt)}
            </div>
          </div>
          <div className="funds-item funds-item--money">
            <div className="funds-label">交易账户</div>
            <div className="funds-value mono">
              {s.trading_label || fmtU(s.trading_usdt)}
            </div>
          </div>
          <div className="funds-item funds-item--pnl funds-item--money">
            <div className="funds-label">实时盈亏</div>
            <div className={`funds-value mono ${pnlClass(s.realtime_pnl)}`}>
              {s.realtime_pnl == null ? "—" : fmtU(s.realtime_pnl)}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}