import React, { useEffect, useState } from "react";

import { Autocomplete, Button, Chip, Stack, TextField } from "@mui/material";

import { DateTime } from "luxon";
import { useSnackbar } from "notistack";

import ActionBar from "../../../../components/ActionBar";
import Card from "../../../../components/Card";
import CardActions from "../../../../components/Card/CardActions";
import CardCancelButton from "../../../../components/Card/CardCancelButton";
import CardContent from "../../../../components/Card/CardContent";
import CardFieldSwitch from "../../../../components/Card/CardFieldSwitch";
import CardFieldText from "../../../../components/Card/CardFieldText";
import CardHeader from "../../../../components/Card/CardHeader";
import CardRow from "../../../../components/Card/CardRow";
import CardSaveButton from "../../../../components/Card/CardSaveButton";
import { ContribInlines } from "../../../../components/ContribInlines";
import { Header } from "../../../../components/Header";
import { Page } from "../../../../components/Page";
import { TitleBar } from "../../../../components/TitleBar";
import Content, {
  ContentWrapperWithActionBar,
  LeftColumn,
  RightColumn,
} from "../../../../containers/Content";
import { useApi } from "../../../../contexts/ApiContext";
import { useCardContext } from "../../../../contexts/CardContext";
import { useI18n } from "../../../../contexts/I18nContext";
import { useUser } from "../../../../contexts/UserContext";
import { PageComponent } from "../../../../types";
import { hasPermission } from "../../../../util/has_permission";
import { GroupOption, StaffDetail, StaffOptions } from "../../types/staff";

interface StaffUpdateValues {
  is_active: string;
  groups: string;
}

