import React, { useState, useRef } from 'react';
import {
  View,
  Text,
  ScrollView,
  TextInput,
  Pressable,
  StyleSheet,
  KeyboardAvoidingView,
  Platform,
} from 'react-native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useRouter } from 'expo-router';
import { LinearGradient } from 'expo-linear-gradient';
import { X, ArrowUp, Cpu } from 'lucide-react-native';
import Animated, { FadeIn, SlideInDown } from 'react-native-reanimated';
import { Colors, Fonts, FontSize, BorderRadius, Spacing } from '@/constants/theme';
import { chatMessages, chatSuggestions, ChatMessage } from '@/constants/mockData';
import PressableScale from '@/components/PressableScale';

function MessageBubble({ message }: { message: ChatMessage }) {
  const isBot = message.role === 'bot';

  return (
    <Animated.View
      entering={FadeIn.duration(250)}
      style={[styles.msgRow, isBot ? styles.msgRowBot : styles.msgRowUser]}
    >
      {isBot && (
        <View style={styles.botAvatar}>
          <Cpu size={16} color={Colors.accent.green} />
        </View>
      )}
      <LinearGradient
        colors={isBot
          ? ['rgba(255,255,255,0.04)', 'rgba(255,255,255,0.015)']
          : ['rgba(59,130,246,0.15)', 'rgba(59,130,246,0.08)']
        }
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={[
          styles.bubble,
          isBot ? styles.botBubble : styles.userBubble,
        ]}
      >
        <Text style={[styles.msgText, isBot ? styles.botText : styles.userText]}>
          {message.text}
        </Text>
      </LinearGradient>
    </Animated.View>
  );
}

