import { useState } from 'react';
import { View, Text, Button, Image } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useAuthStore } from '../../stores/auth';
import './index.scss';

export default function Login() {
  const [needBind, setNeedBind] = useState(false);
  const [openid, setOpenid] = useState('');
  const { login, bindPhone, loading } = useAuthStore();

  const handleWechatLogin = async () => {
    try {
      const { code } = await Taro.login();
      const success = await login(code);
      if (success) {
        Taro.switchTab({ url: '/pages/index/index' });
      } else {
        // 未绑定，需要获取手机号
        setNeedBind(true);
        // 从最近的登录响应获取 openid（简化处理）
      }
    } catch (e: any) {
      Taro.showToast({ title: '登录失败', icon: 'none' });
    }
  };

  const handleGetPhone = async (e: any) => {
    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
      Taro.showToast({ title: '需要授权手机号', icon: 'none' });
      return;
    }
    const { encryptedData, iv } = e.detail;
    const success = await bindPhone(openid, encryptedData, iv);
    if (success) {
      Taro.switchTab({ url: '/pages/index/index' });
    } else {
      Taro.showToast({ title: '绑定失败', icon: 'none' });
    }
  };

  return (
    <View className='login-page'>
      <View className='login-header'>
        <View className='login-logo'>
          <Text className='login-logo-text'>+</Text>
        </View>
        <Text className='login-title'>健康管理</Text>
        <Text className='login-subtitle'>您的专属健康管家</Text>
      </View>

      <View className='login-body'>
        {!needBind ? (
          <Button className='login-btn' onClick={handleWechatLogin} loading={loading}>
            微信一键登录
          </Button>
        ) : (
          <Button
            className='login-btn'
            openType='getPhoneNumber'
            onGetPhoneNumber={handleGetPhone}
            loading={loading}
          >
            授权手机号完成绑定
          </Button>
        )}
      </View>
    </View>
  );
}