/* eslint-disable */
// StatusDisplay — positions, runners (Telegram/Slack), system health, actions log
// Props (TS): { positions?: Position[]; runners?: Runner[]; system?: Metric[]; log?: LogEntry[] }

const POSITIONS = [
  { sym: "BTC/USDT", side: "LONG",  qty: 0.25,  entry: 65432.10, mark: 67812.45, pnl:  595.59, pct:  3.64 },
  { sym: "ETH/USDT", side: "LONG",  qty: 2.00,  entry:  3120.50, mark:  3216.78, pnl:  192.56, pct:  3.09 },
  { sym: "SOL/USDT", side: "SHORT", qty: 10.0,  entry:   175.80, mark:   168.35, pnl:   74.50, pct:  4.24 },
  { sym: "BNB/USDT", side: "LONG",  qty: 5.00,  entry:   587.11, mark:   589.26, pnl:   10.75, pct:  0.37 },
];

const RUNNERS = [
  { name: "telegram-gateway", status: "good", uptime: "12d 4h 22m", lastBeat: 1,  region: "us-east-1", msgs: "1.2k/d" },
  { name: "slack-gateway",    status: "good", uptime: "8d  11h 03m", lastBeat: 2, region: "eu-west-1", msgs: "640/d"  },
  { name: "trading-agent",    status: "good", uptime: "12d 4h 22m", lastBeat: 1,  region: "us-east-1", msgs: "—"      },
  { name: "data-streamer",    status: "warn", uptime: "0d  0h 14m",  lastBeat: 8, region: "us-east-1", msgs: "reconnecting" },
];

const SYSTEM = [
  { label: "CPU Usage",     value: 34, status: "good" },
  { label: "Memory Usage",  value: 58, status: "warn" },
  { label: "Disk Usage",    value: 41, status: "good" },
  { label: "Network I/O",   value: 23, status: "good" },
  { label: "Event-loop lag",value: 12, status: "good", unit: "ms" },
];

const LOG = [
  { t: "2024-05-24 10:31:58", src: "trading-agent", level: "EXECUTED", msg: 'close_position {"instrument":"SOL/USDT","side":"SHORT","qty":2.5,"reason":"take_profit","id":"§"}' },
  { t: "2024-05-24 10:31:45", src: "data-streamer", level: "INFO",     msg: "market_data synced for BTC/USDT (seq: 452341)" },
  { t: "2024-05-24 10:31:30", src: "trading-agent", level: "EXECUTED", msg: 'place_order {"instrument":"ETH/USDT","side":"BUY","type":"LIMIT","qty":1.0,"price":3190.00,"id":"§"}' },
  { t: "2024-05-24 10:31:12", src: "telegram-gw",   level: "ALERT",    msg: "price_threshold triggered for BTC/USDT above 67,500.00" },
  { t: "2024-05-24 10:30:55", src: "data-streamer", level: "INFO",     msg: "order_book snapshot updated for 5 instruments" },
  { t: "2024-05-24 10:30:41", src: "trading-agent", level: "EXECUTED", msg: 'cancel_order {"instrument":"BNB/USDT","order_id":"§","reason":"strategy_update"}' },
  { t: "2024-05-24 10:30:28", src: "trading-agent", level: "RISK",     msg: "all positions within limits (max_drawdown: 2.13%)" },
  { t: "2024-05-24 10:30:15", src: "data-streamer", level: "INFO",     msg: "trades synced (24 new trades)" },
  { t: "2024-05-24 10:30:02", src: "slack-gw",      level: "INFO",     msg: 'message posted to #pnl-daily by user "§"' },
];

const LEVEL_COLOR = {
  EXECUTED: "var(--accent)",
  INFO:     "var(--info)",
  ALERT:    "var(--warn)",
  RISK:     "var(--violet)",
  ERROR:    "var(--bad)",
};

