import { getUsers } from '@/app/actions/admin'
import { AdminMetrics } from '@/components/admin-metrics'
import { Users, Activity, Database, Zap } from 'lucide-react'

export default async function AdminPage() {
  const users = await getUsers()

  // Mock metrics data - in a real app, these would come from analytics
  const metrics = [
    {
      title: 'Total Users',
      value: users.length,
      trend: { value: 12, isPositive: true },
      icon: <Users className="h-5 w-5 text-primary dark:text-primary-foreground" />,
    },
    {
      title: 'Active Sessions',
      value: '24',
      trend: { value: 8, isPositive: true },
      icon: <Activity className="h-5 w-5 text-green-600 dark:text-green-400" />,
    },
    {
      title: 'Total Notes',
      value: '1,234',
      trend: { value: 24, isPositive: true },
      icon: <Database className="h-5 w-5 text-purple-600 dark:text-purple-400" />,
    },
    {
      title: 'AI Requests',
      value: '856',
      trend: { value: 5, isPositive: false },
      icon: <Zap className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />,
    },
  ]

  return (
    <div className="space-y-6">
      <div>
        <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
          Dashboard
        </h1>
        <p className="text-gray-600 dark:text-gray-400 mt-1">
          Overview of your application metrics
        </p>
      </div>

      <AdminMetrics metrics={metrics} />

      <div className="bg-white dark:bg-zinc-900 rounded-lg shadow overflow-hidden border border-gray-200 dark:border-gray-800 p-6">
        <h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          Recent Activity
        </h2>
        <p className="text-gray-600 dark:text-gray-400">
          Recent activity will be displayed here.
        </p>
      </div>
    </div>
  )
}