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

interface PopupProps {
  visible: boolean;
  onClose: (value?: string) => void;
  onCloseGoBack: () => void;
}

const EndingBilanPopup: React.FC<PopupProps> = ({
  visible,
  onClose,
  onCloseGoBack,
}) => {

  const [opacity] = useState(new Animated.Value(0));
  const [toggleRemark, setToggleRemark] = useState(false);
  const [inputText, setInputText] = useState('');

  // Fade-in uniquement
  useEffect(() => {
    if (visible) {
      Animated.timing(opacity, {
        toValue: 1,
        duration: 300,
        useNativeDriver: true,
      }).start();
    }
  }, [visible]);

  const handleClose = (value?: string) => {
    Animated.timing(opacity, {
      toValue: 0,
      duration: 300,
      useNativeDriver: true,
    }).start(() => onClose(value));
  };

  const handleAddItem = () => {
    if (inputText.trim()) {
      onClose(inputText);
      setInputText('');
      setToggleRemark(false);
    }
  };

  return (
    <Modal transparent visible={visible} animationType="none">
      <View style={styles.overlay}>
        <Animated.View style={[styles.popup, { opacity }]}>

          {/* ÉTAPE 1 */}
          {!toggleRemark && (
            <>
              <Text style={styles.message}>Faire une remarque ?</Text>

              <Button
                isSelected
                text={i18n.t('commons.yes')}
                onPress={() => setToggleRemark(true)}
              />

              <Button
                isSelected
                text={i18n.t('commons.no')}
                onPress={() => handleClose(undefined)}
              />
            </>
          )}

          {/* ÉTAPE 2 — Popup grande mais pas fullscreen */}
          {toggleRemark && (
            <View style={styles.inputZone}>
              <Text style={styles.inputTitle}>Ajouter une remarque</Text>

              <TextInput
                style={styles.bigInput}
                placeholder="Écris ta remarque ici..."
                value={inputText}
                onChangeText={setInputText}
                multiline
                textAlignVertical="top"
              />

              <Button text="Valider" isSelected onPress={handleAddItem} />
            </View>
          )}

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

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',   // ← centre verticalement
    alignItems: 'center',
  },

  popup: {
    width: '90%',
    height: '83%',              // ← prend 80% de l’écran, header/footer visibles
    backgroundColor: 'white',
    marginTop: 40,
    padding: 25,
    borderRadius: 15,
    justifyContent: 'center',
  },

  message: {
    fontSize: 20,
    marginBottom: 30,
    textAlign: 'center',
  },

  inputZone: {
    flex: 1,
  },

  inputTitle: {
    fontSize: 18,
    marginBottom: 15,
    textAlign: 'center',
  },

  bigInput: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 10,
    padding: 15,
    fontSize: 16,
    textAlignVertical: 'top',
    backgroundColor: 'white',
  },
});

export default EndingBilanPopup;