function StatusDisplay() {
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick((t) => t + 1), 1000);
    return () => clearInterval(id);
  }, []);
  const updatedAt = useMemo(() => {
    const d = new Date();
    return `${String(d.getHours()).padStart(2,"0")}:${String(d.getMinutes()).padStart(2,"0")}:${String(d.getSeconds()).padStart(2,"0")} UTC`;
    // eslint-disable-next-line
  }, [tick]);

  const totalPnl = POSITIONS.reduce((a, p) => a + p.pnl, 0);
  const totalPct = POSITIONS.reduce((a, p) => a + p.pct, 0) / POSITIONS.length;

  return (
    <div style={{
      padding: 24,
      display: "grid",
      gridTemplateColumns: "1.4fr 1fr",
      gap: 18,
      gridAutoRows: "min-content",
      minHeight: 0,
    }}>
      {/* page header — spans both columns */}
      <header style={{
        gridColumn: "1 / -1",
        display: "flex", alignItems: "center", gap: 14,
        padding: "0 4px 4px",
      }}>
        <span className="mono" style={{
          fontSize: 11, letterSpacing: "0.14em", textTransform: "uppercase",
          color: "var(--text-3)"
        }}>System Status</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 8, color: "var(--good)", fontSize: 13, fontWeight: 600 }}>
          <StatusDot tone="good"/> All Systems Operational
        </span>
        <span style={{ flex: 1 }}/>
        <span className="mono" style={{ fontSize: 12, color: "var(--text-3)" }}>Updated: {updatedAt}</span>
        <IconButton title="Refresh"><I.Refresh size={14}/></IconButton>
      </header>

      {/* Trading Positions */}
      <Card title="Trading Positions" subtitle="Live mark-to-market" right={
        <Pill tone={totalPnl >= 0 ? "good" : "bad"} soft>
          {totalPnl >= 0 ? "+" : "−"}{Math.abs(totalPnl).toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })} USDT
        </Pill>
      }>
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead>
            <tr>
              {["INSTRUMENT", "SIDE", "QTY", "AVG ENTRY", "MARK", "UNREALIZED P&L", "P&L %"].map((h, i) => (
                <th key={h} className="mono" style={{
                  textAlign: i > 1 ? "right" : "left",
                  fontSize: 10.5, fontWeight: 600,
                  color: "var(--text-4)",
                  letterSpacing: "0.10em",
                  padding: "0 0 10px",
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {POSITIONS.map((p, i) => (
              <tr key={p.sym} style={{ borderTop: "1px solid var(--border-s)" }}>
                <td style={{ padding: "12px 0", fontWeight: 600 }}>{p.sym}</td>
                <td style={{ padding: "12px 0" }}>
                  <span className="mono" style={{
                    color: p.side === "LONG" ? "var(--good)" : "var(--bad)",
                    fontSize: 12, fontWeight: 600,
                    letterSpacing: "0.04em",
                  }}>{p.side}</span>
                </td>
                <td className="mono" style={{ padding: "12px 0", textAlign: "right" }}>{p.qty.toFixed(4)}</td>
                <td className="mono" style={{ padding: "12px 0", textAlign: "right" }}>{fmtMoney(p.entry)}</td>
                <td className="mono" style={{ padding: "12px 0", textAlign: "right" }}>{fmtMoney(p.mark)}</td>
                <td className="mono" style={{ padding: "12px 0", textAlign: "right", color: "var(--good)" }}>
                  +{fmtMoney(p.pnl)} <span style={{ color: "var(--text-4)" }}>USDT</span>
                </td>
                <td className="mono" style={{ padding: "12px 0", textAlign: "right", color: "var(--good)" }}>+{p.pct.toFixed(2)}%</td>
              </tr>
            ))}
            <tr style={{ borderTop: "1px solid var(--border-m)" }}>
              <td colSpan={5} className="mono" style={{ padding: "14px 0 0", color: "var(--text-3)", fontSize: 12 }}>
                Total Unrealized P&L
              </td>
              <td className="mono" style={{ padding: "14px 0 0", textAlign: "right", color: "var(--good)", fontWeight: 600 }}>
                +{fmtMoney(totalPnl)} USDT
              </td>
              <td className="mono" style={{ padding: "14px 0 0", textAlign: "right", color: "var(--good)", fontWeight: 600 }}>
                +{totalPct.toFixed(2)}%
              </td>
            </tr>
          </tbody>
        </table>
      </Card>

      {/* Portfolio summary */}
      <Card title="Portfolio Summary" subtitle="Equity + realised P&L">
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
          <MiniMetric label="Total Equity" value="128,547.32" unit="USDT" delta="+2.87%" deltaTone="good" foot="24h change"/>
          <MiniMetric label="Available" value="42,392.21" unit="USDT" delta="33.00%" deltaTone="info" foot="of total equity"/>
          <MiniMetric label="Unrealised P&L" value="+873.40" unit="USDT" delta="+3.43%" deltaTone="good" foot="of total equity"/>
          <MiniMetric label="Realised P&L (7d)" value="+2,341.75" unit="USDT" delta="+9.11%" deltaTone="good" foot="rolling 7d"/>
        </div>
      </Card>

      {/* Runner health */}
      <Card title="Runner Health" subtitle="Gateways and worker processes" right={
        <IconButton title="Refresh"><I.Refresh size={13}/></IconButton>
      }>
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead>
            <tr>
              {["SERVICE", "STATUS", "UPTIME", "LAST HEARTBEAT", "REGION"].map((h, i) => (
                <th key={h} className="mono" style={{
                  textAlign: "left", fontSize: 10.5, fontWeight: 600,
                  color: "var(--text-4)", letterSpacing: "0.10em",
                  padding: "0 0 10px",
                }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {RUNNERS.map((r) => (
              <tr key={r.name} style={{ borderTop: "1px solid var(--border-s)" }}>
                <td style={{ padding: "12px 0" }}>
                  <span className="mono" style={{ fontSize: 13 }}>{r.name}</span>
                  {r.msgs !== "—" && <div style={{ fontSize: 11, color: "var(--text-4)" }}>{r.msgs}</div>}
                </td>
                <td style={{ padding: "12px 0" }}>
                  <span style={{ display: "inline-flex", alignItems: "center", gap: 6, fontSize: 12,
                    color: r.status === "good" ? "var(--good)" : r.status === "warn" ? "var(--warn)" : "var(--bad)" }}>
                    <StatusDot tone={r.status}/>
                    {r.status === "good" ? "Healthy" : r.status === "warn" ? "Degraded" : "Offline"}
                  </span>
                </td>
                <td className="mono" style={{ padding: "12px 0", fontSize: 12, color: "var(--text-2)" }}>{r.uptime}</td>
                <td className="mono" style={{ padding: "12px 0", fontSize: 12, color: r.lastBeat <= 3 ? "var(--text-2)" : "var(--warn)" }}>
                  {r.lastBeat}s ago
                </td>
                <td className="mono" style={{ padding: "12px 0", fontSize: 12, color: "var(--text-3)" }}>{r.region}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{
          marginTop: 14, padding: "10px 12px",
          background: "var(--good-soft)", borderRadius: "var(--r-sm)",
          fontSize: 12, color: "var(--good)",
          display: "flex", alignItems: "center", gap: 8,
        }}>
          <I.Check size={13}/> 3/4 services healthy · data-streamer reconnecting (auto-retry 2/3)
        </div>
      </Card>

      {/* System health */}
      <Card title="System Health" subtitle="Host metrics" right={
        <IconButton title="Refresh"><I.Refresh size={13}/></IconButton>
      }>
        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          {SYSTEM.map((m) => (
            <div key={m.label}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 6 }}>
                <span style={{ fontSize: 12.5, color: "var(--text-2)" }}>{m.label}</span>
                <span className="mono" style={{ fontSize: 12, color: "var(--text-2)" }}>
                  {m.value}{m.unit || "%"}
                </span>
              </div>
              <Bar value={m.value} max={m.unit === "ms" ? 50 : 100} tone={m.status}/>
            </div>
          ))}
        </div>
      </Card>

      {/* Recent actions log — spans both columns */}
      <Card title="Recent Actions Log" subtitle="Last 30 minutes — sensitive ids redacted at write-time" right={
        <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
          <Pill tone="accent" soft>live</Pill>
          <IconButton title="Filter"><I.Search size={13}/></IconButton>
        </div>
      } style={{ gridColumn: "1 / -1" }}>
        <div style={{
          background: "var(--bg-0)",
          border: "1px solid var(--border-s)",
          borderRadius: "var(--r-md)",
          padding: "10px 14px",
          maxHeight: 280,
          overflowY: "auto",
          fontFamily: "var(--font-mono)",
          fontSize: 12.5,
          lineHeight: 1.85,
        }}>
          {LOG.map((row, i) => <LogRow key={i} row={row} streaming={i === 0}/>)}
        </div>
      </Card>
    </div>
  );
}

function LogRow({ row, streaming }) {
  // Split message at the redaction sentinel '§' to inject the badge.
  const parts = row.msg.split("§");
  return (
    <div style={{ display: "flex", gap: 14, padding: "2px 0" }}>
      <span style={{ color: "var(--good)" }}>{row.t}</span>
      <span style={{ color: "var(--text-3)" }}>[{row.src}]</span>
      <span style={{ color: LEVEL_COLOR[row.level] || "var(--text-2)", fontWeight: 600, minWidth: 64 }}>
        {row.level}:
      </span>
      <span style={{ color: "var(--text-2)", wordBreak: "break-word", flex: 1, minWidth: 0 }}>
        {parts.map((part, i) => (
          <Fragment key={i}>
            {part}
            {i < parts.length - 1 && <RedactedBadge/>}
          </Fragment>
        ))}
        {streaming && <span style={{
          display: "inline-block", width: 7, height: 12,
          background: "var(--accent)", marginLeft: 4, verticalAlign: "-1px",
          animation: "blink 1s steps(1) infinite",
        }}/>}
      </span>
    </div>
  );
}

function RedactedBadge() {
  return (
    <span style={{
      display: "inline-flex", alignItems: "center", gap: 4,
      padding: "1px 7px",
      background: "var(--bad-soft)",
      color: "var(--bad)",
      border: "1px solid oklch(0.700 0.200 25 / 0.35)",
      borderRadius: 4,
      fontSize: 11, fontWeight: 600,
      letterSpacing: "0.04em",
      verticalAlign: "1px",
    }}>
      <I.Lock size={9}/> REDACTED
    </span>
  );
}

function MiniMetric({ label, value, unit, delta, deltaTone, foot }) {
  return (
    <div style={{
      padding: "12px 14px",
      background: "var(--bg-0)",
      border: "1px solid var(--border-s)",
      borderRadius: "var(--r-md)",
    }}>
      <div style={{ fontSize: 11.5, color: "var(--text-3)", marginBottom: 6 }}>{label}</div>
      <div className="mono" style={{ fontSize: 19, fontWeight: 700, color: "var(--text-1)", letterSpacing: "-0.01em" }}>
        {value} <span style={{ fontSize: 12, fontWeight: 500, color: "var(--text-4)" }}>{unit}</span>
      </div>
      <div style={{
        marginTop: 4,
        fontSize: 11,
        color: deltaTone === "good" ? "var(--good)" :
               deltaTone === "bad"  ? "var(--bad)" :
               deltaTone === "info" ? "var(--info)" : "var(--text-3)"
      }} className="mono">{delta}</div>
      <div style={{ marginTop: 2, fontSize: 11, color: "var(--text-4)" }}>{foot}</div>
    </div>
  );
}

function Bar({ value, max = 100, tone }) {
  const pct = Math.min(100, (value / max) * 100);
  const color = tone === "good" ? "var(--good)" : tone === "warn" ? "var(--warn)" : "var(--bad)";
  return (
    <div style={{
      position: "relative",
      height: 6,
      background: "var(--bg-2)",
      borderRadius: 999,
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", inset: 0,
        width: pct + "%",
        background: `linear-gradient(90deg, ${color}, oklch(from ${color} l c h / 0.7))`,
        borderRadius: 999,
        transition: "width 800ms cubic-bezier(.2,.7,.2,1)",
      }}/>
    </div>
  );
}

window.StatusDisplay = StatusDisplay;