import { useState, useEffect } from "react";
import { isAxiosError } from "axios";
import { useTranslation } from "react-i18next";
import {
  Stack,
  Text,
  Button,
  Table,
  ActionIcon,
  Badge,
  Loader,
  Group,
  Modal,
  Select,
  CloseButton,
  Tooltip,
  Menu,
  Avatar,
  Box,
} from "@mantine/core";
import LocalIcon from "@app/components/shared/LocalIcon";
import { alert } from "@app/components/toast";
import { teamService, Team } from "@app/services/teamService";
import {
  User,
  userManagementService,
} from "@app/services/userManagementService";
import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
import ChangeUserPasswordModal from "@app/components/shared/ChangeUserPasswordModal";

interface TeamDetailsSectionProps {
  teamId: number;
  onBack: () => void;
}

export default function TeamDetailsSection({
  teamId,
  onBack,
}: TeamDetailsSectionProps) {
  const { t } = useTranslation();
  const [loading, setLoading] = useState(true);
  const [team, setTeam] = useState<Team | null>(null);
  const [teamUsers, setTeamUsers] = useState<User[]>([]);
  const [availableUsers, setAvailableUsers] = useState<User[]>([]);
  const [allTeams, setAllTeams] = useState<Team[]>([]);
  const [userLastRequest, setUserLastRequest] = useState<
    Record<string, number>
  >({});
  const [addMemberModalOpened, setAddMemberModalOpened] = useState(false);
  const [changeTeamModalOpened, setChangeTeamModalOpened] = useState(false);
  const [changePasswordModalOpened, setChangePasswordModalOpened] =
    useState(false);
  const [passwordUser, setPasswordUser] = useState<User | null>(null);
  const [selectedUser, setSelectedUser] = useState<User | null>(null);
  const [selectedUserId, setSelectedUserId] = useState<string>("");
  const [selectedTeamId, setSelectedTeamId] = useState<string>("");
  const [processing, setProcessing] = useState(false);
  const availableUsersForTeam = team
    ? availableUsers.filter((user) => user.team?.id !== team.id)
    : [];

  // License information
  const [licenseInfo, setLicenseInfo] = useState<{
    availableSlots: number;
  } | null>(null);
  const [mailEnabled, setMailEnabled] = useState(false);
  const [lockedUsers, setLockedUsers] = useState<string[]>([]);

  const isLockedUser = (user: User) => lockedUsers.includes(user.username);

  useEffect(() => {
    fetchTeamDetails();
    fetchAllTeams();
  }, [teamId]);

  const fetchTeamDetails = async () => {
    try {
      setLoading(true);
      const [data, adminData] = await Promise.all([
        teamService.getTeamDetails(teamId),
        userManagementService.getUsers(),
      ]);
      console.log("[TeamDetailsSection] Raw data:", data);
      setTeam(data.team);
      setTeamUsers(Array.isArray(data.teamUsers) ? data.teamUsers : []);
      setAvailableUsers(
        Array.isArray(data.availableUsers) ? data.availableUsers : [],
      );
      setUserLastRequest(data.userLastRequest || {});

      // Store license information
      setLicenseInfo({
        availableSlots: adminData.availableSlots,
      });
      setMailEnabled(adminData.mailEnabled);
      setLockedUsers(adminData.lockedUsers || []);
    } catch (error) {
      console.error("Failed to fetch team details:", error);
      alert({
        alertType: "error",
        title: t("workspace.teams.loadError", "Failed to load team details"),
      });
      onBack();
    } finally {
      setLoading(false);
    }
  };

  const fetchAllTeams = async () => {
    try {
      const teams = await teamService.getTeams();
      setAllTeams(teams);
    } catch (error) {
      console.error("Failed to fetch teams:", error);
    }
  };

  const handleAddMember = async () => {
    if (!selectedUserId) {
      alert({
        alertType: "error",
        title: t(
          "workspace.teams.addMemberToTeam.selectUserRequired",
          "Please select a user",
        ),
      });
      return;
    }

    try {
      setProcessing(true);
      await teamService.addUserToTeam(teamId, parseInt(selectedUserId));
      alert({
        alertType: "success",
        title: t(
          "workspace.teams.addMemberToTeam.success",
          "User added to team successfully",
        ),
      });
      setAddMemberModalOpened(false);
      setSelectedUserId("");
      fetchTeamDetails();
    } catch (error: unknown) {
      console.error("Failed to add member:", error);
      const errorMessage = isAxiosError(error)
        ? error.response?.data?.message ||
          error.response?.data?.error ||
          error.message
        : (error instanceof Error ? error.message : undefined) ||
          t(
            "workspace.teams.addMemberToTeam.error",
            "Failed to add user to team",
          );
      alert({ alertType: "error", title: errorMessage });
    } finally {
      setProcessing(false);
    }
  };

  const handleRemoveMember = async (user: User) => {
    if (
      !window.confirm(
        t(
          "workspace.teams.confirmRemove",
          `Remove ${user.username} from this team?`,
        ),
      )
    ) {
      return;
    }

    try {
      setProcessing(true);
      // Find the Default team ID
      const defaultTeam = allTeams.find((t) => t.name === "Default");

      if (!defaultTeam) {
        throw new Error("Default team not found");
      }

      // Move user to Default team by updating their role with the Default team ID
      await teamService.moveUserToTeam(
        user.username,
        user.rolesAsString || "ROLE_USER",
        defaultTeam.id,
      );
      alert({
        alertType: "success",
        title: t(
          "workspace.teams.removeMemberSuccess",
          "User removed from team",
        ),
      });
      fetchTeamDetails();
    } catch (error: unknown) {
      console.error("Failed to remove member:", error);
      const errorMessage = isAxiosError(error)
        ? error.response?.data?.message ||
          error.response?.data?.error ||
          error.message
        : (error instanceof Error ? error.message : undefined) ||
          t(
            "workspace.teams.removeMemberError",
            "Failed to remove user from team",
          );
      alert({ alertType: "error", title: errorMessage });
    } finally {
      setProcessing(false);
    }
  };

  const handleDeleteUser = async (user: User) => {
    const confirmMessage = t(
      "workspace.people.confirmDelete",
      "Are you sure you want to delete this user? This action cannot be undone.",
    );
    if (!window.confirm(`${confirmMessage}\n\nUser: ${user.username}`)) {
      return;
    }

    try {
      setProcessing(true);
      await userManagementService.deleteUser(user.username);
      alert({
        alertType: "success",
        title: t(
          "workspace.people.deleteUserSuccess",
          "User deleted successfully",
        ),
      });
      fetchTeamDetails();
    } catch (error: unknown) {
      console.error("Failed to delete user:", error);
      const errorMessage = isAxiosError(error)
        ? error.response?.data?.message ||
          error.response?.data?.error ||
          error.message
        : (error instanceof Error ? error.message : undefined) ||
          t("workspace.people.deleteUserError", "Failed to delete user");
      alert({ alertType: "error", title: errorMessage });
    } finally {
      setProcessing(false);
    }
  };

  const handleUnlockUser = async (user: User) => {
    const confirmMessage = t(
      "workspace.people.confirmUnlock",
      "Are you sure you want to unlock this user account?",
    );
    if (!window.confirm(`${confirmMessage}\n\nUser: ${user.username}`)) {
      return;
    }

    try {
      await userManagementService.unlockUser(user.username);
      alert({
        alertType: "success",
        title: t(
          "workspace.people.unlockUserSuccess",
          "User account unlocked successfully",
        ),
      });
      fetchTeamDetails();
    } catch (error: unknown) {
      console.error("[TeamDetailsSection] Failed to unlock user:", error);
      const errorMessage = isAxiosError(error)
        ? error.response?.data?.message ||
          error.response?.data?.error ||
          error.message
        : (error instanceof Error ? error.message : undefined) ||
          t(
            "workspace.people.unlockUserError",
            "Failed to unlock user account",
          );
      alert({ alertType: "error", title: errorMessage });
    }
  };

  const openChangeTeamModal = (user: User) => {
    setSelectedUser(user);
    setSelectedTeamId(user.team?.id?.toString() || "");
    setChangeTeamModalOpened(true);
  };

  const openChangePasswordModal = (user: User) => {
    setPasswordUser(user);
    setChangePasswordModalOpened(true);
  };

  const closeChangePasswordModal = () => {
    setChangePasswordModalOpened(false);
    setPasswordUser(null);
  };

  const handleChangeTeam = async () => {
    if (!selectedUser || !selectedTeamId) {
      alert({
        alertType: "error",
        title: t(
          "workspace.teams.changeTeam.selectTeamRequired",
          "Please select a team",
        ),
      });
      return;
    }

    try {
      setProcessing(true);
      await teamService.moveUserToTeam(
        selectedUser.username,
        selectedUser.rolesAsString || "ROLE_USER",
        parseInt(selectedTeamId),
      );
      alert({
        alertType: "success",
        title: t(
          "workspace.teams.changeTeam.success",
          "Team changed successfully",
        ),
      });
      setChangeTeamModalOpened(false);
      setSelectedUser(null);
      setSelectedTeamId("");
      fetchTeamDetails();
    } catch (error: unknown) {
      console.error("Failed to change team:", error);
      const errorMessage = isAxiosError(error)
        ? error.response?.data?.message ||
          error.response?.data?.error ||
          error.message
        : (error instanceof Error ? error.message : undefined) ||
          t("workspace.teams.changeTeam.error", "Failed to change team");
      alert({ alertType: "error", title: errorMessage });
    } finally {
      setProcessing(false);
    }
  };

  if (loading) {
    return (
      <Stack align="center" py="xl">
        <Loader size="sm" />
        <Text size="sm" c="dimmed">
          {t("workspace.teams.loadingDetails", "Loading team details...")}
        </Text>
      </Stack>
    );
  }

  if (!team) {
    return (
      <Stack align="center" py="xl">
        <Text size="sm" c="red">
          {t("workspace.teams.teamNotFound", "Team not found")}
        </Text>
        <Button variant="light" onClick={onBack}>
          {t("workspace.teams.backToTeams", "Back to Teams")}
        </Button>
      </Stack>
    );
  }

  return (
    <Stack gap="lg">
      {/* Header with back button */}
      <Group>
        <ActionIcon variant="subtle" onClick={onBack}>
          <LocalIcon icon="arrow-back" width="1.2rem" height="1.2rem" />
        </ActionIcon>
        <div style={{ flex: 1 }}>
          <Text fw={600} size="lg">
            {team.name}
          </Text>
          <Text size="sm" c="dimmed">
            {t("workspace.teams.memberCount", { count: teamUsers.length })}
          </Text>
        </div>
      </Group>

      {/* Add Member Button */}
      <Group justify="flex-end">
        <Tooltip
          label={t("workspace.people.license.slotsAvailable", {
            count: licenseInfo ? licenseInfo.availableSlots : 0,
          })}
          disabled={!licenseInfo || licenseInfo.availableSlots > 0}
          position="bottom"
          withArrow
          zIndex={Z_INDEX_OVER_CONFIG_MODAL}
        >
          <Button
            leftSection={
              <LocalIcon icon="person-add" width="1rem" height="1rem" />
            }
            onClick={() => setAddMemberModalOpened(true)}
            disabled={
              team.name === "Internal" ||
              (licenseInfo ? licenseInfo.availableSlots === 0 : false)
            }
          >
            {t("workspace.teams.addMember")}
          </Button>
        </Tooltip>
      </Group>

      {/* Members Table */}
      <Table
        horizontalSpacing="md"
        verticalSpacing="sm"
        withRowBorders
        style={
          {
            "--table-border-color": "var(--mantine-color-gray-3)",
          } as React.CSSProperties
        }
      >
        <Table.Thead>
          <Table.Tr style={{ backgroundColor: "var(--mantine-color-gray-0)" }}>
            <Table.Th
              style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }}
              fz="sm"
            >
              {t("workspace.people.user")}
            </Table.Th>
            <Table.Th
              style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }}
              fz="sm"
              w={100}
            >
              {t("workspace.people.role")}
            </Table.Th>
            <Table.Th w={50}></Table.Th>
          </Table.Tr>
        </Table.Thead>
        <Table.Tbody>
          {teamUsers.length === 0 ? (
            <Table.Tr>
              <Table.Td colSpan={3}>
                <Text ta="center" c="dimmed" py="xl">
                  {t("workspace.teams.noMembers", "No members in this team")}
                </Text>
              </Table.Td>
            </Table.Tr>
          ) : (
            teamUsers.map((user) => {
              const isActive =
                userLastRequest[user.username] &&
                Date.now() - userLastRequest[user.username] < 5 * 60 * 1000; // Active within last 5 minutes

              return (
                <Table.Tr key={user.id}>
                  <Table.Td>
                    <Group gap="xs" wrap="nowrap">
                      <Tooltip
                        label={
                          !user.enabled
                            ? t("workspace.people.disabled", "Disabled")
                            : isActive
                              ? t(
                                  "workspace.people.activeSession",
                                  "Active session",
                                )
                              : t("workspace.people.active", "Active")
                        }
                        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
                      >
                        <Avatar
                          size={32}
                          color={user.enabled ? "blue" : "gray"}
                          styles={{
                            root: {
                              border: isActive
                                ? "2px solid var(--mantine-color-green-6)"
                                : "none",
                              opacity: user.enabled ? 1 : 0.5,
                            },
                          }}
                        >
                          {user.username.charAt(0).toUpperCase()}
                        </Avatar>
                      </Tooltip>
                      <Box style={{ minWidth: 0, flex: 1 }}>
                        <Group gap={6} wrap="nowrap" align="center">
                          <Tooltip
                            label={user.username}
                            disabled={user.username.length <= 20}
                            zIndex={Z_INDEX_OVER_CONFIG_MODAL}
                          >
                            <Text
                              size="sm"
                              fw={500}
                              maw={200}
                              style={{
                                lineHeight: 1.3,
                                opacity: user.enabled ? 1 : 0.6,
                                overflow: "hidden",
                                textOverflow: "ellipsis",
                                whiteSpace: "nowrap",
                              }}
                            >
                              {user.username}
                            </Text>
                          </Tooltip>
                          {isLockedUser(user) && (
                            <Badge color="orange" variant="light" size="xs">
                              {t("workspace.people.lockedBadge", "Locked")}
                            </Badge>
                          )}
                        </Group>
                        {user.email && (
                          <Text
                            size="xs"
                            c="dimmed"
                            truncate
                            style={{ lineHeight: 1.3 }}
                          >
                            {user.email}
                          </Text>
                        )}
                      </Box>
                    </Group>
                  </Table.Td>
                  <Table.Td w={100}>
                    <Badge
                      size="sm"
                      color={
                        (user.rolesAsString || "").includes("ROLE_ADMIN")
                          ? "blue"
                          : "cyan"
                      }
                      variant="light"
                    >
                      {(user.rolesAsString || "").includes("ROLE_ADMIN")
                        ? t("workspace.people.admin")
                        : t("workspace.people.user")}
                    </Badge>
                  </Table.Td>
                  <Table.Td>
                    <Group gap="xs" wrap="nowrap">
                      {/* Info icon with tooltip */}
                      <Tooltip
                        label={
                          <div>
                            <Text size="xs" fw={500}>
                              Authentication:{" "}
                              {user.authenticationType || "Unknown"}
                            </Text>
                            <Text size="xs">
                              Last Activity:{" "}
                              {userLastRequest[user.username]
                                ? new Date(
                                    userLastRequest[user.username],
                                  ).toLocaleString()
                                : "Never"}
                            </Text>
                          </div>
                        }
                        multiline
                        w={220}
                        position="left"
                        withArrow
                        zIndex={Z_INDEX_OVER_CONFIG_MODAL + 10}
                      >
                        <ActionIcon variant="subtle" color="gray" size="sm">
                          <LocalIcon icon="info" width="1rem" height="1rem" />
                        </ActionIcon>
                      </Tooltip>

                      {/* Actions menu */}
                      <Menu position="bottom-end" withinPortal>
                        <Menu.Target>
                          <ActionIcon variant="subtle" color="gray">
                            <LocalIcon
                              icon="more-vert"
                              width="1rem"
                              height="1rem"
                            />
                          </ActionIcon>
                        </Menu.Target>
                        <Menu.Dropdown
                          style={{ zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
                        >
                          <Menu.Item
                            leftSection={
                              <LocalIcon
                                icon="swap-horiz"
                                width="1rem"
                                height="1rem"
                              />
                            }
                            onClick={() => openChangeTeamModal(user)}
                            disabled={processing || team.name === "Internal"}
                          >
                            {t(
                              "workspace.teams.changeTeam.label",
                              "Change Team",
                            )}
                          </Menu.Item>
                          <Menu.Item
                            leftSection={
                              <LocalIcon
                                icon="lock"
                                width="1rem"
                                height="1rem"
                              />
                            }
                            onClick={() => openChangePasswordModal(user)}
                            disabled={processing}
                          >
                            {t(
                              "workspace.people.changePassword.action",
                              "Change password",
                            )}
                          </Menu.Item>
                          {isLockedUser(user) && (
                            <Menu.Item
                              leftSection={
                                <LocalIcon
                                  icon="lock-open"
                                  width="1rem"
                                  height="1rem"
                                />
                              }
                              onClick={() => handleUnlockUser(user)}
                              disabled={processing}
                            >
                              {t(
                                "workspace.people.unlockAccount",
                                "Unlock Account",
                              )}
                            </Menu.Item>
                          )}
                          {team.name !== "Internal" &&
                            team.name !== "Default" && (
                              <Menu.Item
                                leftSection={
                                  <LocalIcon
                                    icon="person-remove"
                                    width="1rem"
                                    height="1rem"
                                  />
                                }
                                onClick={() => handleRemoveMember(user)}
                                disabled={processing}
                              >
                                {t(
                                  "workspace.teams.removeMember",
                                  "Remove from team",
                                )}
                              </Menu.Item>
                            )}
                          <Menu.Divider />
                          <Menu.Item
                            color="red"
                            leftSection={
                              <LocalIcon
                                icon="delete"
                                width="1rem"
                                height="1rem"
                              />
                            }
                            onClick={() => handleDeleteUser(user)}
                            disabled={processing || team.name === "Internal"}
                          >
                            {t("workspace.people.deleteUser", "Delete User")}
                          </Menu.Item>
                        </Menu.Dropdown>
                      </Menu>
                    </Group>
                  </Table.Td>
                </Table.Tr>
              );
            })
          )}
        </Table.Tbody>
      </Table>

      <ChangeUserPasswordModal
        opened={changePasswordModalOpened}
        onClose={closeChangePasswordModal}
        user={passwordUser}
        onSuccess={fetchTeamDetails}
        mailEnabled={mailEnabled}
      />

      {/* Add Member Modal */}
      <Modal
        opened={addMemberModalOpened}
        onClose={() => setAddMemberModalOpened(false)}
        size="md"
        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
        centered
        padding="xl"
        withCloseButton={false}
      >
        <div style={{ position: "relative" }}>
          <CloseButton
            onClick={() => setAddMemberModalOpened(false)}
            size="lg"
            style={{
              position: "absolute",
              top: -8,
              right: -8,
              zIndex: 1,
            }}
          />
          <Stack gap="lg" pt="md">
            {/* Header with Icon */}
            <Stack gap="md" align="center">
              <LocalIcon
                icon="person-add"
                width="3rem"
                height="3rem"
                style={{ color: "var(--mantine-color-gray-6)" }}
              />
              <Text size="xl" fw={600} ta="center">
                {t("workspace.teams.addMemberToTeam.title")}
              </Text>
              <Text size="sm" c="dimmed" ta="center">
                {t("workspace.teams.addMemberToTeam.addingTo")}{" "}
                <strong>{team.name}</strong>
              </Text>
            </Stack>

            <Select
              label={t("workspace.teams.addMemberToTeam.selectUser")}
              placeholder={t(
                "workspace.teams.addMemberToTeam.selectUserPlaceholder",
              )}
              data={availableUsersForTeam.map((user) => ({
                value: user.id.toString(),
                label: `${user.username}${user.team ? ` (${t("workspace.teams.addMemberToTeam.currentlyIn")} ${user.team.name})` : ""}`,
              }))}
              value={selectedUserId}
              onChange={(value) => setSelectedUserId(value || "")}
              searchable
              comboboxProps={{
                withinPortal: true,
                zIndex: Z_INDEX_OVER_CONFIG_MODAL,
              }}
            />

            {selectedUserId &&
              availableUsersForTeam.find(
                (u) => u.id.toString() === selectedUserId,
              )?.team && (
                <Text size="xs" c="orange">
                  {t("workspace.teams.addMemberToTeam.willBeMoved")}
                </Text>
              )}

            <Button
              onClick={handleAddMember}
              loading={processing}
              fullWidth
              size="md"
              mt="md"
            >
              {t("workspace.teams.addMemberToTeam.submit")}
            </Button>
          </Stack>
        </div>
      </Modal>

      {/* Change Team Modal */}
      <Modal
        opened={changeTeamModalOpened}
        onClose={() => setChangeTeamModalOpened(false)}
        size="md"
        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
        centered
        padding="xl"
        withCloseButton={false}
      >
        <div style={{ position: "relative" }}>
          <CloseButton
            onClick={() => setChangeTeamModalOpened(false)}
            size="lg"
            style={{
              position: "absolute",
              top: -8,
              right: -8,
              zIndex: 1,
            }}
          />
          <Stack gap="lg" pt="md">
            {/* Header with Icon */}
            <Stack gap="md" align="center">
              <LocalIcon
                icon="swap-horiz"
                width="3rem"
                height="3rem"
                style={{ color: "var(--mantine-color-gray-6)" }}
              />
              <Text size="xl" fw={600} ta="center">
                {t("workspace.teams.changeTeam.title", "Change Team")}
              </Text>
              <Text size="sm" c="dimmed" ta="center">
                {t("workspace.teams.changeTeam.changing", "Moving")}{" "}
                <strong>{selectedUser?.username}</strong>
              </Text>
            </Stack>

            <Select
              label={t("workspace.teams.changeTeam.selectTeam", "Select Team")}
              placeholder={t(
                "workspace.teams.changeTeam.selectTeamPlaceholder",
                "Choose a team",
              )}
              data={allTeams
                .filter((t) => t.name !== "Internal")
                .map((team) => ({
                  value: team.id.toString(),
                  label: team.name,
                }))}
              value={selectedTeamId}
              onChange={(value) => setSelectedTeamId(value || "")}
              searchable
              comboboxProps={{
                withinPortal: true,
                zIndex: Z_INDEX_OVER_CONFIG_MODAL,
              }}
            />

            <Button
              onClick={handleChangeTeam}
              loading={processing}
              fullWidth
              size="md"
              mt="md"
            >
              {t("workspace.teams.changeTeam.submit", "Change Team")}
            </Button>
          </Stack>
        </div>
      </Modal>
    </Stack>
  );
}