const StaffDetailPage: PageComponent<StaffDetail> = ({ data }) => {
  const { t } = useI18n();
  const api = useApi();
  const { user: currentUser } = useUser();
  const { enqueueSnackbar } = useSnackbar();
  const [user, setUser] = useState<StaffDetail>(data);
  const [availableGroups, setAvailableGroups] = useState<GroupOption[]>([]);
  const [isResettingPassword, setIsResettingPassword] = useState(false);

  const formatDateTime = (dateString: string | null) => {
    if (!dateString) return t("Never");
    return DateTime.fromISO(dateString as string).toISODate() ?? undefined;
  };

  useEffect(() => {
    const fetchOptions = async () => {
      const response = await api.operations["user.staff:options"].call({});
      if (response.ok) {
        const options: StaffOptions = await response.json();
        setAvailableGroups(options.groups);
      }
    };
    fetchOptions();
  }, [api]);

  const handleSubmit = async (values: StaffUpdateValues) => {
    const response = await api.operations["user.staff:update"].call({
      params: { id: user.id },
      body: {
        is_active: values.is_active === "on",
        groups: values.groups
          ? values.groups
              .split(",")
              .map((id) => parseInt(id.trim(), 10))
              .filter((id) => !isNaN(id))
          : [],
      },
    });

    if (response.ok) {
      const updatedUser = await response.json();
      setUser(updatedUser);
      return t("User updated successfully");
    }

    throw new Error("Failed to update user");
  };

  const handlePasswordReset = async () => {
    setIsResettingPassword(true);

    try {
      const response = await api.operations["user.staff:password-reset-request"].call({
        body: {
          email: user.email,
        },
      });

      if (response.ok) {
        const data = await response.json();
        enqueueSnackbar(data.message || t("Password reset link sent successfully"), {
          variant: "success",
        });
      } else {
        const errorData = await response.json();
        if (Array.isArray(errorData.detail)) {
          enqueueSnackbar(errorData.detail[0]?.msg || t("Failed to send password reset link"), {
            variant: "error",
          });
        } else if (typeof errorData.detail === "string") {
          enqueueSnackbar(errorData.detail, { variant: "error" });
        } else {
          enqueueSnackbar(t("Failed to send password reset link"), { variant: "error" });
        }
      }
    } catch (error) {
      console.error("[PASSWORD_RESET]", error);
      enqueueSnackbar(t("Failed to send password reset link"), { variant: "error" });
    } finally {
      setIsResettingPassword(false);
    }
  };

  const GroupsField = () => {
    const { isEditing } = useCardContext();
    const [selectedGroups, setSelectedGroups] = useState<GroupOption[]>(
      availableGroups.filter((g) => user.groups.includes(g.name)),
    );

    if (isEditing) {
      return (
        <>
          <Autocomplete
            fullWidth
            multiple
            getOptionLabel={(option) => option.name}
            isOptionEqualToValue={(option, value) => option.id === value.id}
            options={availableGroups}
            renderInput={(params) => (
              <TextField {...params} helperText={t("Select user groups")} label={t("Groups")} />
            )}
            renderTags={(value, getTagProps) =>
              value.map((option, index) => (
                <Chip
                  {...getTagProps({ index })}
                  key={option.id}
                  label={option.name}
                  size="small"
                />
              ))
            }
            size="small"
            value={selectedGroups}
            onChange={(_, newValue) => setSelectedGroups(newValue)}
          />
          <input name="groups" type="hidden" value={selectedGroups.map((g) => g.id).join(", ")} />
        </>
      );
    }

    return (
      <Stack direction="column" spacing={1}>
        <strong>{t("Groups")}</strong>
        <Stack direction="row" flexWrap="wrap" gap={1}>
          {user.groups.length > 0 ? (
            user.groups.map((group) => <Chip key={group} label={group} size="small" />)
          ) : (
            <span style={{ fontSize: "0.875rem", color: "#666" }}>{t("No groups")}</span>
          )}
        </Stack>
      </Stack>
    );
  };

  return (
    <Page>
      <Header>
        <TitleBar title={user.email} />
      </Header>

      <ContentWrapperWithActionBar>
        <Content layout="fixedWidth">
          <LeftColumn>
            <Card isEditable={false}>
              <CardHeader title={t("User Details")} />

              <CardContent>
                <CardRow>
                  <CardFieldText
                    formName="email"
                    isEditable={false}
                    label={t("Email")}
                    value={user.email}
                  />
                </CardRow>
                <CardRow>
                  <CardFieldText
                    formName="last_login"
                    isEditable={false}
                    label={t("Last Login")}
                    value={formatDateTime(user.last_login)}
                  />
                </CardRow>
                <CardRow>
                  <CardFieldText
                    formName="date_created"
                    isEditable={false}
                    label={t("Date Joined")}
                    value={formatDateTime(user.date_created)}
                  />
                </CardRow>
              </CardContent>
            </Card>

            <ContribInlines data={data} />
          </LeftColumn>

          <RightColumn>
            <Card<StaffUpdateValues>
              isCompact={true}
              isEditable={hasPermission(currentUser, "user.change_user")}
              onSubmit={handleSubmit}
            >
              <CardHeader title={t("Permissions")} />

              <CardContent>
                <CardRow>
                  <CardFieldSwitch
                    formName="is_active"
                    helperText={t(
                      "Indicates whether the user should be considered active. Uncheck this instead of deleting accounts.",
                    )}
                    label={t("Active")}
                    value={user.is_active}
                  />
                </CardRow>

                <CardRow>
                  <GroupsField />
                </CardRow>
              </CardContent>

              <CardActions>
                <CardCancelButton />
                <CardSaveButton />
              </CardActions>
            </Card>

            <ContribInlines data={data} variant="sidebar" />
          </RightColumn>
        </Content>

        {hasPermission(currentUser, "user.change_user") && (
          <ActionBar>
            <Button
              color="primary"
              disabled={isResettingPassword}
              variant="contained"
              onClick={handlePasswordReset}
            >
              {isResettingPassword ? t("Sending...") : t("Reset Password")}
            </Button>
          </ActionBar>
        )}
      </ContentWrapperWithActionBar>
    </Page>
  );
};

export default StaffDetailPage;