Analytics Dashboard

"use client"

import * as React from "react"
import { StatsOverviewGrid } from "@/registry/blocks/stats-overview-grid"
import { AgentAvatar } from "@/registry/components/agent-avatar"
import type { AgentStatus } from "@/registry/components/agent-avatar"

const RECENT_ACTIVITY = [
  { agent: "Chloe", emoji: "✨", status: "online" as AgentStatus, action: "Completed UI component design", time: "2m ago" },
  { agent: "Darren", emoji: "🎨", status: "busy" as AgentStatus, action: "Generating sprite sheet assets", time: "5m ago" },
  { agent: "Andy", emoji: "🤖", status: "online" as AgentStatus, action: "Orchestrated 3 parallel tasks", time: "8m ago" },
  { agent: "Elena", emoji: "⚡", status: "idle" as AgentStatus, action: "Architecture review complete", time: "15m ago" },
  { agent: "Marcus", emoji: "🏛️", status: "offline" as AgentStatus, action: "Strategy session ended", time: "1h ago" },
]

export function AnalyticsDashboard() {
  return (
    <div className="min-h-screen bg-[#0f172a] text-white">
      {/* Header */}
      <header className="border-b border-slate-800 px-6 py-4 flex items-center justify-between">
        <div>
          <h1 className="text-xl font-bold">Analytics</h1>
          <p className="text-sm text-slate-400">Platform overview · Last 7 days</p>
        </div>
        <button className="px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-500 transition-colors text-sm font-medium">
          Export
        </button>
      </header>

      <main className="p-6 space-y-8">
        {/* Stats grid */}
        <section>
          <h2 className="text-sm font-medium text-slate-400 mb-4 uppercase tracking-wide">Key Metrics</h2>
          <StatsOverviewGrid />
        </section>

        {/* Chart placeholder */}
        <section>
          <h2 className="text-sm font-medium text-slate-400 mb-4 uppercase tracking-wide">Task Volume</h2>
          <div className="h-48 rounded-xl border border-slate-800 bg-slate-900/60 flex items-center justify-center">
            <p className="text-slate-600 text-sm">Chart renders here — connect your data source</p>
          </div>
        </section>

        {/* Recent activity */}
        <section>
          <h2 className="text-sm font-medium text-slate-400 mb-4 uppercase tracking-wide">Recent Activity</h2>
          <div className="rounded-xl border border-slate-800 bg-slate-900/60 divide-y divide-slate-800">
            {RECENT_ACTIVITY.map((item) => (
              <div key={item.agent} className="flex items-center gap-4 px-5 py-4">
                <AgentAvatar name={item.agent} emoji={item.emoji} status={item.status} size="sm" />
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-white">{item.agent}</p>
                  <p className="text-sm text-slate-400 truncate">{item.action}</p>
                </div>
                <span className="text-xs text-slate-500 shrink-0">{item.time}</span>
              </div>
            ))}
          </div>
        </section>
      </main>
    </div>
  )
}