import React, { useState } from 'react';
import { Pressable, Text, TextInput, View } from 'react-native';
import { Check, Pencil, X } from 'lucide-react-native';

import { conversationStyles } from './conversationStyles';
import { themedColor } from '../../theme';
import { styles } from '../../styles';
import type { QueuedSuperagentMessage } from '../../types';

// Messages the user queued behind the running turn. Mirrors the web agent-editor's
// QueuedMessages (inline edit + remove); the backend promotes them FIFO as the
// agent frees up.
export function QueuedMessages({
  messages,
  onEdit,
  onDelete,
}: {
  messages: QueuedSuperagentMessage[];
  onEdit: (messageId: string, newContent: string) => void;
  onDelete: (messageId: string) => void;
}) {
  const [editingId, setEditingId] = useState<string | null>(null);
  const [editValue, setEditValue] = useState('');

  if (messages.length === 0) return null;

  const startEdit = (message: QueuedSuperagentMessage) => {
    setEditingId(message.id);
    setEditValue(message.content);
  };
  const cancelEdit = () => {
    setEditingId(null);
    setEditValue('');
  };
  const confirmEdit = () => {
    const trimmed = editValue.trim();
    if (editingId && trimmed) onEdit(editingId, trimmed);
    cancelEdit();
  };

  return (
    <View style={conversationStyles.queuedWrap}>
      <Text style={conversationStyles.queuedTitle}>Queued ({messages.length})</Text>
      {messages.map((message) => (
        <View key={message.id} style={conversationStyles.queuedRow}>
          {editingId === message.id ? (
            <>
              <TextInput
                autoFocus
                multiline
                onChangeText={setEditValue}
                style={conversationStyles.queuedEditInput}
                value={editValue}
              />
              <Pressable
                accessibilityLabel="Save queued message"
                accessibilityRole="button"
                hitSlop={8}
                onPress={confirmEdit}
                style={({ pressed }) => [conversationStyles.queuedIconButton, pressed && styles.pressed]}
              >
                <Check color={themedColor('#34D399')} size={16} strokeWidth={2.4} />
              </Pressable>
              <Pressable
                accessibilityLabel="Cancel edit"
                accessibilityRole="button"
                hitSlop={8}
                onPress={cancelEdit}
                style={({ pressed }) => [conversationStyles.queuedIconButton, pressed && styles.pressed]}
              >
                <X color={themedColor('#8E8E93')} size={16} strokeWidth={2.4} />
              </Pressable>
            </>
          ) : (
            <>
              <Text numberOfLines={2} style={conversationStyles.queuedMessage}>{message.content}</Text>
              <Pressable
                accessibilityLabel="Edit queued message"
                accessibilityRole="button"
                hitSlop={8}
                onPress={() => startEdit(message)}
                style={({ pressed }) => [conversationStyles.queuedIconButton, pressed && styles.pressed]}
              >
                <Pencil color={themedColor('#8E8E93')} size={14} strokeWidth={2.2} />
              </Pressable>
              <Pressable
                accessibilityLabel="Remove queued message"
                accessibilityRole="button"
                hitSlop={8}
                onPress={() => onDelete(message.id)}
                style={({ pressed }) => [conversationStyles.queuedIconButton, pressed && styles.pressed]}
              >
                <X color={themedColor('#8E8E93')} size={14} strokeWidth={2.4} />
              </Pressable>
            </>
          )}
        </View>
      ))}
    </View>
  );
}