"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 { Users, UserPlus, UserCheck, UserX } from 'lucide-react'

export default function AdminUsersPage() {
  return (
    <AdminNotificationProvider>
      <AdminSidebarLayout>
        <div className="space-y-6">
          <div className="flex items-center justify-between">
            <div>
              <h1 className="text-3xl font-bold text-white">User Management</h1>
              <p className="text-white/70">Manage user accounts and permissions</p>
            </div>
          </div>

          {/* Stats Cards */}
          <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">Total Users</CardTitle>
                <Users className="h-4 w-4 text-white/60" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-white">1,234</div>
                <p className="text-xs text-white/60">+12% 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">New Users</CardTitle>
                <UserPlus className="h-4 w-4 text-green-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-white">89</div>
                <p className="text-xs text-white/60">This 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 Users</CardTitle>
                <UserCheck className="h-4 w-4 text-blue-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-white">987</div>
                <p className="text-xs text-white/60">80% of total</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">Inactive Users</CardTitle>
                <UserX className="h-4 w-4 text-red-500" />
              </CardHeader>
              <CardContent>
                <div className="text-2xl font-bold text-white">247</div>
                <p className="text-xs text-white/60">20% of total</p>
              </CardContent>
            </Card>
          </div>

          {/* User Management Content */}
          <Card className="bg-gray-900 border-gray-800">
            <CardHeader>
              <CardTitle className="text-white">User Management Features</CardTitle>
            </CardHeader>
            <CardContent className="text-white/70">
              <p>User management 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>View all users</li>
                <li>Search and filter users</li>
                <li>Edit user permissions</li>
                <li>Activate/deactivate accounts</li>
                <li>View user activity logs</li>
              </ul>
            </CardContent>
          </Card>
        </div>
      </AdminSidebarLayout>
    </AdminNotificationProvider>
  )
}
