import { Image } from 'expo-image';
import React, { forwardRef, useImperativeHandle, useState } from 'react';
import {
    Modal,
    StyleSheet,
    Text,
    TouchableOpacity,
    View,
} from 'react-native';

export interface KefuPopupRef {
  open: () => void;
  close: () => void;
}

interface KefuPopupProps {
  onClose?: () => void;
}

export const KefuPopup = forwardRef<KefuPopupRef, KefuPopupProps>(
  ({ onClose }, ref) => {
    const [visible, setVisible] = useState(false);

    useImperativeHandle(ref, () => ({
      open: () => setVisible(true),
      close: () => {
        setVisible(false);
        onClose?.();
      },
    }));

    const handleClose = () => {
      setVisible(false);
      onClose?.();
    };

    return (
      <Modal
        visible={visible}
        transparent
        animationType="fade"
        onRequestClose={handleClose}
      >
        <View style={styles.overlay}>
          <TouchableOpacity
            style={styles.backdrop}
            activeOpacity={1}
            onPress={handleClose}
          />
          <View style={styles.content}>
            <Image
              source={{ uri: 'https://cdn.acetoys.cn/kefu/qr.jpg' }}
              style={styles.qrImage}
              contentFit="contain"
            />
            <Text style={styles.tipText}>长按识别二维码添加客服</Text>
            <TouchableOpacity style={styles.closeBtn} onPress={handleClose}>
              <Text style={styles.closeBtnText}>关闭</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
    );
  }
);

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  backdrop: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  content: {
    backgroundColor: '#fff',
    borderRadius: 15,
    padding: 20,
    alignItems: 'center',
    zIndex: 10,
  },
  qrImage: {
    width: 250,
    height: 250,
  },
  tipText: {
    fontSize: 14,
    color: '#666',
    marginTop: 15,
    marginBottom: 20,
  },
  closeBtn: {
    backgroundColor: '#FC7D2E',
    paddingHorizontal: 40,
    paddingVertical: 12,
    borderRadius: 25,
  },
  closeBtnText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});