import { SystemStatusCard } from "@/components/dashboard/SystemStatusCard"
import { UpdatesCard } from "@/components/dashboard/UpdatesCard"
import { AgentStatusCard } from "@/components/dashboard/AgentStatusCard"
import { RolesCard } from "@/components/dashboard/RolesCard"
import { MemoryInputCard } from "@/components/dashboard/MemoryInputCard"
import { TokenStatsCard } from "@/components/dashboard/TokenStatsCard"

export function DashboardView() {
  return (
    <div className="space-y-6">
      {/* Title */}
      <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>

      {/* Top Grid: System stats & Updates */}
      <div className="grid gap-6 md:grid-cols-3">
        <SystemStatusCard />
        <UpdatesCard />
      </div>

      {/* Bottom Grid: Agent, Roles, Memory & Token Stats */}
      <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-4">
        <AgentStatusCard />
        <RolesCard />
        <MemoryInputCard />
        <TokenStatsCard />
      </div>
    </div>
  )
}