MOPC-Portal/src/app/(admin)/admin/members/[id]/page.tsx

'use client'

import { useEffect, useState } from 'react'
import { useParams, useRouter } from 'next/navigation'
import Link from 'next/link'
import { trpc } from '@/lib/trpc/client'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Skeleton } from '@/components/ui/skeleton'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from '@/components/ui/table'
import { toast } from 'sonner'
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
import { TagInput } from '@/components/shared/tag-input'
import { UserActivityLog } from '@/components/shared/user-activity-log'
import { EvaluationEditSheet } from '@/components/admin/evaluation-edit-sheet'
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from '@/components/ui/alert-dialog'
import { UserAvatar } from '@/components/shared/user-avatar'
import {
  ArrowLeft,
  Save,
  Mail,
  User,
  Shield,
  Loader2,
  AlertCircle,
  ClipboardList,
  Eye,
  ThumbsUp,
  ThumbsDown,
  Globe,
  Building2,
  FileText,
  FolderOpen,
} from 'lucide-react'
import { getCountryName, getCountryFlag } from '@/lib/countries'

export default function MemberDetailPage() {
  const params = useParams()
  const router = useRouter()
  const utils = trpc.useUtils()
  const userId = params.id as string

  const { data: user, isLoading, error, refetch } = trpc.user.get.useQuery({ id: userId })
  const { data: currentUser } = trpc.user.me.useQuery()
  const isSuperAdmin = currentUser?.role === 'SUPER_ADMIN'
  const updateUser = trpc.user.update.useMutation()
  const sendInvitation = trpc.user.sendInvitation.useMutation()

  // Mentor assignments (only fetched for mentors)
  const { data: mentorAssignments } = trpc.mentor.listAssignments.useQuery(
    { mentorId: userId, page: 1, perPage: 50 },
    { enabled: user?.role === 'MENTOR' }
  )

  // Juror evaluations (only fetched for jury members)
  const isJuror = user?.role === 'JURY_MEMBER' || user?.roles?.includes('JURY_MEMBER')
  const { data: jurorEvaluations } = trpc.evaluation.getJurorEvaluations.useQuery(
    { userId },
    { enabled: !!user && !!isJuror }
  )

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const [selectedEvaluation, setSelectedEvaluation] = useState<any>(null)

  const [name, setName] = useState('')
  const [email, setEmail] = useState('')
  const [role, setRole] = useState<string>('JURY_MEMBER')
  const [status, setStatus] = useState<string>('NONE')
  const [expertiseTags, setExpertiseTags] = useState<string[]>([])
  const [maxAssignments, setMaxAssignments] = useState<string>('')
  const [showSuperAdminConfirm, setShowSuperAdminConfirm] = useState(false)
  const [pendingSuperAdminRole, setPendingSuperAdminRole] = useState(false)

  useEffect(() => {
    if (user) {
      setName(user.name || '')
      setEmail(user.email || '')
      setRole(user.role)
      setStatus(user.status)
      setExpertiseTags(user.expertiseTags || [])
      setMaxAssignments(user.maxAssignments?.toString() || '')
    }
  }, [user])

  const handleSave = async () => {
    try {
      await updateUser.mutateAsync({
        id: userId,
        email: email || undefined,
        name: name || null,
        role: role as 'SUPER_ADMIN' | 'PROGRAM_ADMIN' | 'AWARD_MASTER' | 'JURY_MEMBER' | 'MENTOR' | 'OBSERVER' | 'APPLICANT' | 'AUDIENCE',
        status: status as 'NONE' | 'INVITED' | 'ACTIVE' | 'SUSPENDED',
        expertiseTags,
        maxAssignments: maxAssignments ? parseInt(maxAssignments) : null,
      })
      utils.user.get.invalidate({ id: userId })
      utils.user.list.invalidate()
      toast.success('Member updated successfully')
      router.push('/admin/members')
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Failed to update member')
    }
  }

  const handleSendInvitation = async () => {
    try {
      await sendInvitation.mutateAsync({ userId })
      toast.success('Invitation email sent successfully')
      refetch()
      utils.user.list.invalidate()
    } catch (error) {
      toast.error(error instanceof Error ? error.message : 'Failed to send invitation')
    }
  }

  if (isLoading) {
    return (
      <div className="space-y-6">
        <Skeleton className="h-9 w-32" />
        <Card>
          <CardHeader>
            <Skeleton className="h-6 w-48" />
            <Skeleton className="h-4 w-72" />
          </CardHeader>
          <CardContent className="space-y-4">
            <Skeleton className="h-10 w-full" />
            <Skeleton className="h-10 w-full" />
          </CardContent>
        </Card>
      </div>
    )
  }

  if (error || !user) {
    return (
      <div className="space-y-6">
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>Error Loading Member</AlertTitle>
          <AlertDescription>
            {error?.message || 'The member you\'re looking for does not exist.'}
            {process.env.NODE_ENV === 'development' && (
              <div className="mt-2 text-xs opacity-75">
                User ID: {userId}
              </div>
            )}
          </AlertDescription>
        </Alert>
        <Button asChild>
          <Link href="/admin/members">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Members
          </Link>
        </Button>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex items-center gap-4">
        <Button variant="ghost" asChild className="-ml-4">
          <Link href="/admin/members">
            <ArrowLeft className="mr-2 h-4 w-4" />
            Back to Members
          </Link>
        </Button>
      </div>

      <div className="flex items-start justify-between">
        <div className="flex items-center gap-4">
          <UserAvatar user={user} avatarUrl={user.avatarUrl} size="lg" />
          <div>
            <h1 className="text-2xl font-semibold tracking-tight">
              {user.name || 'Unnamed Member'}
            </h1>
            <div className="flex items-center gap-2 mt-1">
              <p className="text-muted-foreground">{user.email}</p>
              <Badge variant={user.status === 'ACTIVE' ? 'success' : user.status === 'SUSPENDED' ? 'destructive' : 'secondary'}>
                {user.status === 'NONE' ? 'Not Invited' : user.status}
              </Badge>
            </div>
          </div>
        </div>
        {(user.status === 'NONE' || user.status === 'INVITED') && (
          <Button
            variant="outline"
            onClick={handleSendInvitation}
            disabled={sendInvitation.isPending}
          >
            {sendInvitation.isPending ? (
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
            ) : (
              <Mail className="mr-2 h-4 w-4" />
            )}
            Send Invitation
          </Button>
        )}
      </div>

      <Tabs defaultValue="profile" className="space-y-6">
        <TabsList>
          <TabsTrigger value="profile">
            <User className="h-4 w-4 mr-1" />
            Profile
          </TabsTrigger>
          {isJuror && (
            <TabsTrigger value="evaluations">
              <ClipboardList className="h-4 w-4 mr-1" />
              Evaluations
              {jurorEvaluations && jurorEvaluations.length > 0 && (
                <Badge variant="secondary" className="ml-1.5 text-xs px-1.5 py-0">
                  {jurorEvaluations.length}
                </Badge>
              )}
            </TabsTrigger>
          )}
        </TabsList>

        <TabsContent value="profile" className="space-y-6">
      {/* Profile Details (read-only) */}
      {(user.nationality || user.country || user.institution || user.bio) && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Globe className="h-5 w-5" />
              Profile Details
            </CardTitle>
            <CardDescription>Information provided during onboarding</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="grid gap-4 sm:grid-cols-2">
              {user.nationality && (
                <div className="flex items-start gap-2">
                  <span className="text-lg mt-0.5 shrink-0" role="img">{getCountryFlag(user.nationality)}</span>
                  <div>
                    <p className="text-xs font-medium text-muted-foreground">Nationality</p>
                    <p className="text-sm">{getCountryName(user.nationality)}</p>
                  </div>
                </div>
              )}
              {user.country && (
                <div className="flex items-start gap-2">
                  <span className="text-lg mt-0.5 shrink-0" role="img">{getCountryFlag(user.country)}</span>
                  <div>
                    <p className="text-xs font-medium text-muted-foreground">Country of Residence</p>
                    <p className="text-sm">{getCountryName(user.country)}</p>
                  </div>
                </div>
              )}
              {user.institution && (
                <div className="flex items-start gap-2">
                  <Building2 className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
                  <div>
                    <p className="text-xs font-medium text-muted-foreground">Institution / Organization</p>
                    <p className="text-sm">{user.institution}</p>
                  </div>
                </div>
              )}
              {user.bio && (
                <div className="flex items-start gap-2 sm:col-span-2">
                  <FileText className="h-4 w-4 mt-0.5 text-muted-foreground shrink-0" />
                  <div>
                    <p className="text-xs font-medium text-muted-foreground">Bio</p>
                    <p className="text-sm whitespace-pre-line">{user.bio}</p>
                  </div>
                </div>
              )}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Team Memberships / Projects */}
      {user.teamMemberships && user.teamMemberships.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <FolderOpen className="h-5 w-5" />
              Projects ({user.teamMemberships.length})
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="grid gap-2">
              {user.teamMemberships.map((tm) => (
                <Link
                  key={tm.id}
                  href={`/admin/projects/${tm.project.id}`}
                  className="flex items-center justify-between p-3 rounded-lg border hover:bg-muted/50 transition-colors"
                >
                  <div className="min-w-0">
                    <p className="font-medium text-sm truncate">{tm.project.title}</p>
                    {tm.project.teamName && (
                      <p className="text-xs text-muted-foreground">{tm.project.teamName}</p>
                    )}
                  </div>
                  <div className="flex items-center gap-2 shrink-0 ml-2">
                    {tm.project.competitionCategory && (
                      <Badge variant="outline" className="text-xs">
                        {tm.project.competitionCategory.replace('_', ' ')}
                      </Badge>
                    )}
                    <Badge variant="secondary" className="text-xs">
                      {tm.role === 'LEAD' ? 'Lead' : tm.role === 'ADVISOR' ? 'Advisor' : 'Member'}
                    </Badge>
                  </div>
                </Link>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      {/* Jury Groups (for jury members) */}
      {user.juryGroupMemberships && user.juryGroupMemberships.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Shield className="h-5 w-5" />
              Jury Groups ({user.juryGroupMemberships.length})
            </CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex flex-wrap gap-2">
              {user.juryGroupMemberships.map((m: { id: string; role: string; juryGroup: { id: string; name: string } }) => (
                <Badge key={m.id} variant="outline" className="text-sm py-1 px-3">
                  {m.juryGroup.name}
                  <span className="ml-1.5 text-xs text-muted-foreground">
                    ({m.role === 'CHAIR' ? 'Chair' : m.role === 'OBSERVER' ? 'Observer' : 'Member'})
                  </span>
                </Badge>
              ))}
            </div>
          </CardContent>
        </Card>
      )}

      <div className="grid gap-6 md:grid-cols-2">
        {/* Basic Info */}
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <User className="h-5 w-5" />
              Basic Information
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="email">Email</Label>
              <Input
                id="email"
                type="email"
                value={email}
                onChange={(e) => setEmail(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="name">Name</Label>
              <Input
                id="name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="Enter name"
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="role">Role</Label>
              <Select
                value={role}
                onValueChange={(v) => {
                  if (v === 'SUPER_ADMIN') {
                    setPendingSuperAdminRole(true)
                    setShowSuperAdminConfirm(true)
                  } else {
                    setRole(v)
                  }
                }}
                disabled={!isSuperAdmin && (user.role === 'SUPER_ADMIN' || user.role === 'PROGRAM_ADMIN')}
              >
                <SelectTrigger id="role">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  {isSuperAdmin && (
                    <SelectItem value="SUPER_ADMIN">Super Admin</SelectItem>
                  )}
                  {isSuperAdmin && (
                    <SelectItem value="PROGRAM_ADMIN">Program Admin</SelectItem>
                  )}
                  <SelectItem value="JURY_MEMBER">Jury Member</SelectItem>
                  <SelectItem value="MENTOR">Mentor</SelectItem>
                  <SelectItem value="OBSERVER">Observer</SelectItem>
                  <SelectItem value="APPLICANT">Applicant</SelectItem>
                  <SelectItem value="AWARD_MASTER">Award Master</SelectItem>
                  <SelectItem value="AUDIENCE">Audience</SelectItem>
                </SelectContent>
              </Select>
            </div>
            <div className="space-y-2">
              <Label htmlFor="status">Status</Label>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger id="status">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="NONE">Not Invited</SelectItem>
                  <SelectItem value="INVITED">Invited</SelectItem>
                  <SelectItem value="ACTIVE">Active</SelectItem>
                  <SelectItem value="SUSPENDED">Suspended</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </CardContent>
        </Card>

        {/* Expertise & Capacity — only for jury/mentor/observer/admin roles */}
        {!['APPLICANT', 'AUDIENCE'].includes(user.role) && (
        <Card>
          <CardHeader>
            <CardTitle className="flex items-center gap-2">
              <Shield className="h-5 w-5" />
              Expertise & Capacity
            </CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label>Expertise Tags</Label>
              <TagInput
                value={expertiseTags}
                onChange={setExpertiseTags}
                placeholder="Select expertise tags..."
                maxTags={15}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="maxAssignments">Max Assignments</Label>
              <Input
                id="maxAssignments"
                type="number"
                min="1"
                max="100"
                value={maxAssignments}
                onChange={(e) => setMaxAssignments(e.target.value)}
                placeholder="Unlimited"
              />
            </div>
            {user._count && (
              <div className="pt-4 border-t">
                <h4 className="font-medium mb-2">Statistics</h4>
                <div className="grid grid-cols-2 gap-4 text-sm">
                  <div>
                    <p className="text-muted-foreground">Jury Assignments</p>
                    <p className="text-2xl font-semibold">{user._count.assignments}</p>
                  </div>
                  <div>
                    <p className="text-muted-foreground">Mentor Assignments</p>
                    <p className="text-2xl font-semibold">{user._count.mentorAssignments}</p>
                  </div>
                </div>
              </div>
            )}
          </CardContent>
        </Card>
        )}
      </div>

      {/* Mentor Assignments Section */}
      {user.role === 'MENTOR' && mentorAssignments && mentorAssignments.assignments.length > 0 && (
        <Card>
          <CardHeader>
            <CardTitle>Mentored Projects</CardTitle>
            <CardDescription>
              Projects this mentor is assigned to
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Table>
              <TableHeader>
                <TableRow>
                  <TableHead>Project</TableHead>
                  <TableHead>Category</TableHead>
                  <TableHead>Status</TableHead>
                  <TableHead>Assigned</TableHead>
                </TableRow>
              </TableHeader>
              <TableBody>
                {mentorAssignments.assignments.map((assignment) => (
                  <TableRow key={assignment.id}>
                    <TableCell>
                      <Link
                        href={`/admin/projects/${assignment.project.id}`}
                        className="font-medium hover:underline"
                      >
                        {assignment.project.title}
                      </Link>
                      {assignment.project.teamName && (
                        <p className="text-sm text-muted-foreground">
                          {assignment.project.teamName}
                        </p>
                      )}
                    </TableCell>
                    <TableCell>
                      {assignment.project.competitionCategory ? (
                        <Badge variant="outline">
                          {assignment.project.competitionCategory.replace('_', ' ')}
                        </Badge>
                      ) : (
                        '-'
                      )}
                    </TableCell>
                    <TableCell>
                      <Badge variant="secondary">
                        {assignment.project.status ?? 'SUBMITTED'}
                      </Badge>
                    </TableCell>
                    <TableCell className="text-sm text-muted-foreground">
                      {new Date(assignment.assignedAt).toLocaleDateString()}
                    </TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </CardContent>
        </Card>
      )}

      {/* Activity Log */}
      <UserActivityLog userId={userId} />

      {/* Status Alert */}
      {user.status === 'NONE' && (
        <Alert>
          <Mail className="h-4 w-4" />
          <AlertTitle>Not Yet Invited</AlertTitle>
          <AlertDescription>
            This member was added to the platform via project import but hasn&apos;t been
            invited yet. Send them an invitation using the button above.
          </AlertDescription>
        </Alert>
      )}
      {user.status === 'INVITED' && (
        <Alert>
          <Mail className="h-4 w-4" />
          <AlertTitle>Invitation Pending</AlertTitle>
          <AlertDescription>
            This member hasn&apos;t accepted their invitation yet. You can resend the
            invitation email using the button above.
          </AlertDescription>
        </Alert>
      )}

      {/* Save Button */}
      <div className="flex justify-end gap-4">
        <Button variant="outline" asChild>
          <Link href="/admin/members">Cancel</Link>
        </Button>
        <Button onClick={handleSave} disabled={updateUser.isPending}>
          {updateUser.isPending ? (
            <Loader2 className="mr-2 h-4 w-4 animate-spin" />
          ) : (
            <Save className="mr-2 h-4 w-4" />
          )}
          Save Changes
        </Button>
      </div>
        </TabsContent>

        {/* Evaluations Tab */}
        {isJuror && (
          <TabsContent value="evaluations" className="space-y-4">
            {!jurorEvaluations || jurorEvaluations.length === 0 ? (
              <Card>
                <CardContent className="flex flex-col items-center justify-center py-12 text-center">
                  <ClipboardList className="h-12 w-12 text-muted-foreground/30" />
                  <p className="mt-2 text-muted-foreground">No evaluations submitted yet</p>
                </CardContent>
              </Card>
            ) : (
              (() => {
                // Group evaluations by round
                const byRound = new Map<string, typeof jurorEvaluations>()
                for (const ev of jurorEvaluations) {
                  const key = ev.roundName
                  if (!byRound.has(key)) byRound.set(key, [])
                  byRound.get(key)!.push(ev)
                }
                return Array.from(byRound.entries()).map(([roundName, evals]) => (
                  <Card key={roundName}>
                    <CardHeader>
                      <CardTitle className="text-base">{roundName}</CardTitle>
                      <CardDescription>{evals.length} evaluation{evals.length !== 1 ? 's' : ''}</CardDescription>
                    </CardHeader>
                    <CardContent>
                      <Table>
                        <TableHeader>
                          <TableRow>
                            <TableHead>Project</TableHead>
                            <TableHead>Score</TableHead>
                            <TableHead>Decision</TableHead>
                            <TableHead>Status</TableHead>
                            <TableHead>Submitted</TableHead>
                            <TableHead className="w-10"></TableHead>
                          </TableRow>
                        </TableHeader>
                        <TableBody>
                          {evals.map((ev) => (
                            <TableRow key={ev.assignmentId}>
                              <TableCell className="font-medium">
                                <Link
                                  href={`/admin/projects/${ev.projectId}`}
                                  className="hover:underline text-primary"
                                >
                                  {ev.projectTitle}
                                </Link>
                              </TableCell>
                              <TableCell>
                                {ev.evaluation.globalScore !== null && ev.evaluation.globalScore !== undefined
                                  ? <span className="font-medium">{ev.evaluation.globalScore}/10</span>
                                  : <span className="text-muted-foreground">-</span>}
                              </TableCell>
                              <TableCell>
                                {ev.evaluation.binaryDecision !== null && ev.evaluation.binaryDecision !== undefined ? (
                                  ev.evaluation.binaryDecision ? (
                                    <div className="flex items-center gap-1 text-green-600">
                                      <ThumbsUp className="h-4 w-4" />
                                      <span className="text-sm">Yes</span>
                                    </div>
                                  ) : (
                                    <div className="flex items-center gap-1 text-red-600">
                                      <ThumbsDown className="h-4 w-4" />
                                      <span className="text-sm">No</span>
                                    </div>
                                  )
                                ) : (
                                  <span className="text-muted-foreground">-</span>
                                )}
                              </TableCell>
                              <TableCell>
                                <Badge variant={ev.evaluation.status === 'SUBMITTED' ? 'default' : 'secondary'}>
                                  {ev.evaluation.status.replace('_', ' ')}
                                </Badge>
                              </TableCell>
                              <TableCell className="text-sm text-muted-foreground">
                                {ev.evaluation.submittedAt
                                  ? new Date(ev.evaluation.submittedAt).toLocaleDateString()
                                  : '-'}
                              </TableCell>
                              <TableCell>
                                <Button
                                  variant="ghost"
                                  size="sm"
                                  onClick={() => setSelectedEvaluation({
                                    ...ev,
                                    user: user,
                                    evaluation: ev.evaluation,
                                  })}
                                >
                                  <Eye className="h-4 w-4" />
                                </Button>
                              </TableCell>
                            </TableRow>
                          ))}
                        </TableBody>
                      </Table>
                    </CardContent>
                  </Card>
                ))
              })()
            )}

            <EvaluationEditSheet
              assignment={selectedEvaluation}
              open={!!selectedEvaluation}
              onOpenChange={(open) => { if (!open) setSelectedEvaluation(null) }}
              onSaved={() => utils.evaluation.getJurorEvaluations.invalidate({ userId })}
            />
          </TabsContent>
        )}
      </Tabs>


      {/* Super Admin Confirmation Dialog */}
      <AlertDialog open={showSuperAdminConfirm} onOpenChange={setShowSuperAdminConfirm}>
        <AlertDialogContent>
          <AlertDialogHeader>
            <AlertDialogTitle>Grant Super Admin Access?</AlertDialogTitle>
            <AlertDialogDescription>
              This will grant <strong>{name || user?.name || 'this user'}</strong> full Super Admin
              access, including user management, system settings, and all administrative
              capabilities. This action should only be performed for trusted administrators.
            </AlertDialogDescription>
          </AlertDialogHeader>
          <AlertDialogFooter>
            <AlertDialogCancel
              onClick={() => {
                setPendingSuperAdminRole(false)
              }}
            >
              Cancel
            </AlertDialogCancel>
            <AlertDialogAction
              onClick={() => {
                setRole('SUPER_ADMIN')
                setPendingSuperAdminRole(false)
                setShowSuperAdminConfirm(false)
              }}
              className="bg-red-600 hover:bg-red-700"
            >
              Confirm Super Admin
            </AlertDialogAction>
          </AlertDialogFooter>
        </AlertDialogContent>
      </AlertDialog>
    </div>
  )
}