import { AdminLayout } from '@/components/admin/layout'
import { DataTable } from '@/components/admin/data-table'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import { Plus } from 'lucide-react'
import { Badge } from '@/components/ui/badge'

const usersData = [
  {
    id: '1',
    name: 'John Doe',
    email: 'john@example.com',
    role: 'Admin',
    status: 'Active',
    joinDate: '2024-01-15',
    lastActivity: '2024-03-20',
  },
  {
    id: '2',
    name: 'Jane Smith',
    email: 'jane@example.com',
    role: 'User',
    status: 'Active',
    joinDate: '2024-02-10',
    lastActivity: '2024-03-19',
  },
  {
    id: '3',
    name: 'Bob Johnson',
    email: 'bob@example.com',
    role: 'Moderator',
    status: 'Active',
    joinDate: '2024-01-05',
    lastActivity: '2024-03-18',
  },
  {
    id: '4',
    name: 'Alice Williams',
    email: 'alice@example.com',
    role: 'User',
    status: 'Inactive',
    joinDate: '2024-02-20',
    lastActivity: '2024-02-28',
  },
  {
    id: '5',
    name: 'Charlie Brown',
    email: 'charlie@example.com',
    role: 'User',
    status: 'Active',
    joinDate: '2024-03-01',
    lastActivity: '2024-03-20',
  },
  {
    id: '6',
    name: 'Diana Prince',
    email: 'diana@example.com',
    role: 'Admin',
    status: 'Active',
    joinDate: '2024-01-08',
    lastActivity: '2024-03-20',
  },
  {
    id: '7',
    name: 'Eve Martin',
    email: 'eve@example.com',
    role: 'User',
    status: 'Active',
    joinDate: '2024-02-14',
    lastActivity: '2024-03-19',
  },
  {
    id: '8',
    name: 'Frank Miller',
    email: 'frank@example.com',
    role: 'User',
    status: 'Inactive',
    joinDate: '2024-01-20',
    lastActivity: '2024-02-10',
  },
]

export default function UsersPage() {
  return (
    <AdminLayout>
      {/* Page Header */}
      <div className="mb-8 flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">Users Management</h1>
          <p className="text-muted-foreground text-sm mt-2">
            Manage and monitor all user accounts in your system.
          </p>
        </div>
        <Button className="gap-2 bg-primary hover:bg-primary/90 text-primary-foreground">
          <Plus className="w-4 h-4" />
          Add User
        </Button>
      </div>

      {/* Users Table */}
      <DataTable
        title="All Users"
        searchPlaceholder="Search by name or email..."
        columns={[
          { key: 'name', label: 'Name' },
          { key: 'email', label: 'Email' },
          { key: 'role', label: 'Role' },
          { key: 'status', label: 'Status' },
          { key: 'joinDate', label: 'Join Date' },
          { key: 'lastActivity', label: 'Last Activity' },
        ]}
        data={usersData.map((user) => ({
          ...user,
          role: (
            <Badge className="bg-input text-foreground">
              {user.role}
            </Badge>
          ),
          status: (
            <Badge
              className={
                user.status === 'Active'
                  ? 'bg-green-500/20 text-green-400'
                  : 'bg-gray-500/20 text-gray-400'
              }
            >
              {user.status}
            </Badge>
          ),
        }))}
        itemsPerPage={10}
      />
    </AdminLayout>
  )
}