export default function ChatScreen() {
  const insets = useSafeAreaInsets();
  const router = useRouter();
  const [messages, setMessages] = useState<ChatMessage[]>(chatMessages);
  const [inputText, setInputText] = useState('');
  const scrollRef = useRef<ScrollView>(null);

  const sendMessage = (text: string) => {
    if (!text.trim()) return;
    const newMsg: ChatMessage = {
      id: `user-${Date.now()}`,
      role: 'user',
      text: text.trim(),
    };
    setMessages(prev => [...prev, newMsg]);
    setInputText('');

    setTimeout(() => {
      const botReply: ChatMessage = {
        id: `bot-${Date.now()}`,
        role: 'bot',
        text: "I'm analyzing your request. Based on current market conditions and your portfolio allocation, I'd recommend reviewing your SOL/USDT position which is showing strong momentum.",
      };
      setMessages(prev => [...prev, botReply]);
    }, 1000);
  };

  return (
    <Animated.View
      entering={SlideInDown.duration(300).springify().damping(20)}
      style={[styles.container, { paddingTop: insets.top }]}
    >
      <LinearGradient
        colors={['#14151f', '#0f1017']}
        start={{ x: 0, y: 0 }}
        end={{ x: 1, y: 1 }}
        style={styles.header}
      >
        <View style={styles.headerAvatar}>
          <Cpu size={20} color={Colors.accent.green} />
        </View>
        <View style={styles.headerInfo}>
          <Text style={styles.headerTitle}>Bytelyst AI</Text>
          <Text style={styles.headerSubtitle}>Trading Assistant</Text>
        </View>
        <Pressable style={styles.closeBtn} onPress={() => router.back()}>
          <X size={20} color={Colors.text.secondary} />
        </Pressable>
      </LinearGradient>

      <KeyboardAvoidingView
        style={styles.flex}
        behavior={Platform.OS === 'ios' ? 'padding' : undefined}
        keyboardVerticalOffset={0}
      >
        <ScrollView
          ref={scrollRef}
          style={styles.messages}
          contentContainerStyle={styles.messagesContent}
          showsVerticalScrollIndicator={false}
          onContentSizeChange={() => scrollRef.current?.scrollToEnd({ animated: true })}
        >
          {messages.map((msg) => (
            <MessageBubble key={msg.id} message={msg} />
          ))}

          {messages.length <= chatMessages.length && (
            <View style={styles.suggestions}>
              {chatSuggestions.map((s) => (
                <PressableScale
                  key={s}
                  style={styles.suggestionChip}
                  onPress={() => sendMessage(s)}
                >
                  <Text style={styles.suggestionText}>{s}</Text>
                </PressableScale>
              ))}
            </View>
          )}
        </ScrollView>

        <View style={[styles.inputBar, { paddingBottom: Math.max(insets.bottom, 12) }]}>
          <View style={styles.inputContainer}>
            <TextInput
              style={styles.input}
              placeholder="Ask anything..."
              placeholderTextColor={Colors.text.ultraDim}
              value={inputText}
              onChangeText={setInputText}
              onSubmitEditing={() => sendMessage(inputText)}
              selectionColor={Colors.accent.green}
            />
            <PressableScale
              haptic="medium"
              style={styles.sendBtnWrapper}
              onPress={() => sendMessage(inputText)}
            >
              <LinearGradient
                colors={['#00ff88', '#00cc6a']}
                start={{ x: 0, y: 0 }}
                end={{ x: 1, y: 1 }}
                style={styles.sendBtn}
              >
                <ArrowUp size={18} color="#000" strokeWidth={3} />
              </LinearGradient>
            </PressableScale>
          </View>
        </View>
      </KeyboardAvoidingView>
    </Animated.View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: Colors.background.primary,
  },
  flex: {
    flex: 1,
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingHorizontal: 18,
    paddingVertical: 14,
    borderBottomWidth: 1,
    borderBottomColor: Colors.border.default,
    gap: 12,
  },
  headerAvatar: {
    width: 40,
    height: 40,
    borderRadius: 12,
    backgroundColor: 'rgba(0,255,136,0.1)',
    borderWidth: 1,
    borderColor: 'rgba(0,255,136,0.2)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerInfo: {
    flex: 1,
  },
  headerTitle: {
    fontFamily: Fonts.inter.extraBold,
    fontSize: FontSize.body,
    color: Colors.text.primary,
  },
  headerSubtitle: {
    fontFamily: Fonts.inter.medium,
    fontSize: FontSize.micro,
    color: Colors.text.secondary,
  },
  closeBtn: {
    width: 36,
    height: 36,
    borderRadius: 10,
    backgroundColor: 'rgba(255,255,255,0.05)',
    alignItems: 'center',
    justifyContent: 'center',
  },
  messages: {
    flex: 1,
  },
  messagesContent: {
    padding: Spacing.screenPadding,
    gap: 14,
    paddingBottom: 20,
  },
  msgRow: {
    flexDirection: 'row',
    gap: 10,
    maxWidth: '85%',
  },
  msgRowBot: {
    alignSelf: 'flex-start',
  },
  msgRowUser: {
    alignSelf: 'flex-end',
  },
  botAvatar: {
    width: 30,
    height: 30,
    borderRadius: 10,
    backgroundColor: 'rgba(0,255,136,0.1)',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 2,
  },
  bubble: {
    padding: 14,
    paddingHorizontal: 16,
    borderRadius: 16,
    borderWidth: 1,
    flexShrink: 1,
  },
  botBubble: {
    borderTopLeftRadius: 4,
    borderColor: 'rgba(255,255,255,0.06)',
  },
  userBubble: {
    borderTopRightRadius: 4,
    borderColor: 'rgba(59,130,246,0.2)',
  },
  msgText: {
    fontFamily: Fonts.inter.medium,
    fontSize: FontSize.body,
    lineHeight: 20,
  },
  botText: {
    color: '#d4d4d8',
  },
  userText: {
    color: '#93c5fd',
  },
  suggestions: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 8,
    marginTop: 8,
  },
  suggestionChip: {
    backgroundColor: 'rgba(255,255,255,0.05)',
    borderWidth: 1,
    borderColor: Colors.border.medium,
    borderRadius: 20,
    paddingHorizontal: 16,
    paddingVertical: 8,
  },
  suggestionText: {
    fontFamily: Fonts.inter.medium,
    fontSize: FontSize.bodySmall,
    color: Colors.text.secondary,
  },
  inputBar: {
    paddingHorizontal: Spacing.screenPadding,
    paddingTop: 12,
    borderTopWidth: 1,
    borderTopColor: Colors.border.default,
    backgroundColor: Colors.background.primary,
  },
  inputContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#161722',
    borderRadius: 16,
    borderWidth: 1,
    borderColor: 'rgba(255,255,255,0.12)',
    paddingLeft: 16,
    paddingRight: 6,
    gap: 8,
  },
  input: {
    flex: 1,
    fontFamily: Fonts.inter.medium,
    fontSize: FontSize.body,
    color: Colors.text.primary,
    paddingVertical: 12,
  },
  sendBtnWrapper: {
    borderRadius: 10,
  },
  sendBtn: {
    width: 36,
    height: 36,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
});