'use client';

import { SendButton } from '@lobehub/editor/react';
import { Button, Flexbox, Select, Text } from '@lobehub/ui';
import { cssVar } from 'antd-style';
import { Undo2Icon } from 'lucide-react';
import { memo, useCallback, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';

import type { Locales } from '@/locales/resources';
import { localeOptions, normalizeLocale } from '@/locales/resources';
import { useGlobalStore } from '@/store/global';
import { useUserStore } from '@/store/user';

import LobeMessage from '../components/LobeMessage';

interface ResponseLanguageStepProps {
  onBack: () => void;
  onNext: () => Promise<void> | void;
}

const ResponseLanguageStep = memo<ResponseLanguageStepProps>(({ onBack, onNext }) => {
  const { i18n, t } = useTranslation(['onboarding', 'common']);
  const switchLocale = useGlobalStore((s) => s.switchLocale);
  const setSettings = useUserStore((s) => s.setSettings);

  // Mirror i18n's current locale rather than navigator.language. The user may
  // have already switched language in the previous step (TelemetryStep), so
  // navigator.language can disagree with what is being rendered. Deriving
  // straight from i18n keeps the Select in lock-step with the visible UI.
  const value: Locales = normalizeLocale(
    i18n.resolvedLanguage || i18n.language || navigator.language,
  );
  const [isNavigating, setIsNavigating] = useState(false);
  const isNavigatingRef = useRef(false);

  const handleNext = useCallback(async () => {
    if (isNavigatingRef.current) return;
    isNavigatingRef.current = true;
    setIsNavigating(true);
    await setSettings({ general: { responseLanguage: value } });
    await onNext();
  }, [value, setSettings, onNext]);

  const handleBack = useCallback(() => {
    if (isNavigatingRef.current) return;
    isNavigatingRef.current = true;
    setIsNavigating(true);
    onBack();
  }, [onBack]);

  const Message = useCallback(
    // eslint-disable-next-line @eslint-react/no-nested-component-definitions
    () => (
      <LobeMessage
        sentences={[
          t('responseLanguage.title'),
          t('responseLanguage.title2'),
          t('responseLanguage.title3'),
        ]}
      />
    ),
    [t],
  );

  return (
    <Flexbox gap={16}>
      <Message />
      <Flexbox horizontal align={'center'} gap={12}>
        <Select
          showSearch
          options={localeOptions}
          size="large"
          value={value}
          optionRender={(item) => (
            <Flexbox key={item.value}>
              <Text>{item.label}</Text>
              <Text fontSize={12} type={'secondary'}>
                {t(`lang.${item.value}` as any, { ns: 'common' })}
              </Text>
            </Flexbox>
          )}
          style={{
            fontSize: 20,
            fontWeight: 'bold',
            width: '100%',
          }}
          onChange={(v) => {
            if (v) switchLocale(v);
          }}
        />
        <SendButton
          disabled={isNavigating}
          type="primary"
          style={{
            zoom: 1.5,
          }}
          onClick={handleNext}
        />
      </Flexbox>
      <Text style={{ fontSize: 12 }} type="secondary">
        {t('responseLanguage.hint')}
      </Text>
      <Flexbox horizontal justify={'flex-start'} style={{ marginTop: 32 }}>
        <Button
          disabled={isNavigating}
          icon={Undo2Icon}
          type={'text'}
          style={{
            color: cssVar.colorTextDescription,
          }}
          onClick={handleBack}
        >
          {t('back')}
        </Button>
      </Flexbox>
    </Flexbox>
  );
});

ResponseLanguageStep.displayName = 'ResponseLanguageStep';

export default ResponseLanguageStep;
