import React, { useState, useEffect } from 'react';
import { View, Text } from '@tarojs/components';
import { Loading, Card, Button } 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';
import { TenantId } from "@/config/app";
import { saveStorageByLoginUser, SERVER_API_URL } from "@/utils/server";
import { checkAndHandleInviteRelation, hasPendingInvite, getStoredInviteParams } from "@/utils/invite";

/**
 * 扫码登录确认页面
 *
 * 支持两种场景：
 * 1. 主动扫码：用户点击按钮调用微信扫码，扫描 PC 端二维码
 * 2. URL 扫码（小程序码）：用户扫描小程序码后，微信自动打开此页面
 *
 * URL 扫码场景：
 * - 微信「扫普通链接二维码打开小程序」配置的二维码规则：`https://websopy.websoft.top/wx-scan/`
 * - 扫码后 URL：`https://websopy.websoft.top/wx-scan?token=xxx`
 * - 小程序接收到参数后自动确认登录
 *
 * 登录流程（2026-04-08 更新）：
 * 1. 用户扫码 → 进入 qr-confirm 页面
 * 2. 页面立即调用 wx.login() 获取 code
 * 3. 用 code 调用 /api/wx-login/loginByOpenId 获取/验证用户身份
 * 4. 如果用户不存在 → 显示微信手机号授权按钮（一键注册登录）
 * 5. 如果用户存在 → 自动调用 confirmQRLogin 确认登录
 */

// 微信获取手机号回调参数类型
interface GetPhoneNumberDetail {
  code?: string;
  encryptedData?: string;
  iv?: string;
  errMsg: string;
}

interface GetPhoneNumberEvent {
  detail: GetPhoneNumberDetail;
}

// 登录接口返回数据类型
interface LoginResponse {
  data: {
    access_token: string;
    user: any;
  };
  code: number;
  message: string;
}

// 协议类型
type AgreementType = 'service' | 'privacy' | null;

