MIF_E31221222/sigap-website/components/admin/users/user-management.tsx

"use client"

import { useState } from "react"
import { PlusCircle, Search, Filter, MoreHorizontal, X, ChevronDown } from 'lucide-react'
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Badge } from "@/components/ui/badge"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { useQuery } from "@tanstack/react-query"
import { fetchUsers } from "@/app/protected/(admin)/dashboard/user-management/action"
import { User } from "@/src/models/users/users.model"
import { toast } from "sonner"
import { DataTable } from "./data-table"
import { UserSheet } from "./sheet"
import { InviteUserDialog } from "./invite-user"
import { AddUserDialog } from "./add-user-dialog"


export default function UserManagement() {
  const [searchQuery, setSearchQuery] = useState("")
  const [selectedUser, setSelectedUser] = useState<User | null>(null)
  const [isSheetOpen, setIsSheetOpen] = useState(false)
  const [isAddUserOpen, setIsAddUserOpen] = useState(false)
  const [isInviteUserOpen, setIsInviteUserOpen] = useState(false)


  // Use React Query to fetch users
  const { data: users = [], isLoading, refetch } = useQuery({
    queryKey: ['users'],
    queryFn: async () => {
      try {
        return await fetchUsers()
      } catch (error) {
        toast.error("Failed to fetch users")
        return []
      }
    }
  })

  const handleUserClick = (user: User) => {
    setSelectedUser(user)
    setIsSheetOpen(true)
  }

  const handleUserUpdate = () => {
    refetch()
    setIsSheetOpen(false)
  }

  const filteredUsers = users.filter((user) => {
    if (!searchQuery) return true
    
    const query = searchQuery.toLowerCase()
    return (
      user.email?.toLowerCase().includes(query) ||
      user.phone?.toLowerCase().includes(query) ||
      user.id.toLowerCase().includes(query)
    )
  })

  const columns = [
    {
      id: "email",
      header: "Email",
      cell: ({ row }: { row: { original: User } }) => (
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-medium">
            {row.original.email?.[0]?.toUpperCase() || "?"}
          </div>
          <div>
            <div className="font-medium">{row.original.email || "No email"}</div>
            <div className="text-xs text-muted-foreground">{row.original.id}</div>
          </div>
        </div>
      ),
      filterFn: (row: any, id: string, value: string) => {
        return row.original.email?.toLowerCase().includes(value.toLowerCase())
      },
    },
    {
      id: "phone",
      header: "Phone",
      cell: ({ row }: { row: { original: User } }) => row.original.phone || "-",
      filterFn: (row: any, id: string, value: string) => {
        return row.original.phone?.toLowerCase().includes(value.toLowerCase())
      },
    },
    {
      id: "lastSignIn",
      header: "Last Sign In",
      cell: ({ row }: { row: { original: User } }) => {
        return row.original.last_sign_in_at 
          ? new Date(row.original.last_sign_in_at).toLocaleString() 
          : "Never"
      },
    },
    {
      id: "createdAt",
      header: "Created At",
      cell: ({ row }: { row: { original: User } }) => {
        return new Date(row.original.created_at).toLocaleString()
      },
    },
    {
      id: "status",
      header: "Status",
      cell: ({ row }: { row: { original: User } }) => {
        if (row.original.banned_until) {
          return <Badge variant="destructive">Banned</Badge>
        }
        if (!row.original.email_confirmed_at) {
          return <Badge variant="outline">Unconfirmed</Badge>
        }
        return <Badge variant="default">Active</Badge>
      },
      filterFn: (row: any, id: string, value: string) => {
        const status = row.original.banned_until 
          ? "banned" 
          : !row.original.email_confirmed_at 
            ? "unconfirmed" 
            : "active"
        return status.includes(value.toLowerCase())
      },
    },
    {
      id: "actions",
      header: "",
      cell: ({ row }: { row: { original: User } }) => (
        <Button variant="ghost" size="icon" onClick={(e) => {
          e.stopPropagation()
          handleUserClick(row.original)
        }}>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      ),
    },
  ]

  return (
    <div className="space-y-4">
      <div className="flex flex-col sm:flex-row gap-4 justify-between items-start sm:items-center">
        <div className="relative w-full sm:w-72">
          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
          <Input
            placeholder="Search users..."
            className="pl-8"
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
          />
          {searchQuery && (
            <Button
              variant="ghost"
              size="icon"
              className="absolute right-0 top-0 h-9 w-9"
              onClick={() => setSearchQuery("")}
            >
              <X className="h-4 w-4" />
            </Button>
          )}
        </div>
        <div className="flex gap-2 w-full sm:w-auto">
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <Button variant="outline" className="gap-1">
                <PlusCircle className="h-4 w-4" />
                Add User
                <ChevronDown className="h-4 w-4 ml-1" />
              </Button>
            </DropdownMenuTrigger>
            <DropdownMenuContent align="end">
              <DropdownMenuItem onClick={() => setIsAddUserOpen(true)}>
                Add User
              </DropdownMenuItem>
              <DropdownMenuItem onClick={() => setIsInviteUserOpen(true)}>
                Invite User
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
          <Button variant="outline" size="icon">
            <Filter className="h-4 w-4" />
          </Button>
        </div>
      </div>

      <DataTable
        columns={columns}
        data={filteredUsers}
        loading={isLoading}
        onRowClick={(user) => handleUserClick(user)}
      />

      {selectedUser && (
        <UserSheet
          user={selectedUser}
          open={isSheetOpen}
          onOpenChange={setIsSheetOpen}
          onUserUpdate={handleUserUpdate}
        />
      )}

      <AddUserDialog
        open={isAddUserOpen}
        onOpenChange={setIsAddUserOpen}
        onUserAdded={() => refetch()}
      />

      <InviteUserDialog
        open={isInviteUserOpen}
        onOpenChange={setIsInviteUserOpen}
        onUserInvited={() => refetch()}
      />
    </div>
  )
}