Account/src/features/profile/routes/SettingPage.tsx

import { useState, useEffect } from 'react';
import {
  Box,
  Typography,
  Button,
  useColorScheme,
  Autocomplete,
  TextField,
  CircularProgress,
} from '@mui/material';
import { CardContainer } from '@/components/CardContainer';
import { useTranslation } from 'react-i18next';
import { ThemeToggleButton } from '@/components/ThemToggle';
import { PageWrapper } from '../components/PageWrapper';
import { Icon } from '@rkheftan/harmony-ui';
import { Sun1, Moon, Calendar1 } from 'iconsax-react';
import { useApi } from '@/hooks/useApi';
import { fetchProfile, saveSettings } from '../api/settingsApi';

type ThemeMode = 'light' | 'dark';
type CalendarType = 'christian' | 'solar' | 'lunar';

interface SettingsState {
  language: string;
  calendar: CalendarType;
  theme: ThemeMode;
}

const languageOptions = [
  { code: 'en', label: 'English', apiValue: 1 },
  { code: 'fa', label: 'فارسی', apiValue: 2 },
];

const calendarOptions: { key: CalendarType; apiValue: number }[] = [
  { key: 'christian', apiValue: 1 },
  { key: 'solar', apiValue: 2 },
  { key: 'lunar', apiValue: 3 },
];

const themeApiMap: Record<ThemeMode, number> = { light: 1, dark: 2 };

