import React, { useState, useEffect } from "react";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogFooter,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Label } from "@/components/ui/label";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
import { Separator } from "@/components/ui/separator";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { useTranslation } from "react-i18next";
import {
  UserCog,
  Trash2,
  Plus,
  AlertCircle,
  Shield,
  Key,
  Clock,
} from "lucide-react";
import { toast } from "sonner";
import { useConfirmation } from "@/hooks/use-confirmation";
import {
  getUserRoles,
  getRoles,
  assignRoleToUser,
  removeRoleFromUser,
  makeUserAdmin,
  removeAdminStatus,
  initiatePasswordReset,
  revokeAllUserSessions,
  deleteUser,
  type UserRole,
  type Role,
} from "@/ui/main-axios";

interface User {
  id: string;
  username: string;
  is_admin: boolean;
  is_oidc: boolean;
  password_hash?: string;
}

interface UserEditDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  user: User | null;
  currentUser: { id: string; username: string } | null;
  onSuccess: () => void;
  allowPasswordLogin: boolean;
}

export function UserEditDialog({
  open,
  onOpenChange,
  user,
  currentUser,
  onSuccess,
  allowPasswordLogin,
}: UserEditDialogProps) {
  const { t } = useTranslation();
  const { confirmWithToast } = useConfirmation();

  const [adminLoading, setAdminLoading] = useState(false);
  const [passwordResetLoading, setPasswordResetLoading] = useState(false);
  const [sessionLoading, setSessionLoading] = useState(false);
  const [deleteLoading, setDeleteLoading] = useState(false);
  const [rolesLoading, setRolesLoading] = useState(false);

  const [userRoles, setUserRoles] = useState<UserRole[]>([]);
  const [availableRoles, setAvailableRoles] = useState<Role[]>([]);
  const [isAdmin, setIsAdmin] = useState(false);

  const isCurrentUser = user?.id === currentUser?.id;

  useEffect(() => {
    if (open && user) {
      setIsAdmin(user.is_admin);
      loadRoles();
    }
  }, [open, user]);

  const loadRoles = async () => {
    if (!user) return;

    setRolesLoading(true);
    try {
      const [rolesResponse, allRolesResponse] = await Promise.all([
        getUserRoles(user.id),
        getRoles(),
      ]);

      setUserRoles(rolesResponse.roles || []);
      setAvailableRoles(allRolesResponse.roles || []);
    } catch (error) {
      console.error("Failed to load roles:", error);
      toast.error(t("rbac.failedToLoadRoles"));
    } finally {
      setRolesLoading(false);
    }
  };

  const handleToggleAdmin = async (checked: boolean) => {
    if (!user) return;

    if (isCurrentUser) {
      toast.error(t("admin.cannotRemoveOwnAdmin"));
      return;
    }

    // Close dialog temporarily to show confirmation toast on top
    const userToUpdate = user;
    onOpenChange(false);

    const confirmed = await confirmWithToast({
      title: checked ? t("admin.makeUserAdmin") : t("admin.removeAdmin"),
      description: checked
        ? t("admin.confirmMakeAdmin", { username: userToUpdate.username })
        : t("admin.confirmRemoveAdmin", { username: userToUpdate.username }),
      confirmText: checked ? t("admin.makeAdmin") : t("admin.removeAdmin"),
      cancelText: t("common.cancel"),
      variant: checked ? "default" : "destructive",
    });

    if (!confirmed) {
      onOpenChange(true);
      return;
    }

    setAdminLoading(true);
    try {
      if (checked) {
        await makeUserAdmin(userToUpdate.username);
        toast.success(
          t("admin.userIsNowAdmin", { username: userToUpdate.username }),
        );
      } else {
        await removeAdminStatus(userToUpdate.username);
        toast.success(
          t("admin.adminStatusRemoved", { username: userToUpdate.username }),
        );
      }
      setIsAdmin(checked);
      onSuccess();
      onOpenChange(true);
    } catch (error) {
      console.error("Failed to toggle admin status:", error);
      toast.error(
        checked
          ? t("admin.failedToMakeUserAdmin")
          : t("admin.failedToRemoveAdminStatus"),
      );
      onOpenChange(true);
    } finally {
      setAdminLoading(false);
    }
  };

  const handlePasswordReset = async () => {
    if (!user) return;

    // Close dialog temporarily to show confirmation toast on top
    const userToReset = user;
    onOpenChange(false);

    const confirmed = await confirmWithToast({
      title: t("admin.resetUserPassword"),
      description: `${t("admin.passwordResetWarning")} (${userToReset.username})`,
      confirmText: t("admin.resetUserPassword"),
      cancelText: t("common.cancel"),
      variant: "destructive",
    });

    if (!confirmed) {
      onOpenChange(true);
      return;
    }

    setPasswordResetLoading(true);
    try {
      await initiatePasswordReset(userToReset.username);
      toast.success(
        t("admin.passwordResetInitiated", { username: userToReset.username }),
      );
      onSuccess();
      onOpenChange(true);
    } catch (error) {
      console.error("Failed to reset password:", error);
      toast.error(t("admin.failedToResetPassword"));
      onOpenChange(true);
    } finally {
      setPasswordResetLoading(false);
    }
  };

  const handleAssignRole = async (roleId: number) => {
    if (!user) return;

    try {
      await assignRoleToUser(user.id, roleId);
      toast.success(
        t("rbac.roleAssignedSuccessfully", { username: user.username }),
      );
      await loadRoles();
    } catch (error) {
      console.error("Failed to assign role:", error);
      toast.error(t("rbac.failedToAssignRole"));
    }
  };

  const handleRemoveRole = async (roleId: number) => {
    if (!user) return;

    // Close dialog temporarily to show confirmation toast on top
    const userToUpdate = user;
    onOpenChange(false);

    const confirmed = await confirmWithToast({
      title: t("rbac.confirmRemoveRole"),
      description: t("rbac.confirmRemoveRoleDescription"),
      confirmText: t("common.remove"),
      cancelText: t("common.cancel"),
      variant: "destructive",
    });

    if (!confirmed) {
      onOpenChange(true);
      return;
    }

    try {
      await removeRoleFromUser(userToUpdate.id, roleId);
      toast.success(
        t("rbac.roleRemovedSuccessfully", { username: userToUpdate.username }),
      );
      await loadRoles();
      onOpenChange(true);
    } catch (error) {
      console.error("Failed to remove role:", error);
      toast.error(t("rbac.failedToRemoveRole"));
      onOpenChange(true);
    }
  };

  const handleRevokeAllSessions = async () => {
    if (!user) return;

    const isRevokingSelf = isCurrentUser;

    // Close dialog temporarily to show confirmation toast on top
    const userToUpdate = user;
    onOpenChange(false);

    const confirmed = await confirmWithToast({
      title: t("admin.revokeAllSessions"),
      description: isRevokingSelf
        ? t("admin.confirmRevokeOwnSessions")
        : t("admin.confirmRevokeAllSessions"),
      confirmText: t("admin.revoke"),
      cancelText: t("common.cancel"),
      variant: "destructive",
    });

    if (!confirmed) {
      onOpenChange(true);
      return;
    }

    setSessionLoading(true);
    try {
      const data = await revokeAllUserSessions(userToUpdate.id);
      toast.success(data.message || t("admin.sessionsRevokedSuccessfully"));

      if (isRevokingSelf) {
        setTimeout(() => {
          window.location.reload();
        }, 1000);
      } else {
        onSuccess();
        onOpenChange(true);
      }
    } catch (error) {
      console.error("Failed to revoke sessions:", error);
      toast.error(t("admin.failedToRevokeSessions"));
      onOpenChange(true);
    } finally {
      setSessionLoading(false);
    }
  };

  const handleDeleteUser = async () => {
    if (!user) return;

    if (isCurrentUser) {
      toast.error(t("admin.cannotDeleteSelf"));
      return;
    }

    // Close dialog temporarily to show confirmation toast on top
    const userToDelete = user;
    onOpenChange(false);

    const confirmed = await confirmWithToast({
      title: t("admin.deleteUserTitle"),
      description: t("admin.deleteUser", { username: userToDelete.username }),
      confirmText: t("common.delete"),
      cancelText: t("common.cancel"),
      variant: "destructive",
    });

    if (!confirmed) {
      // Reopen dialog if user cancels
      onOpenChange(true);
      return;
    }

    setDeleteLoading(true);
    try {
      await deleteUser(userToDelete.username);
      toast.success(
        t("admin.userDeletedSuccessfully", { username: userToDelete.username }),
      );
      onSuccess();
    } catch (error) {
      console.error("Failed to delete user:", error);
      toast.error(t("admin.failedToDeleteUser"));
      onOpenChange(true);
    } finally {
      setDeleteLoading(false);
    }
  };

  const getAuthTypeDisplay = (): string => {
    if (!user) return "";
    if (user.is_oidc && user.password_hash) {
      return t("admin.dualAuth");
    } else if (user.is_oidc) {
      return t("admin.externalOIDC");
    } else {
      return t("admin.localPassword");
    }
  };

  if (!user) return null;

  const showPasswordReset =
    allowPasswordLogin && (user.password_hash || !user.is_oidc);

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-3xl bg-dark-bg border-2 border-dark-border">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2">
            <UserCog className="w-5 h-5" />
            {t("admin.manageUser")}: {user.username}
          </DialogTitle>
          <DialogDescription className="text-muted-foreground">
            {t("admin.manageUserDescription")}
          </DialogDescription>
        </DialogHeader>

        <div className="space-y-6 py-4 max-h-[70vh] overflow-y-auto pr-2">
          {/* READ-ONLY INFO SECTION */}
          <div className="grid grid-cols-2 gap-4 p-4 bg-dark-bg-panel rounded-lg border border-dark-border">
            <div>
              <Label className="text-muted-foreground text-xs">
                {t("admin.username")}
              </Label>
              <p className="font-medium">{user.username}</p>
            </div>
            <div>
              <Label className="text-muted-foreground text-xs">
                {t("admin.authType")}
              </Label>
              <p className="font-medium">{getAuthTypeDisplay()}</p>
            </div>
            <div>
              <Label className="text-muted-foreground text-xs">
                {t("admin.adminStatus")}
              </Label>
              <p className="font-medium">
                {isAdmin ? (
                  <Badge variant="secondary">{t("admin.adminBadge")}</Badge>
                ) : (
                  t("admin.regularUser")
                )}
              </p>
            </div>
            <div>
              <Label className="text-muted-foreground text-xs">
                {t("admin.userId")}
              </Label>
              <p className="font-mono text-xs truncate">{user.id}</p>
            </div>
          </div>

          <Separator />

          {/* ADMIN TOGGLE SECTION */}
          <div className="space-y-3">
            <Label className="text-base font-semibold flex items-center gap-2">
              <Shield className="h-4 w-4" />
              {t("admin.adminPrivileges")}
            </Label>
            <div className="flex items-center justify-between p-3 border border-dark-border rounded-lg bg-dark-bg-panel">
              <div className="flex-1">
                <p className="font-medium">{t("admin.administratorRole")}</p>
                <p className="text-sm text-muted-foreground">
                  {t("admin.administratorRoleDescription")}
                </p>
              </div>
              <Switch
                checked={isAdmin}
                onCheckedChange={handleToggleAdmin}
                disabled={isCurrentUser || adminLoading}
              />
            </div>
            {isCurrentUser && (
              <p className="text-xs text-muted-foreground">
                {t("admin.cannotModifyOwnAdminStatus")}
              </p>
            )}
          </div>

          <Separator />

          {/* PASSWORD RESET SECTION */}
          {showPasswordReset && (
            <>
              <div className="space-y-3">
                <Label className="text-base font-semibold flex items-center gap-2">
                  <Key className="h-4 w-4" />
                  {t("admin.passwordManagement")}
                </Label>
                <Alert variant="destructive">
                  <AlertCircle className="h-4 w-4" />
                  <AlertTitle>{t("common.warning")}</AlertTitle>
                  <AlertDescription>
                    {t("admin.passwordResetWarning")}
                  </AlertDescription>
                </Alert>
                <Button
                  variant="destructive"
                  onClick={handlePasswordReset}
                  disabled={passwordResetLoading}
                  className="w-full"
                >
                  {passwordResetLoading
                    ? t("admin.resettingPassword")
                    : t("admin.resetUserPassword")}
                </Button>
              </div>
              <Separator />
            </>
          )}

          {/* ROLE MANAGEMENT SECTION */}
          <div className="space-y-4">
            <Label className="text-base font-semibold flex items-center gap-2">
              <UserCog className="h-4 w-4" />
              {t("rbac.roleManagement")}
            </Label>

            {rolesLoading ? (
              <div className="text-center py-4 text-muted-foreground text-sm">
                {t("common.loading")}
              </div>
            ) : (
              <>
                {/* Current Roles */}
                <div className="space-y-2">
                  <Label className="text-sm text-muted-foreground">
                    {t("rbac.currentRoles")}
                  </Label>
                  {userRoles.length === 0 ? (
                    <p className="text-sm text-muted-foreground italic py-2">
                      {t("rbac.noRolesAssigned")}
                    </p>
                  ) : (
                    <div className="space-y-2">
                      {userRoles.map((role) => (
                        <div
                          key={role.roleId}
                          className="flex items-center justify-between p-3 border border-dark-border rounded-lg bg-dark-bg-panel"
                        >
                          <div>
                            <p className="font-medium text-sm">
                              {t(role.roleDisplayName)}
                            </p>
                            <p className="text-xs text-muted-foreground">
                              {role.roleName}
                            </p>
                          </div>
                          <div className="flex items-center gap-2">
                            {role.isSystem && (
                              <Badge variant="secondary" className="text-xs">
                                {t("rbac.systemRole")}
                              </Badge>
                            )}
                            {!role.isSystem && (
                              <Button
                                variant="ghost"
                                size="sm"
                                onClick={() => handleRemoveRole(role.roleId)}
                                className="text-red-600 hover:text-red-700 hover:bg-red-50"
                              >
                                <Trash2 className="h-4 w-4" />
                              </Button>
                            )}
                          </div>
                        </div>
                      ))}
                    </div>
                  )}
                </div>

                {/* Assign New Role */}
                <div className="space-y-2">
                  <Label className="text-sm text-muted-foreground">
                    {t("rbac.assignNewRole")}
                  </Label>
                  <div className="flex flex-wrap gap-2">
                    {availableRoles
                      .filter(
                        (role) =>
                          !role.isSystem &&
                          !userRoles.some((ur) => ur.roleId === role.id),
                      )
                      .map((role) => (
                        <Button
                          key={role.id}
                          variant="outline"
                          size="sm"
                          onClick={() => handleAssignRole(role.id)}
                        >
                          <Plus className="h-3 w-3 mr-1" />
                          {t(role.displayName)}
                        </Button>
                      ))}
                    {availableRoles.filter(
                      (role) =>
                        !role.isSystem &&
                        !userRoles.some((ur) => ur.roleId === role.id),
                    ).length === 0 && (
                      <p className="text-sm text-muted-foreground italic">
                        {t("rbac.noCustomRolesToAssign")}
                      </p>
                    )}
                  </div>
                </div>
              </>
            )}
          </div>

          <Separator />

          {/* SESSION MANAGEMENT SECTION */}
          <div className="space-y-3">
            <Label className="text-base font-semibold flex items-center gap-2">
              <Clock className="h-4 w-4" />
              {t("admin.sessionManagement")}
            </Label>
            <div className="flex items-center justify-between p-3 border border-dark-border rounded-lg bg-dark-bg-panel">
              <div className="flex-1">
                <p className="font-medium text-sm">
                  {t("admin.revokeAllSessions")}
                </p>
                <p className="text-sm text-muted-foreground">
                  {t("admin.revokeAllSessionsDescription")}
                </p>
              </div>
              <Button
                variant="destructive"
                size="sm"
                onClick={handleRevokeAllSessions}
                disabled={sessionLoading}
              >
                {sessionLoading ? t("admin.revoking") : t("admin.revoke")}
              </Button>
            </div>
          </div>

          <Separator />

          {/* DANGER ZONE - DELETE USER */}
          <div className="space-y-3">
            <Label className="text-base font-semibold text-destructive flex items-center gap-2">
              <AlertCircle className="h-4 w-4" />
              {t("admin.dangerZone")}
            </Label>
            <Alert variant="destructive">
              <AlertCircle className="h-4 w-4" />
              <AlertTitle>{t("admin.deleteUserTitle")}</AlertTitle>
              <AlertDescription>
                {t("admin.deleteUserWarning")}
              </AlertDescription>
            </Alert>
            <Button
              variant="destructive"
              onClick={handleDeleteUser}
              disabled={isCurrentUser || deleteLoading}
              className="w-full"
            >
              <Trash2 className="h-4 w-4 mr-2" />
              {deleteLoading
                ? t("admin.deleting")
                : `${t("common.delete")} ${user.username}`}
            </Button>
            {isCurrentUser && (
              <p className="text-xs text-muted-foreground text-center">
                {t("admin.cannotDeleteSelf")}
              </p>
            )}
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
}