"use client"

import { useState, useEffect } from "react"

const RAM_LIMIT_MB = 8192
const CPU_LIMIT_PCT = 400 // 4 cores * 100%

export function SystemMonitor() {
  const [rssMB, setRssMB] = useState(0)
  const [cpuPct, setCpuPct] = useState(0)

  useEffect(() => {
    const fetchStats = async () => {
      try {
        const res = await fetch("/api/system/monitor")
        if (!res.ok) return
        const data = await res.json()
        setRssMB(data.rssMB)
        setCpuPct(data.cpuPct)
      } catch {
        // ignore
      }
    }

    fetchStats()
    const interval = setInterval(fetchStats, 3000)
    return () => clearInterval(interval)
  }, [])

  const ramOver = rssMB > RAM_LIMIT_MB
  const cpuOver = cpuPct > CPU_LIMIT_PCT

  return (
    <div className="fixed top-0 left-0 z-[9999] flex items-center gap-3 px-3 py-1 text-[11px] font-mono bg-black/80 rounded-br-lg select-none">
      <span className={ramOver ? "text-red-400" : "text-green-400"}>
        RAM: {rssMB}MB / 8192MB
      </span>
      <span className={cpuOver ? "text-red-400" : "text-green-400"}>
        CPU: {cpuPct}%
      </span>
    </div>
  )
}