import React, { useState, useCallback, useMemo, lazy, Suspense, useEffect } from "react";
import { useMutation, useQueryClient } from "@tanstack/react-query";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog";
import { Copy, Edit, KeyRound, Mail, Phone, Plus, RefreshCw, Send, Trash2, User } from "lucide-react";
import { useToast } from "@/hooks/use-toast";
import { apiRequest } from "@/lib/queryClient";
import { useAuth } from "@/hooks/useAuth";
import type { Trainer } from "@shared/schema";

// Lazy load modals - they're only loaded when needed
const AddTrainerModal = lazy(() => import("@/components/modals/add-trainer-modal"));
const EditTrainerModal = lazy(() => import("@/components/modals/edit-trainer-modal"));

type TrainerLoginAccess = {
  trainerId: string;
  name: string;
  email: string;
  signupPath: string;
  signInPath: string;
  instructions: string;
  invitationAvailable: boolean;
  invitationSent?: boolean;
  alreadyRegistered?: boolean;
};

type AdminTeam = {
  id: string;
  name: string;
  isActive?: boolean | null;
};

function trainerLoginErrorDetails(error: unknown): {
  message: string;
  code: string | null;
} {
  const candidate = error as { message?: unknown; code?: unknown; status?: unknown };
  const message = typeof candidate?.message === "string"
    ? candidate.message.replace(/^\d{3}:\s*/, "")
    : "Unable to prepare login access. Please try again.";
  const code = typeof candidate?.code === "string" ? candidate.code : null;
  // apiRequest intentionally keeps provider errors small and exposes the HTTP
  // status in its Error subclass. Keep the missing-team UI tied to the
  // server's exact remediation message, not to every 409 (inactive teams
  // remain display-only errors).
  const isMissingTeam = code === "missing_team" ||
    message === "Assign this trainer to an active team before enabling login.";
  return {
    message,
    code: isMissingTeam ? "missing_team" : code,
  };
}

