"use client";
import ChangePasswordForm from "@/components/forms/change-password-form";
import EditProfileForm from "@/components/forms/edit-profile-form";
import AppAvatar from "@/components/ui/avatar";
import AppButton from "@/components/ui/button";
import AppModal from "@/components/ui/modal";
import AppTag from "@/components/ui/tag";
import AppTypography from "@/components/ui/typography";
import { setUserDetail } from "@/lib/redux/features/user";
import { useAppDispatch, useAppSelector } from "@/lib/redux/hooks";
import { UserType } from "@/types/user";
import { Divider } from "antd";
import { PencilLine, UserPen } from "lucide-react";
import { useTranslations } from "next-intl";
import React, { useEffect, useState } from "react";
import { doGetAuthInfo, getAuthInfo } from "@/lib/redux/features/auth";
import { ResponseStatus, STORAGE_KEYS } from "@/types/common";
import StorageHelper from "@/lib/storeHelper";
import { GetAuthInfoResponse } from "@/types/auth";

type AppMyProfileProps = {
  userId: string;
};

const AppMyProfile = ({ userId }: AppMyProfileProps) => {
  const t = useTranslations("ManageAccountPage");
  const dispatch = useAppDispatch();

  const [openEditModal, setOpenEditModal] = useState(false);
  const [openChangePasswordModal, setOpenChangePasswordModal] = useState(false);
  const authInfo = useAppSelector(getAuthInfo);

  useEffect(() => {
    (async () => {
      try {
        await handleGetAuthInfo(userId);
      } catch (error) {
        console.error("Failed to get auth info:", error);
      }
    })();
  }, [userId]);

  const handleGetAuthInfo = async (id: string) => {
    try {
      if (!id) {
        console.error("User ID not found!");
        return;
      }
      const result = await dispatch(doGetAuthInfo());
      const payload = result?.payload as GetAuthInfoResponse;
      if (payload && payload.status === ResponseStatus.SUCCESS) {
        dispatch(setUserDetail(payload?.data));
        StorageHelper.setLocalObject(STORAGE_KEYS.user, payload?.data);
      }
    } catch (error) {
      console.error("Get user info error:", error);
    }
  };

  const handleOpenEditModal = () => {
    setOpenEditModal(true);
  };

  const handleCloseEditModal = () => {
    setOpenEditModal(false);
  };

  const handleOpenChangePasswordModal = () => {
    setOpenChangePasswordModal(true);
  };

  const handleCloseChangePasswordModal = () => {
    setOpenChangePasswordModal(false);
  };

  const handleRenderUserRole = (status: UserType) => {
    switch (status) {
      case UserType.ADMIN:
        return (
          <AppTag color="#fb923c" className="ml-3">
            {t("user_type.SUPER_ADMIN")}
          </AppTag>
        );
      case UserType.USER:
        return (
          <AppTag color="#fb923c" className="ml-3">
            {t("user_type.USER")}
          </AppTag>
        );
      default:
        return "";
    }
  };

  return (
    <div className="profile-container bg-white py-4 px-8 m-4 rounded-lg shadow-md">
      <div className="flex flex-col justify-center items-center">
        <div>
          <AppAvatar size={64} />
        </div>
        <div>
          <AppTypography className="!text-neutral-600 !text-xl font-semibold">
            {!authInfo?.firstName && !authInfo?.lastName
              ? "-"
              : t("full_name", {
                  first_name: authInfo?.firstName,
                  last_name: authInfo?.lastName,
                })}
          </AppTypography>
        </div>
        <div>
          <AppTypography className="!text-neutral-600 !text-xl font-semibold">
            {authInfo?.email ? authInfo?.email : "-"}
          </AppTypography>
        </div>
        <div>
          {authInfo?.userType && handleRenderUserRole(authInfo?.userType)}
        </div>
      </div>
        <div className="flex justify-end space-x-2">
          <AppButton
            type="primary"
            icon={<UserPen size={20} />}
            onClick={handleOpenEditModal}
            className="w-fit"
          >
            {t("edit")}
          </AppButton>
          <AppButton
            type="primary"
            icon={<PencilLine size={20} />}
            onClick={handleOpenChangePasswordModal}
            className="w-fit"
          >
            {t("change_password")}
          </AppButton>
        </div>
      {/*</div>*/}
      <AppModal
        isOpen={openEditModal}
        title={t("edit_account")}
        handleCancel={handleCloseEditModal}
      >
        <EditProfileForm
          handleCloseEditModal={handleCloseEditModal}
          handleGetAuthInfo={handleGetAuthInfo}
        />
      </AppModal>
      <AppModal
        isOpen={openChangePasswordModal}
        title={t("change_password")}
        handleCancel={handleCloseChangePasswordModal}
      >
        <ChangePasswordForm
          handleCloseChangePasswordModal={handleCloseChangePasswordModal}
        />
      </AppModal>
    </div>
  );
};

export default AppMyProfile;