import React, { useState, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { Button, Loading, Card } from '@nutui/nutui-react-taro';
import { Success, Failure, Tips, User } from '@nutui/icons-react-taro';
import Taro, { useRouter } from '@tarojs/taro';
import { confirmQRLogin } from '@/api/passport/qr-login';
import { loginByOpenId } from '@/api/passport/wx-login';

/**
 * 扫码登录确认页面
 * 
 * 支持两种场景：
 * 1. 主动扫码：用户点击按钮调用微信扫码，扫描 PC 端二维码
 * 2. URL 扫码（小程序码）：用户扫描小程序码后，微信自动打开此页面
 * 
 * URL 扫码场景：
 * - 微信「扫普通链接二维码打开小程序」配置的二维码规则：`https://websopy.websoft.top/wx-scan/`
 * - 扫码后 URL：`https://websopy.websoft.top/wx-scan?token=xxx`
 * - 小程序接收到参数后自动确认登录
 * 
 * 登录流程（2026-04-07 实现）：
 * 1. 用户扫码 → 进入 qr-confirm 页面
 * 2. 页面立即调用 wx.login() 获取 code
 * 3. 用 code 调用 /api/wx-login/loginByOpenId 获取/验证用户身份
 * 4. 如果用户不存在 → 跳转到用户页引导注册
 * 5. 如果用户存在 → 自动调用 confirmQRLogin 确认登录
 */
const QRConfirmPage: React.FC = () => {
  const router = useRouter();
  // 移除 useUser 依赖，改用 wx.login() + loginByOpenId 方式验证用户身份
  const [loading, setLoading] = useState(false);
  const [confirmed, setConfirmed] = useState(false);
  const [error, setError] = useState<string>('');
  const [token, setToken] = useState<string>('');
  const [loginMethod, setLoginMethod] = useState<'scan' | 'url'>('url');
  const [userInfo, setUserInfo] = useState<any>(null);

  useEffect(() => {
    // 从 URL 参数中获取 token
    const params = router.params;
    
    // 兼容多种参数名
    // 1. 小程序码场景：?scene=xxx（微信会将 scene 参数透传到小程序）
    // 2. 直接参数：?token=xxx
    // 3. URL 编码参数：?q=xxx（扫普通链接二维码场景）
    // 4. 旧版参数：?qrCodeKey=xxx
    let loginToken = params.scene || params.token || params.qrCodeKey || '';

    // 如果是 q 参数（URL 编码的完整 URL），需要解析
    if (params.q && !loginToken) {
      try {
        const decodedUrl = decodeURIComponent(params.q);
        console.log('[QRConfirm] 解码后的 URL:', decodedUrl);
        
        // 解析 token
        const url = new URL(decodedUrl);
        loginToken = url.searchParams.get('token') || 
                     url.searchParams.get('qrCodeKey') || 
                     '';
        
        setLoginMethod('url');
      } catch (e) {
        console.error('[QRConfirm] 解析 q 参数失败:', e);
        // 尝试直接使用 q 作为 token
        loginToken = decodeURIComponent(params.q);
        setLoginMethod('url');
      }
    } else if (loginToken) {
      setLoginMethod('url');
    }

    if (loginToken) {
      setToken(loginToken);
      console.log('[QRConfirm] 获取到 token:', loginToken);
      
      // 扫码场景：自动确认登录
      // scene 参数说明是扫描小程序码进来的，token 参数说明是扫码跳转过来的
      if (params.scene || params.token || params.qrCodeKey || params.q) {
        console.log('[QRConfirm] 检测到扫码参数，自动确认登录');
        setTimeout(() => {
          handleAutoConfirm(loginToken);
        }, 500);
      }
    } else {
      setError('无效的登录链接');
    }
  }, [router.params]);

  /**
   * 自动确认登录（URL 扫码场景）
   * 
   * 新的登录流程（2026-04-07）：
   * 1. 调用 wx.login() 获取 code
   * 2. 用 code 调用后端 loginByOpenId 接口验证用户身份
   * 3. 用户存在 → 调用 confirmQRLogin 确认登录
   * 4. 用户不存在 → 跳转到用户页引导注册
   */
  const handleAutoConfirm = async (loginToken: string) => {
    try {
      setLoading(true);
      
      // 1. 调用微信登录获取 code
      console.log('[QRConfirm] 调用 wx.login() 获取 code...');
      const loginResult = await Taro.login();
      
      if (!loginResult.code) {
        throw new Error('获取微信登录凭证失败');
      }
      console.log('[QRConfirm] 获取到 code:', loginResult.code);
      
      // 2. 用 code 调用后端接口验证用户身份
      console.log('[QRConfirm] 调用后端 loginByOpenId...');
      const wxLoginResult = await loginByOpenId({
        code: loginResult.code,
        tenantId: 10398 // 使用固定租户ID
      });
      
      console.log('[QRConfirm] loginByOpenId 结果:', wxLoginResult);
      
      // 3. 判断用户是否存在
      if (wxLoginResult.success && wxLoginResult.data) {
        // 用户已注册，保存用户信息并继续确认登录
        console.log('[QRConfirm] 用户已注册，开始确认登录...');
        setUserInfo(wxLoginResult.data.user);
        
        // 调用确认登录
        await handleConfirmLogin(loginToken, wxLoginResult.data.user);
      } else {
        // 用户未注册，跳转到手机号授权登录页面
        console.log('[QRConfirm] 用户未注册，跳转到手机号授权登录页面');
        
        Taro.showToast({
          title: '请先授权登录小程序',
          icon: 'none',
          duration: 2000
        });
        
        setTimeout(() => {
          // 跳转到手机号授权登录页面，登录/注册成功后返回扫码确认页面
          Taro.navigateTo({
            url: '/passport/phone-auth/index?redirect=/passport/qr-confirm'
          });
        }, 2000);
      }
    } catch (err: any) {
      console.error('[QRConfirm] 自动确认登录失败:', err);
      setError(err.message || '自动确认登录失败');
    } finally {
      setLoading(false);
    }
  };

  /**
   * 确认登录
   * @param loginToken - 可选的登录token，默认使用页面token
   * @param wxUserInfo - 微信登录获取的用户信息（可选）
   */
  const handleConfirmLogin = async (loginToken?: string, wxUserInfo?: any) => {
    const confirmToken = loginToken || token;
    
    if (!confirmToken) {
      setError('缺少登录token');
      return;
    }

    // 优先使用传入的用户信息，否则尝试从本地存储获取
    const currentUser = wxUserInfo || userInfo;
    
    if (!currentUser?.userId) {
      // 没有用户信息，尝试从本地存储获取
      const userId = Taro.getStorageSync('UserId');
      if (!userId) {
        setError('请先登录小程序');
        Taro.showToast({
          title: '请先登录小程序',
          icon: 'none'
        });
        
        setTimeout(() => {
          Taro.switchTab({
            url: '/pages/user/user'
          });
        }, 1500);
        return;
      }
      currentUser && (currentUser.userId = Number(userId));
    }

    try {
      setLoading(true);
      setError('');

      const result = await confirmQRLogin({
        token: confirmToken,
        userId: currentUser.userId,
        platform: 'wechat',
        wechatInfo: {
          nickname: currentUser.nickname || currentUser.username,
          avatar: currentUser.avatar
        }
      });

      // 根据 status 判断成功：confirmed 表示登录成功
      const isConfirmed = result.status === 'confirmed' || result.success === true;
      
      if (isConfirmed) {
        setConfirmed(true);
        Taro.showToast({
          title: result.successMessage || result.message || '登录确认成功',
          icon: 'success',
          duration: 2000
        });

        // 3秒后自动关闭或返回
        setTimeout(() => {
          // 尝试返回上一页，如果没有则关闭
          const pages = Taro.getCurrentPages();
          if (pages.length > 1) {
            Taro.navigateBack();
          } else {
            // 小程序场景下，提示用户回到 PC 端
            Taro.showModal({
              title: '登录成功',
              content: '请回到电脑端刷新页面',
              showCancel: false,
              confirmText: '我知道了'
            });
          }
        }, 3000);
      } else if (result.status === 'bind_phone' || result.needBindPhone) {
        // 需要绑定手机号
        Taro.showToast({
          title: '请先绑定手机号',
          icon: 'none'
        });
        setTimeout(() => {
          Taro.redirectTo({ url: '/passport/sms-login' });
        }, 1500);
      } else {
        setError(result.message || '登录确认失败');
      }
    } catch (err: any) {
      console.error('[QRConfirm] 确认登录失败:', err);
      setError(err.message || '登录确认失败');
    } finally {
      setLoading(false);
    }
  };

  /**
   * 手动确认登录（主动扫码场景）
   */
  const handleManualConfirm = () => {
    handleConfirmLogin();
  };

  /**
   * 取消登录
   */
  const handleCancel = () => {
    const pages = Taro.getCurrentPages();
    if (pages.length > 1) {
      Taro.navigateBack();
    } else {
      Taro.switchTab({
        url: '/pages/user/user'
      });
    }
  };

  /**
   * 重试
   */
  const handleRetry = () => {
    setError('');
    setConfirmed(false);
    handleConfirmLogin();
  };

  /**
   * 打开微信扫码
   */
  const handleScan = () => {
    Taro.scanCode({
      success: async (res) => {
        console.log('[QRConfirm] 扫码成功:', res);
        
        // 解析二维码内容
        let scanToken = '';
        const qrContent = res.result;
        
        try {
          // 尝试解析 URL
          if (qrContent.includes('http')) {
            const url = new URL(qrContent);
            scanToken = url.searchParams.get('token') || 
                        url.searchParams.get('qrCodeKey') || 
                        '';
          }
          
          // 尝试解析 JSON
          if (!scanToken && qrContent.startsWith('{')) {
            const parsed = JSON.parse(qrContent);
            scanToken = parsed.token || parsed.qrCodeKey || '';
          }
          
          // 直接作为 token
          if (!scanToken && qrContent.length >= 32) {
            scanToken = qrContent;
          }
          
          if (scanToken) {
            setToken(scanToken);
            setLoginMethod('scan');
            handleConfirmLogin(scanToken);
          } else {
            setError('无效的二维码内容');
          }
        } catch (e) {
          console.error('[QRConfirm] 解析二维码失败:', e);
          setError('二维码解析失败');
        }
      },
      fail: (err) => {
        console.error('[QRConfirm] 扫码失败:', err);
        if (err.errMsg !== 'scanCode:fail cancel') {
          setError('扫码失败，请重试');
        }
      }
    });
  };

  // 渲染状态：加载中
  const renderLoading = () => (
    <View className="mb-6">
      <View className="w-16 h-16 mx-auto flex items-center justify-center">
        <Loading className="text-blue-500" />
      </View>
    </View>
  );

  // 渲染状态：成功
  const renderSuccess = () => (
    <View className="mb-6">
      <View className="w-16 h-16 mx-auto bg-green-100 rounded-full flex items-center justify-center">
        <Success className="text-green-500" size="32" />
      </View>
    </View>
  );

  // 渲染状态：错误
  const renderError = () => (
    <View className="mb-6">
      <View className="w-16 h-16 mx-auto bg-red-100 rounded-full flex items-center justify-center">
        <Failure className="text-red-500" size="32" />
      </View>
    </View>
  );

  // 渲染状态：初始（用户未扫码）
  const renderInitial = () => (
    <View className="mb-6">
      <View className="w-16 h-16 mx-auto bg-blue-100 rounded-full flex items-center justify-center">
        <User size="32" className="text-blue-500" />
      </View>
    </View>
  );

  // 获取标题
  const getTitle = () => {
    if (loading) return '正在确认登录...';
    if (confirmed) return '登录确认成功';
    if (error) return '登录确认失败';
    return loginMethod === 'url' ? '扫码登录确认' : '确认登录';
  };

  // 获取描述
  const getDescription = () => {
    if (loading) return '请稍候，正在为您确认登录';
    if (confirmed) return '您已成功确认登录，网页端将自动登录';
    if (error) return error;
    if (loginMethod === 'url') {
      return '检测到登录请求，是否确认登录？';
    }
    const displayName = userInfo?.nickname || userInfo?.username || '当前用户';
    return `确认使用 ${displayName} 登录网页端？`;
  };

  return (
    <View className="qr-confirm-page min-h-screen bg-gradient-to-b from-blue-50 to-white">
      <View className="p-4">
        {/* Logo/品牌区域 */}
        <View className="text-center pt-8 pb-6">
          <View className="w-20 h-20 mx-auto bg-white rounded-2xl shadow-lg flex items-center justify-center mb-4">
            <Text className="text-3xl">🔐</Text>
          </View>
          <Text className="text-gray-400 text-sm">WebSoft Platform</Text>
        </View>

        {/* 主要内容卡片 */}
        <Card className="bg-white rounded-2xl shadow-xl -mt-4">
          <View className="p-6 text-center">
            {/* 状态图标 */}
            {loading ? renderLoading() : confirmed ? renderSuccess() : error ? renderError() : renderInitial()}

            {/* 标题 */}
            <Text className="text-xl font-bold text-gray-800 mb-2 block">
              {getTitle()}
            </Text>

            {/* 描述 */}
            <Text className="text-gray-600 mb-6 block text-sm">
              {getDescription()}
            </Text>

            {/* 用户信息 */}
            {!loading && !confirmed && !error && userInfo && (
              <View className="bg-gray-50 rounded-xl p-4 mb-6">
                <View className="flex items-center justify-center">
                  {userInfo.avatar ? (
                    <View 
                      className="w-12 h-12 rounded-full bg-blue-100 mr-3 overflow-hidden"
                      style={{ backgroundImage: `url(${userInfo.avatar})`, backgroundSize: 'cover' }}
                    />
                  ) : (
                    <View className="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                      <User className="text-blue-500" size="20" />
                    </View>
                  )}
                  <View className="text-left">
                    <Text className="text-sm font-medium text-gray-800 block">
                      {userInfo.nickname || userInfo.username || '用户'}
                    </Text>
                    <Text className="text-xs text-gray-500 block">
                      ID: {userInfo.userId}
                    </Text>
                  </View>
                </View>
              </View>
            )}

            {/* Token 信息 */}
            {token && !loading && !confirmed && (
              <View className="bg-blue-50 rounded-lg p-3 mb-4">
                <Text className="text-xs text-blue-600">
                  登录令牌：{token.substring(0, 20)}...{token.substring(token.length - 10)}
                </Text>
              </View>
            )}

            {/* 操作按钮 */}
            <View className="space-y-3">
              {loading ? (
                <Button
                  type="default"
                  size="large"
                  disabled
                  className="w-full rounded-xl"
                >
                  确认中...
                </Button>
              ) : confirmed ? (
                <Button
                  type="success"
                  size="large"
                  onClick={handleCancel}
                  className="w-full rounded-xl"
                >
                  完成
                </Button>
              ) : error ? (
                <View className="space-y-2">
                  <Button
                    type="primary"
                    size="large"
                    onClick={handleRetry}
                    className="w-full rounded-xl"
                  >
                    重试
                  </Button>
                  <Button
                    type="default"
                    size="large"
                    onClick={handleScan}
                    className="w-full rounded-xl"
                  >
                    扫码其他二维码
                  </Button>
                  <Button
                    type="default"
                    size="small"
                    onClick={handleCancel}
                    className="w-full rounded-xl"
                    fill="none"
                  >
                    取消
                  </Button>
                </View>
              ) : loginMethod === 'scan' ? (
                <View>
                  <Button
                    type="primary"
                    size="large"
                    onClick={handleManualConfirm}
                    className="w-full mb-2 rounded-xl"
                    disabled={!token}
                  >
                    确认登录
                  </Button>
                  <Button
                    type="default"
                    size="large"
                    onClick={handleCancel}
                    className="w-full rounded-xl"
                    fill="none"
                  >
                    取消
                  </Button>
                </View>
              ) : (
                // URL 扫码场景：自动确认中
                <Button
                  type="primary"
                  size="large"
                  onClick={handleManualConfirm}
                  className="w-full rounded-xl"
                >
                  确认登录
                </Button>
              )}
            </View>
          </View>
        </Card>

        {/* 安全提示 */}
        <Card className="bg-yellow-50 border border-yellow-200 rounded-xl mt-4">
          <View className="p-4">
            <View className="flex items-start">
              <Tips className="text-yellow-600 mr-2 mt-1" size="16" />
              <View>
                <Text className="text-sm font-medium text-yellow-800 mb-1 block">
                  安全提示
                </Text>
                <Text className="text-xs text-yellow-700 block">
                  请确认这是您本人的登录操作。如果不是，请点击取消并检查账户安全。
                </Text>
              </View>
            </View>
          </View>
        </Card>

        {/* 底部说明 */}
        <View className="text-center mt-6 pb-8">
          <Text className="text-xs text-gray-400">
            如有问题，请联系管理员
          </Text>
        </View>
      </View>
    </View>
  );
};

export default QRConfirmPage;
