import AppText from 'components/AppText';
import NavbarBack from 'components/NavbarBack';
import * as React from 'react';
import { useTranslation } from 'react-i18next';
import {
  KeyboardAvoidingView,
  Platform,
  RefreshControl,
  ScrollView,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  View,
} from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';

interface SupportProps {}

interface Message {
  id: number;
  text: string;
  fromUser: boolean;
}

const fakeMessages: Message[] = [
  { id: 1, text: 'Salom! Yukim qayerda?', fromUser: true },
  {
    id: 2,
    text: 'Salom! Yukingiz hozirda Toshkent omborida.',
    fromUser: false,
  },
  { id: 3, text: 'Yetib kelish vaqti qachon?', fromUser: true },
  {
    id: 4,
    text: 'Taxminan ertaga soat 15:00 gacha yetkaziladi.',
    fromUser: false,
  },
];

const Support = (props: SupportProps) => {
  const [refreshing, setRefreshing] = React.useState(false);
  const [messages, setMessages] = React.useState<Message[]>(fakeMessages);
  const [input, setInput] = React.useState('');
  const { t } = useTranslation();

  const onRefresh = React.useCallback(() => {
    setRefreshing(true);
    setTimeout(() => {
      setRefreshing(false);
    }, 1500);
  }, []);

  const sendMessage = () => {
    if (input.trim() === '') return;
    const newMessage: Message = {
      id: Date.now(),
      text: input,
      fromUser: true,
    };
    setMessages(prev => [...prev, newMessage]);
    setInput('');
  };

  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
      <View style={styles.container}>
        <NavbarBack title={t('Yordam xizmati')} />
        <KeyboardAvoidingView
          style={{ flex: 1 }}
          behavior={Platform.OS === 'ios' ? 'padding' : undefined}
          keyboardVerticalOffset={80}
        >
          <ScrollView
            keyboardShouldPersistTaps="handled"
            refreshControl={
              <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
            }
            contentContainerStyle={styles.chatContainer}
          >
            {messages.map(msg => (
              <View
                key={msg.id}
                style={[
                  styles.messageBubble,
                  msg.fromUser ? styles.userBubble : styles.supportBubble,
                ]}
              >
                <AppText
                  style={msg.fromUser ? styles.userText : styles.supportText}
                >
                  {msg.text}
                </AppText>
              </View>
            ))}
          </ScrollView>
          <View style={styles.inputContainer}>
            <TextInput
              placeholder={t('Xabar yozing...')}
              value={input}
              onChangeText={setInput}
              style={styles.input}
              placeholderTextColor="#999"
            />
            <TouchableOpacity onPress={sendMessage} style={styles.sendButton}>
              <AppText style={styles.sendButtonText}>{t('Yuborish')}</AppText>
            </TouchableOpacity>
          </View>
        </KeyboardAvoidingView>
      </View>
    </SafeAreaView>
  );
};

export default Support;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  chatContainer: {
    padding: 16,
    paddingBottom: 80,
  },
  messageBubble: {
    maxWidth: '75%',
    padding: 12,
    borderRadius: 16,
    marginBottom: 10,
  },
  userBubble: {
    backgroundColor: '#007AFF',
    alignSelf: 'flex-end',
    borderTopRightRadius: 0,
  },
  supportBubble: {
    backgroundColor: '#F1F1F1',
    alignSelf: 'flex-start',
    borderTopLeftRadius: 0,
  },
  userText: {
    color: '#fff',
    fontSize: 16,
  },
  supportText: {
    color: '#000',
    fontSize: 16,
  },
  inputContainer: {
    position: 'absolute',
    bottom: 0,
    left: 0,
    right: 0,
    backgroundColor: '#fff',
    paddingHorizontal: 12,
    paddingVertical: 8,
    flexDirection: 'row',
    alignItems: 'center',
    borderTopWidth: 1,
    borderColor: '#E5E5E5',
  },
  input: {
    flex: 1,
    height: 40,
    backgroundColor: '#F5F5F5',
    borderRadius: 20,
    paddingHorizontal: 16,
    fontSize: 16,
    marginRight: 8,
  },
  sendButton: {
    backgroundColor: '#007AFF',
    borderRadius: 20,
    paddingVertical: 8,
    paddingHorizontal: 16,
  },
  sendButtonText: {
    color: '#fff',
    fontSize: 14,
    fontFamily: 'GolosText-Bold',
  },
});
