import React, { useState } from 'react';
import { 
  View, 
  TextInput, 
  TouchableOpacity, 
  StyleSheet,
  Platform,
  KeyboardAvoidingView,
} from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import { AppColors } from '@/constants/theme';

interface ChatInputProps {
  onSendMessage: (text: string) => void;
  onVoicePress?: () => void;
  onEmojiPress?: () => void;
  onMorePress?: () => void;
}

export function ChatInput({ 
  onSendMessage, 
  onVoicePress, 
  onEmojiPress, 
  onMorePress 
}: ChatInputProps) {
  const [text, setText] = useState('');
  const [isVoiceMode, setIsVoiceMode] = useState(false);

  const handleSend = () => {
    if (text.trim()) {
      onSendMessage(text.trim());
      setText('');
    }
  };

  const toggleVoiceMode = () => {
    setIsVoiceMode(!isVoiceMode);
  };

  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : undefined}
      keyboardVerticalOffset={0}
    >
      <View style={styles.container}>
        <View style={styles.inputRow}>
          {/* Voice/Keyboard Toggle */}
          <TouchableOpacity 
            style={styles.iconButton} 
            onPress={toggleVoiceMode}
            activeOpacity={0.7}
          >
            <Ionicons 
              name={isVoiceMode ? 'keypad-outline' : 'mic-outline'} 
              size={26} 
              color={AppColors.slatePurple} 
            />
          </TouchableOpacity>

          {/* Text Input or Voice Button */}
          {isVoiceMode ? (
            <TouchableOpacity 
              style={styles.voiceButton}
              onPress={onVoicePress}
              activeOpacity={0.7}
            >
              <Ionicons name="mic" size={20} color={AppColors.slatePurple} />
            </TouchableOpacity>
          ) : (
            <TextInput
              style={styles.textInput}
              placeholder="说点什么..."
              placeholderTextColor={AppColors.slatePurple}
              value={text}
              onChangeText={setText}
              multiline
              maxLength={1000}
              returnKeyType="send"
              onSubmitEditing={handleSend}
              blurOnSubmit={false}
            />
          )}

          {/* Emoji Button */}
          <TouchableOpacity 
            style={styles.iconButton} 
            onPress={onEmojiPress}
            activeOpacity={0.7}
          >
            <Ionicons 
              name="happy-outline" 
              size={26} 
              color={AppColors.slatePurple} 
            />
          </TouchableOpacity>

          {/* More Options / Send Button */}
          {text.trim() ? (
            <TouchableOpacity 
              style={styles.sendButton} 
              onPress={handleSend}
              activeOpacity={0.8}
            >
              <Ionicons name="send" size={20} color={AppColors.white} />
            </TouchableOpacity>
          ) : (
            <TouchableOpacity 
              style={styles.iconButton} 
              onPress={onMorePress}
              activeOpacity={0.7}
            >
              <Ionicons 
                name="add-circle-outline" 
                size={26} 
                color={AppColors.slatePurple} 
              />
            </TouchableOpacity>
          )}
        </View>
      </View>
    </KeyboardAvoidingView>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: AppColors.white,
    borderTopWidth: 1,
    borderTopColor: 'rgba(32, 0, 40, 0.08)',
    paddingHorizontal: 14,
    paddingTop: 10,
    paddingBottom: Platform.OS === 'ios' ? 34 : 10,
  },
  inputRow: {
    flexDirection: 'row',
    alignItems: 'flex-end',
    gap: 8,
  },
  iconButton: {
    width: 40,
    height: 40,
    borderRadius: 12,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textInput: {
    flex: 1,
    minHeight: 40,
    maxHeight: 100,
    paddingHorizontal: 16,
    paddingVertical: 10,
    backgroundColor: AppColors.cream,
    borderRadius: 20,
    fontSize: 16,
    color: AppColors.deepPurple,
    lineHeight: 20,
  },
  voiceButton: {
    flex: 1,
    height: 40,
    backgroundColor: AppColors.cream,
    borderRadius: 20,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  sendButton: {
    width: 40,
    height: 40,
    borderRadius: 12,
    backgroundColor: AppColors.mediumPurple,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: AppColors.mediumPurple,
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 3,
  },
});