import { useAppAlarmConsentMutation } from '@/entities/alarm/api/use-app-alarm-consent-mutation';
import { useAppAlarmFindMutation } from '@/entities/alarm/api/use-app-alarm-find-mutation';
import { AppAlarmConsentParams, AppAlarmConsentResponse, AppAlarmFindParams, AppAlarmFindResponse, MERCHANT_ADMIN_APP } from '@/entities/alarm/model/types';
import { LoginTypeBottomSheet } from '@/entities/alarm/ui/login-type-bottom-sheet';
import { ServiceLanguageBottomSheet } from '@/entities/alarm/ui/service-language-bottom-sheet';
import { APP_LANGUAGE, APP_LOGIN_TYPE } from '@/entities/common/model/constant';
import { AppLanguage, HeaderType, LoginType } from '@/entities/common/model/types';
import { useStore } from '@/shared/model/store';
import {
	useSetHeaderTitle,
	useSetHeaderType,
	useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout';
import { ChangeEvent, useCallback, useEffect, useState } from 'react';
import { useAppBridge } from '@/hooks/useAppBridge';
import { useTranslation } from 'react-i18next';
import appBridge from '@/utils/appBridge';
import { Dialog } from '@/shared/ui/dialogs/dialog';

export const SettingPage = () => {
  let userInfo = useStore.getState().UserStore.userInfo;
  const {
    isPushNotificationEnabled,
    openAppSettings,
    logout,
    getLoginType,
    getNotificationSetting,
    setNotificationSetting: updateNotificationSetting,
    isAndroid,
    getLanguage
  } = useAppBridge();
  const { t, i18n } = useTranslation();

  useSetHeaderTitle(t('settings.title'));
  useSetHeaderType(HeaderType.LeftArrow);
  useSetFooterMode(false);

  const [loginTypeBottomSheetOn, setLoginTypeBottomSheetOn] = useState<boolean>(false);
  const [serviceLanguageBottomSheetOn, setServiceLanguageBottomSheetOn] = useState<boolean>(false);
  const [loginType, setLoginType] = useState<LoginType>(LoginType.ID);
  const [appLanguage, setAppLanguage] = useState<AppLanguage>(
    (i18n.language === 'en' ? AppLanguage.EN : AppLanguage.KO)
  );

  const {mutateAsync: appAlarmFind} = useAppAlarmFindMutation();
  const {mutateAsync: appAlarmConsent} = useAppAlarmConsentMutation();

  const [pushNotificationEnabled, setPushNotificationEnabled] = useState<boolean>(false);
  const [notificationSetting, setNotificationSetting] = useState<boolean>(true);
  const [alarmSetting, setAlarmSetting] = useState<Record<string, boolean>>({
    '21': false,
    '11': false,
    '31': false,
    '41': false,
    '61': false,
    '62': false,
    '15': false
  });

  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
  
  const onClickPolicy = () => {
    window.open('https://www.nicepay.co.kr/cs/terms/policy1.do', '_blank');
  };

  const onClickLogout = () => {
    setDialogOpen(true);
  };

  const checkPushNotificationStatus = useCallback(() => {
    console.log('checkPushNotificationStatus');
    isPushNotificationEnabled().then((enabled) => {
      setPushNotificationEnabled(enabled);
    });
  }, [isPushNotificationEnabled]);

  const loadLoginType = useCallback(() => {
    getLoginType().then((type) => {
      setLoginType(type as LoginType);
    });
  }, [getLoginType]);

  const loadLanguage = useCallback(() => {
    getLanguage().then((language) => {
      const languageType = language === 'en' ? AppLanguage.EN : AppLanguage.KO;
      setAppLanguage(languageType);
      // i18n 언어도 동기화
      if (i18n.language !== language) {
        i18n.changeLanguage(language);
      }
    });
  }, [getLanguage, i18n]);

  const onClickPushNotificationToggle = () => {
    openAppSettings();
  };

  // 알림 설정 로드 (Android만)
  const loadNotificationSetting = useCallback(async () => {
    if (!isAndroid) {
      console.log('[loadNotificationSetting] Not Android, skipping');
      return;
    }

    try {
      console.log('[loadNotificationSetting] Calling getNotificationSetting()...');
      const enabled = await getNotificationSetting();
      console.log('[loadNotificationSetting] Received value from bridge:', enabled);
      console.log('[loadNotificationSetting] Type of enabled:', typeof enabled);

      setNotificationSetting(enabled);
      console.log('[loadNotificationSetting] State updated to:', enabled);
    } catch (error) {
      console.error('[loadNotificationSetting] Failed to load notification setting:', error);
    }
  }, [isAndroid, getNotificationSetting]);

  // 알림 설정 토글 핸들러 (Android만)
  const onClickNotificationSettingToggle = useCallback(async () => {
    if (!isAndroid) {
      console.log('[onClickNotificationSettingToggle] Not Android, skipping');
      return;
    }

    try {
      const newValue = !notificationSetting;
      console.log('[onClickNotificationSettingToggle] to save:', newValue);

      const result = await updateNotificationSetting(newValue);
      console.log('[onClickNotificationSettingToggle] result:', result);

      // ✅ needsPermission이 true이면 설정 화면으로 이동한 것
      if (result && typeof result === 'object' && 'needsPermission' in result && result.needsPermission) {
        console.log('[onClickNotificationSettingToggle] Permission needed - opened settings');
        // 설정이 변경되지 않았으므로 상태 유지
        return;
      }

      // ✅ 성공한 경우에만 상태 업데이트
      if (result && typeof result === 'object' && 'enabled' in result) {
        setNotificationSetting(result.enabled);
        console.log('[onClickNotificationSettingToggle] State updated to:', result.enabled);
      } else {
        // Fallback
        setNotificationSetting(newValue);
        console.log('[onClickNotificationSettingToggle] State updated to (fallback):', newValue);
      }

      // ✅ 저장 후 바로 다시 읽어서 확인
      console.log('[onClickNotificationSettingToggle] Verifying saved value...');
      const verifyValue = await getNotificationSetting();
      console.log('[onClickNotificationSettingToggle] Verified value:', verifyValue);

      if (verifyValue !== result?.enabled && !result?.needsPermission) {
        console.error('[onClickNotificationSettingToggle] WARNING: Saved value != Verified value', {
          saved: result?.enabled,
          verified: verifyValue
        });
      }
    } catch (error) {
      console.error('[onClickNotificationSettingToggle] Failed to update notification setting:', error);
    }
  }, [isAndroid, notificationSetting, updateNotificationSetting, getNotificationSetting]);

  const responseAlarmSetting = useCallback((data: AppAlarmFindResponse) => {
    let responseAlarms: Record<string, boolean> = {};
    for(let i=0;i<data.alarmAgree.length;i++){
      let item = data.alarmAgree[i];
      if(item){
        let appNotificationSubCategory = item.appNotificationSubCategory;
        let appNotificationAllowed = item.appNotificationAllowed;
        responseAlarms['' + appNotificationSubCategory] = appNotificationAllowed;
      }
    }
    setAlarmSetting(prevState => ({
      ...prevState,
      ...responseAlarms
    }));
  }, []);

  const callAppAlarmFind = useCallback(() => {
    if(userInfo.usrid){
      let params: AppAlarmFindParams = {
        usrid: userInfo.usrid,
        appCl: MERCHANT_ADMIN_APP.MERCHANT_ADMIN_APP
      };
      appAlarmFind(params).then((rs: AppAlarmFindResponse) => {
        responseAlarmSetting(rs);
      });
    }
  }, [userInfo.usrid, appAlarmFind, responseAlarmSetting]);

  const callAppAlarmConsent = (value: boolean, alarmCode: string) => {
    if(userInfo.usrid){
      let params: AppAlarmConsentParams = {
        usrid: userInfo.usrid,
        appCl: MERCHANT_ADMIN_APP.MERCHANT_ADMIN_APP,
        appNotificationSubCategory: alarmCode,
        appNotificationAllowed: value
      };
      appAlarmConsent(params).then((_rs: AppAlarmConsentResponse) => {
        setAlarmSetting({
          ...alarmSetting,
          ...{ ['' + alarmCode]: value }
        });
      });
    }
  };

  const changeLanguage = async (language: string) => {
    // 웹 언어 변경
    i18n.changeLanguage(language);
    localStorage.setItem('i18nextLng', language);

    // 네이티브 환경에서 네이티브 언어도 변경
    if (appBridge.isNativeEnvironment()) {
      try {
        await appBridge.setLanguage(language);
      } catch (error) {
        console.error('Failed to set native language:', error);
      }
    }
  };

  const getLoginTypeLabel = (type: LoginType): string => {
    switch (type) {
      case LoginType.ID:
        return t('settings.loginType.idPassword');
      case LoginType.BIOMETRIC:
        return t('settings.loginType.biometric');
      default:
        return '';
    }
  };

  const getLanguageLabel = (language: AppLanguage): string => {
    switch (language) {
      case AppLanguage.KO:
        return '한국어';
      case AppLanguage.EN:
        return 'English';
      default:
        return '';
    }
  };

  const handleSetLoginType = (type: string) => {
    setLoginType(type as LoginType);
  };

  useEffect(() => {
    callAppAlarmFind();
    checkPushNotificationStatus();
    loadLoginType();
    loadNotificationSetting();
    loadLanguage();

    // 앱이 포어그라운드로 돌아올 때 푸시 알림 권한 상태 재확인
    const handleVisibilityChange = () => {
      if (document.visibilityState === 'visible') {
        checkPushNotificationStatus();
        loadNotificationSetting();
      }
    };

    const handleFocus = () => {
      checkPushNotificationStatus();
      loadNotificationSetting();
    };

    document.addEventListener('visibilitychange', handleVisibilityChange);
    window.addEventListener('focus', handleFocus);

    return () => {
      document.removeEventListener('visibilitychange', handleVisibilityChange);
      window.removeEventListener('focus', handleFocus);
    };
  }, [callAppAlarmFind, checkPushNotificationStatus, loadLoginType, loadNotificationSetting, loadLanguage]);

  return (
    <>
      <main className="pop">
        <div className="sub-wrap">
          {/* ✅ Android일 때는 앱 내 설정, 아니면 시스템 권한 표시 */}
          <div className="settings-header">
            <div className="settings-title">{t('settings.notificationSettings')}</div>
            <label className="settings-switch">
              <input
                type="checkbox"
                checked={isAndroid ? notificationSetting : pushNotificationEnabled}
                readOnly
                onClick={(e) => {
                  e.preventDefault();
                  if (isAndroid) {
                    onClickNotificationSettingToggle();
                  } else {
                    onClickPushNotificationToggle();
                  }
                }}
              />
              <span className="slider"></span>
            </label>
          </div>

          <div className="settings-divider"></div>

          <div className="settings-section">
            <div className="settings-section-title">{t('settings.noticeAlarms')}</div>
            <div className="settings-row">
              <div className="settings-row-title">{t('settings.serviceOperation')}</div>
              <label className="settings-switch">
                <input
                  type="checkbox"
                  checked={ alarmSetting['21'] }
                  disabled={ !pushNotificationEnabled }
                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '21') }
                />
                <span className="slider"></span>
              </label>
            </div>
            <div className="settings-row">
              <div className="settings-row-title">{t('settings.interestFreeEvent')}</div>
              <label className="settings-switch">
                <input
                  type="checkbox"
                  checked={ alarmSetting['11'] }
                  disabled={ !pushNotificationEnabled }
                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '11') }
                />
                <span className="slider"></span>
              </label>
            </div>
            <div className="settings-row">
              <div className="settings-row-title">{t('settings.servicePolicyChange')}</div>
              <label className="settings-switch">
                <input
                  type="checkbox"
                  checked={ alarmSetting['31'] }
                  disabled={ !pushNotificationEnabled }
                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '31') }
                />
                <span className="slider"></span>
              </label>
            </div>
            <div className="settings-row">
              <div className="settings-row-title">{t('settings.niceNews')}</div>
              <label className="settings-switch">
                <input
                  type="checkbox"
                  checked={ alarmSetting['41'] }
                  disabled={ !pushNotificationEnabled }
                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '41') }
                />
                <span className="slider"></span>
              </label>
            </div>
          </div>

          <div className="settings-section nopadding">
            <div className="settings-section-title">{t('settings.settlementAlarms')}</div>
            <div className="settings-row">
              <div className="settings-row-title">{t('settings.settlementStatus')}</div>
              <label className="settings-switch">
                <input
                  type="checkbox"
                  checked={ alarmSetting['61'] }
                  disabled={ !pushNotificationEnabled }
                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '61') }
                />
                <span className="slider"></span>
              </label>
            </div>
            <div className="settings-row nopadding">
              <div className="settings-row-title">{t('settings.settlementLimit')}</div>
              <label className="settings-switch">
                <input
                  type="checkbox"
                  checked={ alarmSetting['62'] }
                  disabled={ !pushNotificationEnabled }
                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '62') }
                />
                <span className="slider"></span>
              </label>
            </div>
          </div>

          <div className="settings-divider"></div>

          <div className="settings-section nopadding">
            <div className="settings-row link">
              <div className="settings-row-title bd-style">{t('settings.marketingConsent')}</div>
              <label className="settings-switch">
                <input
                  type="checkbox"
                  checked={ alarmSetting['15'] }
                  onChange={ (e: ChangeEvent<HTMLInputElement>) => callAppAlarmConsent(e.target.checked, '15') }
                />
                <span className="slider"></span>
              </label>
            </div>
          </div>

          <div
            className="settings-row link"
            onClick={ () => setLoginTypeBottomSheetOn(true) }
          >
            <div className="settings-row-title bd-style">{t('settings.loginTypeSetting')}</div>
            <div className="click">{ getLoginTypeLabel(loginType) }</div>
          </div>

          <div
            className="settings-row link nopadding"
            onClick={ () => setServiceLanguageBottomSheetOn(true) }
          >
            <div className="settings-row-title bd-style">{t('settings.serviceLanguageSetting')}</div>
            <div className="click">{ getLanguageLabel(appLanguage) }</div>
          </div>

          <div className="settings-divider"></div>

          <div className="settings-row danger" onClick={onClickPolicy}>
            <div className="settings-row-title bd-style">{t('settings.termsAndPrivacy')}</div>
          </div>

          <div className="settings-row danger" onClick={onClickLogout}>
            <div className="settings-row-title bd-style">{t('settings.logout')}</div>
          </div>
        </div>
      </main>
      { !!loginTypeBottomSheetOn &&
        <LoginTypeBottomSheet
          loginTypeBottomSheetOn={ loginTypeBottomSheetOn }
          setLoginTypeBottomSheetOn={ setLoginTypeBottomSheetOn }
          loginType={ loginType }
          setLoginType={ handleSetLoginType }
          onBiometricRegistered={ loadLoginType }
          isAndroid={ isAndroid }
        ></LoginTypeBottomSheet>
      }
      { !!serviceLanguageBottomSheetOn &&
        <ServiceLanguageBottomSheet
          serviceLanguageBottomSheetOn={ serviceLanguageBottomSheetOn }
          setServiceLanguageBottomSheetOn={ setServiceLanguageBottomSheetOn }
          appLanguage={ appLanguage }
          setAppLanguage={ setAppLanguage }
          changeLanguage={ changeLanguage }
        ></ServiceLanguageBottomSheet>
      }
      { !!dialogOpen &&
        <Dialog
          open={dialogOpen}
          onClose={() => setDialogOpen(false)}
          message={t('settings.logoutConfirm')}
          afterLeave={() => setDialogOpen(false)}
          buttonLabel={[t('common.cancel'), t('common.confirm')]}
          onConfirmClick={() => {
            console.log(t('common.confirm'));
            logout();
          }}
          onCancelClick={() => setDialogOpen(false)}
        />
      }
    </>
  );
};