mission-control-v2/frontend/src/views/models/werkbank/MaschinenraumBar.tsx

import { HardDrive } from "lucide-react"
import type { ModelInfo } from "@/lib/api"
import { fmtSize, gb } from "@/lib/format"
import { roleMeta } from "@/lib/roleMeta"
import { cn } from "@/lib/utils"
import { roleBarColor } from "./roleColors"

const B = 1024 ** 3
const short = (name: string) => name.split("/").pop()?.replace(/\.gguf$/i, "") ?? name

// Maschinenraum-Speicherleiste — das Signatur-Element. EIN großer Balken „Arbeitsspeicher
// · 124 GB", farbig aufgeteilt nach geladenem Modell (nach Rolle eingefärbt) + freier Rest.
// Man sieht LIVE, wohin die GB gehen. Ein Klick auf ein Segment wählt das Modell rechts.
export function MaschinenraumBar({
  running, capacityBytes, realUsedBytes, selected, onSelect,
}: {
  running: ModelInfo[]
  capacityBytes: number
  realUsedBytes: number
  selected?: string | null
  onSelect?: (name: string) => void
}) {
  const capacity = capacityBytes > 2 * B ? capacityBytes : 124 * B
  const weights = running.reduce((a, m) => a + (m.size_bytes || 0), 0)
  const freeBytes = Math.max(0, capacity - weights)
  const freePct = (freeBytes / capacity) * 100

  return (
    <div className="rounded-2xl border border-border/60 bg-card/45 p-5 shadow-lg shadow-black/15 backdrop-blur-md">
      <div className="mb-3 flex flex-wrap items-end justify-between gap-2">
        <div className="flex items-center gap-2">
          <HardDrive className="h-5 w-5 text-primary" />
          <div>
            <div className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">Arbeitsspeicher</div>
            <div className="font-space text-xl font-bold tracking-tight text-foreground">{gb(capacity)} GB <span className="text-sm font-medium text-muted-foreground">gesamt</span></div>
          </div>
        </div>
        <div className="text-right text-[11px] font-mono text-muted-foreground">
          <div><span className="font-bold text-foreground">{gb(weights)} GB</span> Modelle geladen</div>
          {realUsedBytes > 0 && <div>{gb(realUsedBytes)} GB real belegt (inkl. KV-Cache)</div>}
          <div className="text-emerald-400">{gb(freeBytes)} GB frei</div>
        </div>
      </div>

      {/* Der Balken */}
      <div className="flex h-12 w-full overflow-hidden rounded-xl border border-border/40 bg-background/50 p-1">
        {running.length === 0 ? (
          <div className="flex w-full items-center justify-center text-[11px] italic text-muted-foreground/60">
            Kein Modell geladen — Auto-Swap holt bei Anfrage automatisch das passende.
          </div>
        ) : (
          <>
            {running.map((m) => {
              const pct = ((m.size_bytes || 0) / capacity) * 100
              const c = roleBarColor(m.role)
              const isSel = selected === m.name
              return (
                <button
                  key={m.name}
                  onClick={() => onSelect?.(m.name)}
                  style={{ width: `${pct}%` }}
                  title={`${roleMeta(m.role).label} · ${short(m.name)} · ${fmtSize(m.size_bytes)}`}
                  className={cn(
                    "group flex h-full min-w-[2.5rem] shrink-0 flex-col justify-center gap-0.5 rounded-lg px-2 text-left text-white transition-all",
                    c.bar,
                    isSel ? "ring-2 ring-white/70" : "opacity-90 hover:opacity-100",
                  )}
                >
                  <span className="truncate font-space text-[10px] font-bold leading-tight tracking-wide">
                    {roleMeta(m.role).short}
                  </span>
                  <span className="truncate font-mono text-[9px] leading-tight opacity-85">{fmtSize(m.size_bytes)}</span>
                </button>
              )
            })}
            {freePct > 1.5 && (
              <div
                style={{ width: `${freePct}%` }}
                className="flex h-full min-w-[2rem] items-center justify-center rounded-lg text-[9px] font-mono text-muted-foreground/50"
                title={`${gb(freeBytes)} GB frei`}
              >
                frei
              </div>
            )}
          </>
        )}
      </div>

      {/* Legende */}
      {running.length > 0 && (
        <div className="mt-3 flex flex-wrap gap-x-4 gap-y-1.5">
          {running.map((m) => {
            const c = roleBarColor(m.role)
            return (
              <button
                key={m.name}
                onClick={() => onSelect?.(m.name)}
                className="flex items-center gap-1.5 text-[11px] text-muted-foreground transition-colors hover:text-foreground"
              >
                <span className={cn("h-2.5 w-2.5 rounded-sm", c.dot)} />
                <span className={cn("font-semibold", c.text)}>{roleMeta(m.role).short}</span>
                <span className="font-mono text-muted-foreground/70">{short(m.name)}</span>
              </button>
            )
          })}
          <span className="flex items-center gap-1.5 text-[11px] text-muted-foreground/60">
            <span className="h-2.5 w-2.5 rounded-sm border border-border/50 bg-background/50" /> frei · {gb(freeBytes)} GB
          </span>
        </div>
      )}
    </div>
  )
}