MOPC-Portal/src/components/admin/user-actions.tsx

'use client'

import { useState } from 'react'
import Link from 'next/link'
import { useRouter } from 'next/navigation'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { toast } from 'sonner'
import {
  MoreHorizontal,
  Mail,
  UserCog,
  Trash2,
  Loader2,
} from 'lucide-react'

interface UserActionsProps {
  userId: string
  userEmail: string
  userStatus: string
}

export function UserActions({ userId, userEmail, userStatus }: UserActionsProps) {
  const router = useRouter()
  const [showDeleteDialog, setShowDeleteDialog] = useState(false)
  const [isSending, setIsSending] = useState(false)

  const sendInvitation = trpc.user.sendInvitation.useMutation()
  const deleteUser = trpc.user.delete.useMutation()

  const handleSendInvitation = async () => {
    if (userStatus !== 'INVITED') {
      toast.error('User has already accepted their invitation')
      return
    }

    setIsSending(true)
    try {
      await sendInvitation.mutateAsync({ userId })
      toast.success(`Invitation sent to ${userEmail}`)
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Failed to send invitation')
    } finally {
      setIsSending(false)
    }
  }

  const handleDelete = async () => {
    try {
      await deleteUser.mutateAsync({ id: userId })
      toast.success('User deleted successfully')
      setShowDeleteDialog(false)
      router.refresh()
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Failed to delete user')
    }
  }

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" size="icon">
            {isSending ? (
              <Loader2 className="h-4 w-4 animate-spin" />
            ) : (
              <MoreHorizontal className="h-4 w-4" />
            )}
            <span className="sr-only">Actions</span>
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DropdownMenuItem asChild>
            <Link href={`/admin/users/${userId}`}>
              <UserCog className="mr-2 h-4 w-4" />
              Edit
            </Link>
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={handleSendInvitation}
            disabled={userStatus !== 'INVITED' || isSending}
          >
            <Mail className="mr-2 h-4 w-4" />
            {isSending ? 'Sending...' : 'Send Invite'}
          </DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            className="text-destructive focus:text-destructive"
            onClick={() => setShowDeleteDialog(true)}
          >
            <Trash2 className="mr-2 h-4 w-4" />
            Remove
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Delete User</AlertDialogTitle>
            <AlertDialogDescription>
              Are you sure you want to delete {userEmail}? This action cannot be
              undone and will remove all their assignments and evaluations.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction
              onClick={handleDelete}
              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
            >
              {deleteUser.isPending ? (
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              ) : null}
              Delete
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </>
  )
}

interface UserMobileActionsProps {
  userId: string
  userEmail: string
  userStatus: string
}

export function UserMobileActions({
  userId,
  userEmail,
  userStatus,
}: UserMobileActionsProps) {
  const [isSending, setIsSending] = useState(false)
  const sendInvitation = trpc.user.sendInvitation.useMutation()

  const handleSendInvitation = async () => {
    if (userStatus !== 'INVITED') {
      toast.error('User has already accepted their invitation')
      return
    }

    setIsSending(true)
    try {
      await sendInvitation.mutateAsync({ userId })
      toast.success(`Invitation sent to ${userEmail}`)
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Failed to send invitation')
    } finally {
      setIsSending(false)
    }
  }

  return (
    <div className="flex gap-2 pt-2">
      <Button variant="outline" size="sm" className="flex-1" asChild>
        <Link href={`/admin/users/${userId}`}>
          <UserCog className="mr-2 h-4 w-4" />
          Edit
        </Link>
      </Button>
      <Button
        variant="outline"
        size="sm"
        className="flex-1"
        onClick={handleSendInvitation}
        disabled={userStatus !== 'INVITED' || isSending}
      >
        {isSending ? (
          <Loader2 className="mr-2 h-4 w-4 animate-spin" />
        ) : (
          <Mail className="mr-2 h-4 w-4" />
        )}
        Invite
      </Button>
    </div>
  )
}