import React from 'react';
import { View, Text, ScrollView, TouchableOpacity, Alert } from 'react-native';
import { useAppTheme } from '@theme';
import { PersonIcon } from '@icons';
import { getStyles } from './inboxScreen.styles';

export const InboxScreen: React.FC = () => {
  const { colors } = useAppTheme();
  const styles = getStyles(colors);

  const chats = [
    {
      id: 'support',
      sender: 'SG Partner Support',
      snippet: 'Hi Rahul, your document verification is complete. Let us know if you need assistance.',
      time: '10 mins ago',
      unreadCount: 1,
      isSystem: true,
    },
    {
      id: 'rohit',
      sender: 'Rohit Sharma (Customer)',
      snippet: 'Please leave the order near the gate, thank you.',
      time: '1 hour ago',
      unreadCount: 0,
      isSystem: false,
    },
    {
      id: 'ccd',
      sender: 'Cafe Coffee Day (Merchant)',
      snippet: 'Hi, the order #ORD125487 is ready for pickup. Please arrive.',
      time: '2 hours ago',
      unreadCount: 0,
      isSystem: false,
    },
  ];

  const handleChatPress = (sender: string) => {
    Alert.alert('Chat Thread', `Opening conversation with ${sender}...`);
  };

  return (
    <View style={styles.container}>
      <ScrollView contentContainerStyle={styles.scrollContainer} showsVerticalScrollIndicator={false}>
        <View style={styles.headerContainer}>
          <Text style={styles.title}>Inbox</Text>
        </View>

        {chats.map((chat) => (
          <TouchableOpacity
            key={chat.id}
            style={styles.chatItem}
            activeOpacity={0.7}
            onPress={() => handleChatPress(chat.sender)}
          >
            {/* Sender Avatar */}
            <View style={styles.avatar}>
              <PersonIcon size={24} color={chat.isSystem ? colors.primary : colors.textSecondary} />
            </View>

            {/* Chat Content Info */}
            <View style={styles.chatInfo}>
              <View style={styles.chatHeader}>
                <Text style={styles.chatTitleText} numberOfLines={1}>{chat.sender}</Text>
                <Text style={styles.timeText}>{chat.time}</Text>
              </View>
              <Text style={styles.chatSnippetText} numberOfLines={1}>
                {chat.snippet}
              </Text>
            </View>

            {/* Unread badge info */}
            {chat.unreadCount > 0 && (
              <View style={styles.rightMeta}>
                <View style={styles.unreadBadge}>
                  <Text style={styles.unreadBadgeText}>{chat.unreadCount}</Text>
                </View>
              </View>
            )}
          </TouchableOpacity>
        ))}
      </ScrollView>
    </View>
  );
};

export default InboxScreen;