MOPC-Portal/src/components/shared/impersonation-banner.tsx

'use client'

import { useSession } from 'next-auth/react'
import { useRouter } from 'next/navigation'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import { ArrowLeft, Loader2 } from 'lucide-react'
import { toast } from 'sonner'

export function ImpersonationBanner() {
  const { data: session, update } = useSession()
  const router = useRouter()
  const endImpersonation = trpc.user.endImpersonation.useMutation()

  if (!session?.user?.impersonating) return null

  const handleReturn = async () => {
    try {
      await endImpersonation.mutateAsync()
      await update({ endImpersonation: true })
      // Full page navigation to ensure updated JWT cookie is sent
      window.location.href = '/admin/members'
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Failed to end impersonation')
    }
  }

  return (
    <div className="fixed top-0 left-0 right-0 z-50 flex items-center justify-center gap-3 bg-red-600 px-4 py-1.5 text-sm text-white shadow-md">
      <span>
        Impersonating <strong>{session.user.name || session.user.email}</strong>{' '}
        ({session.user.role.replace('_', ' ')})
      </span>
      <Button
        size="sm"
        variant="secondary"
        className="h-6 px-3 text-xs"
        onClick={handleReturn}
        disabled={endImpersonation.isPending}
      >
        {endImpersonation.isPending ? (
          <Loader2 className="mr-1 h-3 w-3 animate-spin" />
        ) : (
          <ArrowLeft className="mr-1 h-3 w-3" />
        )}
        Return to Admin
      </Button>
    </div>
  )
}