// Memoized trainer card component to prevent unnecessary re-renders
const TrainerCard = React.memo(({ 
  trainer, 
  onEdit, 
  onDelete, 
  onLoginAccess,
  canLoginAccess,
  isDeleting 
}: { 
  trainer: Trainer;
  onEdit: (trainer: Trainer) => void;
  onDelete: (trainerId: string) => void;
  onLoginAccess: (trainer: Trainer) => void;
  canLoginAccess: boolean;
  isDeleting: boolean;
}) => (
  <Card className="hover:shadow-lg transition-shadow mobile-card card-hover mobile-bounce" data-testid={`trainer-card-${trainer.id}`}>
    <CardHeader className="pb-4">
      <div className="flex flex-wrap items-center justify-between gap-3">
        <div className="flex min-w-0 items-center space-x-3">
          <div className="w-12 h-12 bg-primary rounded-full flex items-center justify-center">
            <User className="w-6 h-6 text-primary-foreground" />
          </div>
          <div className="min-w-0">
            <CardTitle className="break-words text-lg">{trainer.name}</CardTitle>
            <p className="break-words text-sm text-muted-foreground">{trainer.specialization}</p>
          </div>
        </div>
        <div className="flex shrink-0 flex-wrap items-center gap-1">
          {canLoginAccess && (
            <Button
              variant="ghost"
              size="sm"
              className="text-emerald-600 hover:bg-emerald-50 hover:text-emerald-700 mobile-touch-target mobile-bounce"
              data-testid={`login-access-trainer-${trainer.id}`}
              aria-label={`Login access for ${trainer.name}`}
              title="Login access"
              onClick={() => onLoginAccess(trainer)}
            >
              <KeyRound className="w-4 h-4" />
              <span>Login access</span>
            </Button>
          )}
          <Button
            variant="ghost"
            size="sm"
            className="text-blue-600 hover:text-blue-700 hover:bg-blue-50 mobile-touch-target mobile-bounce"
            data-testid={`edit-trainer-${trainer.id}`}
            onClick={() => onEdit(trainer)}
          >
            <Edit className="w-4 h-4" />
          </Button>
          <AlertDialog>
            <AlertDialogTrigger asChild>
              <Button
                variant="ghost"
                size="sm"
                className="text-red-600 hover:text-red-700 hover:bg-red-50 mobile-touch-target mobile-bounce"
                data-testid={`delete-trainer-${trainer.id}`}
                disabled={isDeleting}
              >
                <Trash2 className="w-4 h-4" />
              </Button>
            </AlertDialogTrigger>
            <AlertDialogContent>
              <AlertDialogHeader>
                <AlertDialogTitle>Delete Trainer</AlertDialogTitle>
                <AlertDialogDescription>
                  Are you sure you want to delete <strong>{trainer.name}</strong>? This action cannot be undone and will remove all associated training data.
                </AlertDialogDescription>
              </AlertDialogHeader>
              <AlertDialogFooter>
                <AlertDialogCancel>Cancel</AlertDialogCancel>
                <AlertDialogAction
                  onClick={() => onDelete(trainer.id.toString())}
                  disabled={isDeleting}
                  className="bg-red-600 hover:bg-red-700"
                >
                  {isDeleting ? "Deleting..." : "Delete"}
                </AlertDialogAction>
              </AlertDialogFooter>
            </AlertDialogContent>
          </AlertDialog>
        </div>
      </div>
    </CardHeader>
    <CardContent className="space-y-3">
      <div className="flex items-center space-x-2 text-sm text-muted-foreground">
        <span className="font-medium">Experience:</span>
        <span>{trainer.experienceLevel}</span>
      </div>
      
      <div className="flex items-center space-x-2 text-sm">
        <Phone className="w-4 h-4 text-muted-foreground" />
        <span className="min-w-0 break-words">{trainer.phone}</span>
      </div>
      
      <div className="flex items-center space-x-2 text-sm">
        <Mail className="w-4 h-4 text-muted-foreground" />
        <span className="min-w-0 break-words">{trainer.email}</span>
      </div>
      
      <div className="flex items-center space-x-2">
        <span className={`inline-block w-2 h-2 rounded-full ${trainer.isActive ? 'bg-green-500' : 'bg-gray-400'}`}></span>
        <span className="text-sm">{trainer.isActive ? 'Active' : 'Inactive'}</span>
      </div>
    </CardContent>
  </Card>
));

TrainerCard.displayName = "TrainerCard";

// Loading skeleton component
const TrainerCardSkeleton = () => (
  <Card className="animate-pulse">
    <CardHeader className="pb-4">
      <div className="flex items-center justify-between">
        <div className="flex items-center space-x-3">
          <div className="w-12 h-12 bg-gray-200 rounded-full"></div>
          <div>
            <div className="h-5 bg-gray-200 rounded w-32 mb-2"></div>
            <div className="h-4 bg-gray-200 rounded w-24"></div>
          </div>
        </div>
      </div>
    </CardHeader>
    <CardContent className="space-y-3">
      <div className="h-4 bg-gray-200 rounded w-full"></div>
      <div className="h-4 bg-gray-200 rounded w-3/4"></div>
      <div className="h-4 bg-gray-200 rounded w-2/3"></div>
    </CardContent>
  </Card>
);

