"use client"

import { AdminSidebarLayout } from '@/components/layout/admin-sidebar-layout'
import { AdminNotificationProvider } from '@/contexts/AdminNotificationContext'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { BarChart3, TrendingUp, Activity, Eye } from 'lucide-react'

export default function AdminAnalyticsPage() {
  return (
    <AdminNotificationProvider>
      <AdminSidebarLayout>
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-white">Analytics Dashboard</h1>
              <p className="text-white/70">Monitor system performance and user engagement</p>
            </div>
          </div>

          {/* Analytics Stats */}
          <div className="grid grid-cols-1 md:grid-cols-4 gap-6">
            <Card className="bg-gray-900 border-gray-800">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-white">Page Views</CardTitle>
                <Eye className="h-4 w-4 text-white/60" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-white">45,231</div>
                <p className="text-xs text-white/60">+20.1% from last month</p>
              </CardContent>
            </Card>

            <Card className="bg-gray-900 border-gray-800">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-white">Active Sessions</CardTitle>
                <Activity className="h-4 w-4 text-green-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-white">2,350</div>
                <p className="text-xs text-white/60">+180.1% from last month</p>
              </CardContent>
            </Card>

            <Card className="bg-gray-900 border-gray-800">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-white">Template Usage</CardTitle>
                <BarChart3 className="h-4 w-4 text-blue-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-white">12,234</div>
                <p className="text-xs text-white/60">+19% from last month</p>
              </CardContent>
            </Card>

            <Card className="bg-gray-900 border-gray-800">
              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
                <CardTitle className="text-sm font-medium text-white">Growth Rate</CardTitle>
                <TrendingUp className="h-4 w-4 text-orange-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-white">+12.5%</div>
                <p className="text-xs text-white/60">+2.1% from last month</p>
              </CardContent>
            </Card>
          </div>

          {/* Analytics Content */}
          <Card className="bg-gray-900 border-gray-800">
            <CardHeader>
              <CardTitle className="text-white">Analytics Features</CardTitle>
            </CardHeader>
            <CardContent className="text-white/70">
              <p>Advanced analytics functionality will be implemented here.</p>
              <p className="mt-2">Features will include:</p>
              <ul className="list-disc list-inside mt-2 space-y-1">
                <li>Real-time user activity tracking</li>
                <li>Template usage statistics</li>
                <li>Performance metrics</li>
                <li>Custom reports generation</li>
                <li>Data visualization charts</li>
              </ul>
            </CardContent>
          </Card>
        </div>
      </AdminSidebarLayout>
    </AdminNotificationProvider>
  )
}
