import { RefreshCw, FileText } from "lucide-react"
import { cn } from "@/lib/utils"

// Präsentations-Atome des SystemDrawers (Review P2-14: aus dem 934-Z-Monolithen extrahiert).
// Die frühere SERVICES-Konstante (UI-Kopie der Dienste-Liste) ist weg: der Drawer rendert
// jetzt direkt die Backend-Antwort von /api/system/services — EINE Quelle der Wahrheit.

export function UpdateRow({ icon: Icon, iconClass, name, status, available, busy, actionLabel, onAction }: {
  icon: any; iconClass: string; name: string; status: string; available: boolean; busy?: boolean; actionLabel: string; onAction: () => void
}) {
  return (
    <div className={cn("flex items-center gap-3 rounded-lg border px-3 py-2",
      available ? "border-amber-500/30 bg-amber-500/5" : "border-border/50 bg-background/20")}>
      <Icon className={cn("h-4 w-4 shrink-0", iconClass)} />
      <div className="flex-1 min-w-0">
        <div className="text-xs text-foreground truncate">{name}</div>
        <div className={cn("text-[10px] truncate", available ? "text-amber-400/90" : "text-muted-foreground")}>{status}</div>
      </div>
      <button onClick={onAction} disabled={!available || busy}
        className={cn("text-[11px] font-semibold rounded-lg px-2.5 py-1 transition-colors shrink-0",
          available ? "bg-primary text-primary-foreground hover:opacity-90 cursor-pointer" : "border border-border/50 text-muted-foreground/40 cursor-default")}>
        {busy ? "…" : actionLabel}
      </button>
    </div>
  )
}

export function ServiceRow({ label, ok, system, busy, onRestart, onLogs }: {
  label: string; ok?: boolean; system?: boolean; busy?: boolean; onRestart: () => void; onLogs: () => void
}) {
  return (
    <div className="flex items-center gap-2.5 rounded-lg border border-border/50 bg-background/20 px-3 py-2">
      <span className={cn("w-1.5 h-1.5 rounded-full shrink-0",
        ok === true ? "bg-emerald-500" : ok === false ? "bg-red-500" : "bg-muted-foreground/40")} />
      <span className="flex-1 text-xs text-foreground truncate">{label}{system && <span className="text-[9px] text-muted-foreground"> (root)</span>}</span>
      <button onClick={onRestart} disabled={busy} title="Neu starten" className="text-muted-foreground hover:text-primary transition-colors disabled:opacity-50">
        <RefreshCw className={cn("h-3.5 w-3.5", busy && "animate-spin")} />
      </button>
      <button onClick={onLogs} title="Logs ansehen" className="text-muted-foreground hover:text-primary transition-colors">
        <FileText className="h-3.5 w-3.5" />
      </button>
    </div>
  )
}