import { View, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useUIStore } from '../../../stores/ui';
import { useElderClass } from '../../../hooks/useElderClass';
import './index.scss';

export default function ElderMode() {
  const mode = useUIStore((s) => s.mode);
  const setMode = useUIStore((s) => s.setMode);
  const isElder = mode === 'elder';
  const modeClass = useElderClass();

  const handleToggle = () => {
    const next = isElder ? 'normal' : 'elder';
    setMode(next);
    Taro.showToast({
      title: next === 'elder' ? '已开启长辈模式' : '已关闭长辈模式',
      icon: 'none',
      duration: 1500,
    });
  };

  return (
    <View className={`elder-mode-page ${modeClass}`}>
      <View className='elder-mode-card'>
        <View className='elder-mode-header'>
          <Text className='elder-mode-icon'>老</Text>
          <View className='elder-mode-info'>
            <Text className='elder-mode-title'>长辈模式</Text>
            <Text className='elder-mode-desc'>放大字体和按钮，更易阅读和操作</Text>
          </View>
        </View>

        <View className='elder-mode-status'>
          <Text className='elder-mode-status-text'>
            当前状态：{isElder ? '已开启' : '已关闭'}
          </Text>
          <View
            className={`elder-mode-switch ${isElder ? 'elder-mode-switch--on' : ''}`}
            onClick={handleToggle}
          >
            <View className='elder-mode-switch-thumb' />
          </View>
        </View>
      </View>

      <View className='elder-mode-preview'>
        <Text className='elder-mode-preview-title'>效果预览</Text>
        <View className='elder-mode-preview-card'>
          <Text className={`elder-mode-preview-sample ${isElder ? 'elder-mode-preview-sample--large' : ''}`}>
            {isElder ? '长辈模式字体示例' : '标准模式字体示例'}
          </Text>
          <Text className='elder-mode-preview-note'>
            {isElder ? '字号放大 1.3 倍，间距放大 1.2 倍' : '正常字号和间距'}
          </Text>
        </View>
      </View>
    </View>
  );
}