import { SystemStatusCard } from "@/components/dashboard/SystemStatusCard"
import { UpdatesCard } from "@/components/dashboard/UpdatesCard"
import { AgentStatusCard } from "@/components/dashboard/AgentStatusCard"
import { MemoryInputCard } from "@/components/dashboard/MemoryInputCard"
import { TokenPerformanceCard } from "@/components/dashboard/TokenPerformanceCard"
import { ServicesCard } from "@/components/dashboard/ServicesCard"
import { LatencyCard } from "@/components/dashboard/LatencyCard"
import { ModelsCard } from "@/components/dashboard/ModelsCard"
import { LucyHealthCard } from "@/components/dashboard/LucyHealthCard"

function ZoneLabel({ children }: { children: React.ReactNode }) {
  return <p className="mb-2 ml-0.5 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground/60">{children}</p>
}

export function DashboardView() {
  return (
    <div className="space-y-7">
      <div>
        <h1 className="text-2xl font-space font-bold tracking-tight bg-gradient-to-r from-foreground via-foreground to-primary bg-clip-text text-transparent">
          Zentrale
        </h1>
        <p className="text-sm text-muted-foreground">Aktueller Status von System, Modellen und Agent.</p>
      </div>

      {/* „Geht's Lucy gut?" — Klartext-Ampel + 1-Klick-Reparatur, ganz oben. */}
      <LucyHealthCard />

      {/* Hero-Banner — System, Durchsatz, Modelle (Rollen + warm + Inferenz in einer Karte) */}
      <div className="grid items-stretch gap-6 lg:grid-cols-3">
        <SystemStatusCard />
        <TokenPerformanceCard />
        <ModelsCard />
      </div>

      {/* Stack & Telemetrie */}
      <section>
        <ZoneLabel>Stack &amp; Telemetrie</ZoneLabel>
        <div className="grid gap-6 lg:grid-cols-2">
          <ServicesCard />
          <LatencyCard />
        </div>
      </section>

      {/* Betrieb & Wissen */}
      <section>
        <ZoneLabel>Betrieb &amp; Wissen</ZoneLabel>
        <div className="grid gap-6 md:grid-cols-3">
          <UpdatesCard />
          <AgentStatusCard />
          <MemoryInputCard />
        </div>
      </section>
    </div>
  )
}