meti-frontend/app/admin/members/page.tsx

"use client"

import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Input } from "@/components/ui/input"
import {
  Users,
  UserCheck,
  Clock,
  Search,
  Filter,
  ArrowLeft,
  CheckCircle,
  XCircle,
  AlertCircle,
  Plus,
  Loader2,
  Upload,
} from "lucide-react"
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
import Link from "next/link"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Label } from "@/components/ui/label"
import { Alert, AlertDescription } from "@/components/ui/alert"
import { AuthGuard } from "@/components/auth-guard"
import { useAuth } from "@/hooks/use-auth"
import { useToast } from "@/hooks/use-toast"
import apiClient from "@/lib/api-client"
import * as XLSX from "xlsx"
import { Checkbox } from "@/components/ui/checkbox"

interface User {
  id: string
  name: string
  email: string
  is_active: boolean
  created_at: string
  updated_at: string
  roles: Array<{
    id: string
    name: string
    code: string
  }>
  department_response?: {
    name: string
  } | null
}

interface ApiResponse {
  success: boolean
  data: {
    users: User[]
    pagination: {
      total_count: number
      page: number
      limit: number
      total_pages: number
    }
  }
  errors: any
}

interface BulkUserRequest {
  name: string
  email: string
  password: string
  role: string
}

interface BulkCreateUsersRequest {
  users: BulkUserRequest[]
}

interface BulkCreateAsyncResponse {
  job_id: string
  message: string
  status: string
}

interface BulkJobResult {
  job_id: string
  status: string
  message: string
  started_at: string
  finished_at?: string
  summary: {
    total: number
    succeeded: number
    failed: number
  }
  created: Array<{
    id: string
    name: string
    email: string
    is_active: boolean
    created_at: string
    updated_at: string
    roles: Array<{
      id: string
      name: string
      code: string
    }>
    department_response: Array<{
      name: string
    }>
  }>
  failed: Array<{
    user: BulkUserRequest
    error: string
  }>
}

interface ExcelUser {
  Nama: string
  Password: string
  Email: string
  Role: string
}

