template-10550/src/components/QRScanModal.tsx

import React, { useState } from 'react';
import { View, Text } from '@tarojs/components';
import { Button, Popup, Loading } from '@nutui/nutui-react-taro';
import { Scan, Close, Success, Failure } from '@nutui/icons-react-taro';
import Taro from '@tarojs/taro';
import { parseQRContent, confirmQRLogin } from '@/api/passport/qr-login';
import { useUser } from '@/hooks/useUser';

export interface QRScanModalProps {
  /** 是否显示弹窗 */
  visible: boolean;
  /** 关闭弹窗回调 */
  onClose: () => void;
  /** 扫码成功回调 */
  onSuccess?: (result: any) => void;
  /** 扫码失败回调 */
  onError?: (error: string) => void;
  /** 弹窗标题 */
  title?: string;
  /** 描述文本 */
  description?: string;
  /** 是否自动确认登录 */
  autoConfirm?: boolean;
}

/**
 * 二维码扫描弹窗组件（用于扫码登录）
 */
const QRScanModal: React.FC<QRScanModalProps> = ({
  visible,
  onClose,
  onSuccess,
  onError,
  title = '扫描登录二维码',
  description = '扫描网页端显示的登录二维码',
  autoConfirm = true
}) => {
  const { user } = useUser();
  const [loading, setLoading] = useState(false);
  const [status, setStatus] = useState<'idle' | 'scanning' | 'confirming' | 'success' | 'error'>('idle');
  const [errorMsg, setErrorMsg] = useState('');

  // 开始扫码
  const handleScan = async () => {
    if (!user?.userId) {
      onError?.('请先登录小程序');
      return;
    }

    try {
      setLoading(true);
      setStatus('scanning');
      setErrorMsg('');

      // 扫码
      const scanResult = await new Promise<string>((resolve, reject) => {
        Taro.scanCode({
          onlyFromCamera: true,
          scanType: ['qrCode'],
          success: (res) => {
            if (res.result) {
              resolve(res.result);
            } else {
              reject(new Error('扫码结果为空'));
            }
          },
          fail: (err) => {
            reject(new Error(err.errMsg || '扫码失败'));
          }
        });
      });

      // 解析二维码内容
      const token = parseQRContent(scanResult);
      if (!token) {
        throw new Error('无效的登录二维码');
      }

      if (autoConfirm) {
        // 自动确认登录
        setStatus('confirming');
        const result = await confirmQRLogin({
          token,
          userId: user.userId,
          platform: 'wechat',
          wechatInfo: {
            nickname: user.nickname,
            avatar: user.avatar
          }
        });

        if (result.success) {
          setStatus('success');
          onSuccess?.(result);

          // 显示成功提示
          Taro.showToast({
            title: '登录确认成功',
            icon: 'success'
          });

          // 延迟关闭
          setTimeout(() => {
            onClose();
            setStatus('idle');
          }, 1500);
        } else {
          throw new Error(result.message || '登录确认失败');
        }
      } else {
        // 只返回扫码结果
        onSuccess?.(scanResult);
        onClose();
        setStatus('idle');
      }
    } catch (error: any) {
      setStatus('error');
      const errorMessage = error.message || '操作失败';
      setErrorMsg(errorMessage);
      onError?.(errorMessage);
    } finally {
      setLoading(false);
    }
  };

  // 重试
  const handleRetry = () => {
    setStatus('idle');
    setErrorMsg('');
    handleScan();
  };

  // 关闭弹窗
  const handleClose = () => {
    setStatus('idle');
    setErrorMsg('');
    setLoading(false);
    onClose();
  };

  // 获取状态显示内容
  const getStatusContent = () => {
    switch (status) {
      case 'scanning':
        return {
          icon: <Loading className="text-blue-500" />,
          title: '正在扫码...',
          description: '请将二维码对准摄像头'
        };

      case 'confirming':
        return {
          icon: <Loading className="text-orange-500" />,
          title: '正在确认登录...',
          description: '请稍候，正在为您确认登录'
        };

      case 'success':
        return {
          icon: <Success size="32" className="text-green-500" />,
          title: '登录确认成功',
          description: '网页端将自动完成登录'
        };

      case 'error':
        return {
          icon: <Failure size="32" className="text-red-500" />,
          title: '操作失败',
          description: errorMsg || '请重试'
        };

      default:
        return {
          icon: <Scan size="32" className="text-blue-500" />,
          title,
          description
        };
    }
  };

  const statusContent = getStatusContent();

  return (
    <Popup
      visible={visible}
      position="center"
      closeable={false}
      onClose={handleClose}
      style={{ width: '85%', borderRadius: '12px' }}
    >
      <View className="p-6 text-center relative">
        {/* 关闭按钮 */}
        {status !== 'scanning' && status !== 'confirming' && (
          <View className="absolute top-4 right-4">
            <Button
              size="small"
              type="default"
              onClick={handleClose}
              className="w-8 h-8 p-0"
            >
              <Close size="16" />
            </Button>
          </View>
        )}

        {/* 图标 */}
        <View className="w-16 h-16 mx-auto bg-gray-100 rounded-full flex items-center justify-center mb-4">
          {statusContent.icon}
        </View>

        {/* 标题 */}
        <Text className="text-lg font-bold text-gray-800 mb-2 block">
          {statusContent.title}
        </Text>

        {/* 描述 */}
        <Text className="text-gray-600 mb-6 block">
          {statusContent.description}
        </Text>

        {/* 操作按钮 */}
        {status === 'idle' && (
          <Button
            type="primary"
            size="large"
            onClick={handleScan}
            className="w-full"
            disabled={!user?.userId}
          >
            <Scan className="mr-2" />
            {user?.userId ? '开始扫码' : '请先登录'}
          </Button>
        )}

        {status === 'error' && (
          <View className="space-y-2">
            <Button
              type="primary"
              size="large"
              onClick={handleRetry}
              className="w-full"
            >
              重试
            </Button>
            <Button
              type="default"
              size="normal"
              onClick={handleClose}
              className="w-full"
            >
              取消
            </Button>
          </View>
        )}

        {(status === 'scanning' || status === 'confirming') && (
          <Button
            type="default"
            size="large"
            onClick={handleClose}
            className="w-full"
          >
            取消
          </Button>
        )}
      </View>
      {loading}
    </Popup>
  );
};

export default QRScanModal;