import React, { useState } from 'react';
import { View, StyleSheet } from 'react-native';
import ChatInput from './components/chat-kit/chat-input';
import LoadingTextAnimation from './components/chat-kit/loading-text-animation';
import Messages from './components/chat-kit/messages';
import Sidebar from './components/chat-kit/side-bar';
import { Message } from './types';

const TestApp: React.FC = () => {
  const [messages, setMessages] = useState<Message[]>([
    {
      id: 1,
      role: 'user',
      content: 'Hello!',
      timestamp: new Date().toISOString(),
    },
    {
      id: 2,
      role: 'assistant',
      content: 'Hi there! How can I help you today?',
      timestamp: new Date().toISOString(),
    },
  ]);
  
  const [isLoading, setIsLoading] = useState(false);
  
  const handleSendMessage = (message: string) => {
    // Add user message
    const userMessage: Message = {
      id: Date.now(),
      role: 'user',
      content: message,
      timestamp: new Date().toISOString(),
    };
    
    setMessages(prev => [...prev, userMessage]);
    setIsLoading(true);
    
    // Simulate AI response after 1.5 seconds
    setTimeout(() => {
      const assistantMessage: Message = {
        id: Date.now() + 1,
        role: 'assistant',
        content: `This is a response to your message: "${message}"`,
        timestamp: new Date().toISOString(),
      };
      
      setMessages(prev => [...prev, assistantMessage]);
      setIsLoading(false);
    }, 1500);
  };
  
  return (
    <View style={styles.container}>
      <Sidebar 
        theme="dark"
        projects={[
          { name: "Project 1" },
          { name: "Project 2" },
        ]}
        historyItems={[
          { name: "Chat 1", date: new Date() },
          { name: "Chat 2", date: new Date(Date.now() - 86400000) },
        ]}
      />
      <View style={styles.content}>
        <Messages 
          messages={messages}
          theme="dark"
          onCopy={(text: string) => console.log('Copied:', text)}
          onRegenerate={(id: number | string) => console.log('Regenerate message:', id)}
        />
        <ChatInput 
          onSubmit={handleSendMessage}
          isLoading={isLoading}
          theme="dark"
          placeholder="Type your message..."
        />
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  content: {
    flex: 1,
    padding: 16,
  },
});

export default TestApp;