import { Cpu } from "lucide-react"
import { useSystemHistory } from "@/lib/useSystemHistory"
import { gb } from "@/lib/format"
import { LiveAreaChart, type ChartSeries } from "./LiveAreaChart"

const SERIES: ChartSeries[] = [
  { key: "cpu", label: "CPU", color: "#2dd4bf" },
  { key: "ram", label: "RAM", color: "#38bdf8" },
  { key: "gpu", label: "GPU", color: "#a78bfa" },
  { key: "disk", label: "Disk", color: "#fbbf24" },
]

export function SystemStatusCard() {
  const { sys, hist } = useSystemHistory()

  const hasGpu = !!(sys?.gpu && sys.gpu.busy_percent != null && sys.gpu.gtt_used != null && sys.gpu.gtt_total != null)
  const activeSeries = SERIES.filter((s) => s.key !== "gpu" || hasGpu)

  const current: Record<string, number | null | undefined> = {
    cpu: sys?.cpu?.percent, ram: sys?.ram?.percent,
    gpu: hasGpu ? sys!.gpu!.busy_percent : null, disk: sys?.disk?.percent,
  }
  const detail: Record<string, string> = {
    cpu: sys?.cpu?.cores ? `${sys.cpu.cores} Cores` : "",
    ram: sys ? `${gb(sys.ram.used)}/${gb(sys.ram.total)} GB` : "",
    gpu: hasGpu ? `${gb(sys!.gpu!.gtt_used!)}/${gb(sys!.gpu!.gtt_total!)} GB` : "",
    disk: sys?.disk ? `${gb(sys.disk.used)}/${gb(sys.disk.total)} GB` : "",
  }

  return (
    <div className="flex flex-col justify-between mc-card p-5">
      <div>
        <div className="mb-3 flex items-center gap-2">
          <Cpu className="h-4.5 w-4.5 text-primary" />
          <h2 className="text-sm font-semibold uppercase tracking-wide text-foreground">System-Status</h2>
          <span className="ml-1 inline-flex items-center gap-1 text-[10px] font-medium text-muted-foreground/70">
            <span className="h-1.5 w-1.5 rounded-full bg-emerald-500 animate-pulse" /> live
          </span>
        </div>

        {sys ? (
          <>
            <div className="mb-2 grid grid-cols-2 gap-x-4 gap-y-1.5">
              {activeSeries.map((s) => (
                <div key={s.key} className="flex min-w-0 items-center gap-1.5">
                  <span className="h-2 w-2 shrink-0 rounded-full" style={{ background: s.color }} />
                  <span className="shrink-0 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">{s.label}</span>
                  <span className="shrink-0 font-mono text-xs font-bold tabular-nums text-foreground">{Math.round(current[s.key] ?? 0)}%</span>
                  {detail[s.key] && <span className="truncate font-mono text-[10px] text-muted-foreground/60">{detail[s.key]}</span>}
                </div>
              ))}
            </div>
            <LiveAreaChart data={hist} series={activeSeries} unit="%" yMode="percent" height={176} />
          </>
        ) : (
          <div className="flex h-44 items-center justify-center text-xs text-muted-foreground">Lade Systemdaten…</div>
        )}
      </div>

      {sys?.temp && (sys.temp.cpu || sys.temp.gpu) && (
        <div className="mt-3 flex gap-4 border-t border-border/30 pt-3 font-mono text-xs text-muted-foreground/80">
          {sys.temp.cpu != null && <span>CPU Temp: {sys.temp.cpu} °C</span>}
          {sys.temp.gpu != null && <span>GPU Temp: {sys.temp.gpu} °C</span>}
        </div>
      )}
    </div>
  )
}
