import React from 'react';
import {
  Modal,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
  Image,
} from 'react-native';
import { router } from 'expo-router';

const LokmaChatModal = ({
  visible = false,
  onClose,
  message = "Bu gün gıdanı israf ettinmi?",
  timestamp = "20:30",
}) => {
  const handleModalPress = () => {
    // Do nothing on backdrop press to keep it open while active notification exists
  };

  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="slide"
      onRequestClose={onClose}
    >
      <View style={styles.modalOverlay}>
        <TouchableOpacity style={styles.modalContainer} activeOpacity={1} onPress={handleModalPress}>
          <View style={styles.chatContainer}>
            {/* Lokma Character */}
            <View style={styles.characterContainer}>
              <Image
                source={require("@/assets/images/lokma.png")}
                style={styles.characterImage}
                resizeMode="contain"
              />
            </View>

            {/* Chat Bubble */}
            <TouchableOpacity style={styles.chatBubble} onPress={() => { onClose(); router.push('/chat'); }} activeOpacity={0.9}>
              {/* Close Button */}
              <TouchableOpacity style={styles.closeButton} onPress={onClose}>
                <Text style={styles.closeButtonText}>✕</Text>
              </TouchableOpacity>

              {/* Header with Sender and Timestamp */}
              <View style={styles.chatHeader}>
                <Text style={styles.senderName}>Lokma</Text>
                <Text style={styles.timestamp}>{timestamp}</Text>
              </View>

              {/* Message */}
              <Text style={styles.messageText}>{message}</Text>
            </TouchableOpacity>
           </View>
        </TouchableOpacity>
       </View>
     </Modal>
   );
};

const styles = StyleSheet.create({
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
  },
  modalContainer: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    backgroundColor: '#FFFFFF',
    borderRadius: 4,
    borderWidth: 1,
    borderColor: '#151515',
    shadowColor: '#000',
    shadowOffset: {
      width: 0,
      height: 4,
    },
    shadowOpacity: 1,
    shadowRadius: 0,
    elevation: 8,
    margin: 16,
    padding: 20,
  },
  chatContainer: {
    flexDirection: 'row',
    alignItems: 'flex-end',
  },
  characterContainer: {
    marginRight: 12,
  },
  characterImage: {
    width: 80,
    height: 80,
  },
  chatBubble: {
    backgroundColor: '#FFFFFF',
    borderRadius: 16,
    padding: 16,
    flex: 1,
    marginLeft: 12,
    position: 'relative',
  },
  closeButton: {
    position: 'absolute',
    top: 12,
    right: 12,
    width: 24,
    height: 24,
    borderRadius: 12,
    backgroundColor: '#FF0000',
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 10,
  },
  closeButtonText: {
    color: '#FFFFFF',
    fontSize: 14,
    fontWeight: 'bold',
  },
  chatHeader: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 12,
  },
  senderName: {
    fontSize: 16,
    fontWeight: '700',
    color: '#FF0000',
    marginRight: 12,
  },
  timestamp: {
    fontSize: 14,
    color: '#000000',
    opacity: 0.6,
  },
  messageText: {
    fontSize: 18,
    color: '#000000',
    lineHeight: 26,
    fontWeight: '500',
  },
});

export default LokmaChatModal;