export default function Trainers() {
  const [showAddTrainer, setShowAddTrainer] = useState(false);
  const [showEditTrainer, setShowEditTrainer] = useState(false);
  const [showLoginAccess, setShowLoginAccess] = useState(false);
  const [selectedTrainer, setSelectedTrainer] = useState<Trainer | null>(null);
  const [loginAccessTrainer, setLoginAccessTrainer] = useState<Trainer | null>(null);
  const [loginAccess, setLoginAccess] = useState<TrainerLoginAccess | null>(null);
  const [loginAccessError, setLoginAccessError] = useState<string | null>(null);
  const [loginAccessErrorCode, setLoginAccessErrorCode] = useState<string | null>(null);
  const [activeTeams, setActiveTeams] = useState<AdminTeam[]>([]);
  const [selectedTeamId, setSelectedTeamId] = useState("");
  const [isLoadingTeams, setIsLoadingTeams] = useState(false);
  const [isAssigningTeam, setIsAssigningTeam] = useState(false);
  const [isLoadingLoginAccess, setIsLoadingLoginAccess] = useState(false);
  const [isSendingInvitation, setIsSendingInvitation] = useState(false);
  const [trainers, setTrainers] = useState<Trainer[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const { user } = useAuth();
  const { toast } = useToast();
  const queryClient = useQueryClient();
  const canLoginAccess = user?.role === "manager" || user?.role === "admin";
  const canAssignLoginTeam = user?.role === "admin";

  // Simple, direct data fetching
  const fetchTrainers = useCallback(async () => {
    try {
      setIsLoading(true);
      setError(null);
      console.log("🔍 Fetching trainers directly...");
      
      const data = await (await apiRequest('GET', '/api/trainers')).json();
      console.log("✅ Trainers data received:", data);
      
      setTrainers(Array.isArray(data) ? data : []);
    } catch (err) {
      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch trainers';
      console.error("❌ Fetch failed:", errorMessage);
      setError(errorMessage);
      setTrainers([]);
    } finally {
      setIsLoading(false);
    }
  }, []);

  // Fetch data on component mount and when needed
  useEffect(() => {
    fetchTrainers();
  }, [fetchTrainers]);

  const fetchActiveTeams = useCallback(async () => {
    if (!canAssignLoginTeam) return;
    setIsLoadingTeams(true);
    try {
      const response = await apiRequest("GET", "/api/admin/teams");
      const data = await response.json();
      const teams = (Array.isArray(data) ? data : [])
        .filter((team): team is AdminTeam =>
          typeof team?.id === "string" &&
          typeof team?.name === "string" &&
          team.isActive === true,
        );
      setActiveTeams(teams);
      setSelectedTeamId((current) =>
        teams.some((team) => team.id === current) ? current : teams[0]?.id || "",
      );
    } catch {
      setActiveTeams([]);
      setSelectedTeamId("");
    } finally {
      setIsLoadingTeams(false);
    }
  }, [canAssignLoginTeam]);

  const deleteTrainer = useMutation({
    mutationFn: (trainerId: string) => apiRequest("DELETE", `/api/trainers/${trainerId}`),
    onSuccess: () => {
      fetchTrainers(); // Refresh data after deletion
      toast({
        title: "Success",
        description: "Trainer deleted successfully",
      });
    },
    onError: () => {
      toast({
        title: "Error",
        description: "Failed to delete trainer",
        variant: "destructive",
      });
    },
  });

  // Memoized callbacks to prevent unnecessary re-renders
  const handleEditTrainer = useCallback((trainer: Trainer) => {
    setSelectedTrainer(trainer);
    setShowEditTrainer(true);
  }, []);

  const handleDeleteTrainer = useCallback((trainerId: string) => {
    deleteTrainer.mutate(trainerId);
  }, [deleteTrainer]);

  const handleLoginAccess = useCallback(async (trainer: Trainer) => {
    setLoginAccessTrainer(trainer);
    setLoginAccess(null);
    setLoginAccessError(null);
    setLoginAccessErrorCode(null);
    setShowLoginAccess(true);
    setIsLoadingLoginAccess(true);
    try {
      const response = await apiRequest("GET", `/api/trainers/${trainer.id}/login-access`);
      setLoginAccess((await response.json()) as TrainerLoginAccess);
    } catch (error) {
      const details = trainerLoginErrorDetails(error);
      setLoginAccessError(details.message);
      setLoginAccessErrorCode(details.code);
      if (details.code === "missing_team") {
        void fetchActiveTeams();
      }
    } finally {
      setIsLoadingLoginAccess(false);
    }
  }, [fetchActiveTeams]);

  const handleAssignTrainerTeam = useCallback(async () => {
    if (!loginAccessTrainer || !selectedTeamId || !canAssignLoginTeam) return;
    const selectedTeam = activeTeams.find((team) => team.id === selectedTeamId);
    if (!selectedTeam) return;

    setIsAssigningTeam(true);
    try {
      await apiRequest(
        "PATCH",
        `/api/trainers/${loginAccessTrainer.id}/login-team`,
        { teamId: selectedTeam.id },
      );
      toast({
        title: "Trainer team assigned",
        description: `${loginAccessTrainer.name} is now assigned to ${selectedTeam.name}.`,
      });
      await fetchTrainers();
      await handleLoginAccess(loginAccessTrainer);
    } catch (error) {
      const details = trainerLoginErrorDetails(error);
      setLoginAccessError(details.message);
      setLoginAccessErrorCode(details.code);
    } finally {
      setIsAssigningTeam(false);
    }
  }, [
    activeTeams,
    canAssignLoginTeam,
    fetchTrainers,
    handleLoginAccess,
    loginAccessTrainer,
    selectedTeamId,
    toast,
  ]);

  const handleCopySignupLink = useCallback(async () => {
    if (!loginAccess) return;
    try {
      if (!navigator.clipboard?.writeText) throw new Error("Clipboard unavailable");
      await navigator.clipboard.writeText(loginAccess.signupPath);
      toast({
        title: "Sign-up link copied",
        description: "Share the link with the Trainer.",
      });
    } catch {
      toast({
        title: "Unable to copy link",
        description: "Copy the sign-up link directly from the dialog.",
        variant: "destructive",
      });
    }
  }, [loginAccess, toast]);

  const handleSendInvitation = useCallback(async () => {
    if (!loginAccessTrainer || !loginAccess) return;
    setIsSendingInvitation(true);
    try {
      const response = await apiRequest(
        "POST",
        `/api/trainers/${loginAccessTrainer.id}/login-access/invite`,
      );
      const result = await response.json() as TrainerLoginAccess;
      setLoginAccess(result);
      toast({
        title: result.alreadyRegistered ? "Account already registered" : "Invitation sent",
        description: result.alreadyRegistered
          ? `${loginAccess.email} can use the sign-in link.`
          : `Clerk sent a sign-up invitation to ${loginAccess.email}.`,
      });
    } catch (error) {
      toast({
        title: "Unable to send invitation",
        description: error instanceof Error
          ? error.message.replace(/^\d{3}:\s*/, "")
          : "Copy the sign-up link instead.",
        variant: "destructive",
      });
    } finally {
      setIsSendingInvitation(false);
    }
  }, [loginAccess, loginAccessTrainer, toast]);

  const handleCloseLoginAccess = useCallback((open: boolean) => {
    setShowLoginAccess(open);
    if (!open) {
      setLoginAccessTrainer(null);
      setLoginAccess(null);
      setLoginAccessError(null);
      setLoginAccessErrorCode(null);
      setActiveTeams([]);
      setSelectedTeamId("");
    }
  }, []);

  const handleRefresh = useCallback(() => {
    fetchTrainers();
  }, [fetchTrainers]);

  const handleAddTrainer = useCallback(() => {
    setShowAddTrainer(true);
  }, []);

  const handleCloseAddModal = useCallback(() => {
    setShowAddTrainer(false);
  }, []);

  const handleCloseEditModal = useCallback(() => {
    setShowEditTrainer(false);
    setSelectedTrainer(null);
  }, []);

  // Memoized trainer list to prevent unnecessary re-renders
  const trainerCards = useMemo(() => 
    trainers.map((trainer) => (
      <TrainerCard
        key={trainer.id}
        trainer={trainer}
        onEdit={handleEditTrainer}
        onDelete={handleDeleteTrainer}
          onLoginAccess={handleLoginAccess}
          canLoginAccess={canLoginAccess}
        isDeleting={deleteTrainer.isPending}
      />
    )),
    [
      trainers,
      handleEditTrainer,
      handleDeleteTrainer,
      handleLoginAccess,
      canLoginAccess,
      deleteTrainer.isPending,
    ]
  );

  // Loading state with skeleton
  if (isLoading) {
    return (
      <div className="flex-1 overflow-auto">
        <header className="bg-card border-b border-border px-4 md:px-6 py-4 mobile-header">
          <div className="flex items-center justify-between flex-wrap gap-4">
            <div>
              <h2 className="text-xl md:text-2xl font-bold text-foreground">Trainers</h2>
              <p className="text-sm md:text-base text-muted-foreground">Manage your solar sales trainers</p>
            </div>
          </div>
        </header>
        <main className="p-4 md:p-6 pb-20 md:pb-6">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
            {Array.from({ length: 6 }).map((_, i) => (
              <TrainerCardSkeleton key={i} />
            ))}
          </div>
        </main>
      </div>
    );
  }

  // Error state
  if (error) {
    console.error("Error loading trainers:", error);
    return (
      <div className="flex-1 overflow-auto">
        <div className="flex items-center justify-center min-h-[400px]">
          <div className="text-center">
            <p className="text-red-600 mb-4">Failed to load trainers</p>
            <p className="text-sm text-gray-600 mb-4">{(error as any)?.message || "Unknown error occurred"}</p>
            <Button onClick={handleRefresh} variant="outline">
              <RefreshCw className="w-4 h-4 mr-2" />
              Try Again
            </Button>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="flex-1 overflow-auto">
      <header className="bg-card border-b border-border px-4 md:px-6 py-4 mobile-header">
        <div className="flex items-center justify-between flex-wrap gap-4">
          <div>
            <h2 className="text-xl md:text-2xl font-bold text-foreground">Trainers</h2>
            <p className="text-sm md:text-base text-muted-foreground">Manage your solar sales trainers</p>
          </div>
          <div className="flex gap-2">
            <Button
              variant="secondary"
              onClick={handleRefresh}
              className="mobile-touch-target mobile-bounce mobile-ripple bg-white text-gray-900 border border-gray-400 hover:bg-gray-100"
              title="Refresh trainers list"
            >
              <RefreshCw className="w-4 h-4" />
            </Button>
            <Button
              data-testid="add-trainer-button"
              onClick={handleAddTrainer}
              className="mobile-touch-target mobile-bounce mobile-ripple"
            >
              <Plus className="w-4 h-4 mr-2" />
              <span className="hidden sm:inline">Add Trainer</span>
              <span className="sm:hidden">Add</span>
            </Button>
          </div>
        </div>
      </header>

      <main className="p-4 md:p-6 pb-20 md:pb-6">
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6">
          {trainerCards}
        </div>

        {trainers.length === 0 && (
          <div className="text-center py-12">
            <User className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
            <h3 className="text-lg font-medium text-foreground mb-2">No trainers found</h3>
            <p className="text-muted-foreground mb-4">Add your first trainer to get started</p>
            <Button
              data-testid="add-first-trainer-button"
              onClick={handleAddTrainer}
            >
              <Plus className="w-4 h-4 mr-2" />
              Add Trainer
            </Button>
          </div>
        )}
      </main>

      {/* Lazy load modals only when needed */}
      {showAddTrainer && (
        <Suspense fallback={null}>
          <AddTrainerModal 
            open={showAddTrainer}
            onOpenChange={handleCloseAddModal}
          />
        </Suspense>
      )}
      
      {showEditTrainer && (
        <Suspense fallback={null}>
          <EditTrainerModal 
            trainer={selectedTrainer}
            open={showEditTrainer}
            onOpenChange={handleCloseEditModal}
          />
        </Suspense>
      )}

      <Dialog open={showLoginAccess} onOpenChange={handleCloseLoginAccess}>
        <DialogContent>
          <DialogHeader>
            <DialogTitle>Trainer login access</DialogTitle>
            <DialogDescription>
              Share the relative sign-up link below. No password or local user
              account is created from this preview.
            </DialogDescription>
          </DialogHeader>

          {isLoadingLoginAccess && (
            <p className="py-4 text-sm text-muted-foreground">Checking login access…</p>
          )}
          {loginAccessError && (
            <div
              className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-800"
              data-testid="trainer-login-access-error"
            >
              <p>{loginAccessError}</p>
              {loginAccessErrorCode === "missing_team" &&
                loginAccessTrainer &&
                canAssignLoginTeam && (
                  <div className="mt-4 space-y-3 rounded-md border border-amber-200 bg-amber-50 p-3 text-amber-950">
                    <p className="font-medium">Assign an active team to enable login access</p>
                    <p>
                      Choose the active team for <strong>{loginAccessTrainer.name}</strong>
                      {" "}({loginAccessTrainer.email}) before enabling login.
                    </p>
                    {isLoadingTeams ? (
                      <p className="text-sm">Loading active teams…</p>
                    ) : activeTeams.length === 0 ? (
                      <p className="text-sm">
                        No active teams are available. Create or activate a team first.
                      </p>
                    ) : (
                      <div className="space-y-2">
                        <label
                          className="block text-sm font-medium"
                          htmlFor="trainer-login-team"
                        >
                          Active team
                        </label>
                        <select
                          id="trainer-login-team"
                          className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
                          value={selectedTeamId}
                          onChange={(event) => setSelectedTeamId(event.target.value)}
                          disabled={isAssigningTeam}
                          data-testid="trainer-login-team-select"
                        >
                          {activeTeams.map((team) => (
                            <option key={team.id} value={team.id}>
                              {team.name}
                            </option>
                          ))}
                        </select>
                        <AlertDialog>
                          <AlertDialogTrigger asChild>
                            <Button
                              type="button"
                              size="sm"
                              disabled={!selectedTeamId || isAssigningTeam}
                              data-testid="assign-trainer-login-team"
                            >
                              Assign active team
                            </Button>
                          </AlertDialogTrigger>
                          <AlertDialogContent>
                            <AlertDialogHeader>
                              <AlertDialogTitle>Confirm Trainer team assignment</AlertDialogTitle>
                              <AlertDialogDescription>
                                Assign <strong>{loginAccessTrainer.name}</strong>
                                {" "}({loginAccessTrainer.email}) to{" "}
                                <strong>
                                  {activeTeams.find((team) => team.id === selectedTeamId)?.name}
                                </strong>
                                ? This only fills the Trainer's missing team and does not move
                                assigned Prime Reps or linked local accounts.
                              </AlertDialogDescription>
                            </AlertDialogHeader>
                            <AlertDialogFooter>
                              <AlertDialogCancel>Cancel</AlertDialogCancel>
                              <AlertDialogAction
                                onClick={() => void handleAssignTrainerTeam()}
                                disabled={isAssigningTeam}
                              >
                                {isAssigningTeam ? "Assigning…" : "Confirm assignment"}
                              </AlertDialogAction>
                            </AlertDialogFooter>
                          </AlertDialogContent>
                        </AlertDialog>
                      </div>
                    )}
                  </div>
                )}
            </div>
          )}
          {loginAccess && !loginAccessError && (
            <div className="space-y-4">
              <div className="rounded-md border bg-muted/40 p-3 text-sm">
                <p className="font-medium">{loginAccess.name}</p>
                <p className="text-muted-foreground" data-testid="trainer-login-access-email">
                  {loginAccess.email}
                </p>
              </div>
              <p className="text-sm text-muted-foreground">{loginAccess.instructions}</p>
              <div className="flex flex-wrap items-center gap-2">
                <Button asChild variant="outline" size="sm">
                  <a href={loginAccess.signupPath}>Open sign-up page</a>
                </Button>
                <Button
                  type="button"
                  variant="secondary"
                  size="sm"
                  onClick={handleCopySignupLink}
                  data-testid="copy-trainer-signup-link"
                >
                  <Copy className="w-4 h-4" />
                  Copy sign-up link
                </Button>
              </div>
              <p className="text-xs text-muted-foreground">
                Already registered?{" "}
                <a className="underline" href={loginAccess.signInPath}>Open sign-in</a>.
              </p>
            </div>
          )}

          <DialogFooter>
            {loginAccess?.invitationAvailable && (
              <Button
                type="button"
                onClick={handleSendInvitation}
                disabled={isSendingInvitation}
                isLoading={isSendingInvitation}
                data-testid="send-trainer-invitation"
              >
                <Send className="w-4 h-4" />
                {isSendingInvitation ? "Sending…" : "Send email invitation"}
              </Button>
            )}
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}