// ============================================================================
// KPI cards row — V3 Ops, threshold-aware
// ============================================================================

const KPICard = ({ label, value, unit, delta, deltaLabel, tone = "neutral", indicator = false }) => {
  return (
    <Card tone={tone} indicator={indicator} padding={14}>
      <div className="tb-kpi-label">
        <span>{label}</span>
        {tone !== "neutral" && <Dot status={tone === "danger" ? "fail" : tone === "warn" ? "warn" : "ok"} />}
      </div>
      <div className="tb-kpi-value">
        {value}
        {unit && <span className="tb-kpi-unit">{unit}</span>}
      </div>
      {delta && (
        <div className={`tb-kpi-delta mono ${deltaLabel ? "" : fmt.pnlClass(typeof delta === "number" ? delta : 0)}`}>
          {delta}
        </div>
      )}
    </Card>
  );
};

// Compact KPI row — live-first operational cards.
const KPIRow = ({ data }) => {
  const dbStatus = data.kpi.dbStatus; // ok | warn | fail
  const dbTone = dbStatus === "fail" ? "danger" : dbStatus === "warn" ? "warn" : "success";
  const acceptRate = data.kpi.acceptedCount / (data.kpi.acceptedCount + data.kpi.rejectedCount) * 100;
  const mddTone = data.kpi.maxDrawdownPct < -50 ? "danger" : data.kpi.maxDrawdownPct < -25 ? "warn" : "neutral";

  return (
    <div className="tb-kpi-row">
      <KPICard
        label="현재 자본"
        value={fmt.num(data.kpi.currentEquity)}
        unit="USD"
        delta={`${fmt.pnl(data.kpi.equityDelta)}  ·  ${fmt.pct(data.kpi.equityDeltaPct)}`}
        tone="success"
        indicator
      />
      <KPICard
        label="오늘 손익 (UTC)"
        value={fmt.pnl(data.kpi.todayPnl || 0)}
        unit="USD"
        delta={
          <span className={fmt.pnlClass(data.kpi.todayPnl || 0)}>
            {fmt.pct(data.kpi.todayPnlPct || 0)}
            {data.kpi.todayStartEquity > 0 && ` · 시작 ${fmt.num(data.kpi.todayStartEquity)}`}
          </span>
        }
        tone={data.kpi.todayPnl > 0 ? "success" : data.kpi.todayPnl < 0 ? "warn" : "neutral"}
        indicator={data.kpi.todayPnl !== 0}
      />
      <KPICard
        label="오늘 종료 (UTC)"
        value={data.kpi.todayClosedCount || 0}
        delta={<span className="pnl-flat">실현 PnL <span className={fmt.pnlClass(data.kpi.todayClosedPnl || 0)}>{fmt.pnl(data.kpi.todayClosedPnl || 0)}</span></span>}
        tone={data.kpi.todayClosedPnl > 0 ? "success" : data.kpi.todayClosedPnl < 0 ? "warn" : "neutral"}
        indicator={(data.kpi.todayClosedCount || 0) > 0}
      />
      <KPICard
        label="오픈 포지션"
        value={data.kpi.openPositions}
        delta={<span className="pnl-flat">대기 {data.kpi.pendingOrders || 0}건 · 실시간 PnL <span className={fmt.pnlClass(data.kpi.equityDelta)}>{fmt.pnl(data.kpi.equityDelta)}</span></span>}
      />
      <KPICard
        label="최대 낙폭 (MDD)"
        value={fmt.pct(data.kpi.maxDrawdownPct)}
        delta={<span className="pnl-flat">60일 실측 · 현재 {fmt.pct(data.kpi.currentDrawdownPct || 0)}</span>}
        tone={mddTone}
        indicator={mddTone !== "neutral"}
      />
      <KPICard
        label="시그널 수락률 (Live)"
        value={data.kpi.acceptedCount + data.kpi.rejectedCount > 0 ? `${acceptRate.toFixed(1)}%` : "—"}
        delta={<span className="pnl-flat">{fmt.abbr(data.kpi.acceptedCount, 1)} / {data.kpi.rejectedCount}</span>}
      />
    </div>
  );
};

Object.assign(window, { KPICard, KPIRow });