import React, { useState } from "react";
import { Modal, View, TextInput, StyleSheet } from "react-native";
import Button from "@/components/Button";
import AppText from "@/components/AppText";
import { useUsers } from "@/contexts/UserContext";

type Props = {
  visible: boolean;
  onClose: () => void;
  sectionKey: string | null;
  sectionLabel: string | null;
  onSubmit?: (text: string) => void;
};

const RemarquePopup: React.FC<Props> = ({
  visible,
  onClose,
  sectionKey,
  sectionLabel,
  onSubmit
}) => {

  const { currentUser, updateCurrentUser } = useUsers();
  const [text, setText] = useState("");

  if (!visible || !sectionKey) return null;

  const handleSave = () => {
    if (!text.trim()) return;

    // Cas Carnet de bord
    if (onSubmit) {
      onSubmit(text);
      setText("");
      onClose();
      return;
    }

    // Cas dossier classique
    const newItem = {
      text,
      date: new Date().toISOString(),
      qui: currentUser?.username || "User"
    };

    const previousItems = currentUser?.dossier?.[sectionKey] || [];
    const updatedItems = [...previousItems, newItem];

    updateCurrentUser({
      dossier: {
        ...currentUser.dossier,
        [sectionKey]: updatedItems
      }
    });

    setText("");
    onClose();
  };

  return (
    <Modal visible={visible} transparent animationType="fade">
      <View style={styles.overlay}>
        <View style={styles.popup}>

          <AppText
            text={`Ajouter ${sectionLabel ?? ""}`}
            style={styles.title}
          />

          <View style={styles.inputContainer}>
            <TextInput
              style={styles.input}
              multiline
              value={text}
              onChangeText={setText}
              placeholder={`Nouveau ${sectionLabel ?? ""}...`}
            />
          </View>

          <View style={styles.buttonRow}>
            <View style={styles.buttonSmall}>
              <Button
                text="Annuler"
                onPress={onClose}
                textStyle={{ fontSize: 12 }}
              />
            </View>

            <View style={styles.buttonSmall}>
              <Button
                text="Valider"
                isSelected
                onPress={handleSave}
                textStyle={{ fontSize: 12 }}
              />
            </View>
          </View>

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

const styles = StyleSheet.create({
  overlay: {
    flex: 1,
    backgroundColor: "rgba(0,0,0,0.5)",
    justifyContent: "center",
    alignItems: "center",
  },

  popup: {
    width: "90%",
    minHeight: "60%",   // ← popup plus grande
    maxHeight: "80%",   // ← limite haute confortable
    backgroundColor: "white",
    padding: 20,
    borderRadius: 12,
    justifyContent: "space-between",
  },

  title: {
    fontSize: 18,
    fontWeight: "600",
    textAlign: "center",
    marginBottom: 10,
  },

  inputContainer: {
    flex: 1,
    borderWidth: 1,
    borderColor: "#ccc",
    borderRadius: 8,
    padding: 10,
    marginBottom: 15,
    marginTop: 10,
  },

  input: {
    flex: 1,
    textAlignVertical: "top",
    padding: 0,
  },

  buttonRow: {
    flexDirection: "row",
    justifyContent: "space-between",
    marginTop: 10,
  },

  buttonSmall: {
    width: "45%",
  },
});

export default RemarquePopup;