const QRConfirmPage: React.FC = () => {
  const router = useRouter();
  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);
  const [needAuth, setNeedAuth] = useState(false); // 是否需要手机号授权
  const [authLoading, setAuthLoading] = useState(false); // 授权中状态
  const [agreementChecked, setAgreementChecked] = useState(false); // 协议勾选状态

  useEffect(() => {
    // 从 URL 参数中获取 token
    const params = router.params;

    // 兼容多种参数名
    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);

        const url = new URL(decodedUrl);
        loginToken = url.searchParams.get('token') ||
                     url.searchParams.get('qrCodeKey') ||
                     '';

        setLoginMethod('url');
      } catch (e) {
        console.error('[QRConfirm] 解析 q 参数失败:', e);
        loginToken = decodeURIComponent(params.q);
        setLoginMethod('url');
      }
    } else if (loginToken) {
      setLoginMethod('url');
    }

    // 扫码场景：直接显示授权登录界面
    console.log('[QRConfirm] 显示授权登录界面');
    setToken(loginToken);
    setNeedAuth(true);
  }, [router.params]);

  /**
   * 自动确认登录（URL 扫码场景）
   */
  const handleAutoConfirm = async (_: 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: 5
      });

      console.log('[QRConfirm] loginByOpenId 结果:', wxLoginResult);

      // 3. 统一显示授权登录界面，让用户一键授权完成登录
      // 无论用户是否注册、是否绑定手机号，都走授权登录流程
      console.log('[QRConfirm] 显示手机号授权登录界面');
      setNeedAuth(true);
      setLoading(false);
    } catch (err: any) {
      console.error('[QRConfirm] 自动确认登录失败:', err);
      setError(err.message || '自动确认登录失败');
      setLoading(false);
    }
  };

  /**
   * 处理微信手机号授权
   */
  const handleGetPhoneNumber = async ({ detail }: GetPhoneNumberEvent) => {
    const { code, encryptedData, iv, errMsg } = detail;

    // 检查协议是否勾选
    if (!agreementChecked) {
      Taro.showToast({
        title: '请先同意服务协议和隐私政策',
        icon: 'none'
      });
      return;
    }

    // 用户拒绝授权
    if (errMsg && errMsg.includes('fail')) {
      Taro.showToast({
        title: '需要授权手机号才能完成登录',
        icon: 'none'
      });
      return;
    }

    if (!code) {
      Taro.showToast({
        title: '获取授权信息失败，请重试',
        icon: 'none'
      });
      return;
    }

    // 执行授权登录
    await handleAuthLogin(code, encryptedData, iv);
  };

  /**
   * 授权登录（未注册用户）
   */
  const handleAuthLogin = async (phoneCode: string, encryptedData?: string, iv?: string) => {
    try {
      setAuthLoading(true);

      // 获取存储的邀请参数
      const inviteParams = getStoredInviteParams();
      const refereeId = inviteParams?.inviter ? parseInt(inviteParams.inviter) : 0;

      const res = await Taro.request<LoginResponse>({
        url: `${SERVER_API_URL}/wx-login/loginByMpWxPhone`,
        method: 'POST',
        data: {
          code: phoneCode,
          encryptedData,
          iv,
          tenantId: TenantId,
          notVerifyPhone: true,
          refereeId: refereeId,
          sceneType: 'save_referee'
        },
        header: {
          'content-type': 'application/json',
          'TenantId': TenantId
        }
      });

      if (res.data.code !== 0) {
        throw new Error(res.data.message || '登录失败');
      }

      // 保存登录信息
      if (res.data.data?.user) {
        saveStorageByLoginUser(res.data.data.access_token, res.data.data.user);
        setUserInfo(res.data.data.user);

        // 处理邀请关系
        if (hasPendingInvite()) {
          try {
            await checkAndHandleInviteRelation();
          } catch (e) {
            console.error('授权登录后处理邀请关系失败:', e);
          }
        }

        Taro.showToast({
          title: '授权成功，正在确认登录...',
          icon: 'success'
        });

        // 延迟后自动确认扫码登录
        setTimeout(() => {
          handleConfirmLogin(token, res.data.data.user);
        }, 1500);
      }

    } catch (error: any) {
      Taro.showToast({
        title: error.message || '授权失败',
        icon: 'error'
      });
    } finally {
      setAuthLoading(false);
    }
  };

  /**
   * 确认登录
   */
  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('请先登录小程序');
        setNeedAuth(true);
        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
        }
      });

      const isConfirmed = result.status === 'confirmed' || result.success === true;

      if (isConfirmed) {
        setConfirmed(true);
        setNeedAuth(false);
        Taro.showToast({
          title: result.successMessage || result.message || '登录确认成功',
          icon: 'success',
          duration: 2000
        });

        setTimeout(() => {
          const pages = Taro.getCurrentPages();
          if (pages.length > 1) {
            Taro.navigateBack();
          } else {
            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);
    setNeedAuth(false);
    if (token) {
      handleAutoConfirm(token);
    }
  };

  /**
   * 打开微信扫码
   */
  const handleScan = () => {
    Taro.scanCode({
      success: async (res) => {
        console.log('[QRConfirm] 扫码成功:', res);

        let scanToken = '';
        const qrContent = res.result;

        try {
          if (qrContent.includes('http')) {
            const url = new URL(qrContent);
            scanToken = url.searchParams.get('token') ||
                        url.searchParams.get('qrCodeKey') ||
                        '';
          }

          if (!scanToken && qrContent.startsWith('{')) {
            const parsed = JSON.parse(qrContent);
            scanToken = parsed.token || parsed.qrCodeKey || '';
          }

          if (!scanToken && qrContent.length >= 32) {
            scanToken = qrContent;
          }

          if (scanToken) {
            setToken(scanToken);
            setLoginMethod('scan');
            setNeedAuth(false);
            setError('');
            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 openAgreement = (type: AgreementType) => {
    const urlMap = {
      service: 'https://websopy.websoft.top/agreement',
      privacy: 'https://websopy.websoft.top/privacy',
    };
    if (!type) return;
    const targetUrl = encodeURIComponent(urlMap[type]);
    Taro.navigateTo({
      url: `/passport/webview/index?url=${targetUrl}`
    });
  };

  // 授权登录页面 - 科技风格
  const renderAuthPage = () => {
    return (
      <View className="min-h-screen relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%)' }}>

        {/* 背景科技元素 */}

        {/* 1. 网格背景 */}
        <View style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
          backgroundImage: `
            linear-gradient(rgba(138, 43, 226, 0.1) 1px, transparent 1px),
            linear-gradient(90deg, rgba(138, 43, 226, 0.1) 1px, transparent 1px)
          `,
          backgroundSize: '50px 50px',
          opacity: 0.5,
        }} />

        {/* 2. 渐变光晕 - 左上 */}
        <View style={{
          position: 'absolute',
          top: '-30%',
          left: '-20%',
          width: '60%',
          height: '60%',
          background: 'radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%)',
          filter: 'blur(40px)',
        }} />

        {/* 3. 渐变光晕 - 右下 */}
        <View style={{
          position: 'absolute',
          bottom: '-20%',
          right: '-20%',
          width: '50%',
          height: '50%',
          background: 'radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%)',
          filter: 'blur(50px)',
        }} />

        {/* 4. 动态粒子光点 */}
        {[
          { top: '15%', left: '20%', size: 4, delay: '0s' },
          { top: '25%', left: '80%', size: 3, delay: '0.5s' },
          { top: '40%', left: '15%', size: 5, delay: '1s' },
          { top: '35%', left: '85%', size: 3, delay: '1.5s' },
          { top: '55%', left: '10%', size: 4, delay: '2s' },
          { top: '60%', left: '90%', size: 3, delay: '0.3s' },
          { top: '75%', left: '25%', size: 4, delay: '1.2s' },
          { top: '80%', left: '75%', size: 5, delay: '0.8s' },
        ].map((particle, index) => (
          <View
            key={index}
            className="particle"
            style={{
              position: 'absolute',
              top: particle.top,
              left: particle.left,
              width: particle.size,
              height: particle.size,
              borderRadius: '50%',
              background: index % 2 === 0 ? '#a855f7' : '#3b82f6',
              boxShadow: index % 2 === 0
                ? '0 0 10px rgba(168, 85, 247, 0.8), 0 0 20px rgba(168, 85, 247, 0.4)'
                : '0 0 10px rgba(59, 130, 246, 0.8), 0 0 20px rgba(59, 130, 246, 0.4)',
              animationDelay: particle.delay,
            }}
          />
        ))}

        {/* 5. 扫描线效果 */}
        <View style={{
          position: 'absolute',
          top: 0,
          left: 0,
          right: 0,
          height: '2px',
          background: 'linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), transparent)',
          animation: 'scanline 3s ease-in-out infinite',
        }} />

        {/* 主内容区域 */}
        <View className="relative z-10 flex flex-col items-center justify-center min-h-screen px-8">

          {/* Logo 区域 */}
          <View className="flex flex-col items-center mb-12">
            {/* 科技感 Logo 容器 */}
            <View style={{
              width: '100px',
              height: '100px',
              borderRadius: '24px',
              background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.2) 0%, rgba(59, 130, 246, 0.2) 100%)',
              border: '1px solid rgba(168, 85, 247, 0.3)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginBottom: '20px',
              position: 'relative',
              overflow: 'hidden',
            }}>
              {/* Logo 内光效 */}
              <View style={{
                position: 'absolute',
                top: '-50%',
                left: '-50%',
                width: '200%',
                height: '200%',
                background: 'conic-gradient(from 0deg, transparent, rgba(168, 85, 247, 0.1), transparent, rgba(59, 130, 246, 0.1), transparent)',
                animation: 'rotate 4s linear infinite',
              }} />
              {/* Logo 图标 */}
              <Text style={{ fontSize: '48px', position: 'relative', zIndex: 1 }}>🔐</Text>
            </View>

            {/* 品牌名 - 渐变文字 */}
            <Text style={{
              fontSize: '28px',
              fontWeight: '700',
              background: 'linear-gradient(90deg, #a855f7, #6366f1, #3b82f6)',
              WebkitBackgroundClip: 'text',
              WebkitTextFillColor: 'transparent',
              backgroundClip: 'text',
              marginBottom: '8px',
            }}>WebSopy</Text>

            {/* 标语 */}
            <Text style={{
              fontSize: '14px',
              color: 'rgba(255, 255, 255, 0.6)',
              letterSpacing: '2px',
            }}>智能连接 · 安全登录</Text>

            {/* 分割线 */}
            <View style={{
              width: '60px',
              height: '3px',
              background: 'linear-gradient(90deg, transparent, #a855f7, transparent)',
              marginTop: '20px',
              borderRadius: '2px',
            }} />
          </View>

          {/* 登录卡片 */}
          <View style={{
            width: '100%',
            maxWidth: '320px',
            background: 'rgba(255, 255, 255, 0.05)',
            backdropFilter: 'blur(20px)',
            WebkitBackdropFilter: 'blur(20px)',
            borderRadius: '20px',
            border: '1px solid rgba(255, 255, 255, 0.1)',
            padding: '24px',
            marginBottom: '24px',
          }}>
            {/* 提示图标 */}
            <View style={{
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
              marginBottom: '16px',
            }}>
              <View style={{
                width: '48px',
                height: '48px',
                borderRadius: '50%',
                background: 'linear-gradient(135deg, rgba(168, 85, 247, 0.3), rgba(59, 130, 246, 0.3))',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                border: '1px solid rgba(168, 85, 247, 0.4)',
              }}>
                <Text style={{ fontSize: '24px' }}>📱</Text>
              </View>
            </View>

            {/* 标题 */}
            <Text style={{
              textAlign: 'center',
              color: '#fff',
              fontSize: '18px',
              fontWeight: '600',
              marginBottom: '8px',
            }}>授权登录</Text>

            {/* 描述 */}
            <Text style={{
              textAlign: 'center',
              color: 'rgba(255, 255, 255, 0.6)',
              fontSize: '13px',
              lineHeight: '1.5',
            }}>点击下方按钮，使用微信手机号快速登录</Text>
          </View>

          {/* 主按钮 - 渐变发光按钮 */}
          <View
            style={{
              width: '100%',
              maxWidth: '320px',
              background: 'linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #6366f1 100%)',
              borderRadius: '30px',
              padding: '2px',
              boxShadow: '0 0 30px rgba(168, 85, 247, 0.4), 0 0 60px rgba(168, 85, 247, 0.2)',
            }}
          >
            <Button
              className="authorize-btn"
              open-type="getPhoneNumber"
              onGetPhoneNumber={handleGetPhoneNumber}
              disabled={authLoading}
              style={{
                width: '100%',
                height: '52px',
                fontSize: '17px',
                fontWeight: '600',
                color: '#fff',
                background: authLoading ? 'rgba(255, 255, 255, 0.1)' : 'transparent',
                borderRadius: '28px',
                border: 'none',
                padding: '0',
                boxSizing: 'border-box',
                lineHeight: '52px',
                textAlign: 'center',
              }}
            >
              {authLoading ? '授权中...' : '微信手机号登录'}
            </Button>
          </View>

          {/* 取消按钮 */}
          <View
            className="w-full max-w-80 flex items-center justify-center mt-4 cursor-pointer"
            style={{ height: '44px' }}
            onClick={handleCancel}
          >
            <Text style={{ color: 'rgba(255, 255, 255, 0.5)', fontSize: '14px' }}>取消</Text>
          </View>

          {/* 协议勾选 */}
          <View className="flex items-center justify-center mt-6">
            <View
              style={{ padding: '8px', marginRight: '4px' }}
              onClick={() => setAgreementChecked(!agreementChecked)}
            >
              <View
                style={{
                  width: '18px',
                  height: '18px',
                  borderRadius: '4px',
                  border: agreementChecked ? 'none' : '1px solid rgba(255, 255, 255, 0.3)',
                  background: agreementChecked ? 'linear-gradient(135deg, #7c3aed, #a855f7)' : 'transparent',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                {agreementChecked && (
                  <Text style={{ color: '#fff', fontSize: '12px' }}>✓</Text>
                )}
              </View>
            </View>
            <Text style={{ color: 'rgba(255, 255, 255, 0.5)', fontSize: '12px' }}>
              我已阅读并同意
            </Text>
            <Text
              style={{ color: '#a855f7', fontSize: '12px', padding: '4px 2px' }}
              onClick={(e) => {
                e.stopPropagation();
                openAgreement('service');
              }}
            >
              《服务协议》
            </Text>
            <Text style={{ color: 'rgba(255, 255, 255, 0.5)', fontSize: '12px' }}>和</Text>
            <Text
              style={{ color: '#a855f7', fontSize: '12px', padding: '4px 2px' }}
              onClick={(e) => {
                e.stopPropagation();
                openAgreement('privacy');
              }}
            >
              《隐私政策》
            </Text>
          </View>

          {/* 底部装饰 */}
          <View style={{
            position: 'absolute',
            bottom: '40px',
            display: 'flex',
            alignItems: 'center',
            gap: '8px',
          }}>
            <View style={{
              width: '6px',
              height: '6px',
              borderRadius: '50%',
              background: '#a855f7',
              boxShadow: '0 0 10px rgba(168, 85, 247, 0.8)',
            }} />
            <Text style={{ color: 'rgba(255, 255, 255, 0.3)', fontSize: '11px' }}>
              安全加密连接
            </Text>
            <View style={{
              width: '6px',
              height: '6px',
              borderRadius: '50%',
              background: '#3b82f6',
              boxShadow: '0 0 10px rgba(59, 130, 246, 0.8)',
            }} />
          </View>
        </View>
      </View>
    );
  };

  // 渲染状态图标
  const renderStatusIcon = () => {
    if (loading || authLoading) return (
      <View className="mb-6">
        <View className="w-16 h-16 mx-auto flex items-center justify-center">
          <Loading className="text-blue-500" />
        </View>
      </View>
    );

    if (confirmed) return (
      <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>
    );

    if (error && !needAuth) return (
      <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>
    );

    if (needAuth) {
      // 需要授权时显示授权页面
      return renderAuthPage();
    }

    return (
      <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 || authLoading) return '正在处理...';
    if (confirmed) return '登录确认成功';
    if (needAuth) return ''; // 授权页面有自己的标题
    if (error) return '登录确认失败';
    return loginMethod === 'url' ? '扫码登录确认' : '确认登录';
  };

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

  // 渲染操作按钮
  const renderActions = () => {
    // 需要授权登录时，按钮在授权页面内部渲染
    if (needAuth) {
      return null;
    }

    if (loading) {
      return (
        <View
          className="w-full h-12 bg-gray-300 text-white text-base font-medium rounded-lg flex items-center justify-center"
        >
          确认中...
        </View>
      );
    }

    if (confirmed) {
      return (
        <View
          className="w-full h-12 bg-green-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
          onClick={handleCancel}
        >
          完成
        </View>
      );
    }

    if (error) {
      return (
        <View className="space-y-3">
          <View
            className="w-full h-12 bg-blue-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
            onClick={handleRetry}
          >
            重试
          </View>
          <View
            className="w-full h-12 bg-gray-100 text-gray-700 text-base font-medium rounded-lg flex items-center justify-center"
            onClick={handleScan}
          >
            扫码其他二维码
          </View>
          <View
            className="w-full h-10 text-gray-500 text-sm flex items-center justify-center"
            onClick={handleCancel}
          >
            取消
          </View>
        </View>
      );
    }

    if (loginMethod === 'scan') {
      return (
        <View className="space-y-3">
          <View
            className="w-full h-12 bg-blue-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
            onClick={handleManualConfirm}
          >
            确认登录
          </View>
          <View
            className="w-full h-12 text-gray-500 text-base flex items-center justify-center"
            onClick={handleCancel}
          >
            取消
          </View>
        </View>
      );
    }

    return (
      <View
        className="w-full h-12 bg-blue-500 text-white text-base font-medium rounded-lg flex items-center justify-center"
        onClick={handleManualConfirm}
      >
        确认登录
      </View>
    );
  };

  // 如果是授权页面，直接返回授权页面
  if (needAuth) {
    return renderAuthPage();
  }

  return (
    <View className="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">
            {/* 状态图标 */}
            {renderStatusIcon()}

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

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

            {/* 用户信息 */}
            {!loading && !confirmed && !error && !needAuth && 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 && !needAuth && (
              <View className="bg-blue-500 rounded-lg p-3 mb-4">
                <Text className="text-xs text-blue-600">
                  登录令牌：{token.substring(0, 20)}...{token.substring(token.length - 10)}
                </Text>
              </View>
            )}

            {/* 操作按钮 */}
            {renderActions()}
          </View>
        </Card>

        {/* 安全提示 */}
        {!needAuth && (
          <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;
