import React, { useState, useEffect } from 'react';
import { Modal, View, Text, TouchableOpacity, StyleSheet, Animated } from 'react-native';
import i18n from '@/i18n/config';
import Button, { buttonVariants } from '../Button';
import { useRouter } from 'expo-router';

interface PopupProps {
  visible: boolean;
  onClose: () => void;
  onCloseGoHome: () => void;
  message: string;
  duration?: number; // Optional auto-close duration in ms
}

const Popup: React.FC<PopupProps> = ({ 
  visible, 
  onClose, 
  onCloseGoHome,
  message, 
  duration = 30000 // Default 3 seconds
}) => {
  const [opacity] = useState(new Animated.Value(0));
  const [hasFRBeenAdded, setHasFRBeenAdded] = useState<boolean>(false);
  const router = useRouter();
  useEffect(() => {
    if (visible) {
      // Fade in
      Animated.timing(opacity, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }).start();

      // Auto close after duration
      const timer = setTimeout(() => {
        handleClose();
      }, duration);

      return () => clearTimeout(timer);
    }
  }, [visible]);

  const handleClose = () => {
    // Fade out
    Animated.timing(opacity, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start(() => {
      onClose();
      // Here we use setHasFRBeenAdded as requested

    });
  };

  return (
    <Modal
      transparent
      visible={visible}
      animationType="none"
      onRequestClose={handleClose}
    >
      <View style={styles.modalContainer}>
        <Animated.View style={[styles.popup, { opacity }]}>
          <Text style={styles.message}>{message}</Text>
          <Button
            isSelected
            text={i18n.t('commons.yes')}
            onPress={onClose}
            textStyle={buttonVariants.smallText}   // ⭐ EXACTEMENT CE QUE TU VEUX
          />

          <Button
            isSelected
            text={i18n.t('commons.no')}
            style={{ marginLeft: 10 }}
            onPress={onCloseGoHome}
            textStyle={buttonVariants.smallText}   // ⭐ EXACTEMENT CE QUE TU VEUX
          />

        </Animated.View>
      </View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  modalContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
  },
  popup: {
    backgroundColor: 'white',
    borderRadius: 10,
    padding: 20,
    width: '80%',
    alignItems: 'center',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  message: {
    fontSize: 16,
    marginBottom: 20,
    textAlign: 'center',
  },
  closeButton: {
    backgroundColor: '#2196F3',
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 5,
  },
  closeButtonText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

export default Popup;