import React, { useState, useEffect } from 'react';
import { 
  StyleSheet, 
  TextInput, 
  TouchableOpacity, 
  Alert, 
  Keyboard, 
  TouchableWithoutFeedback,
  KeyboardAvoidingView,
  Platform,
  View
} from 'react-native';
import { ThemedText } from '@/components/ThemedText';
import { ThemedView } from '@/components/ThemedView';
import { LinearGradient } from 'expo-linear-gradient';
import AsyncStorage from '@react-native-async-storage/async-storage';
import axios from 'axios';

const API_KEY = process.env.EXPO_PUBLIC_API_KEY;
const BASE_URL = process.env.EXPO_PUBLIC_BASE_URL;

export default function SendMessageScreen() {
  const [message, setMessage] = useState('');
  const [userId, setUserId] = useState(null);
  const [inputHeight, setInputHeight] = useState(100);

  const updateInputHeight = (height: number) => {
    setInputHeight(Math.max(100, height));
  };

  useEffect(() => {
    getUserId();
  }, []);

  const getUserId = async () => {
    try {
      const storedUser = await AsyncStorage.getItem('@user');
      if (storedUser) {
        const user = JSON.parse(storedUser);
        setUserId(user.id);
      }
    } catch (error) {
      console.error('Failed to get user ID:', error);
    }
  };

  const sendMessage = async () => {
    if (!message.trim()) {
      Alert.alert('Error', 'Please enter a message');
      return;
    }

    if (!userId) {
      Alert.alert('Error', 'User not found. Please select a user first.');
      return;
    }

    try {
      await axios.post(`${BASE_URL}/setMessage`, null, {
        params: { apiKey: API_KEY, userId, message }
      });
      Alert.alert('Success', 'Message sent successfully');
      setMessage('');
      Keyboard.dismiss();
    } catch (error) {
      console.error('Failed to send message:', error);
      Alert.alert('Error', 'Failed to send message. Please try again.');
    }
  };

  return (

    <KeyboardAvoidingView 
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={{flex: 1}}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss} accessible={false}>
        <LinearGradient
          colors={['#F67C0A', '#F60AD3']}
          style={styles.container}
          start={{ x: 0, y: 0 }}
          end={{ x: 1, y: 1 }}
        >
        <View style={styles.container}>
          <TextInput
            style={[styles.input, { height: inputHeight }]}
            value={message}
            onChangeText={setMessage}
            placeholder="Send a message"
            placeholderTextColor="#FFFFFF"
            multiline
            numberOfLines={4}
            textAlignVertical="top"
            onContentSizeChange={(event) => 
              updateInputHeight(event.nativeEvent.contentSize.height)
            }
          />
            <TouchableOpacity style={styles.button} onPress={sendMessage}>
              <ThemedText style={styles.buttonText}>Send Message</ThemedText>
            </TouchableOpacity>
          </View>
        </LinearGradient>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    padding: 20,
    backgroundColor: 'transparent',
    width: '100%',
  },
  input: {
    width: '100%',
    minHeight: 120,
    borderColor: 'transparent',
    borderWidth: 1,
    borderRadius: 10,
    padding: 10,
    marginBottom: 20,
    marginTop: 160,
    fontSize: 42,
    lineHeight: 60,
    textAlign: 'center',
    color: '#FFFFFF',
    fontWeight: 'bold',
    backgroundColor: 'transparent',
  },
  button: {
    backgroundColor: '#730FF8',
    padding: 15,
    borderColor: '#730FF8',
    borderRadius: 10,
  },
  buttonText: {
    color: 'white',
    fontSize: 22,
    fontWeight: 'bold',
  },
});