export function SettingPage() {
  const { t, i18n } = useTranslation(['setting']);
  const { mode, setMode } = useColorScheme();

  const [savedSettings, setSavedSettings] = useState<SettingsState>({
    language: i18n.language,
    calendar: 'solar',
    theme: mode === 'light' || mode === 'dark' ? mode : 'light',
  });
  const [draftSettings, setDraftSettings] =
    useState<SettingsState>(savedSettings);
  const [isEditing, setIsEditing] = useState(false);

  const {
    data: profileData,
    loading: isFetching,
    error: fetchError,
  } = useApi(fetchProfile);

  const {
    data: saveData,
    loading: isSaving,
    error: saveError,
    execute: executeSaveSettings,
  } = useApi(saveSettings);

  useEffect(() => {
    if (profileData?.success && profileData.userSettings) {
      const { theme, calendarType, language } = profileData.userSettings;
      const themeReverseMap: { [key: number]: ThemeMode | undefined } = {
        1: 'light',
        2: 'dark',
      };
      const newSettings: SettingsState = {
        theme: themeReverseMap[theme] || 'light',
        calendar:
          calendarOptions.find((c) => c.apiValue === calendarType)?.key ||
          'solar',
        language:
          languageOptions.find((l) => l.apiValue === language)?.code || 'en',
      };
      setSavedSettings(newSettings);
      setDraftSettings(newSettings);
      setMode(newSettings.theme);
      i18n.changeLanguage(newSettings.language);
    }
  }, [profileData, setMode, i18n]);

  useEffect(() => {
    if (saveData?.success) {
      setMode(draftSettings.theme);
      setSavedSettings(draftSettings);
      i18n.changeLanguage(draftSettings.language);
      setIsEditing(false);
    }
  }, [saveData, draftSettings, setMode, i18n]);

  useEffect(() => {
    if (isEditing) {
      const resolvedMode = mode === 'light' || mode === 'dark' ? mode : 'light';
      setDraftSettings({ ...savedSettings, theme: resolvedMode });
    }
  }, [isEditing, savedSettings, mode]);

  const handleCancel = () => {
    setIsEditing(false);
    setDraftSettings(savedSettings);
    setMode(savedSettings.theme);
  };

  const handleEditToggle = () => {
    if (isEditing) {
      const languageObj = languageOptions.find(
        (o) => o.code === draftSettings.language,
      );
      const calendarObj = calendarOptions.find(
        (c) => c.key === draftSettings.calendar,
      );

      if (languageObj && calendarObj) {
        executeSaveSettings({
          theme: themeApiMap[draftSettings.theme],
          calendarType: calendarObj.apiValue,
          language: languageObj.apiValue,
        });
      }
    } else {
      setIsEditing(true);
    }
  };
  const getErrorMessage = (error: unknown): string | null => {
    if (!error) return null;
    if (error instanceof Error) return error.message;
    return String(error);
  };

  return (
    <PageWrapper>
      <CardContainer
        title={t('settings.title')}
        subtitle={t('settings.description')}
        highlighted={isEditing}
        action={
          <Box sx={{ display: 'flex', gap: 1 }}>
            {isEditing && (
              <Button
                variant="text"
                onClick={handleCancel}
                size="large"
                sx={{
                  color: 'primary.main',
                  textTransform: 'none',
                  fontSize: { xs: '0.85rem', sm: '1rem' },
                }}
                disabled={isSaving || isFetching}
              >
                {t('settings.rejectButton')}
              </Button>
            )}
            <Button
              onClick={handleEditToggle}
              size="large"
              variant={isEditing ? 'contained' : 'outlined'}
              disabled={isSaving || isFetching}
            >
              {isSaving
                ? t('settings.saving')
                : isEditing
                  ? t('settings.saveButton')
                  : t('settings.editButton')}
            </Button>
          </Box>
        }
      >
        {isFetching ? (
          <Box
            sx={{
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              p: 4,
              minHeight: '200px',
            }}
          >
            <CircularProgress />
          </Box>
        ) : fetchError ? (
          <Box sx={{ textAlign: 'center', p: 4 }}>
            <Typography color="error.main">
              {getErrorMessage(fetchError)}
            </Typography>
          </Box>
        ) : (
          <Box
            sx={{
              px: { xs: 2, sm: 3, md: 4 },
              py: 2,
              display: 'flex',
              flexDirection: 'column',
              gap: 2,
            }}
          >
            {getErrorMessage(saveError) && (
              <Typography color="error.main" variant="body2" mb={2}>
                {getErrorMessage(saveError)}
              </Typography>
            )}
            <Box
              sx={{
                display: 'flex',
                flexDirection: { xs: 'column', sm: 'row' },
                gap: 4,
                mt: 2,
              }}
            >
              <Box sx={{ flex: 1 }}>
                <Typography variant="caption" color="text.secondary">
                  {t('settings.theme')}
                </Typography>
                {isEditing ? (
                  <ThemeToggleButton
                    value={draftSettings.theme}
                    onChange={(newTheme) => {
                      setDraftSettings((prev) => ({
                        ...prev,
                        theme: newTheme,
                      }));
                    }}
                  />
                ) : (
                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                    <Icon
                      Component={savedSettings.theme === 'light' ? Sun1 : Moon}
                      size="medium"
                      variant="Bold"
                    />
                    <Typography variant="body1">
                      {t(`settings.${savedSettings.theme}`)}
                    </Typography>
                  </Box>
                )}
              </Box>
              <Box sx={{ flex: 1 }}>
                <Typography variant="caption" color="text.secondary">
                  {t('settings.language')}
                </Typography>
                {isEditing ? (
                  <Autocomplete
                    options={languageOptions}
                    getOptionLabel={(o) => o.label}
                    value={languageOptions.find(
                      (o) => o.code === draftSettings.language,
                    )}
                    onChange={(_, v) =>
                      v &&
                      setDraftSettings((prev) => ({
                        ...prev,
                        language: v.code,
                      }))
                    }
                    renderInput={(p) => <TextField {...p} />}
                    size="small"
                    fullWidth
                    disableClearable
                  />
                ) : (
                  <Typography variant="body1">
                    {
                      languageOptions.find(
                        (o) => o.code === savedSettings.language,
                      )?.label
                    }
                  </Typography>
                )}
              </Box>
            </Box>
            <Box sx={{ mt: 2, width: { xs: '100%', sm: 'calc(50% - 16px)' } }}>
              <Typography variant="caption" color="text.secondary">
                {t('settings.calendar')}
              </Typography>
              {isEditing ? (
                <Autocomplete
                  options={calendarOptions.map((c) => c.key)}
                  getOptionLabel={(key) => t(`settings.${key}`)}
                  value={draftSettings.calendar}
                  onChange={(_, v) =>
                    v && setDraftSettings((prev) => ({ ...prev, calendar: v }))
                  }
                  renderInput={(params) => <TextField {...params} />}
                  size="small"
                  fullWidth
                  disableClearable
                />
              ) : (
                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
                  <Icon Component={Calendar1} size="medium" variant="Bold" />
                  <Typography variant="body1">
                    {t(`settings.${savedSettings.calendar}`)}
                  </Typography>
                </Box>
              )}
            </Box>
          </Box>
        )}
      </CardContainer>
    </PageWrapper>
  );
}