function MembersPageContent() {
  const { user } = useAuth("admin")
  const { toast } = useToast()
  const router = useRouter()
  
  const [users, setUsers] = useState<User[]>([])
  const [loading, setLoading] = useState(false)
  const [searchTerm, setSearchTerm] = useState("")
  const [statusFilter, setStatusFilter] = useState("all")
  
  // Pagination states
  const [currentPage, setCurrentPage] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [totalUsers, setTotalUsers] = useState(0)
  const [paginationLoading, setPaginationLoading] = useState(false)
  
  // Bulk upload states
  const [showBulkUpload, setShowBulkUpload] = useState(false)
  const [bulkUsers, setBulkUsers] = useState<BulkUserRequest[]>([])
  const [selectedUsers, setSelectedUsers] = useState<Set<number>>(new Set())
  const [bulkLoading, setBulkLoading] = useState(false)
  const [selectAll, setSelectAll] = useState(false)
  
  // Job tracking states
  const [currentJobId, setCurrentJobId] = useState<string | null>(null)
  const [jobStatus, setJobStatus] = useState<BulkJobResult | null>(null)
  const [jobLoading, setJobLoading] = useState(false)
  const [showJobStatus, setShowJobStatus] = useState(false)

  useEffect(() => {
    if (user) {
      fetchUsers(1, pageSize) // Always start from first page
      loadStoredJob()
    }
  }, [user])

  // Reset to first page when filters change
  useEffect(() => {
    if (user && (searchTerm || statusFilter !== "all")) {
      setCurrentPage(1)
      fetchUsers(1, pageSize)
    }
  }, [searchTerm, statusFilter])

  const fetchUsers = async (page: number = currentPage, size: number = pageSize) => {
    try {
      setLoading(true)
      const response = await apiClient.get(`/api/v1/users?page=${page}&limit=${size}`)
      const data: ApiResponse = response.data
      
      if (data.success) {
        setUsers(data.data.users)
        setTotalUsers(data.data.pagination.total_count)
        setCurrentPage(page)
        
        toast({
          title: "Success",
          description: `Fetched ${data.data.users.length} users`,
        })
      } else {
        toast({
          title: "Error",
          description: "Failed to fetch users",
          variant: "destructive"
        })
      }
    } catch (error: any) {
      console.error('Error fetching users:', error)
      toast({
        title: "Error",
        description: error.response?.data?.errors || "Failed to fetch users from API",
        variant: "destructive"
      })
    } finally {
      setLoading(false)
      setPaginationLoading(false)
    }
  }

  const getStatusBadge = (isActive: boolean) => {
    if (isActive) {
      return (
        <Badge className="bg-green-100 text-green-800 border-green-200">
          <CheckCircle className="h-3 w-3 mr-1" />
          Active
        </Badge>
      )
    } else {
      return (
        <Badge className="bg-red-100 text-red-800 border-red-200">
          <XCircle className="h-3 w-3 mr-1" />
          Inactive
        </Badge>
      )
    }
  }

  const getRoleBadge = (roles: User['roles']) => {
    if (roles && roles.length > 0) {
      return (
        <Badge variant="outline" className="bg-blue-50 text-blue-700 border-blue-200">
          {roles[0].name}
        </Badge>
      )
    }
    return (
      <Badge variant="outline" className="bg-gray-50 text-gray-700 border-gray-200">
        No Role
      </Badge>
    )
  }

  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0]
    if (!file) return

    const reader = new FileReader()
    reader.onload = (e) => {
      try {
        const data = new Uint8Array(e.target?.result as ArrayBuffer)
        const workbook = XLSX.read(data, { type: 'array' })
        const sheetName = workbook.SheetNames[0]
        const worksheet = workbook.Sheets[sheetName]
        const jsonData = XLSX.utils.sheet_to_json(worksheet) as ExcelUser[]

        // Transform Excel data to API format
        const transformedUsers: BulkUserRequest[] = jsonData.map((row, index) => ({
          name: row.Nama?.trim() || '',
          email: row.Email?.trim() || '',
          password: row.Password?.trim() || '',
          role: row.Role?.trim() || 'Staff'
        })).filter(user => user.name && user.email && user.password)

        setBulkUsers(transformedUsers)
        setSelectedUsers(new Set())
        setSelectAll(false)
        setShowBulkUpload(true)
        
        toast({
          title: "File Uploaded",
          description: `Processed ${transformedUsers.length} users from Excel file`,
        })
      } catch (error) {
        console.error('Error processing Excel file:', error)
        toast({
          title: "Error",
          description: "Failed to process Excel file. Please check the format.",
          variant: "destructive"
        })
      }
    }
    reader.readAsArrayBuffer(file)
  }

  const handleSelectUser = (index: number) => {
    const newSelected = new Set(selectedUsers)
    if (newSelected.has(index)) {
      newSelected.delete(index)
    } else {
      newSelected.add(index)
    }
    setSelectedUsers(newSelected)
  }

  const handleSelectAll = () => {
    if (selectAll) {
      setSelectedUsers(new Set())
      setSelectAll(false)
    } else {
      setSelectedUsers(new Set(bulkUsers.map((_, index) => index)))
      setSelectAll(true)
    }
  }

  const handleBulkCreate = async () => {
    if (selectedUsers.size === 0) {
      toast({
        title: "No Users Selected",
        description: "Please select at least one user to create",
        variant: "destructive"
      })
      return
    }

    const selectedUserData = Array.from(selectedUsers).map(index => bulkUsers[index])
    
    try {
      setBulkLoading(true)
      const response = await apiClient.post('/api/v1/users/bulk', {
        users: selectedUserData
      })

      if (response.data.success) {
        const jobData: BulkCreateAsyncResponse = response.data.data
        
        // Store job ID in localStorage
        localStorage.setItem("bulk_job_id", jobData.job_id)
        setCurrentJobId(jobData.job_id)
        
        toast({
          title: "Bulk Upload Started",
          description: `Job ${jobData.job_id} created. You can track progress below.`,
        })
        
        // Show job status dialog
        setShowJobStatus(true)
        setShowBulkUpload(false)
        
        // Start polling for job status
        setTimeout(() => {
          checkJobStatus(jobData.job_id)
        }, 2000)
      } else {
        toast({
          title: "Error",
          description: response.data.errors || "Failed to create users",
          variant: "destructive"
        })
      }
    } catch (error: any) {
      console.error('Error creating bulk users:', error)
      toast({
        title: "Error",
        description: error.response?.data?.errors || "Failed to create users",
        variant: "destructive"
      })
    } finally {
      setBulkLoading(false)
    }
  }

  const checkJobStatus = async (jobId: string) => {
    try {
      setJobLoading(true)
      const response = await apiClient.get(`/api/v1/users/bulk/job/${jobId}`)
      
      if (response.data.success) {
        const jobResult: BulkJobResult = response.data.data
        setJobStatus(jobResult)
        
        // If job is completed, refresh users list
        if (jobResult.status === 'completed' || jobResult.status === 'failed') {
          await fetchUsers(currentPage, pageSize)
          
          // Show completion message
          if (jobResult.status === 'completed') {
            toast({
              title: "Bulk Upload Completed",
              description: `Successfully created ${jobResult.summary.succeeded} users. ${jobResult.summary.failed} failed.`,
            })
          } else {
            toast({
              title: "Bulk Upload Failed",
              description: `Failed to create users: ${jobResult.message}`,
              variant: "destructive"
            })
          }
        } else {
          // Continue polling if job is still running
          setTimeout(() => {
            checkJobStatus(jobId)
          }, 5000)
        }
      }
    } catch (error: any) {
      console.error('Error checking job status:', error)
      toast({
        title: "Error",
        description: "Failed to check job status",
        variant: "destructive"
      })
    } finally {
      setJobLoading(false)
    }
  }

  const loadStoredJob = () => {
    const storedJobId = localStorage.getItem("bulk_job_id")
    if (storedJobId) {
      setCurrentJobId(storedJobId)
      setShowJobStatus(true)
      checkJobStatus(storedJobId)
    }
  }

  // Pagination functions
  const handlePageChange = (page: number) => {
    setPaginationLoading(true)
    setCurrentPage(page)
    fetchUsers(page, pageSize)
  }

  const handlePageSizeChange = (size: number) => {
    setPaginationLoading(true)
    setPageSize(size)
    setCurrentPage(1) // Reset to first page when changing page size
    fetchUsers(1, size)
  }

  const totalPages = Math.ceil(totalUsers / pageSize)
  const startIndex = (currentPage - 1) * pageSize + 1
  const endIndex = Math.min(currentPage * pageSize, totalUsers)

  const filteredUsers = users.filter((user) => {
    const matchesSearch =
      user.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
      user.email.toLowerCase().includes(searchTerm.toLowerCase()) ||
      (user.department_response?.name || "").toLowerCase().includes(searchTerm.toLowerCase())

    const matchesStatus = statusFilter === "all" || 
      (statusFilter === "active" && user.is_active) ||
      (statusFilter === "inactive" && !user.is_active)

    return matchesSearch && matchesStatus
  })

  if (!user) return null

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <header className="bg-white shadow-sm border-b">
        <div className="container mx-auto px-4 py-4">
          <div className="flex items-center gap-4">
            <Link href="/admin">
              <Button variant="ghost" size="sm" className="gap-2">
                <ArrowLeft className="h-4 w-4" />
                Back to Admin
              </Button>
            </Link>
            <div className="h-6 w-px bg-gray-300"></div>
            <h1 className="text-xl font-semibold text-gray-900">User Management</h1>
          </div>
        </div>
      </header>

      <div className="container mx-auto px-4 py-8">
        {/* Statistics */}
        <div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Total Users</CardTitle>
              <Users className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold">{users.length}</div>
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Active Users</CardTitle>
              <UserCheck className="h-4 w-4 text-green-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-green-600">
                {users.filter(u => u.is_active).length}
              </div>
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Inactive Users</CardTitle>
              <Clock className="h-4 w-4 text-yellow-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-yellow-600">
                {users.filter(u => !u.is_active).length}
              </div>
            </CardContent>
          </Card>
          
          <Card>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium">Departments</CardTitle>
              <AlertCircle className="h-4 w-4 text-blue-600" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-blue-600">
                {new Set(users.map(u => u.department_response?.name).filter(Boolean)).size}
              </div>
            </CardContent>
          </Card>
        </div>

        {/* Filters and Search */}
        <Card className="mb-6">
          <CardHeader>
            <CardTitle>Filters & Search</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-col md:flex-row gap-4">
              <div className="flex-1">
                <Label htmlFor="search">Search</Label>
                <div className="relative">
                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 h-4 w-4" />
                  <Input
                    id="search"
                    placeholder="Search by name, email, or department..."
                    value={searchTerm}
                    onChange={(e) => setSearchTerm(e.target.value)}
                    className="pl-10"
                  />
                </div>
              </div>
              
              <div className="w-full md:w-48">
                <Label htmlFor="status">Status</Label>
                <Select value={statusFilter} onValueChange={setStatusFilter}>
                  <SelectTrigger>
                    <SelectValue placeholder="Select status" />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="all">All Status</SelectItem>
                    <SelectItem value="active">Active</SelectItem>
                    <SelectItem value="inactive">Inactive</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              
              <div className="w-full md:w-32">
                <Label htmlFor="pageSize">Page Size</Label>
                <Select value={pageSize.toString()} onValueChange={(value) => handlePageSizeChange(parseInt(value))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="5">5 per page</SelectItem>
                    <SelectItem value="10">10 per page</SelectItem>
                    <SelectItem value="20">20 per page</SelectItem>
                    <SelectItem value="50">50 per page</SelectItem>
                  </SelectContent>
                </Select>
              </div>
              
              <div className="flex items-end gap-2">
                <Button 
                  onClick={() => {
                    setCurrentPage(1)
                    fetchUsers(1, pageSize)
                  }} 
                  disabled={loading} 
                  className="gap-2"
                >
                  {loading ? (
                    <Loader2 className="h-4 w-4 animate-spin" />
                  ) : (
                    <Filter className="h-4 w-4" />
                  )}
                  Refresh
                </Button>
                
                <div className="relative">
                  <input
                    type="file"
                    accept=".xlsx,.xls"
                    onChange={handleFileUpload}
                    className="hidden"
                    id="excel-upload"
                  />
                  <Button
                    variant="outline"
                    onClick={() => document.getElementById('excel-upload')?.click()}
                    className="gap-2"
                  >
                    <Upload className="h-4 w-4" />
                    Upload Excel
                  </Button>
                </div>
                
                {currentJobId && (
                  <Button
                    variant="outline"
                    onClick={() => {
                      setShowJobStatus(true)
                      checkJobStatus(currentJobId)
                    }}
                    className="gap-2"
                  >
                    <Clock className="h-4 w-4" />
                    Check Job Status
                  </Button>
                )}
              </div>
            </div>
          </CardContent>
        </Card>

        {/* Users Table */}
        <Card>
          <CardHeader>
            <CardTitle>Users List</CardTitle>
            <CardDescription>
              Showing {startIndex}-{endIndex} of {totalUsers} total users
              {filteredUsers.length !== users.length && ` (${filteredUsers.length} filtered)`}
            </CardDescription>
          </CardHeader>
          <CardContent>
            {loading ? (
              <div className="text-center py-8">
                <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
                <p className="text-gray-600">Loading users...</p>
              </div>
            ) : filteredUsers.length === 0 ? (
              <div className="text-center py-8">
                <Users className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                <h3 className="text-lg font-medium mb-2">No users found</h3>
                <p className="text-gray-600">Try adjusting your search or filters</p>
              </div>
            ) : (
              <div className="overflow-x-auto">
                <Table>
                  <TableHeader>
                    <TableRow>
                      <TableHead>Name</TableHead>
                      <TableHead>Email</TableHead>
                      <TableHead>Department</TableHead>
                      <TableHead>Role</TableHead>
                      <TableHead>Status</TableHead>
                      <TableHead>Created</TableHead>
                    </TableRow>
                  </TableHeader>
                  <TableBody>
                    {filteredUsers.map((user) => (
                      <TableRow key={user.id}>
                        <TableCell className="font-medium">{user.name}</TableCell>
                        <TableCell>{user.email}</TableCell>
                        <TableCell>
                          {user.department_response?.name || "N/A"}
                        </TableCell>
                        <TableCell>
                          {getRoleBadge(user.roles)}
                        </TableCell>
                        <TableCell>
                          {getStatusBadge(user.is_active)}
                        </TableCell>
                        <TableCell>
                          {new Date(user.created_at).toLocaleDateString()}
                        </TableCell>
                      </TableRow>
                    ))}
                  </TableBody>
                </Table>
              </div>
            )}

            {/* Pagination Controls */}
            {totalPages > 1 && (
              <div className="relative flex items-center justify-between px-6 py-4 border-t">
                {paginationLoading && (
                  <div className="absolute inset-0 bg-white/80 flex items-center justify-center">
                    <Loader2 className="h-6 w-6 animate-spin text-blue-600" />
                  </div>
                )}
                <div className="flex items-center gap-2 text-sm text-gray-600">
                  <span>
                    Page {currentPage} of {totalPages}
                  </span>
                  <span>•</span>
                  <span>
                    {startIndex}-{endIndex} of {totalUsers} results
                  </span>
                </div>
                
                <div className="flex items-center gap-2">
                  {/* Previous Page */}
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handlePageChange(currentPage - 1)}
                    disabled={currentPage === 1}
                  >
                    <ArrowLeft className="h-4 w-4" />
                    Previous
                  </Button>
                  
                  {/* Page Numbers */}
                  <div className="flex items-center gap-1">
                    {/* First Page */}
                    {currentPage > 3 && (
                      <>
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handlePageChange(1)}
                          className="w-8 h-8 p-0"
                        >
                          1
                        </Button>
                        {currentPage > 4 && (
                          <span className="px-2 text-gray-400">...</span>
                        )}
                      </>
                    )}
                    
                    {/* Page Range */}
                    {Array.from({ length: Math.min(5, totalPages) }, (_, i) => {
                      const page = Math.max(1, Math.min(totalPages - 4, currentPage - 2)) + i
                      if (page > totalPages) return null
                      
                      return (
                        <Button
                          key={page}
                          variant={page === currentPage ? "default" : "outline"}
                          size="sm"
                          onClick={() => handlePageChange(page)}
                          className="w-8 h-8 p-0"
                        >
                          {page}
                        </Button>
                      )
                    })}
                    
                    {/* Last Page */}
                    {currentPage < totalPages - 2 && (
                      <>
                        {currentPage < totalPages - 3 && (
                          <span className="px-2 text-gray-400">...</span>
                        )}
                        <Button
                          variant="outline"
                          size="sm"
                          onClick={() => handlePageChange(totalPages)}
                          className="w-8 h-8 p-0"
                        >
                          {totalPages}
                        </Button>
                      </>
                    )}
                  </div>
                  
                  {/* Next Page */}
                  <Button
                    variant="outline"
                    size="sm"
                    onClick={() => handlePageChange(currentPage + 1)}
                    disabled={currentPage === totalPages}
                  >
                    Next
                    <ArrowLeft className="h-4 w-4 rotate-180" />
                  </Button>
                </div>
              </div>
            )}
          </CardContent>
        </Card>

        {/* Bulk Upload Dialog */}
        {showBulkUpload && (
          <Dialog open={showBulkUpload} onOpenChange={setShowBulkUpload}>
            <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Bulk User Upload</DialogTitle>
                <DialogDescription>
                  Review and select users from the uploaded Excel file. Selected users will be created in the system.
                </DialogDescription>
              </DialogHeader>
              
              <div className="space-y-4">
                {/* Bulk Actions */}
                <div className="flex items-center justify-between">
                  <div className="flex items-center gap-2">
                    <Checkbox
                      id="select-all"
                      checked={selectAll}
                      onCheckedChange={handleSelectAll}
                    />
                    <Label htmlFor="select-all">Select All ({bulkUsers.length})</Label>
                  </div>
                  
                  <div className="flex items-center gap-2">
                    <span className="text-sm text-gray-600">
                      {selectedUsers.size} of {bulkUsers.length} selected
                    </span>
                    <Button
                      onClick={handleBulkCreate}
                      disabled={bulkLoading || selectedUsers.size === 0}
                      className="gap-2"
                    >
                      {bulkLoading ? (
                        <Loader2 className="h-4 w-4 animate-spin" />
                      ) : (
                        <Plus className="h-4 w-4" />
                      )}
                      Create {selectedUsers.size} Users
                    </Button>
                  </div>
                </div>

                {/* Users Table */}
                <div className="border rounded-lg">
                  <Table>
                    <TableHeader>
                      <TableRow>
                        <TableHead className="w-12">Select</TableHead>
                        <TableHead>Name</TableHead>
                        <TableHead>Email</TableHead>
                        <TableHead>Password</TableHead>
                        <TableHead>Role</TableHead>
                      </TableRow>
                    </TableHeader>
                    <TableBody>
                      {bulkUsers.map((user, index) => (
                        <TableRow key={index}>
                          <TableCell>
                            <Checkbox
                              checked={selectedUsers.has(index)}
                              onCheckedChange={() => handleSelectUser(index)}
                            />
                          </TableCell>
                          <TableCell className="font-medium">{user.name}</TableCell>
                          <TableCell>{user.email}</TableCell>
                          <TableCell className="font-mono text-sm">
                            {user.password.length > 8 ? `${user.password.substring(0, 8)}...` : user.password}
                          </TableCell>
                          <TableCell>
                            <Badge variant="outline">{user.role}</Badge>
                          </TableCell>
                        </TableRow>
                      ))}
                    </TableBody>
                  </Table>
                </div>

                {/* Instructions */}
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <h4 className="font-medium text-blue-900 mb-2">Excel Format Requirements:</h4>
                  <ul className="text-sm text-blue-800 space-y-1">
                    <li>• <strong>Nama:</strong> User's full name (required)</li>
                    <li>• <strong>Password:</strong> User's password (min 6 characters)</li>
                    <li>• <strong>Email:</strong> Valid email address (required)</li>
                    <li>• <strong>Role:</strong> User role (defaults to "Staff" if empty)</li>
                  </ul>
                  
                  <div className="mt-3 pt-3 border-t border-blue-200">
                    <p className="text-sm text-blue-800">
                      <strong>Note:</strong> Bulk user creation is processed asynchronously. 
                      You'll receive a job ID to track progress.
                    </p>
                  </div>
                </div>
              </div>
            </DialogContent>
          </Dialog>
        )}

        {/* Job Status Dialog */}
        {showJobStatus && (
          <Dialog open={showJobStatus} onOpenChange={setShowJobStatus}>
            <DialogContent className="max-w-4xl max-h-[80vh] overflow-y-auto">
              <DialogHeader>
                <DialogTitle>Bulk Upload Job Status</DialogTitle>
                <DialogDescription>
                  {currentJobId && `Job ID: ${currentJobId}`}
                </DialogDescription>
              </DialogHeader>
              
              <div className="space-y-4">
                {jobLoading ? (
                  <div className="text-center py-8">
                    <Loader2 className="h-8 w-8 animate-spin mx-auto mb-4" />
                    <p className="text-gray-600">Checking job status...</p>
                  </div>
                ) : jobStatus ? (
                  <>
                    {/* Job Summary */}
                    <Card>
                      <CardHeader>
                        <CardTitle>Job Summary</CardTitle>
                      </CardHeader>
                      <CardContent>
                        <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
                          <div className="text-center">
                            <div className="text-2xl font-bold text-blue-600">{jobStatus.summary.total}</div>
                            <div className="text-sm text-gray-600">Total Users</div>
                          </div>
                          <div className="text-center">
                            <div className="text-2xl font-bold text-green-600">{jobStatus.summary.succeeded}</div>
                            <div className="text-sm text-gray-600">Succeeded</div>
                          </div>
                          <div className="text-center">
                            <div className="text-2xl font-bold text-red-600">{jobStatus.summary.failed}</div>
                            <div className="text-sm text-gray-600">Failed</div>
                          </div>
                          <div className="text-center">
                            <div className="text-2xl font-bold text-gray-600">
                              {jobStatus.status === 'completed' ? '✅' : 
                               jobStatus.status === 'failed' ? '❌' : '⏳'}
                            </div>
                            <div className="text-sm text-gray-600 capitalize">{jobStatus.status}</div>
                          </div>
                        </div>
                        
                        <div className="mt-4 p-3 bg-gray-50 rounded-lg">
                          <div className="text-sm">
                            <strong>Started:</strong> {new Date(jobStatus.started_at).toLocaleString()}
                          </div>
                          {jobStatus.finished_at && (
                            <div className="text-sm">
                              <strong>Finished:</strong> {new Date(jobStatus.finished_at).toLocaleString()}
                            </div>
                          )}
                          <div className="text-sm">
                            <strong>Message:</strong> {jobStatus.message}
                          </div>
                        </div>
                      </CardContent>
                    </Card>

                    {/* Created Users */}
                    {jobStatus.created.length > 0 && (
                      <Card>
                        <CardHeader>
                          <CardTitle className="text-green-700">Successfully Created Users</CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="overflow-x-auto">
                            <Table>
                              <TableHeader>
                                <TableRow>
                                  <TableHead>Name</TableHead>
                                  <TableHead>Email</TableHead>
                                  <TableHead>Status</TableHead>
                                  <TableHead>Created</TableHead>
                                </TableRow>
                              </TableHeader>
                              <TableBody>
                                {jobStatus.created.map((user) => (
                                  <TableRow key={user.id}>
                                    <TableCell className="font-medium">{user.name}</TableCell>
                                    <TableCell>{user.email}</TableCell>
                                    <TableCell>
                                      <Badge className="bg-green-100 text-green-800 border-green-200">
                                        <CheckCircle className="h-3 w-3 mr-1" />
                                        Active
                                      </Badge>
                                    </TableCell>
                                    <TableCell>
                                      {new Date(user.created_at).toLocaleDateString()}
                                    </TableCell>
                                  </TableRow>
                                ))}
                              </TableBody>
                            </Table>
                          </div>
                        </CardContent>
                      </Card>
                    )}

                    {/* Failed Users */}
                    {jobStatus.failed.length > 0 && (
                      <Card>
                        <CardHeader>
                          <CardTitle className="text-red-700">Failed Users</CardTitle>
                        </CardHeader>
                        <CardContent>
                          <div className="overflow-x-auto">
                            <Table>
                              <TableHeader>
                                <TableRow>
                                  <TableHead>Name</TableHead>
                                  <TableHead>Email</TableHead>
                                  <TableHead>Role</TableHead>
                                  <TableHead>Error</TableHead>
                                </TableRow>
                              </TableHeader>
                              <TableBody>
                                {jobStatus.failed.map((failedUser, index) => (
                                  <TableRow key={index}>
                                    <TableCell className="font-medium">{failedUser.user.name}</TableCell>
                                    <TableCell>{failedUser.user.email}</TableCell>
                                    <TableCell>{failedUser.user.role}</TableCell>
                                    <TableCell className="text-red-600 text-sm">
                                      {failedUser.error}
                                    </TableCell>
                                  </TableRow>
                                ))}
                              </TableBody>
                            </Table>
                          </div>
                        </CardContent>
                      </Card>
                    )}

                    {/* Action Buttons */}
                    <div className="flex justify-end gap-3">
                      {jobStatus.status === 'completed' && (
                        <Button
                          onClick={() => {
                            setShowJobStatus(false)
                            setCurrentJobId(null)
                            localStorage.removeItem("bulk_job_id")
                          }}
                        >
                          Close & Clear Job
                        </Button>
                      )}
                      {jobStatus.status !== 'completed' && jobStatus.status !== 'failed' && (
                        <Button
                          onClick={() => checkJobStatus(currentJobId!)}
                          disabled={jobLoading}
                          variant="outline"
                        >
                          {jobLoading ? (
                            <>
                              <Loader2 className="h-4 w-4 animate-spin mr-2" />
                              Checking...
                            </>
                          ) : (
                            'Refresh Status'
                          )}
                        </Button>
                      )}
                    </div>
                  </>
                ) : (
                  <div className="text-center py-8">
                    <Clock className="h-12 w-12 text-gray-400 mx-auto mb-4" />
                    <p className="text-gray-600">No job status available</p>
                  </div>
                )}
              </div>
            </DialogContent>
          </Dialog>
        )}
      </div>
    </div>
  )
}

export default function MembersPage() {
  return (
    <AuthGuard requiredRole="superadmin">
      <MembersPageContent />
    </AuthGuard>
  )
}