import React, { useState, useEffect } from 'react';
import { View, Text, Button, Image } from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import { SERVER_API_URL } from "@/utils/server";

/**
 * 邀请加入确认页面
 *
 * 用户扫描邀请二维码后，打开此小程序页面确认加入应用
 */

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

interface GetPhoneNumberEvent {
  detail: GetPhoneNumberDetail;
}

// 邀请信息类型
interface InviteInfo {
  appId: string;
  appName: string;
  appLogo: string;
  inviterName: string;
  roleName: string;
}

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

const InvitePage: React.FC = () => {
  const router = useRouter();
  const [loading, setLoading] = useState(true);
  const [inviteInfo, setInviteInfo] = useState<InviteInfo | null>(null);
  const [authLoading, setAuthLoading] = useState(false);
  const [agreementChecked, setAgreementChecked] = useState(false);
  const [token, setToken] = useState<string>('');
  const [error, setError] = useState<string>('');

  useEffect(() => {
    // 从 URL 参数中获取 token
    const params = router.params;
    let inviteToken = params.scene || params.token || params.qrCodeKey || '';

    // 兼容 q 参数（URL 编码的完整 URL）
    if (params.q && !inviteToken) {
      try {
        const decodedUrl = decodeURIComponent(params.q);
        const url = new URL(decodedUrl);
        inviteToken = url.searchParams.get('token') || url.searchParams.get('qrCodeKey') || '';
      } catch (e) {
        inviteToken = decodeURIComponent(params.q);
      }
    }

    setToken(inviteToken);

    // 获取邀请信息
    if (inviteToken) {
      fetchInviteInfo(inviteToken);
    } else {
      setError('无效的邀请链接');
      setLoading(false);
    }
  }, [router.params]);

  /**
   * 获取邀请信息
   */
  const fetchInviteInfo = async (inviteToken: string) => {
    try {
      const res = await Taro.request({
        url: `${SERVER_API_URL}/api/_app/developer/invite/info?token=${encodeURIComponent(inviteToken)}`,
        method: 'GET',
        header: {
          'content-type': 'application/json',
          'TenantId': 5
        }
      });

      if (res.data.code === 200 || res.data.code === 0) {
        setInviteInfo(res.data.data);
      } else {
        setError(res.data.message || '邀请信息获取失败');
      }
    } catch (err: any) {
      console.error('获取邀请信息失败:', err);
      setError(err.message || '网络请求失败');
    } finally {
      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 handleJoinApp(code, encryptedData, iv);
  };

  /**
   * 加入应用
   */
  const handleJoinApp = async (phoneCode: string, encryptedData?: string, iv?: string) => {
    try {
      setAuthLoading(true);

      const res = await Taro.request({
        url: `${SERVER_API_URL}/api/_app/developer/invite/accept`,
        method: 'POST',
        data: {
          token,
          code: phoneCode,
          encryptedData,
          iv
        },
        header: { 'content-type': 'application/json' }
      });

      if (res.data.code === 200 || res.data.code === 0) {
        Taro.showToast({ title: '加入成功', icon: 'success', duration: 1500 });
        setTimeout(() => {
          // 跳转到应用页面或首页
          Taro.switchTab({ url: '/pages/index/index' });
        }, 1500);
      } else {
        Taro.showToast({ title: res.data.message || '加入失败', icon: 'none' });
      }
    } catch (err: any) {
      Taro.showToast({ title: err.message || '加入失败', icon: 'error' });
    } finally {
      setAuthLoading(false);
    }
  };

  /**
   * 拒绝邀请
   */
  const handleReject = () => {
    const pages = Taro.getCurrentPages();
    if (pages.length > 1) {
      Taro.navigateBack();
    } else {
      Taro.switchTab({ url: '/pages/index/index' });
    }
  };

  // 打开协议页面
  const openAgreement = (type: AgreementType) => {
    const urlMap = {
      service: 'https://websopy.websoft.top/agreement',
      privacy: 'https://websopy.websoft.top/privacy',
    };
    const targetUrl = encodeURIComponent(urlMap[type]);
    Taro.navigateTo({ url: `/passport/webview/index?url=${targetUrl}` });
  };

  // 加载中
  if (loading) {
    return (
      <View className="min-h-screen flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #0a0a1a 0%, #0d1528 50%, #0a1520 100%)' }}>
        <View className="flex flex-col items-center">
          <View style={{
            width: '40px', height: '40px', border: '3px solid rgba(59, 130, 246, 0.3)',
            borderTopColor: '#3b82f6', borderRadius: '50%',
            animation: 'spin 1s linear infinite',
          }} />
          <Text style={{ color: 'rgba(255, 255, 255, 0.6)', marginTop: '16px', fontSize: '14px' }}>加载中...</Text>
        </View>
      </View>
    );
  }

  // 错误状态
  if (error) {
    return (
      <View className="min-h-screen flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #0a0a1a 0%, #0d1528 50%, #0a1520 100%)' }}>
        <View className="flex flex-col items-center px-8">
          <Text style={{ fontSize: '64px', marginBottom: '20px' }}>❌</Text>
          <Text style={{ color: '#ef4444', fontSize: '16px', textAlign: 'center', marginBottom: '24px' }}>{error}</Text>
          <Button onClick={handleReject} style={{
            background: 'rgba(255, 255, 255, 0.1)', color: '#fff',
            borderRadius: '20px', fontSize: '14px', padding: '8px 24px'
          }}>
            返回首页
          </Button>
        </View>
      </View>
    );
  }

  // 邀请确认页面
  return (
    <View className="min-h-screen relative overflow-hidden" style={{ background: 'linear-gradient(135deg, #0a0a1a 0%, #0d1528 50%, #0a1520 100%)' }}>

      {/* 背景效果 */}
      <View style={{
        position: 'absolute', top: 0, left: 0, right: 0, bottom: 0,
        backgroundImage: `linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px)`,
        backgroundSize: '50px 50px', opacity: 0.5,
      }} />

      {/* 渐变光晕 */}
      <View style={{
        position: 'absolute', top: '-30%', left: '-20%', width: '60%', height: '60%',
        background: 'radial-gradient(circle, rgba(59, 130, 246, 0.25) 0%, transparent 70%)',
        filter: 'blur(40px)',
      }} />

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

        {/* 邀请卡片 */}
        <View style={{
          width: '100%', maxWidth: '360px', background: 'rgba(255, 255, 255, 0.05)',
          borderRadius: '24px', border: '1px solid rgba(255, 255, 255, 0.1)',
          padding: '32px 24px', backdropFilter: 'blur(20px)',
        }}>
          {/* 应用信息 */}
          <View className="flex flex-col items-center mb-8">
            <View style={{
              width: '80px', height: '80px', borderRadius: '20px',
              background: 'linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(99, 102, 241, 0.2))',
              border: '1px solid rgba(59, 130, 246, 0.3)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: '16px', overflow: 'hidden',
            }}>
              {inviteInfo?.appLogo ? (
                <Image src={inviteInfo.appLogo} style={{ width: '60px', height: '60px', borderRadius: '12px' }} />
              ) : (
                <Text style={{ fontSize: '36px' }}>🚀</Text>
              )}
            </View>
            <Text style={{
              fontSize: '22px', fontWeight: '700', color: '#fff', marginBottom: '8px',
            }}>
              {inviteInfo?.appName || 'Websopy'}
            </Text>
            <View style={{
              padding: '4px 12px', borderRadius: '12px',
              background: 'rgba(59, 130, 246, 0.2)', border: '1px solid rgba(59, 130, 246, 0.3)',
            }}>
              <Text style={{ color: '#3b82f6', fontSize: '12px' }}>
                邀请你加入应用
              </Text>
            </View>
          </View>

          {/* 邀请人信息 */}
          <View className="flex items-center justify-center mb-6">
            <Text style={{ color: 'rgba(255, 255, 255, 0.5)', fontSize: '13px' }}>
              邀请人：{inviteInfo?.inviterName || '某位用户'}
            </Text>
          </View>

          {/* 分隔线 */}
          <View style={{
            height: '1px', background: 'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent)',
            marginBottom: '24px',
          }} />

          {/* 协议勾选 */}
          <View className="flex items-center justify-center mb-4">
            <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, #1d4ed8, #3b82f6)' : '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: '#3b82f6', fontSize: '12px', padding: '4px 2px' }} onClick={() => openAgreement('service')}>《服务协议》</Text>
            <Text style={{ color: 'rgba(255, 255, 255, 0.5)', fontSize: '12px' }}>和</Text>
            <Text style={{ color: '#3b82f6', fontSize: '12px', padding: '4px 2px' }} onClick={() => openAgreement('privacy')}>《隐私政策》</Text>
          </View>

          {/* 主按钮 */}
          <View style={{
            width: '100%', background: 'linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #6366f1 100%)',
            borderRadius: '24px', padding: '2px',
            boxShadow: '0 0 30px rgba(59, 130, 246, 0.4)',
          }}>
            <Button
              open-type="getPhoneNumber"
              onGetPhoneNumber={handleGetPhoneNumber}
              disabled={authLoading}
              style={{
                width: '100%', height: '48px', fontSize: '16px', fontWeight: '600',
                color: '#fff', background: 'transparent', borderRadius: '22px',
                border: 'none', padding: '0', boxSizing: 'border-box', lineHeight: '48px',
              }}
            >
              {authLoading ? '处理中...' : '微信手机号快速加入'}
            </Button>
          </View>

          {/* 拒绝按钮 */}
          <View style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', marginTop: '16px' }} onClick={handleReject}>
            <Text style={{ color: 'rgba(255, 255, 255, 0.4)', fontSize: '14px' }}>暂不加入</Text>
          </View>
        </View>

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

export default InvitePage;