import { useState } from 'react';
import { Box, Button, useTheme, useMediaQuery } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { CardContainer } from '@/components/CardContainer';
import { ProfileImage } from './personlInformation/ProfileImage';
import { InfoRowDisplay } from './personlInformation/InfoRowDisplay';
import { InfoRowEdit } from './personlInformation/InfoRowEdit';
import Logo from '@/components/Logo';
import { PageWrapper } from '../PageWrapper';

export function PersonalInformation() {
  const { t } = useTranslation('profileSetting');
  const [isEditing, setIsEditing] = useState(false);
  const [gender, setGender] = useState('');
  const [uploadedImageUrl, setUploadedImageUrl] = useState<string | null>(null);
  const theme = useTheme();
  const isMdUp = useMediaQuery(theme.breakpoints.up('lg'));

  const initialData = {
    firstName: 'محمد حسین',
    lastName: 'برزه‌گر',
    country: 'قطر',
    gender: 'مرد',
    nationalCode: '',
  };
  const [data, setData] = useState(initialData);

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

  const toggleEdit = () => {
    setIsEditing((prev) => !prev);
    if (isEditing) {
      setData((prev) => ({
        ...prev,
        gender:
          gender === 'male'
            ? t('settingForm.man')
            : gender === 'female'
              ? t('settingForm.woman')
              : '',
      }));
    } else {
      setGender(
        data.gender === t('settingForm.man')
          ? 'male'
          : data.gender === t('settingForm.woman')
            ? 'female'
            : '',
      );
    }
  };

  return (
    <PageWrapper>
      {isMdUp && (
        <>
          <Box
            sx={{
              display: 'flex',
              alignItems: 'center',
              py: 2,
              height: 84,
            }}
          >
            <Logo />
          </Box>
          <Box
            sx={{ width: '100%', height: 1, bgcolor: 'background.default' }}
          />
        </>
      )}
      <CardContainer
        title={t('settingForm.titlePersonalInfo')}
        subtitle={t('settingForm.descriptionPersonalInfo')}
        highlighted={isEditing}
        action={
          <Box sx={{ display: 'flex', gap: 1, flexWrap: 'wrap' }}>
            {isEditing && (
              <Button
                variant="text"
                onClick={() => setIsEditing(false)}
                size="large"
                sx={{
                  color: 'primary.main',
                  textTransform: 'none',
                  width: { xs: '100%', sm: 'auto' },
                  fontSize: { xs: '0.85rem', sm: '1rem' },
                }}
              >
                {t('settingForm.rejectButton')}
              </Button>
            )}
            <Button
              onClick={toggleEdit}
              size="large"
              variant="outlined"
              sx={{
                textTransform: 'none',
                border: '1px solid',
                borderColor: 'primary.main',
                borderRadius: '4px',
                bgcolor: isEditing ? 'primary.main' : 'background.paper',
                color: isEditing ? 'primary.contrastText' : 'primary.main',
                px: { xs: 2, sm: '22px' },
                py: { xs: '6px', sm: '8px' },
                width: { xs: '100%', sm: isEditing ? '85px' : '93px' },
                fontSize: { xs: '0.9rem', sm: '1rem' },
              }}
            >
              {isEditing
                ? t('settingForm.saveButton')
                : t('settingForm.editButton')}
            </Button>
          </Box>
        }
      >
        <Box
          sx={{
            px: { xs: 2, sm: 3, md: 4 },
            py: 2,
            display: 'flex',
            flexDirection: 'column',
            gap: 2,
            bgcolor: 'background.paper',
          }}
        >
          {isEditing && (
            <ProfileImage
              initials={initials}
              uploadedImageUrl={uploadedImageUrl}
              onImageChange={(e) => {
                const file = e.target.files?.[0];
                if (file) {
                  const reader = new FileReader();
                  reader.onload = () =>
                    setUploadedImageUrl(reader.result as string);
                  reader.readAsDataURL(file);
                }
              }}
            />
          )}

          {isEditing ? (
            <InfoRowEdit
              data={data}
              setData={setData}
              gender={gender}
              setGender={setGender}
            />
          ) : (
            <InfoRowDisplay
              data={data}
              uploadedImageUrl={uploadedImageUrl}
              initials={initials}
            />
          )}
        </Box>
      </CardContainer>
    </PageWrapper>
  );
}