import React from 'react';
import { View, StyleSheet } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { useQuery } from '@tanstack/react-query';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import { DashboardStackParamList } from '../../navigation/types';
import { chatbotsAPI } from '../../services/api';
import { ChatInterface } from '../../components/ChatInterface';
import { Spinner } from '../../components/ui';
import { useTheme } from '../../theme';

type Props = NativeStackScreenProps<DashboardStackParamList, 'ChatPreview'>;

export function ChatPreviewScreen({ route }: Props) {
  const { chatbotId } = route.params;
  const { theme } = useTheme();

  const { data: chatbot, isLoading } = useQuery({
    queryKey: ['chatbot', chatbotId],
    queryFn: () => chatbotsAPI.get(chatbotId),
  });

  if (isLoading) return <Spinner centered />;

  return (
    <SafeAreaView style={[styles.safe, { backgroundColor: theme.bg }]} edges={['bottom']}>
      <ChatInterface
        chatbotId={chatbotId}
        welcomeMessage={chatbot?.welcome_message}
        primaryColor={chatbot?.primary_color}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: { flex: 1 },
});
