import { useState, useEffect, useRef } from 'react';
import { Box, Button, CircularProgress } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { CardContainer } from '@/components/CardContainer';
import { ProfileImage } from './personalInformation/ProfileImage';
import { InfoRowDisplay } from './personalInformation/InfoRowDisplay';
import { InfoRowEdit } from './personalInformation/InfoRowEdit';
import { PageWrapper } from '../PageWrapper';
import { useApi } from '@/hooks/useApi';
import { Gender, type InfoRowData } from '../../types/settingsType';
import { saveProfile } from '../../api/settingsApi';
import { useToast } from '@rkheftan/harmony-ui';
import { useProfile } from '../../hooks/useProfile';

export function PersonalInformation() {
  const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_URL;
  const { t } = useTranslation('setting');
  const [isEditing, setIsEditing] = useState(false);
  const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
  const [uploadedImageFile, setUploadedImageFile] = useState<File | null>(null);
  const [data, setData] = useState<InfoRowData>({
    firstName: '',
    lastName: '',
    nationalCode: '',
    gender: Gender.None,
    country: '',
  });
  const [originalData, setOriginalData] = useState<InfoRowData | null>(null);
  const showToast = useToast();
  const infoRowEditRef = useRef<{ validateFields: () => boolean }>(null);
  const { isLoadingProfile, refetchProfile } = useProfile();
  const { loading: isSavingProfile, execute: executeSaveProfile } =
    useApi(saveProfile);

  useEffect(() => {
    const loadProfile = async () => {
      const profileData = await refetchProfile();
      if (!profileData) return;
      if (profileData.success) {
        const fetchedData = {
          firstName: profileData.firstName ?? '',
          lastName: profileData.lastName ?? '',
          nationalCode: profileData.nationalCode ?? '',
          gender: Object.values(Gender).includes(profileData.gender as Gender)
            ? (profileData.gender as Gender)
            : Gender.None,
          country: profileData.countryCode ?? '',
        };
        setData(fetchedData);
        setOriginalData(fetchedData);
        setUploadedImageUrl(
          profileData.profileImageUrl
            ? `${imageBaseUrl}/${profileData.profileImageUrl}`
            : null,
        );
        console.log(uploadedImageUrl);
        setUploadedImageFile(null);
      } else {
        showToast({
          message: profileData.message || t('message.serverError'),
          severity: 'error',
        });
      }
    };
    loadProfile();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const initials = `${data?.firstName?.trim()[0] || ''}‌${data?.lastName?.trim()[0] || ''}`;

  const handleEditClick = () => setIsEditing(true);

  const handleCancelClick = () => {
    setIsEditing(false);
    if (originalData) setData(originalData);
    setUploadedImageFile(null);
  };

  const handleSaveClick = async () => {
    if (!data) return;
    const isValid = infoRowEditRef.current?.validateFields?.();
    if (!isValid) return;
    const saveData = await executeSaveProfile({
      data,
      imageUrl: uploadedImageFile,
    });
    if (!saveData) return;
    if (saveData?.success) {
      showToast({
        message: t('settingForm.successSaveProfile'),
        severity: 'success',
      });
      setIsEditing(false);
      setOriginalData(data);
      setUploadedImageFile(null);
      refetchProfile({ force: true });
    } else {
      showToast({
        message: saveData.message || t('message.serverError'),
        severity: 'error',
      });
    }
  };

  return (
    <PageWrapper>
      <CardContainer
        title={t('settingForm.titlePersonalInfo')}
        subtitle={t('settingForm.descriptionPersonalInfo')}
        highlighted={isEditing}
        action={
          <Box sx={{ display: 'flex', gap: 1 }}>
            {isEditing ? (
              <>
                <Button
                  type="button"
                  variant="text"
                  onClick={handleCancelClick}
                  size="large"
                  sx={{
                    color: 'primary.main',
                    textTransform: 'none',
                    width: { xs: '100%', sm: 'auto' },
                  }}
                >
                  {t('settingForm.rejectButton')}
                </Button>
                <Button
                  type="submit"
                  form="profileForm"
                  size="large"
                  variant="contained"
                  disabled={isSavingProfile}
                  sx={{
                    textTransform: 'none',
                    width: { xs: '100%', sm: 'auto' },
                  }}
                >
                  {isSavingProfile ? (
                    <CircularProgress size={24} color="inherit" />
                  ) : (
                    t('settingForm.saveButton')
                  )}
                </Button>
              </>
            ) : (
              <Button
                onClick={handleEditClick}
                size="large"
                variant="outlined"
                sx={{ borderRadius: 1 }}
              >
                {t('settingForm.editButton')}
              </Button>
            )}
          </Box>
        }
      >
        {isLoadingProfile ? (
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              p: 4,
              minHeight: '200px',
            }}
          >
            <CircularProgress />
          </Box>
        ) : isEditing ? (
          <Box
            component="form"
            id="profileForm"
            noValidate
            onSubmit={(e) => {
              e.preventDefault();
              e.stopPropagation();
              if (!isSavingProfile) void handleSaveClick();
            }}
            sx={{
              mx: { xs: 2, sm: 3, md: 4 },
              py: 2,
              display: 'flex',
              flexDirection: 'column',
              gap: 2,
              bgcolor: 'background.paper',
            }}
          >
            <ProfileImage
              initials={initials}
              uploadedImageUrl={uploadedImageUrl}
              onImageChange={(file) => {
                setUploadedImageFile(file);
                const reader = new FileReader();
                reader.onload = () =>
                  setUploadedImageUrl(reader.result as string);
                reader.readAsDataURL(file);
              }}
              onRemoveImage={() => {
                setUploadedImageFile(null);
                setUploadedImageUrl(null);
              }}
            />
            <InfoRowEdit ref={infoRowEditRef} data={data} setData={setData} />
          </Box>
        ) : (
          <Box
            sx={{
              mx: { xs: 2, sm: 3, md: 4 },
              py: 2,
              display: 'flex',
              flexDirection: 'column',
              gap: 2,
              bgcolor: 'background.paper',
            }}
          >
            <InfoRowDisplay
              data={data}
              uploadedImageUrl={uploadedImageUrl}
              initials={initials}
            />
          </Box>
        )}
      </CardContainer>
    </PageWrapper>
  );
}
